✨ Make constrast plugin be able to run on subpath

This removes the need to publish versions to pnpn

.github/workflows/plugins-deploy-package.yml

@@ -80,7 +80,7 @@ jobs:
       - name: "Build package for ${{ inputs.plugin_name }}-plugin"
         working-directory: plugins
         shell: bash
-        run: pnpm --filter ${{ inputs.plugin_name }}-plugin build
+        run: npx nx build ${{ inputs.plugin_name }}-plugin
 
       - name: Select Worker name
         run: |

.github/workflows/plugins-deploy-styles-doc.yml

@@ -78,7 +78,7 @@ jobs:
       - name: Build styles
         working-directory: plugins
         shell: bash
-        run: pnpm run build:styles-example
+        run: npx nx run example-styles:build
 
       - name: Select Worker name
         run: |

SECURITY.md

@@ -2,30 +2,4 @@
 
 ## Reporting a Vulnerability
 
-We take the security of this project seriously. If you have discovered
+Please report security issues to `support@penpot.app`
-a security vulnerability, please do **not** open a public issue.
-
-Please report vulnerabilities via email to: **[support@penpot.app]**
-
-
-### What to include:
-
-* A brief description of the vulnerability.
-* Steps to reproduce the issue.
-* Potential impact if exploited.
-
-We appreciate your patience and your commitment to **responsible disclosure**.
-
----
-
-## Security Contributors
-
-We are incredibly grateful to the following individuals and
-organizations for their help in keeping this project safe.
-
-* **Ali Maharramli** – for identifying critical path traversal vulnerability
-
-
-> **Note:** This list is a work in progress. If you have contributed
-> to the security of this project and would like to be recognized (or
-> prefer to remain anonymous), please let us know.

backend/resources/app/templates/error-list.tmpl

@@ -12,7 +12,6 @@ penpot - error list
 
       <a class="{% if version = 3 %}strong{% endif %}" href="?version=3">[BACKEND ERRORS]</a>
       <a class="{% if version = 4 %}strong{% endif %}" href="?version=4">[FRONTEND ERRORS]</a>
-      <a class="{% if version = 5 %}strong{% endif %}" href="?version=5">[RLIMIT REPORTS]</a>
     </div>
   </nav>
   <main class="horizontal-list">

backend/resources/app/templates/error-report.v5.tmpl

@@ -1,40 +0,0 @@
- {% extends "app/templates/base.tmpl" %}
-
-{% block title %}
-Report: {{hint|abbreviate:150}} - {{id}} - Penpot Rate Limit Report
-{% endblock %}
-
-{% block content %}
-<nav>
-  <div>[<a href="/dbg/error?version={{version}}">⮜</a>]</div>
-  <div>[<a href="#head">head</a>]</div>
-  <div>[<a href="#context">context</a>]</div>
-  <div>[<a href="#result">result</a>]</div>
-</nav>
-<main>
-  <div class="table">
-    <div class="table-row multiline">
-      <div id="head" class="table-key">HEAD:</div>
-      <div class="table-val">
-        <h1><span class="not-important">Hint:</span> <br/> {{hint}}</h1>
-        <h2><span class="not-important">Reported at:</span> <br/> {{created-at}}</h2>
-        <h2><span class="not-important">Report ID:</span> <br/> {{id}}</h2>
-      </div>
-    </div>
-
-    <div class="table-row multiline">
-      <div id="context" class="table-key">CONTEXT: </div>
-      <div class="table-val">
-        <pre>{{context}}</pre>
-      </div>
-    </div>
-
-    <div class="table-row multiline">
-      <div id="result" class="table-key">RESULT: </div>
-      <div class="table-val">
-        <pre>{{result}}</pre>
-      </div>
-    </div>
-  </div>
-</main>
-{% endblock %}

backend/resources/rlimit.edn

@@ -3,9 +3,9 @@
 {:default
  [[:default :window "200000/h"]]
 
- ;; #{:main/get-teams}
+ ;; #{:command/get-teams}
  ;; [[:burst :bucket "5/5/5s"]]
 
- ;; #{:main/get-profile}
+ ;; #{:command/get-profile}
  ;; [[:burst :bucket "60/60/1m"]]
  }

backend/src/app/http/debug.clj

@@ -240,13 +240,6 @@
                 (tmpl/render (-> content
                                  (assoc :id id)
                                  (assoc :version 4)
-                                 (assoc :created-at (ct/format-inst created-at :rfc1123))))))
-
-          (render-template-v5 [{:keys [content id created-at]}]
-            (-> (io/resource "app/templates/error-report.v5.tmpl")
-                (tmpl/render (-> content
-                                 (assoc :id id)
-                                 (assoc :version 5)
                                  (assoc :created-at (ct/format-inst created-at :rfc1123))))))]
 
     (if-let [report (get-report request)]
@@ -254,8 +247,7 @@
                      1 (render-template-v1 report)
                      2 (render-template-v2 report)
                      3 (render-template-v3 report)
-                     4 (render-template-v4 report)
+                     4 (render-template-v4 report))]
-                     5 (render-template-v5 report))]
         {::yres/status 200
          ::yres/body result
          ::yres/headers {"content-type" "text/html; charset=utf-8"

backend/src/app/http/middleware.clj

@@ -213,14 +213,14 @@
       (assoc "access-control-allow-origin" origin)
       (assoc "access-control-allow-methods" "GET,POST,DELETE,OPTIONS,PUT,HEAD,PATCH")
       (assoc "access-control-allow-credentials" "true")
-      (assoc "access-control-expose-headers" "content-type, set-cookie")
+      (assoc "access-control-expose-headers" "x-requested-with, content-type, cookie")
-      (assoc "access-control-allow-headers" "x-frontend-version, x-client, x-requested-width, content-type, accept, cookie")))
+      (assoc "access-control-allow-headers" "x-frontend-version, content-type, accept, x-requested-width")))
 
 (defn wrap-cors
   [handler]
   (fn [request]
     (let [response (if (= (yreq/method request) :options)
-                     {::yres/status 204}
+                     {::yres/status 200}
                      (handler request))
           origin   (yreq/get-header request "origin")]
       (update response ::yres/headers with-cors-headers origin))))

backend/src/app/loggers/audit.clj

@@ -151,22 +151,20 @@
                          uuid/zero)
 
         props        (-> (or (::replace-props resultm)
-                             (merge params (::props resultm)))
+                             (-> params
+                                 (merge (::props resultm))
+                                 (dissoc :profile-id)
+                                 (dissoc :type)))
                          (clean-props))
 
         context      (merge (::context resultm)
                             (prepare-context-from-request request))
-        ip-addr      (inet/parse-request request)
+        ip-addr      (inet/parse-request request)]
-        module       (get cfg ::rpc/module)]
 
     {::type (or (::type resultm)
                 (::rpc/type cfg))
      ::name (or (::name resultm)
-                (let [sname (::sv/name mdata)]
+                (::sv/name mdata))
-                  (if (not= module "main")
-                    (str module "-" sname)
-                    sname)))
-
      ::profile-id profile-id
      ::ip-addr ip-addr
      ::props props

backend/src/app/loggers/database.clj

@@ -15,7 +15,6 @@
    [app.config :as cf]
    [app.db :as db]
    [app.loggers.audit :as audit]
-   [app.rpc.rlimit :as-alias rlimit]
    [clojure.spec.alpha :as s]
    [integrant.core :as ig]
    [promesa.exec :as px]
@@ -42,7 +41,7 @@
   (or (instance? java.util.concurrent.CompletionException cause)
       (instance? java.util.concurrent.ExecutionException cause)))
 
-(defn- log-record->report
+(defn record->report
   [{:keys [::l/context ::l/message ::l/props ::l/logger ::l/level ::l/cause] :as record}]
   (assert (l/valid-record? record) "expectd valid log record")
   (let [data (if (concurrent-exception? cause)
@@ -87,16 +86,16 @@
   [{:keys [::db/pool]} {:keys [::l/id] :as record}]
   (try
     (let [uri    (cf/get :public-uri)
-          report (-> record log-record->report d/without-nils)]
+          report (-> record record->report d/without-nils)]
       (l/dbg :hint "registering error on database"
-             :id (str id)
+             :id id
              :src "logging"
              :uri (str uri "/dbg/error/" id))
       (persist-on-database! pool id 3 report))
     (catch Throwable cause
       (l/warn :hint "unexpected exception on database error logger" :cause cause))))
 
-(defn- audit-event->report
+(defn- event->report
   [{:keys [::audit/context ::audit/props ::audit/ip-addr] :as record}]
   (let [context
         (reduce-kv (fn [context k v]
@@ -126,51 +125,15 @@
   [{:keys [::db/pool]} {:keys [::audit/id] :as event}]
   (try
     (let [uri    (cf/get :public-uri)
-          report (-> event audit-event->report d/without-nils)]
+          report (-> event event->report d/without-nils)]
       (l/dbg :hint "registering error on database"
-             :id (str id)
+             :id id
              :src "audit-log"
              :uri (str uri "/dbg/error/" id))
       (persist-on-database! pool id 4 report))
     (catch Throwable cause
       (l/warn :hint "unexpected exception on database error logger" :cause cause))))
 
-(defn- rlimit-event->report
-  [event]
-  (let [context
-        (-> {}
-            (assoc :rlimit/uid (::rlimit/uid event))
-            (assoc :rlimit/method (::rlimit/method event))
-            (assoc :backend/tenant (cf/get :tenant))
-            (assoc :backend/host (cf/get :host))
-            (assoc :backend/public-uri (str (cf/get :public-uri)))
-            (assoc :backend/version (:full cf/version)))
-
-        result
-        (->> (::rlimit/results event)
-             (mapv (fn [result]
-                     (-> (into (sorted-map) result)
-                         (dissoc ::rlimit/method)))))]
-
-    {:hint    (str "Rate Limit Rejection: " (::rlimit/method event) " for " (::rlimit/uid event))
-     :context (-> (into (sorted-map) context)
-                  (pp/pprint-str :length 50))
-     :result  (pp/pprint-str result :length 50)}))
-
-(defn- handle-rlimit-event
-  "Convert the log record into a report object and persist it on the database"
-  [{:keys [::db/pool]} {:keys [::rlimit/id] :as event}]
-  (try
-    (let [uri    (cf/get :public-uri)
-          report (-> event rlimit-event->report d/without-nils)]
-      (l/dbg :hint "registering rate limit rejection"
-             :id (str id)
-             :src "rlimit"
-             :uri (str uri "/dbg/error/" id))
-      (persist-on-database! pool id 5 report))
-    (catch Throwable cause
-      (l/warn :hint "unexpected exception on database error logger" :cause cause))))
-
 (defmethod ig/assert-key ::reporter
   [_ params]
   (assert (db/pool? (::db/pool params)) "expect valid database pool"))
@@ -191,9 +154,6 @@
                          (::audit/id item)
                          (handle-audit-event cfg item)
 
-                         (::rlimit/id item)
-                         (handle-rlimit-event cfg item)
-
                          :else
                          (l/warn :hint "received unexpected item" :item item))
 

backend/src/app/loggers/mattermost.clj

@@ -9,12 +9,10 @@
   (:require
    [app.common.exceptions :as ex]
    [app.common.logging :as l]
-   [app.common.pprint :as pp]
    [app.common.uri :as u]
    [app.config :as cf]
    [app.http.client :as http]
    [app.loggers.audit :as audit]
-   [app.rpc.rlimit :as-alias rlimit]
    [app.util.json :as json]
    [integrant.core :as ig]
    [promesa.exec :as px]
@@ -24,28 +22,21 @@
 
 (defn- send-mattermost-notification!
   [cfg {:keys [id] :as report}]
-  (let [type (get report :type)
-        text (str "#" type " | " (get report :hint) "\n"
-                  (when id
-                    (str (u/join (cf/get :public-uri) "/dbg/error/" id) " "))
 
+
+  (let [url  (u/join (cf/get :public-uri) "/dbg/error/" id)
+
+        text (str "Exception: " url " "
                   (when-let [pid (:profile-id report)]
-                    (if (uuid? pid)
+                    (str "(pid: #uuid-" pid ")"))
-                      (str "(pid: #uuid-" pid ")")
-                      (str "(pid: #ip-" pid ")")))
                   "\n"
                   "- host: #" (:host report) "\n"
                   "- tenant: #" (:tenant report) "\n"
                   "- origin: #" (:origin report) "\n"
-                  (when-let [href (get report :href)]
+                  "- href: `" (:href report) "`\n"
-                    (str "- href: `" href "`\n"))
+                  "- frontend-version: `" (:frontend-version report) "`\n"
-                  (when-let [version (get report :frontend-version)]
+                  "- backend-version: `" (:backend-version report) "`\n"
-                    (str "- frontend-version: `" version "`\n"))
-                  (when-let [version (get report :backend-version)]
-                    (str "- backend-version: `" version "`\n"))
                   "\n"
-                  (when-let [info (:info report)]
-                    (str "```\n" info "```"))
                   (when-let [trace (:trace report)]
                     (str "```\n"
                          "Trace:\n"
@@ -63,15 +54,13 @@
       (l/warn :hint "error on sending data"
               :response (pr-str resp)))))
 
-(defn- log-record->report
+(defn- record->report
-  [{:keys [::l/context ::l/id ::l/cause ::l/message] :as record}]
+  [{:keys [::l/context ::l/id ::l/cause] :as record}]
   (assert (l/valid-record? record) "expectd valid log record")
 
   (let [public-uri (cf/get :public-uri)]
     {:id               id
-     :type             "exception"
      :origin           "logging"
-     :hint             (or (some-> cause ex-message) @message)
      :tenant           (cf/get :tenant)
      :host             (cf/get :host)
      :backend-version  (:full cf/version)
@@ -85,9 +74,7 @@
 (defn- audit-event->report
   [{:keys [::audit/context ::audit/props ::audit/id] :as event}]
   {:id               id
-   :type             "exception"
    :origin           "audit-log"
-   :hint             (get props :hint)
    :tenant           (cf/get :tenant)
    :host             (cf/get :host)
    :backend-version  (:full cf/version)
@@ -95,35 +82,18 @@
    :profile-id       (:audit/profile-id event)
    :href             (get props :href)})
 
-(defn- rlimit-event->report
+(defn- handle-log-record
-  [event]
+  [cfg record]
-  {:id               (::rlimit/id event)
-   :type             "notification"
-   :origin           "rlimit"
-   :hint             (str "rlimit reject of "
-                          (::rlimit/method event)
-                          " for "
-                          (::rlimit/uid event))
-   :tenant           (cf/get :tenant)
-   :host             (cf/get :host)
-   :backend-version  (:full cf/version)
-   :profile-id       (::rlimit/profile-id event)
-   :info             (with-out-str
-                       (println "Rejected by:")
-                       (println "------------")
-                       (println "Method:        " (::rlimit/method event))
-                       (println "Limit Name:    " (::rlimit/name event))
-                       (println "Limit Strategy:" (::rlimit/strategy event))
-                       (println)
-                       (println "Results & Config:")
-                       (println "-----------------")
-                       (doseq [result (::rlimit/results event)]
-                         (pp/pprint (into (sorted-map) result))))})
-
-(defn- handle-event
-  [cfg event event->report]
   (try
-    (let [report (event->report event)]
+    (let [report (record->report record)]
+      (send-mattermost-notification! cfg report))
+    (catch Throwable cause
+      (l/warn :hint "unhandled error" :cause cause))))
+
+(defn- handle-audit-event
+  [cfg record]
+  (try
+    (let [report (audit-event->report record)]
       (send-mattermost-notification! cfg report))
     (catch Throwable cause
       (l/warn :hint "unhandled error" :cause cause))))
@@ -146,13 +116,10 @@
                          (when @enabled
                            (cond
                              (::l/id item)
-                             (handle-event cfg item log-record->report)
+                             (handle-log-record cfg item)
 
                              (::audit/id item)
-                             (handle-event cfg item audit-event->report)
+                             (handle-audit-event cfg item)
-
-                             (::rlimit/id item)
-                             (handle-event cfg item rlimit-event->report)
 
                              :else
                              (l/warn :hint "received unexpected item" :item item)))

backend/src/app/main.clj

@@ -317,13 +317,7 @@
     ::climit/enabled     (contains? cf/flags :rpc-climit)}
 
    :app.rpc/rlimit
-   {::wrk/executor (ig/ref ::wrk/netty-executor)
+   {::wrk/executor (ig/ref ::wrk/netty-executor)}
-
-    :app.loggers.mattermost/reporter
-    (ig/ref :app.loggers.mattermost/reporter)
-
-    :app.loggers.database/reporter
-    (ig/ref :app.loggers.database/reporter)}
 
    :app.rpc/methods
    {::http.client/client (ig/ref ::http.client/client)

backend/src/app/rpc.clj

@@ -90,7 +90,7 @@
   [methods]
   (let [methods (update-vals methods peek)]
     (fn [{:keys [params path-params method] :as request}]
-      (let [handler-name (:method-name path-params)
+      (let [handler-name (:type path-params)
             etag         (yreq/get-header request "if-none-match")
 
             key-id       (get request ::http/auth-key-id)
@@ -227,8 +227,8 @@
     (wrap-authentication cfg $ mdata)))
 
 (defn- process-method
-  [cfg wrap-fn [f mdata]]
+  [cfg module wrap-fn [f mdata]]
-  (l/trc :hint "add method" :module (::module cfg) :type (::type cfg) :name (::sv/name mdata))
+  (l/trc :hint "add method" :module module :name (::sv/name mdata))
   (let [f (wrap-fn cfg f mdata)
         k (keyword (::sv/name mdata))]
     [k [mdata (partial f cfg)]]))
@@ -239,7 +239,7 @@
 
 (defn- resolve-methods
   [cfg]
-  (let [cfg (assoc cfg ::module "main" ::type "command" ::metrics-id :rpc-main-timing)]
+  (let [cfg (assoc cfg ::type "command" ::metrics-id :rpc-command-timing)]
     (->> (sv/scan-ns
           'app.rpc.commands.access-token
           'app.rpc.commands.audit
@@ -266,7 +266,7 @@
           'app.rpc.commands.verify-token
           'app.rpc.commands.viewer
           'app.rpc.commands.webhooks)
-         (map (partial process-method cfg wrap))
+         (map (partial process-method cfg "rpc" wrap))
          (into {}))))
 
 (def ^:private schema:methods-params
@@ -298,13 +298,13 @@
 
 (defn- resolve-management-methods
   [cfg]
-  (let [cfg  (assoc cfg ::module "management" ::type "command" ::metrics-id :rpc-management-timing)
+  (let [cfg  (assoc cfg ::type "management" ::metrics-id :rpc-management-timing)
         mods (cond->> (list 'app.rpc.management.exporter)
                (contains? cf/flags :nitrate)
                (cons 'app.rpc.management.nitrate))]
 
     (->> (apply sv/scan-ns mods)
-         (map (partial process-method cfg wrap-management))
+         (map (partial process-method cfg "management" wrap-management))
          (into {}))))
 
 (def ^:private schema:management-methods-params
@@ -359,7 +359,7 @@
   (let [public-uri (cf/get :public-uri)]
     ["/api"
      ["/management"
-      ["/methods/:method-name"
+      ["/methods/:type"
        {:middleware [[mw/shared-key-auth shared-keys]
                      [session/authz cfg]]
         :handler (make-rpc-handler management-methods)}]
@@ -370,7 +370,7 @@
                   :description "MANAGEMENT API")]
 
      ["/main"
-      ["/methods/:method-name"
+      ["/methods/:type"
        {:middleware [[mw/cors]
                      [sec/client-header-check]
                      [session/authz cfg]
@@ -388,7 +388,7 @@
      ["/openapi" {:handler (redirect (u/join public-uri "/api/main/doc/openapi"))}]
      ["/openapi.join" {:handler (redirect (u/join public-uri "/api/main/doc/openapi.json"))}]
 
-     ["/rpc/command/:method-name"
+     ["/rpc/command/:type"
       {:middleware [[mw/cors]
                     [sec/client-header-check]
                     [session/authz cfg]

backend/src/app/rpc/rlimit.clj

@@ -52,8 +52,6 @@
    [app.common.uuid :as uuid]
    [app.config :as cf]
    [app.http :as-alias http]
-   [app.loggers.database :as loggers.db]
-   [app.loggers.mattermost :as loggers.mm]
    [app.redis :as rds]
    [app.redis.script :as-alias rscript]
    [app.rpc :as-alias rpc]
@@ -173,9 +171,9 @@
               :hint (str/ffmt "looks like '%' does not have a valid format" opts))))
 
 (defmethod process-limit :bucket
-  [rconn profile-id now {:keys [::key ::params ::method ::capacity ::interval ::rate] :as limit}]
+  [rconn profile-id now {:keys [::key ::params ::service ::capacity ::interval ::rate] :as limit}]
   (let [script    (-> bucket-rate-limit-script
-                      (assoc ::rscript/keys [(str key "." method "." profile-id)])
+                      (assoc ::rscript/keys [(str key "." service "." profile-id)])
                       (assoc ::rscript/vals (conj params (->seconds now))))
         result    (rds/eval rconn script)
         allowed?  (boolean (nth result 0))
@@ -183,7 +181,7 @@
         reset     (* (/ (inst-ms interval) rate)
                      (- capacity remaining))]
     (l/trace :hint "limit processed"
-             :method method
+             :service service
              :limit (name (::name limit))
              :strategy (name (::strategy limit))
              :opts (::opts limit)
@@ -195,17 +193,17 @@
         (assoc ::lresult/remaining remaining))))
 
 (defmethod process-limit :window
-  [rconn uid now {:keys [::permits ::unit ::key ::method] :as limit}]
+  [rconn profile-id now {:keys [::permits ::unit ::key ::service] :as limit}]
   (let [ts        (ct/truncate now unit)
         ttl       (ct/diff now (ct/plus ts {unit 1}))
         script    (-> window-rate-limit-script
-                      (assoc ::rscript/keys [(str key "." method "." uid "." (ct/format-inst ts))])
+                      (assoc ::rscript/keys [(str key "." service "." profile-id "." (ct/format-inst ts))])
                       (assoc ::rscript/vals [permits (->seconds ttl)]))
         result    (rds/eval rconn script)
         allowed?  (boolean (nth result 0))
         remaining (nth result 1)]
     (l/trace :hint "limit processed"
-             :method method
+             :service service
              :name (name (::name limit))
              :strategy (name (::strategy limit))
              :opts (::opts limit)
@@ -213,13 +211,12 @@
              :remaining remaining)
     (-> limit
         (assoc ::lresult/allowed allowed?)
-        (assoc ::lresult/timestamp ts)
         (assoc ::lresult/remaining remaining)
         (assoc ::lresult/reset (ct/plus ts {unit 1})))))
 
 (defn- process-limits
-  [{:keys [::rds/conn] :as cfg} uid limits now]
+  [rconn profile-id limits now]
-  (let [results   (into [] (map (partial process-limit conn uid now)) limits)
+  (let [results   (into [] (map (partial process-limit rconn profile-id now)) limits)
         remaining (->> results
                        (d/index-by ::name ::lresult/remaining)
                        (uri/map->query-string))
@@ -230,22 +227,11 @@
         rejected  (d/seek (complement ::lresult/allowed) results)]
 
     (when rejected
-      (let [event {::id (uuid/next)
+      (l/warn :hint "rejected rate limit"
-                   ::uid uid
+              :profile-id (str profile-id)
-                   ::method (-> rejected ::method name)
+              :limit-service (-> rejected ::service name)
-                   ::name (-> rejected ::name name)
+              :limit-name (-> rejected ::name name)
-                   ::strategy (-> rejected ::strategy name)
+              :limit-strategy (-> rejected ::strategy name)))
-                   ::results results}]
-
-        (l/warn :hint "rejected rate limit"
-                :method (-> rejected ::method name)
-                :name (-> rejected ::name name)
-                :strategy (-> rejected ::strategy name)
-                :uid (str uid)
-                :report-id (:id event))
-
-        (loggers.mm/emit cfg event)
-        (loggers.db/emit cfg event)))
 
     {::enabled true
      ::allowed (not (some? rejected))
@@ -258,7 +244,7 @@
   [state skey sname]
   (when-let [limits (or (get-in @state [::limits skey])
                         (get-in @state [::limits :default]))]
-    (into [] (map #(assoc % ::method sname)) limits)))
+    (into [] (map #(assoc % ::service sname)) limits)))
 
 (defn- get-uid
   [{:keys [::rpc/profile-id] :as params}]
@@ -268,10 +254,10 @@
         uuid/zero)))
 
 (defn- process-request'
-  [cfg limits params]
+  [{:keys [::rds/conn] :as cfg} limits params]
   (try
     (let [uid    (get-uid params)
-          result (process-limits cfg uid limits (ct/now))]
+          result (process-limits conn uid limits (ct/now))]
       (if (contains? cf/flags :soft-rpc-rlimit)
         {::enabled false}
         result))
@@ -289,8 +275,8 @@
   (assert (or (nil? rlimit) (valid-rlimit-instance? rlimit)) "expected a valid rlimit instance")
 
   (if rlimit
-    (let [skey  (keyword (::rpc/module cfg) (->> mdata ::sv/spec name))
+    (let [skey  (keyword (::rpc/type cfg) (->> mdata ::sv/spec name))
-          sname (str (::rpc/module cfg) "." (->> mdata ::sv/spec name))
+          sname (str (::rpc/type cfg) "." (->> mdata ::sv/spec name))
           cfg   (-> cfg
                     (assoc ::skey skey)
                     (assoc ::sname sname))]

backend/src/app/storage/s3.clj

@@ -33,7 +33,6 @@
    java.util.Optional
    java.util.concurrent.atomic.AtomicLong
    org.reactivestreams.Subscriber
-   software.amazon.awssdk.auth.credentials.DefaultCredentialsProvider
    software.amazon.awssdk.core.ResponseBytes
    software.amazon.awssdk.core.async.AsyncRequestBody
    software.amazon.awssdk.core.async.AsyncResponseTransformer
@@ -200,8 +199,7 @@
 
 (defn- build-s3-client
   [{:keys [::region ::endpoint ::wrk/netty-io-executor]}]
-  (let [creds-provider (DefaultCredentialsProvider/create)
+  (let [aconfig  (-> (ClientAsyncConfiguration/builder)
-        aconfig  (-> (ClientAsyncConfiguration/builder)
                      (.build))
 
         sconfig  (-> (S3Configuration/builder)
@@ -223,7 +221,6 @@
                        builder (.asyncConfiguration ^S3AsyncClientBuilder builder ^ClientAsyncConfiguration aconfig)
                        builder (.httpClient ^S3AsyncClientBuilder builder ^NettyNioAsyncHttpClient hclient)
                        builder (.region ^S3AsyncClientBuilder builder (lookup-region region))
-                       builder (.credentialsProvider ^S3AsyncClientBuilder builder creds-provider)
                        builder (cond-> ^S3AsyncClientBuilder builder
                                  (some? endpoint)
                                  (.endpointOverride (URI. (str endpoint))))]
@@ -240,8 +237,7 @@
 
 (defn- build-s3-presigner
   [{:keys [::region ::endpoint]}]
-  (let [creds-provider (DefaultCredentialsProvider/create)
+  (let [config (-> (S3Configuration/builder)
-        config (-> (S3Configuration/builder)
                    (cond-> (some? endpoint) (.pathStyleAccessEnabled true))
                    (.build))]
 
@@ -249,7 +245,6 @@
         (cond-> (some? endpoint) (.endpointOverride (URI. (str endpoint))))
         (.region (lookup-region region))
         (.serviceConfiguration ^S3Configuration config)
-        (.credentialsProvider creds-provider)
         (.build))))
 
 (defn- write-input-stream

backend/test/backend_tests/helpers.clj

@@ -104,13 +104,13 @@
                      (assoc-in [::db/pool ::db/password] (:database-password config))
                      (assoc-in [:app.rpc/methods :app.setup/templates] templates)
                      (assoc-in [:app.rpc/methods :app.setup/templates] templates)
-                     (update :app.rpc/rlimit assoc
+                     (update :app.rpc/methods
-                             :app.loggers.mattermost/reporter nil
+                             (fn [state]
-                             :app.loggers.database/reporter nil)
+                               (-> state
-                     (update :app.rpc/methods assoc
+                                   (assoc :app.setup/templates templates)
-                             :app.setup/templates templates
+                                   (assoc :app.loggers.mattermost/reporter nil)
-                             :app.loggers.mattermost/reporter nil
+                                   (assoc :app.loggers.database/reporter nil))))
-                             :app.loggers.database/reporter nil)
+
                      (dissoc :app.srepl/server
                              :app.http/server
                              :app.http/route

common/src/app/common/features.cljc

@@ -55,7 +55,6 @@
     "design-tokens/v1"
     "text-editor/v2-html-paste"
     "text-editor/v2"
-    "text-editor-wasm/v1"
     "render-wasm/v1"
     "variants/v1"})
 
@@ -79,7 +78,6 @@
     "plugins/runtime"
     "text-editor/v2-html-paste"
     "text-editor/v2"
-    "text-editor-wasm/v1"
     "tokens/numeric-input"
     "render-wasm/v1"})
 
@@ -129,7 +127,6 @@
     :feature-design-tokens "design-tokens/v1"
     :feature-text-editor-v2 "text-editor/v2"
     :feature-text-editor-v2-html-paste "text-editor/v2-html-paste"
-    :feature-text-editor-wasm "text-editor-wasm/v1"
     :feature-render-wasm "render-wasm/v1"
     :feature-variants "variants/v1"
     :feature-token-input "tokens/numeric-input"

common/src/app/common/files/tokens.cljc

@@ -35,7 +35,7 @@
   [::sm/text {:error/fn token-value-empty-fn}])
 
 (def schema:token-value-font-family
-  [:vector ::sm/text])
+  [:vector :string])
 
 (def schema:token-value-typography-map
   [:map

docker/devenv/files/nginx.conf

@@ -126,6 +126,12 @@ http {
             proxy_http_version 1.1;
         }
 
+        location /plugins {
+            autoindex on;
+            alias /home/penpot/penpot/plugins/dist/apps;
+            proxy_http_version 1.1;
+        }
+
         location /mcp/ws {
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection 'upgrade';

docker/images/docker-compose.yaml

@@ -198,6 +198,13 @@ services:
       ## Valkey (or previously Redis) is used for the websockets notifications.
       PENPOT_REDIS_URI: redis://penpot-valkey/0
 
+  penpot-mcp:
+    image: penpotapp/mcp:${PENPOT_VERSION:-latest}
+    restart: always
+
+    networks:
+      - penpot
+
   penpot-postgres:
     image: "postgres:15"
     restart: always

docs/technical-guide/getting-started/index.md

@@ -8,7 +8,9 @@ desc: Customize your Penpot instance today. Learn how to install with Elestio, D
 This guide explains how to get your own Penpot instance, running on a machine you control,
 to test it, use it by you or your team, or even customize and extend it any way you like.
 
-For additional context, see the post <a href="https://penpot.app/blog/how-to-self-host-penpot/" target="_blank">How to self-host Penpot: A technical implementation guide</a> on the Penpot blog.
+If you need more context you can look at the <a
+href="https://community.penpot.app/t/self-hosting-penpot-i/2336" target="_blank">post
+about self-hosting</a> in Penpot community.
 
 <strong>The experience stays the same, whether you use
 Penpot <a href="https://design.penpot.app" target="_blank">in the cloud</a>

docs/technical-guide/getting-started/recommended-settings.md

@@ -14,7 +14,7 @@ Keep in mind that database size doesn't grow strictly proportionally with user c
 
 # About Valkey / Redis requirements
 
-Valkey is mainly used for coordinating websocket notifications and, since Penpot 2.11, as a cache. Therefore, disk storage will not be necessary as it will use the instance's RAM.
+"Valkey is mainly used for coordinating websocket notifications and, since Penpot 2.11, as a cache. Therefore, disk storage will not be necessary as it will use the instance's RAM.
 
 To prevent the cache from hogging all the system's RAM usage, it is recommended to use two configuration parameters which, both in the docker-compose.yaml provided by Penpot and in the official Helm Chart, come with default parameters that should be sufficient for most deployments:
 

frontend/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8",
+  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264",
   "browserslist": [
     "defaults"
   ],
@@ -42,12 +42,13 @@
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch": "exit 0",
     "watch:app": "pnpm run clear:shadow-cache && pnpm run build:wasm && concurrently --kill-others-on-fail \"pnpm run watch:app:assets\" \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
-    "watch:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
+    "watch:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\"",
+    "postinstall": "(cd ../plugins/libs/plugins-runtime; pnpm run build)"
   },
   "devDependencies": {
     "@penpot/draft-js": "workspace:./packages/draft-js",
     "@penpot/mousetrap": "workspace:./packages/mousetrap",
-    "@penpot/plugins-runtime": "1.4.2",
+    "@penpot/plugins-runtime": "link:../plugins/libs/plugins-runtime",
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "workspace:./text-editor",
     "@penpot/tokenscript": "workspace:./packages/tokenscript",

frontend/packages/tokenscript/package.json

@@ -8,6 +8,6 @@
   "author": "Andrey Antukh",
   "license": "MPL-2.0",
   "dependencies": {
-    "@tokens-studio/tokenscript-interpreter": "^0.26.0"
+    "@tokens-studio/tokenscript-interpreter": "^0.23.1"
   }
 }

frontend/packages/tokenscript/schemas.js

@@ -1,12 +1,12 @@
 // Auto-generated by @tokens-studio/tokenscript-schemas
-// Version: @tokens-studio/tokenscript-schemas@v0.4.0
+// Version: @tokens-studio/tokenscript-schemas@v0.1.2
 // GitHub: https://github.com/tokens-studio/tokenscript-schemas
-// Command: npx @tokens-studio/tokenscript-schemas bundle preset:css preset:cssColors --output ./schemas.js
+// Command: npx @tokens-studio/tokenscript-schemas bundle preset:css --output ./tokenscript-schemas.js
-// Generated: 2026-02-11T08:46:40.467Z
+// Generated: 2026-01-07T09:21:11.478Z
 
 import { Config } from "@tokens-studio/tokenscript-interpreter";
 
-export const SCHEMAS = [
+const SCHEMAS = [
   {
     uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/hex-color/0/",
     schema: {
@@ -31,127 +31,7 @@ export const SCHEMAS = [
           }
         }
       ],
-      "conversions": [
+      "conversions": []
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-color/0/",
-          "target": "$self",
-          "description": "Converts sRGB (0-1) to Hex format",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// sRGB to Hex Conversion\n// Converts sRGB (0-1) to hexadecimal string format\n//\n// Examples:\n//   sRGB(1, 0, 0)     → #ff0000\n//   sRGB(0, 1, 0.5)   → #00ff80\n\nvariable hex: String = \"#\";\nvariable value: Number = 0;\n\n// Red channel\nvalue = round({input}.r * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Green channel\nvalue = round({input}.g * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Blue channel\nvalue = round({input}.b * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\nreturn hex;"
-          }
-        },
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/p3-color/0/",
-          "target": "$self",
-          "description": "Converts Display P3 to Hex format (clamps to sRGB gamut)",
-          "lossless": false,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// Display P3 to Hex Conversion\n// Converts P3 (0-1) to hexadecimal string format\n// Note: P3 colors may be out of sRGB gamut, values are clamped to 0-1\n//\n// Examples:\n//   P3(1, 0, 0)     → #ff0000\n//   P3(0, 1, 0.5)   → #00ff80\n\nvariable hex: String = \"#\";\nvariable value: Number = 0;\n\n// Red channel (clamp P3 to sRGB range)\nvalue = {input}.r;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Green channel\nvalue = {input}.g;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Blue channel\nvalue = {input}.b;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\nreturn hex;"
-          }
-        },
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/hsl-color/0/",
-          "target": "$self",
-          "description": "Converts HSL to Hex format",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// HSL to Hex Conversion\n// Converts HSL to hexadecimal string format\n// Reference: Standard HSL to RGB algorithm\n//\n// Input: Color.HSL with h (0-360), s (0-1), l (0-1)\n// Output: Hex string #rrggbb\n\n// Get input HSL values\nvariable h: Number = {input}.h;\nvariable s: Number = {input}.s;\nvariable l: Number = {input}.l;\n\n// Normalize hue to 0-1 range\nvariable hue: Number = h / 360;\n\n// RGB values (default to achromatic)\nvariable r: Number = l;\nvariable g: Number = l;\nvariable b: Number = l;\n\n// Only calculate if there's saturation\nif (s > 0) [\n    variable q: Number = 0;\n    if (l < 0.5) [\n        q = l * (1 + s);\n    ] else [\n        q = l + s - l * s;\n    ];\n\n    variable p: Number = 2 * l - q;\n\n    // Red (hue + 1/3)\n    variable tr: Number = hue + 0.333333333333333;\n    if (tr < 0) [ tr = tr + 1; ];\n    if (tr > 1) [ tr = tr - 1; ];\n\n    if (tr < 0.166666666666667) [\n        r = p + (q - p) * 6 * tr;\n    ] else [\n        if (tr < 0.5) [\n            r = q;\n        ] else [\n            if (tr < 0.666666666666667) [\n                r = p + (q - p) * (0.666666666666667 - tr) * 6;\n            ] else [\n                r = p;\n            ];\n        ];\n    ];\n\n    // Green (hue)\n    variable tg: Number = hue;\n    if (tg < 0) [ tg = tg + 1; ];\n    if (tg > 1) [ tg = tg - 1; ];\n\n    if (tg < 0.166666666666667) [\n        g = p + (q - p) * 6 * tg;\n    ] else [\n        if (tg < 0.5) [\n            g = q;\n        ] else [\n            if (tg < 0.666666666666667) [\n                g = p + (q - p) * (0.666666666666667 - tg) * 6;\n            ] else [\n                g = p;\n            ];\n        ];\n    ];\n\n    // Blue (hue - 1/3)\n    variable tb: Number = hue - 0.333333333333333;\n    if (tb < 0) [ tb = tb + 1; ];\n    if (tb > 1) [ tb = tb - 1; ];\n\n    if (tb < 0.166666666666667) [\n        b = p + (q - p) * 6 * tb;\n    ] else [\n        if (tb < 0.5) [\n            b = q;\n        ] else [\n            if (tb < 0.666666666666667) [\n                b = p + (q - p) * (0.666666666666667 - tb) * 6;\n            ] else [\n                b = p;\n            ];\n        ];\n    ];\n];\n\n// Convert RGB to hex\nvariable hex: String = \"#\";\nvariable value: Number = 0;\n\n// Red\nvalue = round(r * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Green\nvalue = round(g * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Blue\nvalue = round(b * 255);\nif (value < 0) [ value = 0; ];\nif (value > 255) [ value = 255; ];\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\nreturn hex;"
-          }
-        },
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/oklch-color/0/",
-          "target": "$self",
-          "description": "Converts OKLCH to Hex format (clamps to sRGB gamut)",
-          "lossless": false,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// OKLCH to Hex Conversion\n// Converts OKLCH perceptual color to hexadecimal string format\n// Path: OKLCH → OKLab → XYZ-D65 → Linear sRGB → sRGB → Hex\n//\n// Input: Color.OKLCH with l (0-1), c, h (0-360)\n// Output: Hex string #rrggbb\n\n// Get input OKLCH values\nvariable ok_l: Number = {input}.l;\nvariable ok_c: Number = {input}.c;\nvariable ok_h: Number = {input}.h;\n\n// === Step 1: OKLCH to OKLab (polar to cartesian) ===\nvariable pi: Number = pi();\nvariable deg_to_rad: Number = pi / 180;\nvariable h_rad: Number = ok_h * deg_to_rad;\n\nvariable lab_a: Number = ok_c * cos(h_rad);\nvariable lab_b: Number = ok_c * sin(h_rad);\n\n// === Step 2: OKLab to XYZ-D65 ===\n// Inverse Lab-to-LMS matrix\nvariable lms_l: Number = 1.0 * ok_l + 0.3963377773761749 * lab_a + 0.2158037573099136 * lab_b;\nvariable lms_m: Number = 1.0 * ok_l + -0.1055613458156586 * lab_a + -0.0638541728258133 * lab_b;\nvariable lms_s: Number = 1.0 * ok_l + -0.0894841775298119 * lab_a + -1.2914855480194092 * lab_b;\n\n// Cube the values (inverse of cube root)\nvariable lms_l_cubed: Number = lms_l * lms_l * lms_l;\nvariable lms_m_cubed: Number = lms_m * lms_m * lms_m;\nvariable lms_s_cubed: Number = lms_s * lms_s * lms_s;\n\n// Inverse LMS-to-XYZ matrix\nvariable xyz_x: Number = 1.2268798758459243 * lms_l_cubed + -0.5578149944602171 * lms_m_cubed + 0.2813910456659647 * lms_s_cubed;\nvariable xyz_y: Number = -0.0405757452148008 * lms_l_cubed + 1.1122868032803170 * lms_m_cubed + -0.0717110580655164 * lms_s_cubed;\nvariable xyz_z: Number = -0.0763729366746601 * lms_l_cubed + -0.4214933324022432 * lms_m_cubed + 1.5869240198367816 * lms_s_cubed;\n\n// === Step 3: XYZ-D65 to Linear sRGB ===\nvariable linear_r: Number = 3.2409699419045226 * xyz_x + -1.537383177570094 * xyz_y + -0.4986107602930034 * xyz_z;\nvariable linear_g: Number = -0.9692436362808796 * xyz_x + 1.8759675015077202 * xyz_y + 0.04155505740717559 * xyz_z;\nvariable linear_b: Number = 0.05563007969699366 * xyz_x + -0.20397695888897652 * xyz_y + 1.0569715142428786 * xyz_z;\n\n// === Step 4: Linear sRGB to sRGB (gamma correction) ===\nvariable threshold: Number = 0.0031308;\nvariable linear_scale: Number = 12.92;\nvariable gamma_offset: Number = 0.055;\nvariable gamma_scale: Number = 1.055;\nvariable gamma_exp: Number = 0.416666666666667;\n\nvariable srgb_r: Number = 0;\nif (linear_r <= threshold) [\n    srgb_r = linear_r * linear_scale;\n] else [\n    if (linear_r > 0) [\n        srgb_r = gamma_scale * pow(linear_r, gamma_exp) - gamma_offset;\n    ] else [\n        srgb_r = 0;\n    ];\n];\n\nvariable srgb_g: Number = 0;\nif (linear_g <= threshold) [\n    srgb_g = linear_g * linear_scale;\n] else [\n    if (linear_g > 0) [\n        srgb_g = gamma_scale * pow(linear_g, gamma_exp) - gamma_offset;\n    ] else [\n        srgb_g = 0;\n    ];\n];\n\nvariable srgb_b: Number = 0;\nif (linear_b <= threshold) [\n    srgb_b = linear_b * linear_scale;\n] else [\n    if (linear_b > 0) [\n        srgb_b = gamma_scale * pow(linear_b, gamma_exp) - gamma_offset;\n    ] else [\n        srgb_b = 0;\n    ];\n];\n\n// === Step 5: sRGB to Hex ===\nvariable hex: String = \"#\";\nvariable value: Number = 0;\n\n// Red (clamp to 0-1)\nvalue = srgb_r;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Green\nvalue = srgb_g;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\n// Blue\nvalue = srgb_b;\nif (value < 0) [ value = 0; ];\nif (value > 1) [ value = 1; ];\nvalue = round(value * 255);\nif (value < 16) [\n  hex = hex.concat(\"0\").concat(value.to_string(16));\n] else [\n  hex = hex.concat(value.to_string(16));\n];\n\nreturn hex;"
-          }
-        }
-      ]
-    }
-  },
-  {
-    uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-color/0/",
-    schema: {
-      "name": "SRGB",
-      "type": "color",
-      "description": "sRGB color space with normalized 0-1 range. The standard color space for web and displays.",
-      "schema": {
-        "type": "object",
-        "properties": {
-          "r": {
-            "type": "number",
-            "description": "Red channel (0-1)"
-          },
-          "g": {
-            "type": "number",
-            "description": "Green channel (0-1)"
-          },
-          "b": {
-            "type": "number",
-            "description": "Blue channel (0-1)"
-          }
-        },
-        "required": [
-          "r",
-          "g",
-          "b"
-        ],
-        "order": [
-          "r",
-          "g",
-          "b"
-        ],
-        "additionalProperties": false
-      },
-      "initializers": [
-        {
-          "title": "sRGB Color Initializer",
-          "keyword": "srgb",
-          "description": "Creates an sRGB color from normalized 0-1 values",
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// sRGB Color Initializer\n// Creates an sRGB color from normalized 0-1 values\n// Input: List of [r, g, b] or [r, g, b, alpha] values in 0-1 range\n\nvariable color_values: List = {input};\nvariable output: Color.SRGB;\n\noutput.r = color_values.get(0);\noutput.g = color_values.get(1);\noutput.b = color_values.get(2);\n\n// Set alpha if provided as 4th parameter\nif (color_values.length() > 3) [\n  output.alpha = color_values.get(3);\n];\n\nreturn output;"
-          }
-        }
-      ],
-      "conversions": [
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/rgb-color/0/",
-          "target": "$self",
-          "description": "Converts RGB (0-255) to sRGB (0-1) by normalizing",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// RGB to sRGB Conversion\n// Converts RGB (0-255) to sRGB (0-1) by normalizing\n// Input: Color.Rgb with r, g, b in 0-255 range\n// Output: Color.SRGB with r, g, b in 0-1 range\n// Lossless: Yes (simple division)\n\nvariable r_normalized: Number = {input}.r / 255;\nvariable g_normalized: Number = {input}.g / 255;\nvariable b_normalized: Number = {input}.b / 255;\n\nvariable output: Color.SRGB;\noutput.r = r_normalized;\noutput.g = g_normalized;\noutput.b = b_normalized;\n\nreturn output;"
-          }
-        },
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/hsl-color/0/",
-          "target": "$self",
-          "description": "Converts HSL to sRGB",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// HSL to sRGB Conversion\n// Reference: https://github.com/color-js/color.js/blob/main/src/spaces/hsl.js\n//\n// Algorithm:\n// 1. If saturation is 0, it's achromatic: R=G=B=L\n// 2. Otherwise use the HSL to RGB formula:\n//    - Calculate intermediate values based on L\n//    - Use hue to determine RGB components\n//\n// Input: Color.HSL with h (0-360), s (0-1), l (0-1)\n// Output: Color.SRGB with r, g, b in 0-1 range\n\n// Get input HSL values\nvariable h: Number = {input}.h;\nvariable s: Number = {input}.s;\nvariable l: Number = {input}.l;\n\n// Normalize hue to 0-1 range\nvariable hue: Number = h / 360;\n\n// Output values\nvariable r: Number = l;\nvariable g: Number = l;\nvariable b: Number = l;\n\n// Only calculate if there's saturation (not achromatic)\nif (s > 0) [\n    // Calculate intermediate value\n    variable q: Number = 0;\n    if (l < 0.5) [\n        q = l * (1 + s);\n    ] else [\n        q = l + s - l * s;\n    ];\n    \n    variable p: Number = 2 * l - q;\n    \n    // Helper function logic inlined for R (hue + 1/3)\n    variable tr: Number = hue + 0.333333333333333;\n    if (tr < 0) [ tr = tr + 1; ];\n    if (tr > 1) [ tr = tr - 1; ];\n    \n    if (tr < 0.166666666666667) [\n        r = p + (q - p) * 6 * tr;\n    ] else [\n        if (tr < 0.5) [\n            r = q;\n        ] else [\n            if (tr < 0.666666666666667) [\n                r = p + (q - p) * (0.666666666666667 - tr) * 6;\n            ] else [\n                r = p;\n            ];\n        ];\n    ];\n    \n    // Helper function logic inlined for G (hue)\n    variable tg: Number = hue;\n    if (tg < 0) [ tg = tg + 1; ];\n    if (tg > 1) [ tg = tg - 1; ];\n    \n    if (tg < 0.166666666666667) [\n        g = p + (q - p) * 6 * tg;\n    ] else [\n        if (tg < 0.5) [\n            g = q;\n        ] else [\n            if (tg < 0.666666666666667) [\n                g = p + (q - p) * (0.666666666666667 - tg) * 6;\n            ] else [\n                g = p;\n            ];\n        ];\n    ];\n    \n    // Helper function logic inlined for B (hue - 1/3)\n    variable tb: Number = hue - 0.333333333333333;\n    if (tb < 0) [ tb = tb + 1; ];\n    if (tb > 1) [ tb = tb - 1; ];\n    \n    if (tb < 0.166666666666667) [\n        b = p + (q - p) * 6 * tb;\n    ] else [\n        if (tb < 0.5) [\n            b = q;\n        ] else [\n            if (tb < 0.666666666666667) [\n                b = p + (q - p) * (0.666666666666667 - tb) * 6;\n            ] else [\n                b = p;\n            ];\n        ];\n    ];\n];\n\n// Create output\nvariable output: Color.SRGB;\noutput.r = r;\noutput.g = g;\noutput.b = b;\n\nreturn output;"
-          }
-        },
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-linear-color/0/",
-          "target": "$self",
-          "description": "Converts Linear sRGB to sRGB by applying gamma correction",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// Linear sRGB to sRGB Conversion\n// Applies gamma correction (transfer function)\n// Reference: IEC 61966-2-1:1999 (sRGB specification)\n//\n// Algorithm:\n//   if linear ≤ 0.0031308: srgb = linear * 12.92\n//   else: srgb = 1.055 * linear^(1/2.4) - 0.055\n//\n// Input: Color.LinearSRGB with r, g, b in linear 0-1 range\n// Output: Color.SRGB with r, g, b in gamma-corrected 0-1 range\n\n// Gamma correction constants (IEC 61966-2-1)\nvariable threshold: Number = 0.0031308;\nvariable linear_scale: Number = 12.92;\nvariable gamma_offset: Number = 0.055;\nvariable gamma_scale: Number = 1.055;\nvariable gamma_exponent: Number = 0.416666666666667;\n\n// Get input linear values\nvariable linear_r: Number = {input}.r;\nvariable linear_g: Number = {input}.g;\nvariable linear_b: Number = {input}.b;\n\n// Convert red channel\nvariable srgb_r: Number = 0;\nif (linear_r <= threshold) [\n    srgb_r = linear_r * linear_scale;\n] else [\n    srgb_r = gamma_scale * pow(linear_r, gamma_exponent) - gamma_offset;\n];\n\n// Convert green channel\nvariable srgb_g: Number = 0;\nif (linear_g <= threshold) [\n    srgb_g = linear_g * linear_scale;\n] else [\n    srgb_g = gamma_scale * pow(linear_g, gamma_exponent) - gamma_offset;\n];\n\n// Convert blue channel\nvariable srgb_b: Number = 0;\nif (linear_b <= threshold) [\n    srgb_b = linear_b * linear_scale;\n] else [\n    srgb_b = gamma_scale * pow(linear_b, gamma_exponent) - gamma_offset;\n];\n\n// Create output\nvariable output: Color.SRGB;\noutput.r = srgb_r;\noutput.g = srgb_g;\noutput.b = srgb_b;\n\nreturn output;"
-          }
-        }
-      ]
     }
   },
   {
@@ -297,6 +177,85 @@ export const SCHEMAS = [
       ]
     }
   },
+  {
+    uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-color/0/",
+    schema: {
+      "name": "SRGB",
+      "type": "color",
+      "description": "sRGB color space with normalized 0-1 range. The standard color space for web and displays.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "r": {
+            "type": "number",
+            "description": "Red channel (0-1)"
+          },
+          "g": {
+            "type": "number",
+            "description": "Green channel (0-1)"
+          },
+          "b": {
+            "type": "number",
+            "description": "Blue channel (0-1)"
+          }
+        },
+        "required": [
+          "r",
+          "g",
+          "b"
+        ],
+        "order": [
+          "r",
+          "g",
+          "b"
+        ],
+        "additionalProperties": false
+      },
+      "initializers": [
+        {
+          "title": "sRGB Color Initializer",
+          "keyword": "srgb",
+          "description": "Creates an sRGB color from normalized 0-1 values",
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// sRGB Color Initializer\n// Creates an sRGB color from normalized 0-1 values\n// Input: List of [r, g, b] or [r, g, b, alpha] values in 0-1 range\n\nvariable color_values: List = {input};\nvariable output: Color.SRGB;\n\noutput.r = color_values.get(0);\noutput.g = color_values.get(1);\noutput.b = color_values.get(2);\n\n// Set alpha if provided as 4th parameter\nif (color_values.length() > 3) [\n  output.alpha = color_values.get(3);\n];\n\nreturn output;"
+          }
+        }
+      ],
+      "conversions": [
+        {
+          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/rgb-color/0/",
+          "target": "$self",
+          "description": "Converts RGB (0-255) to sRGB (0-1) by normalizing",
+          "lossless": true,
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// RGB to sRGB Conversion\n// Converts RGB (0-255) to sRGB (0-1) by normalizing\n// Input: Color.Rgb with r, g, b in 0-255 range\n// Output: Color.SRGB with r, g, b in 0-1 range\n// Lossless: Yes (simple division)\n\nvariable r_normalized: Number = {input}.r / 255;\nvariable g_normalized: Number = {input}.g / 255;\nvariable b_normalized: Number = {input}.b / 255;\n\nvariable output: Color.SRGB;\noutput.r = r_normalized;\noutput.g = g_normalized;\noutput.b = b_normalized;\n\nreturn output;"
+          }
+        },
+        {
+          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/hsl-color/0/",
+          "target": "$self",
+          "description": "Converts HSL to sRGB",
+          "lossless": true,
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// HSL to sRGB Conversion\n// Reference: https://github.com/color-js/color.js/blob/main/src/spaces/hsl.js\n//\n// Algorithm:\n// 1. If saturation is 0, it's achromatic: R=G=B=L\n// 2. Otherwise use the HSL to RGB formula:\n//    - Calculate intermediate values based on L\n//    - Use hue to determine RGB components\n//\n// Input: Color.HSL with h (0-360), s (0-1), l (0-1)\n// Output: Color.SRGB with r, g, b in 0-1 range\n\n// Get input HSL values\nvariable h: Number = {input}.h;\nvariable s: Number = {input}.s;\nvariable l: Number = {input}.l;\n\n// Normalize hue to 0-1 range\nvariable hue: Number = h / 360;\n\n// Output values\nvariable r: Number = l;\nvariable g: Number = l;\nvariable b: Number = l;\n\n// Only calculate if there's saturation (not achromatic)\nif (s > 0) [\n    // Calculate intermediate value\n    variable q: Number = 0;\n    if (l < 0.5) [\n        q = l * (1 + s);\n    ] else [\n        q = l + s - l * s;\n    ];\n    \n    variable p: Number = 2 * l - q;\n    \n    // Helper function logic inlined for R (hue + 1/3)\n    variable tr: Number = hue + 0.333333333333333;\n    if (tr < 0) [ tr = tr + 1; ];\n    if (tr > 1) [ tr = tr - 1; ];\n    \n    if (tr < 0.166666666666667) [\n        r = p + (q - p) * 6 * tr;\n    ] else [\n        if (tr < 0.5) [\n            r = q;\n        ] else [\n            if (tr < 0.666666666666667) [\n                r = p + (q - p) * (0.666666666666667 - tr) * 6;\n            ] else [\n                r = p;\n            ];\n        ];\n    ];\n    \n    // Helper function logic inlined for G (hue)\n    variable tg: Number = hue;\n    if (tg < 0) [ tg = tg + 1; ];\n    if (tg > 1) [ tg = tg - 1; ];\n    \n    if (tg < 0.166666666666667) [\n        g = p + (q - p) * 6 * tg;\n    ] else [\n        if (tg < 0.5) [\n            g = q;\n        ] else [\n            if (tg < 0.666666666666667) [\n                g = p + (q - p) * (0.666666666666667 - tg) * 6;\n            ] else [\n                g = p;\n            ];\n        ];\n    ];\n    \n    // Helper function logic inlined for B (hue - 1/3)\n    variable tb: Number = hue - 0.333333333333333;\n    if (tb < 0) [ tb = tb + 1; ];\n    if (tb > 1) [ tb = tb - 1; ];\n    \n    if (tb < 0.166666666666667) [\n        b = p + (q - p) * 6 * tb;\n    ] else [\n        if (tb < 0.5) [\n            b = q;\n        ] else [\n            if (tb < 0.666666666666667) [\n                b = p + (q - p) * (0.666666666666667 - tb) * 6;\n            ] else [\n                b = p;\n            ];\n        ];\n    ];\n];\n\n// Create output\nvariable output: Color.SRGB;\noutput.r = r;\noutput.g = g;\noutput.b = b;\n\nreturn output;"
+          }
+        },
+        {
+          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-linear-color/0/",
+          "target": "$self",
+          "description": "Converts Linear sRGB to sRGB by applying gamma correction",
+          "lossless": true,
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// Linear sRGB to sRGB Conversion\n// Applies gamma correction (transfer function)\n// Reference: IEC 61966-2-1:1999 (sRGB specification)\n//\n// Algorithm:\n//   if linear ≤ 0.0031308: srgb = linear * 12.92\n//   else: srgb = 1.055 * linear^(1/2.4) - 0.055\n//\n// Input: Color.LinearSRGB with r, g, b in linear 0-1 range\n// Output: Color.SRGB with r, g, b in gamma-corrected 0-1 range\n\n// Gamma correction constants (IEC 61966-2-1)\nvariable threshold: Number = 0.0031308;\nvariable linear_scale: Number = 12.92;\nvariable gamma_offset: Number = 0.055;\nvariable gamma_scale: Number = 1.055;\nvariable gamma_exponent: Number = 0.416666666666667;\n\n// Get input linear values\nvariable linear_r: Number = {input}.r;\nvariable linear_g: Number = {input}.g;\nvariable linear_b: Number = {input}.b;\n\n// Convert red channel\nvariable srgb_r: Number = 0;\nif (linear_r <= threshold) [\n    srgb_r = linear_r * linear_scale;\n] else [\n    srgb_r = gamma_scale * pow(linear_r, gamma_exponent) - gamma_offset;\n];\n\n// Convert green channel\nvariable srgb_g: Number = 0;\nif (linear_g <= threshold) [\n    srgb_g = linear_g * linear_scale;\n] else [\n    srgb_g = gamma_scale * pow(linear_g, gamma_exponent) - gamma_offset;\n];\n\n// Convert blue channel\nvariable srgb_b: Number = 0;\nif (linear_b <= threshold) [\n    srgb_b = linear_b * linear_scale;\n] else [\n    srgb_b = gamma_scale * pow(linear_b, gamma_exponent) - gamma_offset;\n];\n\n// Create output\nvariable output: Color.SRGB;\noutput.r = srgb_r;\noutput.g = srgb_g;\noutput.b = srgb_b;\n\nreturn output;"
+          }
+        }
+      ]
+    }
+  },
   {
     uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/srgb-linear-color/0/",
     schema: {
@@ -770,65 +729,6 @@ export const SCHEMAS = [
       ]
     }
   },
-  {
-    uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/p3-color/0/",
-    schema: {
-      "name": "P3",
-      "type": "color",
-      "description": "Display-P3 color space with sRGB transfer function. Wider gamut than sRGB, common on modern Apple displays.",
-      "schema": {
-        "type": "object",
-        "properties": {
-          "r": {
-            "type": "number",
-            "description": "Red channel (0-1, can exceed for out-of-gamut)"
-          },
-          "g": {
-            "type": "number",
-            "description": "Green channel (0-1, can exceed for out-of-gamut)"
-          },
-          "b": {
-            "type": "number",
-            "description": "Blue channel (0-1, can exceed for out-of-gamut)"
-          }
-        },
-        "required": [
-          "r",
-          "g",
-          "b"
-        ],
-        "order": [
-          "r",
-          "g",
-          "b"
-        ],
-        "additionalProperties": false
-      },
-      "initializers": [
-        {
-          "title": "Display-P3 Color Initializer",
-          "keyword": "p3",
-          "description": "Creates a Display-P3 color from 0-1 values",
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// Display-P3 Color Initializer\n// Creates a Display-P3 color from 0-1 values\n// Input: List of [r, g, b] or [r, g, b, alpha] values\n\nvariable color_values: List = {input};\nvariable output: Color.P3;\n\noutput.r = color_values.get(0);\noutput.g = color_values.get(1);\noutput.b = color_values.get(2);\n\n// Set alpha if provided as 4th parameter\nif (color_values.length() > 3) [\n  output.alpha = color_values.get(3);\n];\n\nreturn output;"
-          }
-        }
-      ],
-      "conversions": [
-        {
-          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/p3-linear-color/0/",
-          "target": "$self",
-          "description": "Converts Linear P3 to P3 by applying sRGB transfer function",
-          "lossless": true,
-          "script": {
-            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
-            "script": "// Linear P3 to P3 Conversion\n// Applies sRGB transfer function (gamma encoding)\n// P3 uses the same transfer function as sRGB\n// Reference: CSS Color Level 4\n//\n// Algorithm (same as sRGB):\n//   if linear ≤ 0.0031308: encoded = 12.92 × linear\n//   else: encoded = 1.055 × linear^(1/2.4) - 0.055\n//\n// Input: Color.LinearP3 with linear r, g, b values\n// Output: Color.P3 with gamma-encoded r, g, b values\n\n// Transfer function constants (same as sRGB)\nvariable threshold: Number = 0.0031308;\nvariable linear_scale: Number = 12.92;\nvariable gamma_scale: Number = 1.055;\nvariable gamma_offset: Number = 0.055;\nvariable gamma_exponent: Number = 0.4166666666666667;\n\n// Get linear values\nvariable linear_r: Number = {input}.r;\nvariable linear_g: Number = {input}.g;\nvariable linear_b: Number = {input}.b;\n\n// Convert red channel\nvariable encoded_r: Number = 0;\nif (linear_r <= threshold) [\n    encoded_r = linear_scale * linear_r;\n] else [\n    encoded_r = gamma_scale * pow(linear_r, gamma_exponent) - gamma_offset;\n];\n\n// Convert green channel\nvariable encoded_g: Number = 0;\nif (linear_g <= threshold) [\n    encoded_g = linear_scale * linear_g;\n] else [\n    encoded_g = gamma_scale * pow(linear_g, gamma_exponent) - gamma_offset;\n];\n\n// Convert blue channel\nvariable encoded_b: Number = 0;\nif (linear_b <= threshold) [\n    encoded_b = linear_scale * linear_b;\n] else [\n    encoded_b = gamma_scale * pow(linear_b, gamma_exponent) - gamma_offset;\n];\n\n// Create output\nvariable output: Color.P3;\noutput.r = encoded_r;\noutput.g = encoded_g;\noutput.b = encoded_b;\n\nreturn output;"
-          }
-        }
-      ]
-    }
-  },
   {
     uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/css-color/0/",
     schema: {
@@ -1286,6 +1186,65 @@ export const SCHEMAS = [
       ]
     }
   },
+  {
+    uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/p3-color/0/",
+    schema: {
+      "name": "P3",
+      "type": "color",
+      "description": "Display-P3 color space with sRGB transfer function. Wider gamut than sRGB, common on modern Apple displays.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "r": {
+            "type": "number",
+            "description": "Red channel (0-1, can exceed for out-of-gamut)"
+          },
+          "g": {
+            "type": "number",
+            "description": "Green channel (0-1, can exceed for out-of-gamut)"
+          },
+          "b": {
+            "type": "number",
+            "description": "Blue channel (0-1, can exceed for out-of-gamut)"
+          }
+        },
+        "required": [
+          "r",
+          "g",
+          "b"
+        ],
+        "order": [
+          "r",
+          "g",
+          "b"
+        ],
+        "additionalProperties": false
+      },
+      "initializers": [
+        {
+          "title": "Display-P3 Color Initializer",
+          "keyword": "p3",
+          "description": "Creates a Display-P3 color from 0-1 values",
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// Display-P3 Color Initializer\n// Creates a Display-P3 color from 0-1 values\n// Input: List of [r, g, b] or [r, g, b, alpha] values\n\nvariable color_values: List = {input};\nvariable output: Color.P3;\n\noutput.r = color_values.get(0);\noutput.g = color_values.get(1);\noutput.b = color_values.get(2);\n\n// Set alpha if provided as 4th parameter\nif (color_values.length() > 3) [\n  output.alpha = color_values.get(3);\n];\n\nreturn output;"
+          }
+        }
+      ],
+      "conversions": [
+        {
+          "source": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/p3-linear-color/0/",
+          "target": "$self",
+          "description": "Converts Linear P3 to P3 by applying sRGB transfer function",
+          "lossless": true,
+          "script": {
+            "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+            "script": "// Linear P3 to P3 Conversion\n// Applies sRGB transfer function (gamma encoding)\n// P3 uses the same transfer function as sRGB\n// Reference: CSS Color Level 4\n//\n// Algorithm (same as sRGB):\n//   if linear ≤ 0.0031308: encoded = 12.92 × linear\n//   else: encoded = 1.055 × linear^(1/2.4) - 0.055\n//\n// Input: Color.LinearP3 with linear r, g, b values\n// Output: Color.P3 with gamma-encoded r, g, b values\n\n// Transfer function constants (same as sRGB)\nvariable threshold: Number = 0.0031308;\nvariable linear_scale: Number = 12.92;\nvariable gamma_scale: Number = 1.055;\nvariable gamma_offset: Number = 0.055;\nvariable gamma_exponent: Number = 0.4166666666666667;\n\n// Get linear values\nvariable linear_r: Number = {input}.r;\nvariable linear_g: Number = {input}.g;\nvariable linear_b: Number = {input}.b;\n\n// Convert red channel\nvariable encoded_r: Number = 0;\nif (linear_r <= threshold) [\n    encoded_r = linear_scale * linear_r;\n] else [\n    encoded_r = gamma_scale * pow(linear_r, gamma_exponent) - gamma_offset;\n];\n\n// Convert green channel\nvariable encoded_g: Number = 0;\nif (linear_g <= threshold) [\n    encoded_g = linear_scale * linear_g;\n] else [\n    encoded_g = gamma_scale * pow(linear_g, gamma_exponent) - gamma_offset;\n];\n\n// Convert blue channel\nvariable encoded_b: Number = 0;\nif (linear_b <= threshold) [\n    encoded_b = linear_scale * linear_b;\n] else [\n    encoded_b = gamma_scale * pow(linear_b, gamma_exponent) - gamma_offset;\n];\n\n// Create output\nvariable output: Color.P3;\noutput.r = encoded_r;\noutput.g = encoded_g;\noutput.b = encoded_b;\n\nreturn output;"
+          }
+        }
+      ]
+    }
+  },
   {
     uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/function/lighten/0/",
     schema: {
@@ -1465,165 +1424,6 @@ export const SCHEMAS = [
       ]
     }
   },
-  {
-    uri: "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/constants/css-hex-colors/0/",
-    schema: {
-      "name": "CSS Hex Colors",
-      "type": "constants",
-      "description": "CSS named colors mapped to their hex values (CSS Color Level 4)",
-      "inline": true,
-      "values": {
-        "aliceblue": "#F0F8FF",
-        "antiquewhite": "#FAEBD7",
-        "aqua": "#00FFFF",
-        "aquamarine": "#7FFFD4",
-        "azure": "#F0FFFF",
-        "beige": "#F5F5DC",
-        "bisque": "#FFE4C4",
-        "black": "#000000",
-        "blanchedalmond": "#FFEBCD",
-        "blue": "#0000FF",
-        "blueviolet": "#8A2BE2",
-        "brown": "#A52A2A",
-        "burlywood": "#DEB887",
-        "cadetblue": "#5F9EA0",
-        "chartreuse": "#7FFF00",
-        "chocolate": "#D2691E",
-        "coral": "#FF7F50",
-        "cornflowerblue": "#6495ED",
-        "cornsilk": "#FFF8DC",
-        "crimson": "#DC143C",
-        "cyan": "#00FFFF",
-        "darkblue": "#00008B",
-        "darkcyan": "#008B8B",
-        "darkgoldenrod": "#B8860B",
-        "darkgray": "#A9A9A9",
-        "darkgreen": "#006400",
-        "darkgrey": "#A9A9A9",
-        "darkkhaki": "#BDB76B",
-        "darkmagenta": "#8B008B",
-        "darkolivegreen": "#556B2F",
-        "darkorange": "#FF8C00",
-        "darkorchid": "#9932CC",
-        "darkred": "#8B0000",
-        "darksalmon": "#E9967A",
-        "darkseagreen": "#8FBC8F",
-        "darkslateblue": "#483D8B",
-        "darkslategray": "#2F4F4F",
-        "darkslategrey": "#2F4F4F",
-        "darkturquoise": "#00CED1",
-        "darkviolet": "#9400D3",
-        "deeppink": "#FF1493",
-        "deepskyblue": "#00BFFF",
-        "dimgray": "#696969",
-        "dimgrey": "#696969",
-        "dodgerblue": "#1E90FF",
-        "firebrick": "#B22222",
-        "floralwhite": "#FFFAF0",
-        "forestgreen": "#228B22",
-        "fuchsia": "#FF00FF",
-        "gainsboro": "#DCDCDC",
-        "ghostwhite": "#F8F8FF",
-        "gold": "#FFD700",
-        "goldenrod": "#DAA520",
-        "gray": "#808080",
-        "green": "#008000",
-        "greenyellow": "#ADFF2F",
-        "grey": "#808080",
-        "honeydew": "#F0FFF0",
-        "hotpink": "#FF69B4",
-        "indianred": "#CD5C5C",
-        "indigo": "#4B0082",
-        "ivory": "#FFFFF0",
-        "khaki": "#F0E68C",
-        "lavender": "#E6E6FA",
-        "lavenderblush": "#FFF0F5",
-        "lawngreen": "#7CFC00",
-        "lemonchiffon": "#FFFACD",
-        "lightblue": "#ADD8E6",
-        "lightcoral": "#F08080",
-        "lightcyan": "#E0FFFF",
-        "lightgoldenrodyellow": "#FAFAD2",
-        "lightgray": "#D3D3D3",
-        "lightgreen": "#90EE90",
-        "lightgrey": "#D3D3D3",
-        "lightpink": "#FFB6C1",
-        "lightsalmon": "#FFA07A",
-        "lightseagreen": "#20B2AA",
-        "lightskyblue": "#87CEFA",
-        "lightslategray": "#778899",
-        "lightslategrey": "#778899",
-        "lightsteelblue": "#B0C4DE",
-        "lightyellow": "#FFFFE0",
-        "lime": "#00FF00",
-        "limegreen": "#32CD32",
-        "linen": "#FAF0E6",
-        "magenta": "#FF00FF",
-        "maroon": "#800000",
-        "mediumaquamarine": "#66CDAA",
-        "mediumblue": "#0000CD",
-        "mediumorchid": "#BA55D3",
-        "mediumpurple": "#9370DB",
-        "mediumseagreen": "#3CB371",
-        "mediumslateblue": "#7B68EE",
-        "mediumspringgreen": "#00FA9A",
-        "mediumturquoise": "#48D1CC",
-        "mediumvioletred": "#C71585",
-        "midnightblue": "#191970",
-        "mintcream": "#F5FFFA",
-        "mistyrose": "#FFE4E1",
-        "moccasin": "#FFE4B5",
-        "navajowhite": "#FFDEAD",
-        "navy": "#000080",
-        "oldlace": "#FDF5E6",
-        "olive": "#808000",
-        "olivedrab": "#6B8E23",
-        "orange": "#FFA500",
-        "orangered": "#FF4500",
-        "orchid": "#DA70D6",
-        "palegoldenrod": "#EEE8AA",
-        "palegreen": "#98FB98",
-        "paleturquoise": "#AFEEEE",
-        "palevioletred": "#DB7093",
-        "papayawhip": "#FFEFD5",
-        "peachpuff": "#FFDAB9",
-        "peru": "#CD853F",
-        "pink": "#FFC0CB",
-        "plum": "#DDA0DD",
-        "powderblue": "#B0E0E6",
-        "purple": "#800080",
-        "rebeccapurple": "#663399",
-        "red": "#FF0000",
-        "rosybrown": "#BC8F8F",
-        "royalblue": "#4169E1",
-        "saddlebrown": "#8B4513",
-        "salmon": "#FA8072",
-        "sandybrown": "#F4A460",
-        "seagreen": "#2E8B57",
-        "seashell": "#FFF5EE",
-        "sienna": "#A0522D",
-        "silver": "#C0C0C0",
-        "skyblue": "#87CEEB",
-        "slateblue": "#6A5ACD",
-        "slategray": "#708090",
-        "slategrey": "#708090",
-        "snow": "#FFFAFA",
-        "springgreen": "#00FF7F",
-        "steelblue": "#4682B4",
-        "tan": "#D2B48C",
-        "teal": "#008080",
-        "thistle": "#D8BFD8",
-        "tomato": "#FF6347",
-        "turquoise": "#40E0D0",
-        "violet": "#EE82EE",
-        "wheat": "#F5DEB3",
-        "white": "#FFFFFF",
-        "whitesmoke": "#F5F5F5",
-        "yellow": "#FFFF00",
-        "yellowgreen": "#9ACD32"
-      }
-    }
-  },
 ];
 
 export function makeConfig() {

frontend/playwright/data/render-wasm/get-file-fill-blend-blurs.json

@@ -1,147 +0,0 @@
-{
-    "~:features": {
-        "~#set": [
-            "fdata/path-data",
-            "plugins/runtime",
-            "design-tokens/v1",
-            "variants/v1",
-            "layout/grid",
-            "styles/v2",
-            "fdata/objects-map",
-            "text-editor/v2",
-            "render-wasm/v1",
-            "components/v2",
-            "fdata/shape-data-type"
-        ]
-    },
-    "~:team-id": "~ud7430f09-4f59-8049-8007-6277bb7586f6",
-    "~:permissions": {
-        "~:type": "~:membership",
-        "~:is-owner": true,
-        "~:is-admin": true,
-        "~:can-edit": true,
-        "~:can-read": true,
-        "~:is-logged": true
-    },
-    "~:has-media-trimmed": false,
-    "~:comment-thread-seqn": 0,
-    "~:name": "test_color_blending",
-    "~:revn": 78,
-    "~:modified-at": "~m1770820738388",
-    "~:vern": 0,
-    "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0c",
-    "~:is-shared": false,
-    "~:migrations": {
-        "~#ordered-set": [
-            "legacy-2",
-            "legacy-3",
-            "legacy-5",
-            "legacy-6",
-            "legacy-7",
-            "legacy-8",
-            "legacy-9",
-            "legacy-10",
-            "legacy-11",
-            "legacy-12",
-            "legacy-13",
-            "legacy-14",
-            "legacy-16",
-            "legacy-17",
-            "legacy-18",
-            "legacy-19",
-            "legacy-25",
-            "legacy-26",
-            "legacy-27",
-            "legacy-28",
-            "legacy-29",
-            "legacy-31",
-            "legacy-32",
-            "legacy-33",
-            "legacy-34",
-            "legacy-36",
-            "legacy-37",
-            "legacy-38",
-            "legacy-39",
-            "legacy-40",
-            "legacy-41",
-            "legacy-42",
-            "legacy-43",
-            "legacy-44",
-            "legacy-45",
-            "legacy-46",
-            "legacy-47",
-            "legacy-48",
-            "legacy-49",
-            "legacy-50",
-            "legacy-51",
-            "legacy-52",
-            "legacy-53",
-            "legacy-54",
-            "legacy-55",
-            "legacy-56",
-            "legacy-57",
-            "legacy-59",
-            "legacy-62",
-            "legacy-65",
-            "legacy-66",
-            "legacy-67",
-            "0001-remove-tokens-from-groups",
-            "0002-normalize-bool-content-v2",
-            "0002-clean-shape-interactions",
-            "0003-fix-root-shape",
-            "0003-convert-path-content-v2",
-            "0005-deprecate-image-type",
-            "0006-fix-old-texts-fills",
-            "0008-fix-library-colors-v4",
-            "0009-clean-library-colors",
-            "0009-add-partial-text-touched-flags",
-            "0010-fix-swap-slots-pointing-non-existent-shapes",
-            "0011-fix-invalid-text-touched-flags",
-            "0012-fix-position-data",
-            "0013-fix-component-path",
-            "0013-clear-invalid-strokes-and-fills",
-            "0014-fix-tokens-lib-duplicate-ids",
-            "0014-clear-components-nil-objects",
-            "0015-fix-text-attrs-blank-strings",
-            "0015-clean-shadow-color",
-            "0016-copy-fills-from-position-data-to-text-node"
-        ]
-    },
-    "~:version": 67,
-    "~:project-id": "~ud7430f09-4f59-8049-8007-6277bb765abd",
-    "~:created-at": "~m1770741329904",
-    "~:backend": "legacy-db",
-    "~:data": {
-        "~:pages": [
-            "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d"
-        ],
-        "~:pages-index": {
-            "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d": {
-                "~:objects": {
-                    "~#penpot/objects-map/v2": {
-                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297\",\"~udb80df91-a3a3-803b-8007-8e379b5fd50f\",\"~udb80df91-a3a3-803b-8007-8e38034ff7c8\",\"~udb80df91-a3a3-803b-8007-8e37a71c9d28\",\"~udb80df91-a3a3-803b-8007-8e384d8c53b9\",\"~udb80df91-a3a3-803b-8007-8e37c09b4084\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c4\",\"~u097859f1-ca3b-80ba-8007-8e8beb99a3f5\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c5\",\"~u097859f1-ca3b-80ba-8007-8e8bfca43303\",\"~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c6\"]]]",
-                        "~u097859f1-ca3b-80ba-8007-8e8bfca43303": "[\"~#shape\",[\"^ \",\"~:y\",-637.0000057220459,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-637.000005722046]],[\"^<\",[\"^ \",\"~:x\",636.9999995231628,\"~:y\",-637.000005722046]],[\"^<\",[\"^ \",\"~:x\",636.9999995231628,\"~:y\",-337.00000858306885]],[\"^<\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-337.00000858306885]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u097859f1-ca3b-80ba-8007-8e8bfca43303\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:center\",\"~:stroke-width\",10,\"~:stroke-color\",\"#4bff00\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:outer\",\"^N\",10,\"^O\",\"#333fbd\",\"^P\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",336.9999895095825,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-637.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",336.9999895095825,\"~:y1\",-637.0000057220459,\"~:x2\",636.9999995231628,\"~:y2\",-337.00000858306885]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^11\",\"#ff0000\",\"^12\",1]],\"~:flip-x\",null,\"^W\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~udb80df91-a3a3-803b-8007-8e384d8c53b9": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",1321.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",1321.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37b7ddd15c\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"^@\",\"~udb80df91-a3a3-803b-8007-8e384d8c53b9\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",20,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1]],\"~:x\",1021.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",1021.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",1321.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^W\",\"#ff0000\",\"^X\",1]],\"~:flip-x\",null,\"^Q\",300.0000162124634,\"~:flip-y\",null]]",
-                        "~udb80df91-a3a3-803b-8007-8e379b5fd50f": "[\"~#shape\",[\"^ \",\"~:y\",82.00000368146124,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",986.7500224724797,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",986.7500224724797,\"~:y\",382.0000008204383]],[\"^<\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",382.0000008204383]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~udb80df91-a3a3-803b-8007-8e379b5fd50f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",686.7500124588994,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",82.00000368146124,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",686.7500124588994,\"~:y1\",82.00000368146124,\"~:x2\",986.7500224724797,\"~:y2\",382.0000008204383]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^P\",\"#ff0000\",\"^Q\",1]],\"~:flip-x\",null,\"^J\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297": "[\"~#shape\",[\"^ \",\"~:y\",81.9999960520667,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",81.99999605206669]],[\"^<\",[\"^ \",\"~:x\",637.0000301018742,\"~:y\",81.99999605206669]],[\"^<\",[\"^ \",\"~:x\",637.0000301018742,\"~:y\",381.99999319104376]],[\"^<\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",381.99999319104376]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~u432cbb09-2ee7-80bf-8007-8d660b2f52ad\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",337.0000200882939,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",81.9999960520667,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",337.0000200882939,\"~:y1\",81.9999960520667,\"~:x2\",637.0000301018742,\"~:y2\",381.99999319104376]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^T\",\"#ff0000\",\"^U\",1]],\"~:flip-x\",null,\"^N\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7": "[\"~#shape\",[\"^ \",\"~:y\",-629.9999999999998,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1037,\"~:y\",-630]],[\"^<\",[\"^ \",\"~:x\",1337.0000100135803,\"~:y\",-630]],[\"^<\",[\"^ \",\"~:x\",1337.0000100135803,\"~:y\",-330.0000028610228]],[\"^<\",[\"^ \",\"~:x\",1037,\"~:y\",-330.0000028610228]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:outer\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:center\",\"^N\",10,\"^O\",\"#4bff00\",\"^P\",1]],\"~:x\",1037,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1037,\"~:y\",-629.9999999999998,\"^8\",300.0000100135803,\"~:height\",299.999997138977,\"~:x1\",1037,\"~:y1\",-629.9999999999998,\"~:x2\",1337.0000100135803,\"~:y2\",-330.0000028610228]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^11\",\"#ff0000\",\"^12\",1]],\"~:flip-x\",null,\"^W\",299.999997138977,\"~:flip-y\",null]]",
-                        "~u097859f1-ca3b-80ba-8007-8e8beb99a3f5": "[\"~#shape\",[\"^ \",\"~:y\",-626.0000057220459,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-626.000005722046]],[\"^<\",[\"^ \",\"~:x\",987.0000224113464,\"~:y\",-626.000005722046]],[\"^<\",[\"^ \",\"~:x\",987.0000224113464,\"~:y\",-326.00000858306885]],[\"^<\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-326.00000858306885]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u097859f1-ca3b-80ba-8007-8e8beb99a3f5\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"^M\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",687.0000123977661,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-626.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",687.0000123977661,\"~:y1\",-626.0000057220459,\"~:x2\",987.0000224113464,\"~:y2\",-326.00000858306885]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~udb80df91-a3a3-803b-8007-8e37a71c9d28": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",637.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",637.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37b7ddd15c\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"^@\",\"~udb80df91-a3a3-803b-8007-8e37a71c9d28\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",337.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",337.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",637.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^P\",\"#ff0000\",\"^Q\",1]],\"~:flip-x\",null,\"^J\",300.0000162124634,\"~:flip-y\",null]]",
-                        "~u18522c44-655d-8050-8007-8e89f4bdc0c5": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",637.000030040741,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",637.000030040741,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",12.999991416931152]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c5\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:outer\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",337.00002002716064,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",337.00002002716064,\"~:y1\",-287.0000057220459,\"~:x2\",637.000030040741,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^10\",\"#ff0000\",\"^11\",1]],\"~:flip-x\",null,\"^V\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~udb80df91-a3a3-803b-8007-8e37c09b4084": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",979.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",979.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37c09b4084\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",679.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",679.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",979.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^L\",\"#ff0000\",\"^M\",1]],\"~:flip-x\",null,\"^F\",300.0000162124634,\"~:flip-y\",null]]",
-                        "~u18522c44-655d-8050-8007-8e89f4bdc0c4": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",986.7500224113464,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",986.7500224113464,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",12.999991416931152]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c4\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",0.5],[\"^ \",\"^J\",\"^K\",\"^L\",\"^M\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",686.7500123977661,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",686.7500123977661,\"~:y1\",-287.0000057220459,\"~:x2\",986.7500224113464,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~udb80df91-a3a3-803b-8007-8e38034ff7c8": "[\"~#shape\",[\"^ \",\"~:y\",82.00000368146124,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",1336.5000148430852,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",1336.5000148430852,\"~:y\",382.0000008204383]],[\"^<\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",382.0000008204383]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~udb80df91-a3a3-803b-8007-8e38034ff7c8\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1]],\"~:x\",1036.5000048295049,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",82.00000368146124,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",1036.5000048295049,\"~:y1\",82.00000368146124,\"~:x2\",1336.5000148430852,\"~:y2\",382.0000008204383]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
-                        "~u18522c44-655d-8050-8007-8e89f4bdc0c6": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",1336.500014781952,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",1336.500014781952,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",12.999991416931152]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c6\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:outer\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",1036.5000047683716,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",1036.5000047683716,\"~:y1\",-287.0000057220459,\"~:x2\",1336.500014781952,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^10\",\"#ff0000\",\"^11\",1]],\"~:flip-x\",null,\"^V\",299.99999713897705,\"~:flip-y\",null]]"
-                    }
-                },
-                "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d",
-                "~:name": "Page 1"
-            }
-        },
-        "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0c",
-        "~:options": {
-            "~:components-v2": true,
-            "~:base-font-size": "16px"
-        }
-    }
-}

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -10,7 +10,7 @@ export const WASM_FLAGS = [
 export class WasmWorkspacePage extends WorkspacePage {
   static async init(page) {
     await super.init(page);
-    await WasmWorkspacePage.mockConfigFlags(page, WASM_FLAGS);
+    await WorkspacePage.mockConfigFlags(page, WASM_FLAGS);
 
     await page.addInitScript(() => {
       document.addEventListener("penpot:wasm:loaded", () => {
@@ -27,14 +27,6 @@ export class WasmWorkspacePage extends WorkspacePage {
     });
   }
 
-  static async mockConfigFlags(page, flags) {
-    await super.mockConfigFlags(page, [...WASM_FLAGS, ...flags]);
-  }
-
-  async mockConfigFlags(flags) {
-    return WasmWorkspacePage.mockConfigFlags(this.page, flags);
-  }
-
   constructor(page) {
     super(page);
     this.canvas = page.getByTestId("canvas-wasm-shapes");

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -165,7 +165,6 @@ test("Updates canvas background", async ({ page }) => {
   });
   await canvasBackgroundInput.fill("FABADA");
   await workspace.page.keyboard.press("Enter");
-  await workspace.waitForFirstRenderWithoutUI();
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
@@ -197,7 +196,7 @@ test("Renders a file with blurs applied to any kind of shape", async ({
 
 test("Renders a file with shadows applied to any kind of shape", async ({
   page,
-}) => { 
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-shadows.json");
@@ -291,24 +290,6 @@ test("Renders a file with nested clipping frames", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders clipped frames with strokes correctly (no double painting)", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile(
-    "render-wasm/get-file-frame-strokes-opacity.json",
-  );
-
-  await workspace.goToWorkspace({
-    id: "3144ac7c-a5cc-80e8-8007-8bbb29a4e56e",
-    pageId: "3144ac7c-a5cc-80e8-8007-8bbb29a510ac",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
 test("Renders a clipped frame with a large blur drop shadow", async ({
   page,
 }) => {
@@ -324,35 +305,3 @@ test("Renders a clipped frame with a large blur drop shadow", async ({
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
-
-test("Renders a file with solid, dotted, dashed and mixed stroke styles", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-file-stroke-styles.json");
-
-  await workspace.goToWorkspace({
-    id: "b888b894-3697-80d3-8006-51cc8a55c200",
-    pageId: "b888b894-3697-80d3-8006-51cc8a55c210",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
-test("Renders shapes with multiple fills and blur", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-file-fill-blend-blurs.json");
-
-  await workspace.goToWorkspace({
-    id: "b15901d7-d46d-8056-8007-8d5e34fc1f0c",
-    pageId: "b15901d7-d46d-8056-8007-8d5e34fc1f0d",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  await expect(workspace.canvas).toHaveScreenshot();
-});

frontend/pnpm-lock.yaml

@@ -20,8 +20,8 @@ importers:
         specifier: workspace:./packages/mousetrap
         version: link:packages/mousetrap
       '@penpot/plugins-runtime':
-        specifier: 1.4.2
+        specifier: link:../plugins/libs/plugins-runtime
-        version: 1.4.2
+        version: link:../plugins/libs/plugins-runtime
       '@penpot/svgo':
         specifier: penpot/svgo#v3.2
         version: svgo@https://codeload.github.com/penpot/svgo/tar.gz/8c9b0e32e9cb5f106085260bd9375f3c91a5010b
@@ -260,8 +260,8 @@ importers:
   packages/tokenscript:
     dependencies:
       '@tokens-studio/tokenscript-interpreter':
-        specifier: ^0.26.0
+        specifier: ^0.23.1
-        version: 0.26.0
+        version: 0.23.1
 
   packages/ui:
     dependencies:
@@ -581,15 +581,6 @@ packages:
   '@dabh/diagnostics@2.0.8':
     resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
-  '@endo/cache-map@1.1.0':
-    resolution: {integrity: sha512-owFGshs/97PDw9oguZqU/px8Lv1d0KjAUtDUiPwKHNXRVUE/jyettEbRoTbNJR1OaI8biMn6bHr9kVJsOh6dXw==}
-
-  '@endo/env-options@1.1.11':
-    resolution: {integrity: sha512-p9OnAPsdqoX4YJsE98e3NBVhIr2iW9gNZxHhAI2/Ul5TdRfoOViItzHzTqrgUVopw6XxA1u1uS6CykLMDUxarA==}
-
-  '@endo/immutable-arraybuffer@1.1.2':
-    resolution: {integrity: sha512-u+NaYB2aqEugQ3u7w3c5QNkPogf8q/xGgsPaqdY6pUiGWtYiTiFspKFcha6+oeZhWXWQ23rf0KrUq0kfuzqYyQ==}
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1258,12 +1249,6 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@penpot/plugin-types@1.4.2':
-    resolution: {integrity: sha512-O8wU6RSYE8bIVU7g8cSTYi32ppxs3R13dq7X3Nn9tmDaJjBOKOBpVLuoRPIp3fJC65fv8/7om0sdrtFoL5v19g==}
-
-  '@penpot/plugins-runtime@1.4.2':
-    resolution: {integrity: sha512-y9TDZOnb96JBW9E33dHKpmTMeAPXLtHDIZruUVjtM8hBJWZK7RCv+vAGDGxeoZJC/OB2YAHrCZG+mukePBzcuQ==}
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1720,8 +1705,8 @@ packages:
     peerDependencies:
       style-dictionary: '>=4.3.0 < 6'
 
-  '@tokens-studio/tokenscript-interpreter@0.26.0':
+  '@tokens-studio/tokenscript-interpreter@0.23.1':
-    resolution: {integrity: sha512-dGjvUJnXRspWYp98FZw43l4cN+0ey/cF5sEJjL3coKc5C7DY7MsKgkmOONizmaZqf13GUIzklTEas3gt3jvrOQ==}
+    resolution: {integrity: sha512-aIcJprCkHIyckl0Knn78Sn7ef3U3IXLjNv9MOePdNR0Mz3Z4PleerldtfLmr1DdXUXiroVSyJROyJrO3TfB2Gg==}
     engines: {node: '>=16.0.0'}
     hasBin: true
 
@@ -4636,9 +4621,6 @@ packages:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
 
-  ses@1.14.0:
-    resolution: {integrity: sha512-T07hNgOfVRTLZGwSS50RnhqrG3foWP+rM+Q5Du4KUQyMLFI3A8YA4RKl0jjZzhihC1ZvDGrWi/JMn4vqbgr/Jg==}
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -5499,9 +5481,6 @@ packages:
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
@@ -5775,12 +5754,6 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
-  '@endo/cache-map@1.1.0': {}
-
-  '@endo/env-options@1.1.11': {}
-
-  '@endo/immutable-arraybuffer@1.1.2': {}
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -6297,14 +6270,6 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@penpot/plugin-types@1.4.2': {}
-
-  '@penpot/plugins-runtime@1.4.2':
-    dependencies:
-      '@penpot/plugin-types': 1.4.2
-      ses: 1.14.0
-      zod: 3.25.76
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -6715,7 +6680,7 @@ snapshots:
       is-mergeable-object: 1.1.1
       style-dictionary: 5.0.0-rc.1(tslib@2.8.1)
 
-  '@tokens-studio/tokenscript-interpreter@0.26.0':
+  '@tokens-studio/tokenscript-interpreter@0.23.1':
     dependencies:
       arktype: 2.1.29
       commander: 14.0.3
@@ -10000,12 +9965,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ses@1.14.0:
-    dependencies:
-      '@endo/cache-map': 1.1.0
-      '@endo/env-options': 1.1.11
-      '@endo/immutable-arraybuffer': 1.1.2
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -10974,6 +10933,4 @@ snapshots:
     dependencies:
       zod: 4.3.6
 
-  zod@3.25.76: {}
-
   zod@4.3.6: {}

frontend/src/app/main/data/plugins.cljs

@@ -66,22 +66,22 @@
       (update-in state [:workspace-local :open-plugins] (fnil disj #{}) id))))
 
 (defn- load-plugin!
-  [{:keys [plugin-id name description host code icon permissions]}]
+  [{:keys [plugin-id name version description host code icon permissions]}]
   (try
     (st/emit! (save-current-plugin plugin-id)
               (reset-plugin-flags plugin-id))
 
-    (.ɵloadPlugin
+    (.ɵloadPlugin ^js ug/global
-     ^js ug/global
+                  #js {:pluginId plugin-id
-     #js {:pluginId plugin-id
+                       :name name
-          :name name
+                       :description description
-          :description description
+                       :version version
-          :host host
+                       :host host
-          :code code
+                       :code code
-          :icon icon
+                       :icon icon
-          :permissions (apply array permissions)}
+                       :permissions (apply array permissions)}
-     (fn []
+                  (fn []
-       (st/emit! (remove-current-plugin plugin-id))))
+                    (st/emit! (remove-current-plugin plugin-id))))
 
     (catch :default e
       (st/emit! (remove-current-plugin plugin-id))

frontend/src/app/main/data/workspace/drawing/box.cljs

@@ -43,13 +43,9 @@
       (> dy dx)
       (assoc :x (- (:x point) (* sx (- dy dx)))))))
 
-(defn resize-shape [{:keys [x y width height] :as shape} initial point lock? mod? snap-pixel?]
+(defn resize-shape [{:keys [x y width height] :as shape} initial point lock? mod?]
   (if (and (some? x) (some? y) (some? width) (some? height))
-    (let [draw-rect (cond-> (grc/make-rect initial (cond-> point lock? (adjust-ratio initial)))
+    (let [draw-rect  (grc/make-rect initial (cond-> point lock? (adjust-ratio initial)))
-                      snap-pixel?
-                      (-> (update :width max 1)
-                          (update :height max 1)))
-
           shape-rect (grc/make-rect x y width height)
 
           scalev     (gpt/point (/ (:width draw-rect)
@@ -68,8 +64,8 @@
                                    (ctm/move movev)))))
     shape))
 
-(defn- update-drawing [state initial point lock? mod? snap-pixel?]
+(defn update-drawing [state initial point lock? mod?]
-  (update-in state [:workspace-drawing :object] resize-shape initial point lock? mod? snap-pixel?))
+  (update-in state [:workspace-drawing :object] resize-shape initial point lock? mod?))
 
 (defn move-drawing
   [{:keys [x y]}]
@@ -124,7 +120,7 @@
                     (rx/map move-drawing))
 
                (->> ms/mouse-position
-                    (rx/filter #(> (* (gpt/distance % initial) zoom) 10))
+                    (rx/filter #(> (gpt/distance % initial) (/ 2 zoom)))
                     ;; Take until before the snap calculation otherwise we could cancel the snap in the worker
                     ;; and its a problem for fast moving drawing
                     (rx/take-until stopper)
@@ -135,7 +131,7 @@
                             (rx/map (partial array/conj current)))))
                     (rx/map
                      (fn [[_ shift? mod? point]]
-                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step 1)) shift? mod? snap-pixel?))))))
+                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step 1)) shift? mod?))))))
 
          (->> (rx/of (common/handle-finish-drawing))
               (rx/delay 100)))))))

frontend/src/app/main/data/workspace/texts.cljs

@@ -32,7 +32,6 @@
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.router :as rt]
-   [app.render-wasm.api :as wasm.api]
    [app.util.text-editor :as ted]
    [app.util.text.content.styles :as styles]
    [app.util.timers :as ts]
@@ -509,12 +508,12 @@
      ptk/EffectEvent
      (effect [_ state _]
        (when (features/active-feature? state "text-editor/v2")
-         (when-let [instance (:workspace-editor state)]
+         (let [instance (:workspace-editor state)
-           (let [styles   (some-> (editor.v2/getCurrentStyle instance)
+               styles   (some-> (editor.v2/getCurrentStyle instance)
-                                  (styles/get-styles-from-style-declaration :removed-mixed true)
+                                (styles/get-styles-from-style-declaration :removed-mixed true)
-                                  ((comp update-node-fn migrate-node))
+                                ((comp update-node-fn migrate-node))
-                                  (styles/attrs->styles))]
+                                (styles/attrs->styles))]
-             (editor.v2/applyStylesToSelection instance styles))))))))
+           (editor.v2/applyStylesToSelection instance styles)))))))
 
 ;; --- RESIZE UTILS
 
@@ -778,30 +777,17 @@
              (rx/of (v2-update-text-editor-styles id attrs)))
 
            (when (features/active-feature? state "render-wasm/v1")
-             (rx/concat
+             (rx/of (dwwt/resize-wasm-text-debounce id)))))))
-              ;; Apply style to selected spans and sync content
-              (when (wasm.api/text-editor-is-active?)
-                (let [span-attrs (select-keys attrs txt/text-node-attrs)]
-                  (when (not (empty? span-attrs))
-                    (let [result (wasm.api/apply-style-to-selection span-attrs)]
-                      (when result
-                        (rx/of (v2-update-text-shape-content
-                                (:shape-id result) (:content result)
-                                :update-name? true)))))))
-              ;; Resize (with delay for font-id changes)
-              (cond->> (rx/of (dwwt/resize-wasm-text id))
-                (contains? attrs :font-id)
-                (rx/delay 200))))))))
 
     ptk/EffectEvent
     (effect [_ state _]
       (when (features/active-feature? state "text-editor/v2")
-        (when-let [instance (:workspace-editor state)]
+        (let [instance (:workspace-editor state)
-          (let [attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
+              attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
-                                          (styles/get-styles-from-style-declaration))
+                                        (styles/get-styles-from-style-declaration))
-                overriden-attrs (merge attrs-to-override attrs)
+              overriden-attrs (merge attrs-to-override attrs)
-                styles  (styles/attrs->styles overriden-attrs)]
+              styles  (styles/attrs->styles overriden-attrs)]
-            (editor.v2/applyStylesToSelection instance styles)))))))
+          (editor.v2/applyStylesToSelection instance styles))))))
 
 (defn update-all-attrs
   [ids attrs]

frontend/src/app/main/data/workspace/transforms.cljs

@@ -409,7 +409,7 @@
              modif-tree (dwm/build-modif-tree ids objects get-modifier)]
 
          (if (features/active-feature? state "render-wasm/v1")
-           (rx/of (dwm/apply-wasm-modifiers modif-tree (assoc options :ignore-snap-pixel true)))
+           (rx/of (dwm/apply-wasm-modifiers modif-tree {:ignore-snap-pixel true}))
 
            (let [modif-tree (gm/set-objects-modifiers modif-tree objects)]
              (rx/of (dwm/apply-modifiers* objects modif-tree nil options)))))))))

frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs

@@ -11,7 +11,6 @@
    [app.common.math :as mth]
    [app.common.types.color :as cc]
    [app.util.dom :as dom]
-   [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
 (defn parse-hex
@@ -68,60 +67,34 @@
             (when (some? val)
               (setup-hex-color val))))
 
-        apply-property-change
-        (fn [property val]
-          (let [val (case property
-                      :s (/ val 100)
-                      :v (value->hsv-value val)
-                      :alpha (/ val 100)
-                      val)]
-            (cond
-              (= property :alpha)
-              (on-change {:alpha val})
-
-              (#{:r :g :b} property)
-              (let [{:keys [r g b]} (merge color (hash-map property val))
-                    hex (cc/rgb->hex [r g b])
-                    [h s v] (cc/hex->hsv hex)]
-                (on-change {:hex hex
-                            :h h :s s :v v
-                            :r r :g g :b b}))
-
-              :else
-              (let [{:keys [h s v]} (merge color (hash-map property val))
-                    hex (cc/hsv->hex [h s v])
-                    [r g b] (cc/hex->rgb hex)]
-                (on-change {:hex hex
-                            :h h :s s :v v
-                            :r r :g g :b b})))))
-
         on-change-property
         (fn [property max-value]
           (fn [e]
-            (let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value))]
+            (let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value))
-              (when (some? val)
+                  val (case property
-                (apply-property-change property val)))))
+                        :s (/ val 100)
+                        :v (value->hsv-value val)
+                        val)]
+              (when (not (nil? val))
+                (if (#{:r :g :b} property)
+                  (let [{:keys [r g b]} (merge color (hash-map property val))
+                        hex (cc/rgb->hex [r g b])
+                        [h s v] (cc/hex->hsv hex)]
+                    (on-change {:hex hex
+                                :h h :s s :v v
+                                :r r :g g :b b}))
 
-        on-key-down-step
+                  (let [{:keys [h s v]} (merge color (hash-map property val))
-        (fn [max-value on-step]
+                        hex (cc/hsv->hex [h s v])
-          (fn [e]
+                        [r g b] (cc/hex->rgb hex)]
-            (let [up?   (kbd/up-arrow? e)
+                    (on-change {:hex hex
-                  down? (kbd/down-arrow? e)]
+                                :h h :s s :v v
-              (when (and (or up? down?)
+                                :r r :g g :b b})))))))
-                         (or (kbd/shift? e) (kbd/alt? e)))
-                (dom/prevent-default e)
-                (when-let [current-value (-> e dom/get-target-val d/parse-double)]
-                  (let [step      (cond
-                                    (kbd/shift? e) (if up? 10 -10)
-                                    (kbd/alt? e)   (if up? 0.1 -0.1))
-                        new-value (mth/clamp (+ current-value step) 0 max-value)
-                        node      (dom/get-target e)]
-                    (dom/set-value! node new-value)
-                    (on-step new-value)))))))
 
-        on-key-down-property
+        on-change-opacity
-        (fn [property max-value]
+        (fn [e]
-          (on-key-down-step max-value #(apply-property-change property %)))]
+          (when-let [new-alpha (-> e dom/get-target-val (mth/clamp 0 100) (/ 100))]
+            (on-change {:alpha new-alpha})))]
 
 
     ;; Updates the inputs values when a property is changed in the parent
@@ -154,8 +127,7 @@
                    :min 0
                    :max 255
                    :default-value red
-                   :on-change (on-change-property :r 255)
+                   :on-change (on-change-property :r 255)}]]
-                   :on-key-down (on-key-down-property :r 255)}]]
          [:div {:class (stl/css :input-wrapper)}
           [:label {:for "green-value" :class (stl/css :input-label)} "G"]
           [:input {:id "green-value"
@@ -164,8 +136,7 @@
                    :min 0
                    :max 255
                    :default-value green
-                   :on-change (on-change-property :g 255)
+                   :on-change (on-change-property :g 255)}]]
-                   :on-key-down (on-key-down-property :g 255)}]]
          [:div {:class (stl/css :input-wrapper)}
           [:label {:for "blue-value" :class (stl/css :input-label)} "B"]
           [:input {:id "blue-value"
@@ -174,8 +145,7 @@
                    :min 0
                    :max 255
                    :default-value blue
-                   :on-change (on-change-property :b 255)
+                   :on-change (on-change-property :b 255)}]]]
-                   :on-key-down (on-key-down-property :b 255)}]]]
 
         [:*
          [:div {:class (stl/css :input-wrapper)}
@@ -186,8 +156,7 @@
                    :min 0
                    :max 360
                    :default-value hue
-                   :on-change (on-change-property :h 360)
+                   :on-change (on-change-property :h 360)}]]
-                   :on-key-down (on-key-down-property :h 360)}]]
          [:div {:class (stl/css :input-wrapper)}
           [:label {:for "saturation-value" :class (stl/css :input-label)} "S"]
           [:input {:id "saturation-value"
@@ -197,8 +166,7 @@
                    :max 100
                    :step 1
                    :default-value saturation
-                   :on-change (on-change-property :s 100)
+                   :on-change (on-change-property :s 100)}]]
-                   :on-key-down (on-key-down-property :s 100)}]]
          [:div {:class (stl/css :input-wrapper)}
           [:label {:for "value-value" :class (stl/css :input-label)} "V"]
           [:input {:id "value-value"
@@ -207,8 +175,7 @@
                    :min 0
                    :max 100
                    :default-value value
-                   :on-change (on-change-property :v 100)
+                   :on-change (on-change-property :v 100)}]]])]
-                   :on-key-down (on-key-down-property :v 100)}]]])]
      [:div {:class (stl/css :hex-alpha-wrapper)}
       [:div {:class (stl/css-case :input-wrapper true
                                   :hex true)}
@@ -228,5 +195,4 @@
                   :step 1
                   :max 100
                   :default-value (if (= alpha :multiple) "" alpha)
-                  :on-change (on-change-property :alpha 100)
+                  :on-change on-change-opacity}]])]]))
-                  :on-key-down (on-key-down-property :alpha 100)}]])]]))

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs

@@ -352,9 +352,11 @@
                 max-height (max height selrect-height)
                 valign (-> shape :content :vertical-align)
                 y (:y selrect)
-                y (case valign
+                y (if (and valign (> height selrect-height))
-                    "bottom" (+ y (- selrect-height height))
+                    (case valign
-                    "center" (+ y (/ (- selrect-height height) 2))
+                      "bottom" (- y (- height selrect-height))
+                      "center" (- y (/ (- height selrect-height) 2))
+                      y)
                     y)]
             [(assoc selrect :y y :width max-width :height max-height) transform])
 

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss

@@ -29,23 +29,6 @@
 
   color: transparent;
 
-  // Match Skia's text layout precision: prevent browser text-size
-  // adjustments and ensure consistent kerning across browsers.
-  text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  font-kerning: normal;
-
-  &::selection,
-  *::selection {
-    color: transparent;
-    -webkit-text-fill-color: transparent; // WebKit/Safari
-  }
-
-  &::-moz-selection,
-  *::-moz-selection {
-    color: transparent;
-  }
-
   [data-itype="paragraph"] {
     line-height: inherit;
     user-select: text;

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -70,7 +70,7 @@
 
         on-click
         (mf/use-fn
-         (mf/deps id current-page-id)
+         (mf/deps id)
          (fn []
            ;; For the wasm renderer, apply a blur effect to the viewport canvas
            ;; when we navigate to a different page.

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -19,14 +19,10 @@
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.path :as dwdp]
    [app.main.data.workspace.specialized-panel :as-alias dwsp]
-   [app.main.data.workspace.texts :as dwt]
-   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.workspace.sidebar.assets.components :as wsac]
    [app.main.ui.workspace.viewport.viewport-ref :as uwvv]
-   [app.render-wasm.api :as wasm.api]
-   [app.render-wasm.wasm :as wasm.wasm]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
    [app.util.dom.normalize-wheel :as nw]
@@ -95,17 +91,7 @@
                          ::dwsp/interrupt)
 
                (when (and (not= edition id) (or text-editing? grid-editing?))
-                 (st/emit! (dw/clear-edition-mode))
+                 (st/emit! (dw/clear-edition-mode)))
-                 ;; Sync and stop WASM text editor when exiting edit mode
-                 (when (and text-editing?
-                            (features/active-feature? @st/state "render-wasm/v1")
-                            wasm.wasm/context-initialized?)
-                   (when-let [{:keys [shape-id content]} (wasm.api/text-editor-sync-content)]
-                     (st/emit! (dwt/v2-update-text-shape-content
-                                shape-id content
-                                :update-name? true
-                                :finalize? true)))
-                   (wasm.api/text-editor-stop)))
 
                (when (and (not text-editing?)
                           (not blocked)
@@ -198,20 +184,6 @@
                     (not drawing-tool))
            (st/emit! (dw/select-shape (:id @hover) shift?)))
 
-         ;; If clicking on a text shape and wasm render is enabled, forward cursor position
-         (when (and hovering?
-                    (not @space?)
-                    edition  ;; Only when already in edit mode
-                    (not drawing-path?)
-                    (not drawing-tool))
-           (let [hover-shape @hover]
-             (when (and (= :text (:type hover-shape))
-                        (features/active-feature? @st/state "text-editor-wasm/v1")
-                        wasm.wasm/context-initialized?)
-               (let [raw-pt (dom/get-client-position event)]
-                 ;; FIXME
-                 (wasm.api/text-editor-set-cursor-from-point (.-x raw-pt) (.-y raw-pt))))))
-
          (when (and @z?
                     (not @space?)
                     (not edition)
@@ -251,15 +223,8 @@
             (when (and (not drawing-path?) shape)
               (cond
                 (and editable? (not= id edition) (not read-only?))
-                (do
+                (st/emit! (dw/select-shape id)
-                  (st/emit! (dw/select-shape id)
+                          (dw/start-editing-selected))
-                            (dw/start-editing-selected))
-                  ;; If using wasm text-editor, notify WASM to start editing this shape
-                  ;; and set cursor position from the double-click location
-                  (when (and (= type :text)
-                             (features/active-feature? @st/state "text-editor-wasm/v1")
-                             wasm.wasm/context-initialized?)
-                    (wasm.api/text-editor-start id)))
 
                 (some? selected-shape)
                 (do

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -164,6 +164,7 @@
                         ;; for the release of the z key
                         (when-not ^boolean value
                           (reset! z* false))))
+
     (hooks/use-stream kbd-zoom-s
                       (fn [kevent]
                         (dom/prevent-default kevent)
@@ -315,7 +316,7 @@
                                 (and (cfh/group-shape? objects %)
                                      (not (contains? child-parent? %)))
                                 (and (features/active-feature? @st/state "render-wasm/v1")
-                                     (cfh/text-shape? (get objects %))
+                                     (cfh/text-shape? objects %)
                                      (not (wasm.api/intersect-position-in-shape % @last-point-ref)))))))
 
                remove-measure-xf

frontend/src/app/main/ui/workspace/viewport/viewport_ref.cljs

@@ -66,14 +66,6 @@
             (gpt/divide zoom)
             (gpt/add box))))))
 
-(defn point->viewport-relative
-  "Convert client coordinates to viewport-relative coordinates.
-   Unlike point->viewport, this does NOT convert to canvas coordinates -
-   it just subtracts the viewport's bounding rect offset."
-  [pt]
-  (when (some? @viewport-brect)
-    (gpt/subtract pt @viewport-brect)))
-
 (defn inside-viewport?
   [target]
   (dom/is-child? @viewport-ref target))

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -54,7 +54,6 @@
    [app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
    [app.main.ui.workspace.viewport.widgets :as widgets]
    [app.render-wasm.api :as wasm.api]
-   [app.render-wasm.text-editor-input :refer [text-editor-input]]
    [app.util.debug :as dbg]
    [app.util.text-editor :as ted]
    [beicon.v2.core :as rx]
@@ -408,14 +407,7 @@
 
       (when picking-color?
         [:> pixel-overlay/pixel-overlay-wasm* {:viewport-ref viewport-ref
-                                               :canvas-ref canvas-ref}])
+                                               :canvas-ref canvas-ref}])]
-
-      ;; WASM text editor contenteditable (must be outside SVG to work)
-      (when (and show-text-editor?
-                 (features/active-feature? @st/state "text-editor-wasm/v1"))
-        [:& text-editor-input {:shape editing-shape
-                               :zoom zoom
-                               :vbox vbox}])]
 
      [:canvas {:id "render"
                :data-testid "canvas-wasm-shapes"
@@ -460,10 +452,7 @@
                 :height (max 0 (- (:height vbox) rule-area-size))}]]]
 
       [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
-       ;; Text editor handling:
+       (when show-text-editor?
-       ;; - When text-editor-wasm/v1 is active, contenteditable is rendered in viewport-overlays (HTML DOM)
-       (when (and show-text-editor?
-                  (not (features/active-feature? @st/state "text-editor-wasm/v1")))
          (if (features/active-feature? @st/state "text-editor/v2")
            [:& editor-v2/text-editor {:shape editing-shape
                                       :canvas-ref canvas-ref

frontend/src/app/plugins/register.cljs

@@ -78,6 +78,7 @@
         (d/without-nils
          {:plugin-id plugin-id
           :url (str plugin-url)
+          :version vers
           :name name
           :description desc
           :host origin
@@ -126,6 +127,6 @@
 
 (defn check-permission
   [plugin-id permission]
-  (or (= plugin-id "00000000-0000-0000-0000-000000000000")
+  (or (= plugin-id "TEST")
       (let [{:keys [permissions]} (dm/get-in @registry [:data plugin-id])]
         (contains? permissions permission))))

frontend/src/app/plugins/shape.cljs

@@ -11,7 +11,6 @@
    [app.common.files.helpers :as cfh]
    [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
-   [app.common.json :as json]
    [app.common.path-names :as cpn]
    [app.common.record :as crc]
    [app.common.schema :as sm]
@@ -1296,7 +1295,7 @@
                         (get :applied-tokens))]
                 (reduce
                  (fn [acc [prop name]]
-                   (obj/set! acc (json/write-camel-key prop) name))
+                   (obj/set! acc (d/name prop) name))
                  #js {}
                  tokens)))}
 

frontend/src/app/plugins/tokens.cljs

@@ -16,7 +16,7 @@
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
-   ;; [app.plugins.shape :as shape]
+   [app.plugins.shape :as shape]
    [app.plugins.utils :as u]
    [app.util.object :as obj]
    [beicon.v2.core :as rx]
@@ -113,17 +113,13 @@
 
     :applyToShapes
     {:schema [:tuple
-              ;; FIXME: the schema decoder is interpreting the array of shape-proxys and converting
+              [:vector [:fn shape/shape-proxy?]]
-              ;;        them to plain maps. For now we adapt the schema to accept it, but the decoder
+              [:maybe [:set ::sm/keyword]]]
-              ;;        should be fixed to keep the original proxy objects coming from the plugin.
-              ;; [:vector [:fn shape/shape-proxy?]]
-              [:vector [:map [:id ::sm/uuid]]]
-              [:maybe [:set [:set [:and ::sm/keyword [:fn cto/token-attr?]]]]]]
      :fn (fn [shapes attrs]
            (apply-token-to-shapes file-id set-id id (map :id shapes) attrs))}
 
     :applyToSelected
-    {:schema [:tuple [:maybe [:set [:and ::sm/keyword [:fn cto/token-attr?]]]]]
+    {:schema [:tuple [:maybe [:set ::sm/keyword]]]
      :fn (fn [attrs]
            (let [selected (get-in @st/state [:workspace-local :selected])]
              (apply-token-to-shapes file-id set-id id selected attrs)))}))

frontend/src/app/render_wasm/api.cljs

@@ -39,7 +39,6 @@
    [app.render-wasm.serializers :as sr]
    [app.render-wasm.serializers.color :as sr-clr]
    [app.render-wasm.svg-filters :as svg-filters]
-   [app.render-wasm.text-editor :as text-editor]
    [app.render-wasm.wasm :as wasm]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -75,18 +74,6 @@
 ;; Threshold below which we use synchronous processing (no chunking overhead)
 (def ^:const ASYNC_THRESHOLD 100)
 
-;; Re-export public WebGL functions
-(def capture-canvas-pixels webgl/capture-canvas-pixels)
-(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
-(def clear-canvas-pixels webgl/clear-canvas-pixels)
-
-;; Re-export public text editor functions
-(def text-editor-start text-editor/text-editor-start)
-(def text-editor-stop text-editor/text-editor-stop)
-(def text-editor-set-cursor-from-point text-editor/text-editor-set-cursor-from-point)
-(def text-editor-is-active? text-editor/text-editor-is-active?)
-(def text-editor-sync-content text-editor/text-editor-sync-content)
-
 (def dpr
   (if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
 
@@ -122,36 +109,11 @@
    (mf/element object-svg #js {:shape shape})
    (rds/renderToStaticMarkup)))
 
-;; forward declare helpers so render can call them
-(declare request-render)
-(declare set-shape-vertical-align fonts-from-text-content)
-
 ;; This should never be called from the outside.
 (defn- render
   [timestamp]
   (when (and wasm/context-initialized? (not @wasm/context-lost?))
     (h/call wasm/internal-module "_render" timestamp)
-
-    ;; Update text editor blink (so cursor toggles) using the same timestamp
-    (try
-      (when wasm/context-initialized?
-        (text-editor/text-editor-update-blink timestamp)
-        ;; Render text editor overlay on top of main canvas (only if feature enabled)
-        ;; Determine if text-editor-wasm feature is active without requiring
-        ;; app.main.features to avoid circular dependency: check runtime and
-        ;; persisted feature sets in the store state.
-        (let [runtime-features (get @st/state :features-runtime)
-              enabled-features (get @st/state :features)]
-          (when (or (contains? runtime-features "text-editor-wasm/v1")
-                    (contains? enabled-features "text-editor-wasm/v1"))
-            (text-editor/text-editor-render-overlay)))
-        ;; Poll for editor events; if any event occurs, trigger a re-render
-        (let [ev (text-editor/text-editor-poll-event)]
-          (when (and ev (not= ev 0))
-            (request-render "text-editor-event"))))
-      (catch :default e
-        (js/console.error "text-editor overlay/update failed:" e)))
-
     (set! wasm/internal-frame-id nil)
     (ug/dispatch! (ug/event "penpot:wasm:render"))))
 
@@ -225,6 +187,25 @@
 
 (declare get-text-dimensions)
 
+(defn update-text-rect!
+  [id]
+  (when wasm/context-initialized?
+    (let [dimensions (get-text-dimensions id)
+          page-id (:current-page-id @st/state)]
+      (mw/emit!
+       {:cmd :index/update-text-rect
+        :page-id page-id
+        :shape-id id
+        :dimensions dimensions}))))
+
+
+(defn- ensure-text-content
+  "Guarantee that the shape always sends a valid text tree to WASM. When the
+  content is nil (freshly created text) we fall back to
+  tc/default-text-content so the renderer receives typography information."
+  [content]
+  (or content (tc/v2-default-text-content)))
+
 (defn use-shape
   [id]
   (when wasm/context-initialized?
@@ -235,47 +216,6 @@
               (aget buffer 2)
               (aget buffer 3)))))
 
-(defn set-shape-text-content
-  "This function sets shape text content and returns a stream that loads the needed fonts asynchronously"
-  [shape-id content]
-
-  ;; Cache content for text editor sync
-  (text-editor/cache-shape-text-content! shape-id content)
-
-  (h/call wasm/internal-module "_clear_shape_text")
-
-  (set-shape-vertical-align (get content :vertical-align))
-
-  (let [fonts         (f/get-content-fonts content)
-        fallback-fonts (fonts-from-text-content content true)
-        all-fonts (concat fonts fallback-fonts)
-        result (f/store-fonts all-fonts)]
-    (f/load-fallback-fonts-for-editor! fallback-fonts)
-    (h/call wasm/internal-module "_update_shape_text_layout")
-    result))
-
-(defn apply-style-to-selection
-  "Apply style attrs to the currently selected text spans.
-   Updates the cached content, pushes to WASM, and returns {:shape-id :content} for saving."
-  [attrs]
-  (text-editor/apply-style-to-selection attrs use-shape set-shape-text-content))
-
-(defn update-text-rect!
-  [id]
-  (when wasm/context-initialized?
-    (mw/emit!
-     {:cmd :index/update-text-rect
-      :page-id (:current-page-id @st/state)
-      :shape-id id
-      :dimensions (get-text-dimensions id)})))
-
-(defn- ensure-text-content
-  "Guarantee that the shape always sends a valid text tree to WASM. When the
-  content is nil (freshly created text) we fall back to
-  tc/default-text-content so the renderer receives typography information."
-  [content]
-  (or content (tc/v2-default-text-content)))
-
 (defn set-parent-id
   [id]
   (let [buffer (uuid/get-u32 id)]
@@ -919,6 +859,22 @@
 
           (if fallback-fonts-only? updated-fonts fallback-fonts))))))
 
+(defn set-shape-text-content
+  "This function sets shape text content and returns a stream that loads the needed fonts asynchronously"
+  [shape-id content]
+
+  (h/call wasm/internal-module "_clear_shape_text")
+
+  (set-shape-vertical-align (get content :vertical-align))
+
+  (let [fonts          (f/get-content-fonts content)
+        fallback-fonts (fonts-from-text-content content true)
+        all-fonts      (concat fonts fallback-fonts)
+        result         (f/store-fonts all-fonts)]
+    (f/load-fallback-fonts-for-editor! fallback-fonts)
+    (f/update-text-layout shape-id)
+    result))
+
 (defn set-shape-grow-type
   [grow-type]
   (h/call wasm/internal-module "_set_shape_grow_type" (sr/translate-grow-type grow-type)))
@@ -1116,7 +1072,7 @@
 (defn- set-objects-async
   "Asynchronously process shapes in chunks, yielding to the browser between chunks.
    Returns a promise that resolves when all shapes are processed.
-
+   
    Renders a preview only periodically during loading to show progress,
    then does a full tile-based render at the end."
   [shapes render-callback]
@@ -1601,41 +1557,33 @@
               (persistent! result)))
 
           result
-          (into []
+          (->> result
-                (keep
+               (mapv
-                 (fn [{:keys [paragraph span start-pos end-pos direction x y width height]}]
+                (fn [{:keys [paragraph span start-pos end-pos direction x y width height]}]
-                   (let [content (:content shape)
+                  (let [content (:content shape)
-                         element (-> content :children
+                        element (-> content :children
-                                     (get 0) :children ;; paragraph-set
+                                    (get 0) :children ;; paragraph-set
-                                     (get paragraph) :children ;; paragraph
+                                    (get paragraph) :children ;; paragraph
-                                     (get span))
+                                    (get span))
-                         element-text (:text element)]
+                        text (subs (:text element) start-pos end-pos)]
 
-                     ;; Add comprehensive nil-safety checks
+                    (d/patch-object
-                     (when (and element
+                     txt/default-text-attrs
-                                element-text
+                     (d/without-nils
-                                (>= start-pos 0)
+                      {:x x
-                                (<= end-pos (count element-text))
+                       :y (+ y height)
-                                (<= start-pos end-pos))
+                       :width width
-                       (let [text (subs element-text start-pos end-pos)]
+                       :height height
-                         (d/patch-object
+                       :direction       (dr/translate-direction direction)
-                          txt/default-text-attrs
+                       :font-family     (get element :font-family)
-                          (d/without-nils
+                       :font-size       (get element :font-size)
-                           {:x x
+                       :font-weight     (get element :font-weight)
-                            :y (+ y height)
+                       :text-transform  (get element :text-transform)
-                            :width width
+                       :text-decoration (get element :text-decoration)
-                            :height height
+                       :letter-spacing  (get element :letter-spacing)
-                            :direction       (dr/translate-direction direction)
+                       :font-style      (get element :font-style)
-                            :font-family     (get element :font-family)
+                       :fills           (d/nilv (get element :fills) [{:fill-color "#000000"}])
-                            :font-size       (get element :font-size)
+                       :text            text}))))))]
-                            :font-weight     (get element :font-weight)
-                            :text-transform  (get element :text-transform)
-                            :text-decoration (get element :text-decoration)
-                            :letter-spacing  (get element :letter-spacing)
-                            :font-style      (get element :font-style)
-                            :fills           (get element :fills)
-                            :text            text})))))))
-                result)]
       (mem/free)
 
       result)))
@@ -1669,4 +1617,7 @@
                 (p/resolved false)))))
       (p/resolved false))))
 
-
+;; Re-export public WebGL functions
+(def capture-canvas-pixels webgl/capture-canvas-pixels)
+(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
+(def clear-canvas-pixels webgl/clear-canvas-pixels)

frontend/src/app/render_wasm/api/fonts.cljs

@@ -320,7 +320,7 @@
      :style-name style
      :weight weight
      :emoji? emoji?
-     :fallback? fallback?
+     :fallbck? fallback?
      :asset-id asset-id}))
 
 (defn store-font

frontend/src/app/render_wasm/api/shared.js

@@ -240,12 +240,3 @@ export const RawGrowType = {
   "auto-height": 2,
 };
 
-export const CursorDirection = {
-  "backward": 0,
-  "forward": 1,
-  "line-before": 2,
-  "line-after": 3,
-  "line-start": 4,
-  "line-end": 5,
-};
-

frontend/src/app/render_wasm/mem.cljs

@@ -61,29 +61,6 @@
   []
   (h/call wasm/internal-module "_free_bytes"))
 
-(defn read-string
-  "Read a UTF-8 string from WASM memory given a byte pointer/offset.
-   Uses Emscripten's UTF8ToString to decode the string."
-  [ptr]
-  (h/call wasm/internal-module "UTF8ToString" ptr))
-
-(defn read-null-terminated-string
-  "Read a null-terminated UTF-8 string from WASM memory.
-   Manually reads bytes until null terminator and decodes using TextDecoder."
-  [ptr]
-  (when (and ptr (not (zero? ptr)))
-    (let [heap (get-heap-u8)
-          ;; Find the null terminator
-          end-idx (loop [idx ptr]
-                    (if (zero? (aget heap idx))
-                      idx
-                      (recur (inc idx))))
-          ;; Extract the bytes (excluding null terminator)
-          bytes (.slice heap ptr end-idx)
-          ;; Decode using TextDecoder
-          decoder (js/TextDecoder. "utf-8")]
-      (.decode decoder bytes))))
-
 (defn slice
   "Returns a copy of a portion of a typed array into a new typed array
   object selected from start to end."

frontend/src/app/render_wasm/text_editor.cljs

@@ -1,300 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.render-wasm.text-editor
-  "Text editor WASM bindings"
-  (:require
-   [app.common.uuid :as uuid]
-   [app.render-wasm.helpers :as h]
-   [app.render-wasm.mem :as mem]
-   [app.render-wasm.wasm :as wasm]))
-
-(defn text-editor-start
-  [id]
-  (when wasm/context-initialized?
-    (let [buffer (uuid/get-u32 id)]
-      (h/call wasm/internal-module "_text_editor_start"
-              (aget buffer 0)
-              (aget buffer 1)
-              (aget buffer 2)
-              (aget buffer 3)))))
-
-(defn text-editor-set-cursor-from-point
-  [x y]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_set_cursor_from_point" x y)))
-
-(defn text-editor-update-blink
-  [timestamp-ms]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_update_blink" timestamp-ms)))
-
-(defn text-editor-render-overlay
-  []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_render_overlay")))
-
-(defn text-editor-poll-event
-  []
-  (when wasm/context-initialized?
-    (let [res (h/call wasm/internal-module "_text_editor_poll_event")]
-      res)))
-
-(defn text-editor-insert-text
-  [text]
-  (when wasm/context-initialized?
-    (let [encoder (js/TextEncoder.)
-          buf (.encode encoder text)
-          heapu8 (mem/get-heap-u8)
-          size (mem/size buf)
-          offset (mem/alloc size)]
-      (mem/write-buffer offset heapu8 buf)
-      (h/call wasm/internal-module "_text_editor_insert_text")
-      (mem/free))))
-
-(defn text-editor-delete-backward []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_delete_backward")))
-
-(defn text-editor-delete-forward []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_delete_forward")))
-
-(defn text-editor-insert-paragraph []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_insert_paragraph")))
-
-(defn text-editor-move-cursor
-  [direction extend-selection]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_move_cursor" direction (if extend-selection 1 0))))
-
-(defn text-editor-select-all
-  []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_select_all")))
-
-(defn text-editor-stop
-  []
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_stop")))
-
-(defn text-editor-is-active?
-  []
-  (when wasm/context-initialized?
-    (not (zero? (h/call wasm/internal-module "_text_editor_is_active")))))
-
-(defn text-editor-export-content
-  []
-  (when wasm/context-initialized?
-    (let [ptr (h/call wasm/internal-module "_text_editor_export_content")]
-      (when (and ptr (not (zero? ptr)))
-        (let [json-str (mem/read-null-terminated-string ptr)]
-          (mem/free)
-          (js/JSON.parse json-str))))))
-
-(defn text-editor-export-selection
-  "Export only the currently selected text as plain text from the WASM editor. Requires WASM support (_text_editor_export_selection)."
-  []
-  (when wasm/context-initialized?
-    (let [ptr (h/call wasm/internal-module "_text_editor_export_selection")]
-      (when (and ptr (not (zero? ptr)))
-        (let [text (mem/read-null-terminated-string ptr)]
-          (mem/free)
-          text)))))
-
-(defn text-editor-get-active-shape-id
-  []
-  (when wasm/context-initialized?
-    (try
-      (let [byte-offset (mem/alloc 16)
-            u32-offset (mem/->offset-32 byte-offset)
-            heap (mem/get-heap-u32)]
-        (h/call wasm/internal-module "_text_editor_get_active_shape_id" byte-offset)
-        (let [a (aget heap u32-offset)
-              b (aget heap (+ u32-offset 1))
-              c (aget heap (+ u32-offset 2))
-              d (aget heap (+ u32-offset 3))
-              result (when (or (not= a 0) (not= b 0) (not= c 0) (not= d 0))
-                       (uuid/from-unsigned-parts a b c d))]
-          (mem/free)
-          result))
-      (catch js/Error e
-        (js/console.error "[text-editor-get-active-shape-id] Error:" e)
-        nil))))
-
-(defn text-editor-get-selection
-  []
-  (when wasm/context-initialized?
-    (let [byte-offset (mem/alloc 16)
-          u32-offset  (mem/->offset-32 byte-offset)
-          heap        (mem/get-heap-u32)
-          active?     (h/call wasm/internal-module "_text_editor_get_selection" byte-offset)]
-      (try
-        (when (= active? 1)
-          {:anchor-para   (aget heap u32-offset)
-           :anchor-offset (aget heap (+ u32-offset 1))
-           :focus-para    (aget heap (+ u32-offset 2))
-           :focus-offset  (aget heap (+ u32-offset 3))})
-        (finally
-          (mem/free))))))
-
-(def ^:private shape-text-contents (atom {}))
-
-(defn- merge-exported-texts-into-content
-  "Merge exported span texts back into the existing content tree.
-
-  The WASM editor may split or merge paragraphs (Enter / Backspace at
-  paragraph boundary), so the exported structure can differ from the
-  original.  When extra paragraphs or spans appear we clone styling from
-  the nearest existing sibling; when fewer appear we truncate.
-
-  exported-texts  vector of vectors  [[\"span1\" \"span2\"] [\"p2s1\"]]
-  content         existing Penpot content map (root -> paragraph-set -> …)"
-  [content exported-texts]
-  (let [para-set       (first (get content :children))
-        orig-paras     (get para-set :children)
-        num-orig       (count orig-paras)
-        last-orig-para (when (seq orig-paras) (last orig-paras))
-        template-span  (when last-orig-para
-                         (-> last-orig-para :children last))
-        new-paras
-        (mapv (fn [para-idx exported-span-texts]
-                (let [orig-para (if (< para-idx num-orig)
-                                  (nth orig-paras para-idx)
-                                  (dissoc last-orig-para :children))
-                      orig-spans     (get orig-para :children)
-                      num-orig-spans (count orig-spans)
-                      last-orig-span (when (seq orig-spans) (last orig-spans))]
-                  (assoc orig-para :children
-                         (mapv (fn [span-idx new-text]
-                                 (let [orig-span (if (< span-idx num-orig-spans)
-                                                   (nth orig-spans span-idx)
-                                                   (or last-orig-span template-span))]
-                                   (assoc orig-span :text new-text)))
-                               (range (count exported-span-texts))
-                               exported-span-texts))))
-              (range (count exported-texts))
-              exported-texts)
-        new-para-set (assoc para-set :children new-paras)]
-    (assoc content :children [new-para-set])))
-
-(defn text-editor-sync-content
-  "Sync text content from the WASM text editor back to the frontend shape.
-
-  Exports the current span texts from WASM, merges them into the shape's
-  cached content tree (preserving per-span styling), and returns the
-  shape-id and the fully merged content map ready for
-  v2-update-text-shape-content."
-  []
-  (when (and wasm/context-initialized? (text-editor-is-active?))
-    (let [shape-id  (text-editor-get-active-shape-id)
-          new-texts (text-editor-export-content)]
-      (when (and shape-id new-texts)
-        (let [texts-clj (js->clj new-texts)
-              content   (get @shape-text-contents shape-id)]
-          (when content
-            (let [merged (merge-exported-texts-into-content content texts-clj)]
-              (swap! shape-text-contents assoc shape-id merged)
-              {:shape-id shape-id
-               :content  merged})))))))
-
-(defn cache-shape-text-content!
-  [shape-id content]
-  (when (some? content)
-    (swap! shape-text-contents assoc shape-id content)))
-
-(defn get-cached-content
-  [shape-id]
-  (get @shape-text-contents shape-id))
-
-(defn update-cached-content!
-  [shape-id content]
-  (swap! shape-text-contents assoc shape-id content))
-
-(defn- normalize-selection
-  "Given anchor/focus para+offset, return {:start-para :start-offset :end-para :end-offset}
-   ordered so start <= end."
-  [{:keys [anchor-para anchor-offset focus-para focus-offset]}]
-  (if (or (< anchor-para focus-para)
-          (and (= anchor-para focus-para) (<= anchor-offset focus-offset)))
-    {:start-para anchor-para :start-offset anchor-offset
-     :end-para focus-para :end-offset focus-offset}
-    {:start-para focus-para :start-offset focus-offset
-     :end-para anchor-para :end-offset anchor-offset}))
-
-(defn- apply-attrs-to-paragraph
-  "Apply attrs to spans within [sel-start, sel-end) char range of a single paragraph.
-   Splits spans at boundaries as needed."
-  [para sel-start sel-end attrs]
-  (let [spans  (:children para)
-        result (loop [spans spans
-                      pos   0
-                      acc   []]
-                 (if (empty? spans)
-                   acc
-                   (let [span      (first spans)
-                         text      (:text span)
-                         span-len  (count text)
-                         span-end  (+ pos span-len)
-                         ol-start  (max pos sel-start)
-                         ol-end    (min span-end sel-end)
-                         has-overlap? (< ol-start ol-end)]
-                     (if (not has-overlap?)
-                       (recur (rest spans) span-end (conj acc span))
-                       (let [before   (when (> ol-start pos)
-                                        (assoc span :text (subs text 0 (- ol-start pos))))
-                             selected (merge span attrs
-                                             {:text (subs text (- ol-start pos) (- ol-end pos))})
-                             after    (when (< ol-end span-end)
-                                        (assoc span :text (subs text (- ol-end pos))))]
-                         (recur (rest spans) span-end
-                                (-> acc
-                                    (into (keep identity [before selected after])))))))))]
-    (assoc para :children result)))
-
-(defn- para-char-count
-  [para]
-  (apply + (map (fn [span] (count (:text span))) (:children para))))
-
-(defn apply-style-to-selection
-  [attrs use-shape-fn set-shape-text-content-fn]
-  (when (and wasm/context-initialized? (text-editor-is-active?))
-    (let [shape-id (text-editor-get-active-shape-id)
-          sel      (text-editor-get-selection)]
-      (when (and shape-id sel)
-        (let [content (get @shape-text-contents shape-id)]
-          (when content
-            (let [{:keys [start-para start-offset end-para end-offset]}
-                  (normalize-selection sel)
-                  collapsed? (and (= start-para end-para) (= start-offset end-offset))
-                  para-set   (first (:children content))
-                  paras      (:children para-set)
-                  new-paras
-                  (when (not collapsed?)
-                    (mapv (fn [idx para]
-                            (cond
-                              (or (< idx start-para) (> idx end-para))
-                              para
-                              (= start-para end-para)
-                              (apply-attrs-to-paragraph para start-offset end-offset attrs)
-                              (= idx start-para)
-                              (apply-attrs-to-paragraph para start-offset (para-char-count para) attrs)
-                              (= idx end-para)
-                              (apply-attrs-to-paragraph para 0 end-offset attrs)
-                              :else
-                              (apply-attrs-to-paragraph para 0 (para-char-count para) attrs)))
-                          (range (count paras))
-                          paras))
-                  new-content (when new-paras
-                                (assoc content :children
-                                       [(assoc para-set :children new-paras)]))]
-              (when new-content
-                (swap! shape-text-contents assoc shape-id new-content)
-                (use-shape-fn shape-id)
-                (set-shape-text-content-fn shape-id new-content)
-                {:shape-id shape-id
-                 :content  new-content}))))))))

frontend/src/app/render_wasm/text_editor_input.cljs

@@ -1,240 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.render-wasm.text-editor-input
-  "Contenteditable DOM element for WASM text editor input"
-  (:require
-   [app.common.geom.shapes :as gsh]
-   [app.main.data.workspace.texts :as dwt]
-   [app.main.store :as st]
-   [app.render-wasm.api :as wasm.api]
-   [app.render-wasm.text-editor :as text-editor]
-   [app.util.dom :as dom]
-   [app.util.object :as obj]
-   [cuerdas.core :as str]
-   [goog.events :as events]
-   [rumext.v2 :as mf])
-  (:import goog.events.EventType))
-
-(defn- sync-wasm-text-editor-content!
-  "Sync WASM text editor content back to the shape via the standard
-  commit pipeline. Called after every text-modifying input."
-  [& {:keys [finalize?]}]
-  (when-let [{:keys [shape-id content]} (text-editor/text-editor-sync-content)]
-    (st/emit! (dwt/v2-update-text-shape-content
-               shape-id content
-               :update-name? true
-               :finalize? finalize?))))
-
-(mf/defc text-editor-input
-  "Contenteditable element positioned over the text shape to capture input events."
-  {::mf/wrap-props false}
-  [props]
-  (let [shape (obj/get props "shape")
-        zoom  (obj/get props "zoom")
-        vbox  (obj/get props "vbox")
-
-        contenteditable-ref (mf/use-ref nil)
-        composing?          (mf/use-state false)
-
-        ;; Calculate screen position from shape bounds
-        shape-bounds (gsh/shape->rect shape)
-        screen-x     (* (- (:x shape-bounds) (:x vbox)) zoom)
-        screen-y     (* (- (:y shape-bounds) (:y vbox)) zoom)
-        screen-w     (* (:width shape-bounds) zoom)
-        screen-h     (* (:height shape-bounds) zoom)]
-
-    ;; Focus contenteditable on mount
-    (mf/use-effect
-     (fn []
-       (when-let [node (mf/ref-val contenteditable-ref)]
-         (.focus node))
-       js/undefined))
-
-    ;; Animation loop for cursor blink
-    (mf/use-effect
-     (fn []
-       (let [raf-id (atom nil)
-             animate (fn animate []
-                       (when (text-editor/text-editor-is-active?)
-                         (wasm.api/request-render "cursor-blink")
-                         (reset! raf-id (js/requestAnimationFrame animate))))]
-         (animate)
-         (fn []
-           (when @raf-id
-             (js/cancelAnimationFrame @raf-id))))))
-
-    ;; Document-level keydown handler for control keys
-    (mf/use-effect
-     (fn []
-       (let [on-doc-keydown
-             (fn [e]
-               (when (and (text-editor/text-editor-is-active?)
-                          (not @composing?))
-                 (let [key    (.-key e)
-                       ctrl?  (or (.-ctrlKey e) (.-metaKey e))
-                       shift? (.-shiftKey e)]
-                   (cond
-                     ;; Escape: finalize and stop
-                     (= key "Escape")
-                     (do
-                       (dom/prevent-default e)
-                       (sync-wasm-text-editor-content! :finalize? true)
-                       (text-editor/text-editor-stop))
-
-                     ;; Ctrl+A: select all (key is "a" or "A" depending on platform)
-                     (and ctrl? (= (str/lower key) "a"))
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-select-all)
-                       (wasm.api/request-render "text-select-all"))
-
-                     ;; Enter
-                     (= key "Enter")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-insert-paragraph)
-                       (sync-wasm-text-editor-content!)
-                       (wasm.api/request-render "text-paragraph"))
-
-                     ;; Backspace
-                     (= key "Backspace")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-delete-backward)
-                       (sync-wasm-text-editor-content!)
-                       (wasm.api/request-render "text-delete-backward"))
-
-                     ;; Delete
-                     (= key "Delete")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-delete-forward)
-                       (sync-wasm-text-editor-content!)
-                       (wasm.api/request-render "text-delete-forward"))
-
-                     ;; Arrow keys
-                     (= key "ArrowLeft")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 0 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     (= key "ArrowRight")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 1 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     (= key "ArrowUp")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 2 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     (= key "ArrowDown")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 3 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     (= key "Home")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 4 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     (= key "End")
-                     (do
-                       (dom/prevent-default e)
-                       (text-editor/text-editor-move-cursor 5 shift?)
-                       (wasm.api/request-render "text-cursor-move"))
-
-                     ;; Let contenteditable handle text input via on-input
-                     :else nil))))]
-         (events/listen js/document EventType.KEYDOWN on-doc-keydown true)
-         (fn []
-           (events/unlisten js/document EventType.KEYDOWN on-doc-keydown true)))))
-
-    ;; Composition and input events
-    (let [on-composition-start
-          (mf/use-fn
-           (fn [_event]
-             (reset! composing? true)))
-
-          on-composition-end
-          (mf/use-fn
-           (fn [^js event]
-             (reset! composing? false)
-             (let [data (.-data event)]
-               (when data
-                 (text-editor/text-editor-insert-text data)
-                 (sync-wasm-text-editor-content!)
-                 (wasm.api/request-render "text-composition"))
-               (when-let [node (mf/ref-val contenteditable-ref)]
-                 (set! (.-textContent node) "")))))
-
-          on-paste
-          (mf/use-fn
-           (fn [^js event]
-             (dom/prevent-default event)
-             (let [clipboard-data (.-clipboardData event)
-                   text (.getData clipboard-data "text/plain")]
-               (when (and text (seq text))
-                 (text-editor/text-editor-insert-text text)
-                 (sync-wasm-text-editor-content!)
-                 (wasm.api/request-render "text-paste"))
-               (when-let [node (mf/ref-val contenteditable-ref)]
-                 (set! (.-textContent node) "")))))
-
-          on-copy
-          (mf/use-fn
-           (fn [^js event]
-             (when (text-editor/text-editor-is-active?)
-               (dom/prevent-default event)
-               (when (text-editor/text-editor-get-selection)
-                 (let [text (text-editor/text-editor-export-selection)]
-                   (.setData (.-clipboardData event) "text/plain" text))))))
-
-          on-input
-          (mf/use-fn
-           (fn [^js event]
-             (let [native-event (.-nativeEvent event)
-                   input-type   (.-inputType native-event)
-                   data         (.-data native-event)]
-               ;; Skip composition-related input events - composition-end handles those
-               (when (and (not @composing?)
-                          (not= input-type "insertCompositionText"))
-                 (when (and data (seq data))
-                   (text-editor/text-editor-insert-text data)
-                   (sync-wasm-text-editor-content!)
-                   (wasm.api/request-render "text-input"))
-                 (when-let [node (mf/ref-val contenteditable-ref)]
-                   (set! (.-textContent node) ""))))))]
-
-      [:div
-       {:ref contenteditable-ref
-        :contentEditable true
-        :suppressContentEditableWarning true
-        :on-composition-start on-composition-start
-        :on-composition-end on-composition-end
-        :on-input on-input
-        :on-paste on-paste
-        :on-copy on-copy
-        ;; FIXME on-click
-        ;; :on-click on-click
-        :id "text-editor-wasm-input"
-        ;; FIXME
-        :style {:position "absolute"
-                :left (str screen-x "px")
-                :top (str screen-y "px")
-                :width (str screen-w "px")
-                :height (str screen-h "px")
-                :opacity 0
-                :overflow "hidden"
-                :white-space "pre"
-                :cursor "text"
-                :z-index 10}}])))

frontend/test/frontend_tests/plugins/context_shapes_test.cljs

@@ -18,7 +18,7 @@
   (let [;; ==== Setup
         store   (ths/setup-store (cthf/sample-file :file1 :page-label :page1))
 
-        ^js context (api/create-context "00000000-0000-0000-0000-000000000000")
+        ^js context (api/create-context "TEST")
 
         _       (set! st/state store)
 

frontend/text-editor/README.md

@@ -82,26 +82,6 @@ The `TextEditor` contains a series of references to DOM elements, one of them is
 
 `ChangeController` is called by the `TextEditor` instance everytime a change is performed on the content of the `contenteditable` element.
 
-### Best practices
-
-#### Use `isType` functions
-
-Instead of handling elements by their properties like this:
-
-```javascript
-if (element.tagName === "SPAN") {
-  ...
-}
-```
-
-Use functions like `isParagraph`, `isTextSpan` or `isLineBreak`:
-
-```javascript
-if (isTextSpan(element)) {
-  ...
-}
-```
-
 ### Events
 
 - `change`: This event is dispatched every time a change is made in the editor. All changes are debounced to prevent dispatching too many change events. This event is also dispatched when there are pending change events and the user blurs the textarea element.

frontend/text-editor/src/editor/TextEditor.js

@@ -326,7 +326,9 @@ export class TextEditor extends EventTarget {
    * @param {FocusEvent} e
    */
   #onBlur = (e) => {
-    this.#changeController.notifyImmediately();
+    if (!this.isEmpty) {
+      this.#changeController.notifyImmediately();
+    }
     this.#selectionController.saveSelection();
     this.dispatchEvent(new FocusEvent(e.type, e));
   };
@@ -683,7 +685,7 @@ export function createRootFromString(string) {
  * Returns true if the passed object is a TextEditor
  * instance.
  *
- * @param {*} instance
+ * @param {TextEditor} instance
  * @returns {boolean}
  */
 export function isTextEditor(instance) {
@@ -714,7 +716,7 @@ export function getRoot(instance) {
   if (isTextEditor(instance)) {
     return instance.root;
   }
-  return null;
+  throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -754,7 +756,7 @@ export function getCurrentStyle(instance) {
   if (isTextEditor(instance)) {
     return instance.currentStyle;
   }
-  throw new TypeError('Instance is not a TextEditor');
+  throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -769,7 +771,7 @@ export function applyStylesToSelection(instance, styles) {
   if (isTextEditor(instance)) {
     return instance.applyStylesToSelection(styles);
   }
-  throw new TypeError('Instance is not a TextEditor');
+  throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -783,7 +785,7 @@ export function dispose(instance) {
   if (isTextEditor(instance)) {
     return instance.dispose();
   }
-  throw new TypeError('Instance is not a TextEditor');
+  throw new TypeError("Instance is not a TextEditor");
 }
 
 export default TextEditor;

frontend/text-editor/src/editor/content/dom/Style.js

@@ -336,22 +336,20 @@ export function getStyle(element, styleName, styleUnit) {
  * @returns {HTMLElement}
  */
 export function setStylesFromObject(element, allowedStyles, styleObject) {
-  for (const [styleName, styleUnit] of allowedStyles) {
+  if (element.tagName === "SPAN")
-    if (!(styleName in styleObject)) {
+    for (const [styleName, styleUnit] of allowedStyles) {
-      continue;
+      if (!(styleName in styleObject)) {
-    }
+        continue;
+      }
+      let styleValue = styleObject[styleName];
+      if (!styleValue) continue;
 
-    let styleValue = styleObject[styleName];
+      if (styleName === "font-family") {
-    if (!styleValue) {
+        styleValue = sanitizeFontFamily(styleValue);
-      continue;
+      }
-    }
 
-    if (styleName === "font-family") {
+      setStyle(element, styleName, styleValue, styleUnit);
-      styleValue = sanitizeFontFamily(styleValue);
     }
-
-    setStyle(element, styleName, styleValue, styleUnit);
-  }
   return element;
 }
 

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -1961,8 +1961,7 @@ export class SelectionController extends EventTarget {
         this.setSelection(newTextSpan.firstChild, 0, newTextSpan.firstChild, 0);
       }
       // The styles are applied to the paragraph
-      else
+      else {
-      {
         const paragraph = this.startParagraph;
         setParagraphStyles(paragraph, newStyles);
         // Apply styles to child text spans.
@@ -1970,9 +1969,11 @@ export class SelectionController extends EventTarget {
           setTextSpanStyles(textSpan, newStyles);
         }
       }
-    // If the startContainer and endContainer are different
+      return this.#notifyStyleChange();
-    // then we need to iterate through those nodes to apply
+
-    // the styles.
+      // If the startContainer and endContainer are different
+      // then we need to iterate through those nodes to apply
+      // the styles.
     } else if (startNode !== endNode) {
       const safeGuard = new SafeGuard("applyStylesTo");
       safeGuard.start();
@@ -2021,12 +2022,12 @@ export class SelectionController extends EventTarget {
         }
 
         // We've reached the final node so we can return safely.
-        if (this.#textNodeIterator.currentNode === expectedEndNode)
+        if (this.#textNodeIterator.currentNode === expectedEndNode) return;
-          break;
 
         this.#textNodeIterator.nextNode();
       } while (this.#textNodeIterator.currentNode);
     }
+
     return this.#notifyStyleChange();
   }
 

mcp/README.md

@@ -90,6 +90,32 @@ This bootstrap command will:
   * build all components (`pnpm -r run build`)
   * start all components (`pnpm -r --parallel run start`)
 
+If you want to have types scrapped from a remote repository, the best
+approach is executing the following:
+
+```shell
+PENPOT_PLUGINS_API_DOC_URL=https://doc.plugins.penpot.app pnpm run build:types
+pnpm run bootstrap
+```
+
+Or this, if you want skip build step bacause you have already have all
+build artifacts ready (per example from previous `bootstrap` command):
+
+```
+PENPOT_PLUGINS_API_DOC_URL=https://doc.plugins.penpot.app pnpm run build:types
+pnpm run start
+```
+
+If you want just to update the types definitions with the plugins api doc from the
+current branch:
+
+```shell
+pnpm run build:types
+```
+
+(That command will build plugins doc locally and will generate the types yaml from
+the locally build documentation)
+
 ### 2. Load the Plugin in Penpot and Establish the Connection
 
 > [!NOTE]

mcp/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "pnpm -r run build",
     "build:multi-user": "pnpm -r run build:multi-user",
-    "build:types": "bash ./scripts/build-types",
+    "build:types": "./scripts/build-types",
     "start": "pnpm -r --parallel run start",
     "start:multi-user": "pnpm -r --parallel --filter \"./packages/*\"  run start:multi-user",
     "bootstrap": "pnpm -r install && pnpm run build && pnpm run start",

mcp/packages/plugin/src/PenpotUtils.ts

@@ -25,6 +25,7 @@ export class PenpotUtils {
             id: shape.id,
             name: shape.name,
             type: shape.type,
+            children: children,
         };
 
         // add layout information if present
@@ -47,23 +48,6 @@ export class PenpotUtils {
             };
         }
 
-        // add component instance information if present
-        if (shape.isComponentInstance()) {
-            result.componentInstance = {};
-            const component = shape.component();
-            if (component) {
-                result.componentInstance.componentId = component.id;
-                result.componentInstance.componentName = component.name;
-                const mainInstance = component.mainInstance();
-                if (mainInstance) {
-                    result.componentInstance.mainInstanceId = mainInstance.id;
-                }
-            }
-        }
-
-        // finally, add children (last for more readable nesting order)
-        result.children = children;
-
         return result;
     }
 
@@ -71,9 +55,9 @@ export class PenpotUtils {
      * Finds all shapes that matches the given predicate in the given shape tree.
      *
      * @param predicate - A function that takes a shape and returns true if it matches the criteria
-     * @param root - The root shape to start the search from (if null, searches all pages)
+     * @param root - The root shape to start the search from (defaults to penpot.root)
      */
-    public static findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] {
+    public static findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = penpot.root): Shape[] {
         let result = new Array<Shape>();
 
         let find = function (shape: Shape | null) {
@@ -90,16 +74,7 @@ export class PenpotUtils {
             }
         };
 
-        if (root === null) {
+        find(root);
-            const pages = penpot.currentFile?.pages;
-            if (pages) {
-                for (let page of pages) {
-                    find(page.root);
-                }
-            }
-        } else {
-            find(root);
-        }
         return result;
     }
 
@@ -447,94 +422,4 @@ export class PenpotUtils {
                 throw new Error(`Unsupported export mode: ${mode}`);
         }
     }
-
-    /**
-     * Finds all tokens that match the given name across all token sets.
-     *
-     * @param name - The name of the token to search for (case-sensitive exact match)
-     * @returns An array of all matching tokens (may be empty)
-     */
-    public static findTokensByName(name: string): any[] {
-        const tokens: any[] = [];
-        // @ts-ignore
-        const tokenCatalog = penpot.library.local.tokens;
-
-        for (const set of tokenCatalog.sets) {
-            for (const token of set.tokens) {
-                if (token.name === name) {
-                    tokens.push(token);
-                }
-            }
-        }
-
-        return tokens;
-    }
-
-    /**
-     * Finds the first token that matches the given name across all token sets.
-     *
-     * @param name - The name of the token to search for (case-sensitive exact match)
-     * @returns The first matching token, or null if not found
-     */
-    public static findTokenByName(name: string): any | null {
-        // @ts-ignore
-        const tokenCatalog = penpot.library.local.tokens;
-
-        for (const set of tokenCatalog.sets) {
-            for (const token of set.tokens) {
-                if (token.name === name) {
-                    return token;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * Gets the token set that contains the given token.
-     *
-     * @param token - The token whose set to find
-     * @returns The TokenSet containing this token, or null if not found
-     */
-    public static getTokenSet(token: any): any | null {
-        // @ts-ignore
-        const tokenCatalog = penpot.library.local.tokens;
-
-        for (const set of tokenCatalog.sets) {
-            if (set.tokens.includes(token)) {
-                return set;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * Generates an overview of all tokens organized by token set name, token type, and token name.
-     * The result is a nested object structure: {tokenSetName: {tokenType: [tokenName, ...]}}.
-     *
-     * @returns An object mapping token set names to objects that map token types to arrays of token names
-     */
-    public static tokenOverview(): Record<string, Record<string, string[]>> {
-        const overview: Record<string, Record<string, string[]>> = {};
-        // @ts-ignore
-        const tokenCatalog = penpot.library.local.tokens;
-
-        for (const set of tokenCatalog.sets) {
-            const setOverview: Record<string, string[]> = {};
-
-            for (const token of set.tokens) {
-                const tokenType = token.type;
-                if (!setOverview[tokenType]) {
-                    setOverview[tokenType] = [];
-                }
-                setOverview[tokenType].push(token.name);
-            }
-
-            overview[set.name] = setOverview;
-        }
-
-        return overview;
-    }
 }

mcp/packages/server/data/initial_instructions.md

@@ -1,333 +0,0 @@
-You have access to Penpot tools in order to interact with a Penpot design project directly.
-As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin.
-
-IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design.
-  NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to
-  non-creative defaults such as white/black if you are lacking information).
-
-# Executing Code
-
-One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API
-directly in the connected project.
-
-VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive!
-
-To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via
-the `penpot_api_info` tool.
-
-This is the full list of types/interfaces in the Penpot API: $api_types
-
-You use the `storage` object extensively to store data and utility functions you define across tool calls.
-This allows you to inspect intermediate results while still being able to build on them in subsequent code executions.
-
-# The Structure of Penpot Designs
-
-A Penpot design ultimately consists of shapes.
-The type `Shape` is a union type, which encompasses both containers and low-level shapes.
-Shapes in a Penpot design are organized hierarchically.
-At the top level, a design project contains one or more `Page` objects.
-Each `Page` contains a tree of elements. For a given instance `page`, its root shape is `page.root`.
-A Page is frequently structured into boards. A `Board` is a high-level grouping element.
-A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit.
-Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`.
-`ShapeBase` is a base type most shapes build upon.
-
-# Core Shape Properties and Methods
-
-**Type**:
-    Any given shape contains information on the concrete type via its `type` field.
-
-**Position and Dimensions**:
-  * The location properties `x` and `y` refer to the top left corner of a shape's bounding box in the absolute (Page) coordinate system.
-    These are writable - set them directly to position shapes.
-  * `parentX` and `parentY` (as well as `boardX` and `boardY`) are READ-ONLY computed properties showing position relative to parent/board.
-    To position relative to parent, use `penpotUtils.setParentXY(shape, parentX, parentY)` or manually set `shape.x = parent.x + parentX`.
-  * `width` and `height` are READ-ONLY. Use `resize(width, height)` method to change dimensions.
-  * `bounds` is a READ-ONLY property. Use `x`, `y` with `resize()` to modify shape bounds.
-
-**Other Writable Properties**:
-  * `name` - Shape name
-  * `fills`, `strokes` - Styling properties
-  * `rotation`, `opacity`, `blocked`, `hidden`, `visible`
-
-**Z-Order**:
-  * The z-order of shapes is determined by the order in the `children` array of the parent shape.
-    Therefore, when creating shapes that should be on top of each other, add them to the parent in the correct order
-    (i.e. add background shapes first, then foreground shapes later).
-    CRITICAL: NEVER use the broken function `appendChild` to achieve this, ALWAYS use `parent.insertChild(parent.children.length, shape)`
-  * To modify z-order after creation, use these methods: `bringToFront()`, `sendToBack()`, `bringForward()`, `sendBackward()`,
-    and, for precise control, `setParentIndex(index)` (0-based).
-
-**Modification Methods**:
-  * `resize(width, height)` - Change dimensions (required for width/height since they're read-only)
-  * `rotate(angle, center?)` - Rotate shape
-  * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting).
-    Exception: When the shape is a descendant of a board that is a component (asset), the shape will not be removed but instead be made invisible.
-
-**Hierarchical Structure**:
-  * `parent` - The parent shape (null for root shapes)
-    Note: Hierarchical nesting does not necessarily imply visual containment
-  * CRITICAL: To add children to a parent shape (e.g. a `Board`):
-    - ALWAYS use `parent.insertChild(index, shape)` to add a child, e.g. `parent.insertChild(parent.children.length, shape)` to append
-    - NEVER use `parent.appendChild(shape)` as it is BROKEN and will not insert in a predictable place (except in flex layout boards)
-  * Reparenting: `newParent.appendChild(shape)` or `newParent.insertChild(index, shape)` will move a shape to new parent
-    - Automatically removes the shape from its old parent
-    - Absolute x/y positions are preserved (use `penpotUtils.setParentXY` to adjust relative position)
-
-Cloning: Use `shape.clone(): Shape` to create an exact duplicate (including all properties and children) of a shape; same position as original.
-
-# Images
-
-The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an
-`ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set.
-Use the `export_shape` and `import_image` tools to export and import images.
-
-# Layout Systems
-
-Boards can have layout systems that automatically control the positioning and spacing of their children:
-
-  * If a board has a layout system, then child positions are controlled by the layout system.
-    For every child, key properties of the child within the layout are stored in `child.layoutChild: LayoutChildProperties`:
-    - `absolute: boolean` - if true, child position is not controlled by layout system. x/y will set *relative* position within parent!
-    - margins (`topMargin`, `rightMargin`, `bottomMargin`, `leftMargin` or combined `verticalMargin`, `horizontalMargin`)
-    - sizing (`verticalSizing`, `horizontalSizing`: "fill" | "auto" | "fix")
-    - min/max sizes (`minWidth`, `maxWidth`, `minHeight`, `maxHeight`)
-    - `zIndex: number` (higher numbers on top)
-
-  * **Flex Layout**: A flexbox-style layout system
-    - Properties: `dir`, `rowGap`, `columnGap`, `alignItems`, `justifyContent`;
-       - `dir`: "row" | "column" | "row-reverse" | "column-reverse"
-       - Padding: `topPadding`, `rightPadding`, `bottomPadding`, `leftPadding`, or combined `verticalPadding`, `horizontalPadding`
-       - To modify spacing: adjust `rowGap` and `columnGap` properties, not individual child positions.
-         Optionally, adjust indivudual child margins via `child.layoutChild`.
-    - When a board has flex layout,
-       - child positions are controlled by the layout system, not by individual x/y coordinates (unless `child.layoutChild.absolute` is true);
-         appending or inserting children automatically positions them according to the layout rules.
-       - CRITICAL: For for dir="column" or dir="row", the order of the `children` array is reversed relative to the visual order!
-         Therefore, the element that appears first in the array, appears visually at the end (bottom/right) and vice versa.
-         ALWAYS BEAR IN MIND THAT THE CHILDREN ARRAY ORDER IS REVERSED FOR dir="column" OR dir="row"!
-    - CRITICAL: The FlexLayout method `board.flex.appendChild` is BROKEN. To append children to a flex layout board such that
-      they appear visually at the end, ALWAYS use the Board's method `board.appendChild(shape)`; it will insert at the front
-      of the `children` array for dir="column" or dir="row", which is what you want. So call it in the order of visual appearance.
-      To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column"
-      or dir="row".
-    - Add to a board with `board.addFlexLayout(): FlexLayout`; instance then accessible via `board.flex`.
-      IMPORTANT: When adding a flex layout to a container that already has children,
-      use `penpotUtils.addFlexLayout(container, dir)` instead! This preserves the existing visual order of children.
-      Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order.
-    - Check with: `if (board.flex) { ... }`
-
-  * **Grid Layout**: A CSS grid-style layout system
-    - Add to a board with `board.addGridLayout(): GridLayout`; instance then accessibly via `board.grid`;
-      Check with: `if (board.grid) { ... }`
-    - Properties: `rows`, `columns`, `rowGap`, `columnGap`
-    - Children are positioned via 1-based row/column indices
-        - Add to grid via `board.flex.appendChild(shape, row, column)`
-        - Modify grid positioning after the fact via `shape.layoutCell: LayoutCellProperties`
-
-  * When working with boards:
-    - ALWAYS check if the board has a layout system before attempting to reposition children
-    - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly
-    - Layout systems override manual positioning of children
-
-# Text Elements
-
-The rendered content of `Text` element is given by the `characters` property.
-
-To change the size of the text, change the `fontSize` property; applying `resize()` does NOT change the font size,
-it only changes the formal bounding box; if the text does not fit it, it will overflow.
-The bounding box is sized automatically as long as the `growType` property is set to "auto-width" or "auto-height".
-`resize` always sets `growType` to "fixed", so ALWAYS set it back to "auto-*" if you want automatic sizing - otherwise the bounding box will be meaningless, with the text overflowing!
-The auto-sizing is not immediate; sleep for a short time (100ms) if you want to read the updated bounding box.
-
-# The `penpot` and `penpotUtils` Objects, Exploring Designs
-
-A key object to use in your code is the `penpot` object (which is of type `Penpot`):
-  * `penpot.selection` provides the list of shapes the user has selected in the Penpot UI.
-     If it is unclear which elements to work on, you can ask the user to select them for you.
-     ALWAYS immediately copy the selected shape(s) into `storage`! Do not assume that the selection remains unchanged.
-  * `penpot.root` provides the root shape of the currently active page.
-  * Generation of CSS content for elements via `penpot.generateStyle`
-  * Generation of HTML/SVG content for elements via `penpot.generateMarkup`
-
-For example, to generate CSS for the currently selected elements, you can execute this:
-    return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true });
-
-CRITICAL: The `penpotUtils` object provides essential utilities - USE THESE INSTEAD OF WRITING YOUR OWN:
-  * getPages(): { id: string; name: string }[]
-  * getPageById(id: string): Page | null
-  * getPageByName(name: string): Page | null
-  * shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): { id, name, type, children?, layout? }
-    Generates an overview structure of the given shape.
-    - children: recursive, limited by maxDepth
-    - layout: present if shape has flex/grid layout, contains { type: "flex" | "grid", ... }
-  * findShapeById(id: string): Shape | null
-  * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null
-    If no root is provided, search globally (in all pages).
-  * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[]
-  * isContainedIn(shape: Shape, container: Shape): boolean
-    Returns true iff shape is fully within the container's geometric bounds.
-    Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below).
-  * setParentXY(shape: Shape, parentX: number, parentY: number): void
-    Sets shape position relative to its parent (since parentX/parentY are read-only)
-  * analyzeDescendants<T>(root: Shape, evaluator: (root: Shape, descendant: Shape) => T | null | undefined, maxDepth?: number): Array<{ shape: Shape, result: T }>
-    General-purpose utility for analyzing/validating descendants
-    Calls evaluator on each descendant; collects non-null/undefined results
-    Powerful pattern: evaluator can return corrector functions or diagnostic data
-  * Further functions for specific tasks (described in the sections below)
-
-General pointers for working with Penpot designs:
-  * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching.
-  * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`.
-    Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s).
-  * Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently.
-
-Common tasks - Quick Reference (ALWAYS use penpotUtils for these):
-  * Find all images:
-      const images = penpotUtils.findShapes(
-        shape => shape.type === 'image' || shape.fills?.some(fill => fill.fillImage),
-        penpot.root
-      );
-  * Find text elements:
-      const texts = penpotUtils.findShapes(shape => shape.type === 'text', penpot.root);
-  * Find (the first) shape with a given name:
-      const shape = penpotUtils.findShape(shape => shape.name === 'MyShape');
-  * Get structure of current selection:
-      const structure = penpotUtils.shapeStructure(penpot.selection[0]);
-  * Find shapes in current selection/board:
-      const shapes = penpotUtils.findShapes(predicate, penpot.selection[0] || penpot.root);
-  * Validate/analyze descendants (returning corrector functions):
-      const fixes = penpotUtils.analyzeDescendants(board, (root, shape) => {
-        const xMod = shape.parentX % 4;
-        if (xMod !== 0) {
-          return () => penpotUtils.setParentXY(shape, Math.round(shape.parentX / 4) * 4, shape.parentY);
-        }
-      });
-      fixes.forEach(f => f.result()); // Apply all fixes
-  * Find containment violations:
-      const violations = penpotUtils.analyzeDescendants(board, (root, shape) => {
-        return !penpotUtils.isContainedIn(shape, root) ? 'outside-bounds' : null;
-      });
-      Always validate against the root container that is supposed to contain the shapes.
-
-# Visual Inspection of Designs
-
-For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose!
-
-# Revising Designs
-
-* Before applying design changes, ask: "Would a designer consider this appropriate?"
-* When dealing with containment issues, ask: Is the parent too small OR is the child too large?
-  Container sizes are usually intentional, check content first.
-* Check for reasonable font sizes and typefaces
-* The use of flex layouts is encouraged for cases where elements are arranged in rows or columns with consistent spacing/positioning.
-  Consider converting boards to flex layout when appropriate.
-
-# Asset Libraries
-
-Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files.
-They enable design systems and consistent styling across projects.
-Each Penpot file has its own local library and can connect to external shared libraries.
-
-Accessing libraries: via `penpot.library` (type: `LibraryContext`):
-  * `penpot.library.local` (type: `Library`) - The current file's own library
-  * `penpot.library.connected` (type: `Library[]`) - Array of already-connected external libraries
-  * `penpot.library.availableLibraries()` (returns: `Promise<LibrarySummary[]>`) - Libraries available to connect
-  * `penpot.library.connectLibrary(libraryId: string)` (returns: `Promise<Library>`) - Connect a new library
-
-Each `Library` object has:
-  * `id: string`
-  * `name: string`
-  * `components: LibraryComponent[]` - Array of components
-  * `colors: LibraryColor[]` - Array of colors
-  * `typographies: LibraryTypography[]` - Array of typographies
-
-Using library components:
-  * find a component in the library by name:
-      const component: LibraryComponent = library.components.find(comp => comp.name.includes('Button'));
-  * create a new instance of the component on the current page:
-      const instance: Shape = component.instance();
-    This returns a `Shape` (often a `Board` containing child elements).
-    After instantiation, modify the instance's properties as desired.
-  * get the reference to the main component shape:
-      const mainShape: Shape = component.mainInstance();
-
-Adding assets to a library:
-  * const newColor: LibraryColor = penpot.library.local.createColor();
-    newColor.name = 'Brand Primary';
-    newColor.color = '#0066FF';
-  * const newTypo: LibraryTypography = penpot.library.local.createTypography();
-    newTypo.name = 'Heading Large';
-    // Set typography properties...
-  * const shapes: Shape[] = [shape1, shape2]; // shapes to include
-    const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes);
-    newComponent.name = 'My Button';
-
-Detaching:
-  * When creating new design elements based on a component instance/copy, use `shape.detach()` to break the link to the main component, allowing independent modification.
-  * Without detaching, some manipulations will have no effect; e.g. child/descendant removal will not work.
-
-# Design Tokens
-
-Design tokens are reusable design values (colors, dimensions, typography, etc.) for consistent styling.
-
-The token library: `penpot.library.local.tokens` (type: `TokenCatalog`)
-  * `sets: TokenSet[]` - Token collections (order matters for precedence)
-  * `themes: TokenTheme[]` - Presets that activate specific sets
-  * `addSet(name: string): TokenSet` - Create new set
-  * `addTheme(group: string, name: string): TokenTheme` - Create new theme
-
-`TokenSet` contains tokens with unique names:
-  * `active: boolean` - Only active sets affect shapes; use `set.toggleActive()` to change: `if (!set.active) set.toggleActive();`
-  * `tokens: Token[]` - All tokens in set
-  * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Creates a token, adding it to the set.
-     - `TokenType`: "color" | "dimension" | "spacing" | "typography" | "shadow" | "opacity" | "borderRadius" | "borderWidth" | "fontWeights" | "fontSizes" | "fontFamilies" | "letterSpacing" | "textDecoration" | "textCase"
-     - Examples:
-       const token = set.addToken("color", "color.primary", "#0066FF"); // direct value
-       const token2 = set.addToken("color", "color.accent", "{color.primary}"); // reference to another token
-
-`Token`:
-  * `name: string` - Token name (may include group path like "color.base.white")
-  * `value: string | TokenValueString` - Raw value (may be direct value or reference to another token like "{color.primary}")
-  * `resolvedValue` - Computed final value (follows references)
-  * `type: TokenType`
-
-Discovering tokens:
-  * `penpotUtils.tokenOverview()`: Maps from token set name to a mapping from token type to list of token names
-  * `penpotUtils.findTokenByName(name: string): Token | null`: Finds the first applicable token matching the given name
-  * `penpotUtils.findTokensByName(name: string): Token[]`: Finds all tokens that match the given name across all token sets
-  * `penpotUtils.getTokenSet(token: Token): TokenSet | null`: Gets the token set that contains the given token
-
-Applying tokens:
-  * `shape.applyToken(token, properties: undefined | TokenProperty[])` - Apply a token to a shape for one or more properties
-    (if properties is undefined, use a default property based on the token type - not usually recommended).
-    `TokenProperty` is a union type; possible values are:
-    - "all": applies the token to all properties it can control
-    - TokenBorderRadiusProps: "r1", "r2", "r3", "r4"
-    - TokenShadowProps: "shadow"
-    - TokenColorProps: "fill", "stroke-color"
-    - TokenDimensionProps: "x", "y", "stroke-width"
-    - TokenFontFamiliesProps: "font-families"
-    - TokenFontSizesProps: "font-size"
-    - TokenFontWeightProps: "font-weight"
-    - TokenLetterSpacingProps: "letter-spacing"
-    - TokenNumberProps: "rotation", "line-height"
-    - TokenOpacityProps: "opacity"
-    - TokenSizingProps: "width", "height", "layout-item-min-w", "layout-item-max-w", "layout-item-min-h", "layout-item-max-h"
-    - TokenSpacingProps: "row-gap", "column-gap", "p1", "p2", "p3", "p4", "m1", "m2", "m3", "m4"
-    - TokenBorderWidthProps: "stroke-width"
-    - TokenTextCaseProps: "text-case"
-    - TokenTextDecorationProps: "text-decoration"
-    - TokenTypographyProps: "typography"
-  * `token.applyToShapes(shapes, properties)` - Apply from token
-  * Application is **asynchronous** (wait for ~100ms to see the effects)
-  * After application:
-     - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` from `TokenProperty` to token name
-     - The actual shape properties that the tokens control will reflect the token's resolved value.
-
-Removing tokens:
-  Simply set the respective property directly - token binding is automatically removed, e.g.
-  shape.fills = [{ fillColor: "#000000", fillOpacity: 1 }]; // Removes fill token
-
---
-You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.

mcp/packages/server/data/prompts.yml

@@ -0,0 +1,267 @@
+# Prompts configuration for Penpot MCP Server
+# This file contains various prompts and instructions that can be used by the server
+
+initial_instructions: |
+  You have access to Penpot tools in order to interact with a Penpot design project directly.
+  As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin.
+
+  IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design.
+    NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to
+    non-creative defaults such as white/black if you are lacking information).
+
+  # Executing Code
+
+  One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API
+  directly in the connected project.
+
+  VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive!
+
+  To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via 
+  the `penpot_api_info` tool.
+
+  This is the full list of types/interfaces in the Penpot API: $api_types
+
+  You use the `storage` object extensively to store data and utility functions you define across tool calls.
+  This allows you to inspect intermediate results while still being able to build on them in subsequent code executions.
+
+  # The Structure of Penpot Designs
+
+  A Penpot design ultimately consists of shapes. 
+  The type `Shape` is a union type, which encompasses both containers and low-level shapes.
+  Shapes in a Penpot design are organized hierarchically.
+  At the top level, a design project contains one or more `Page` objects.
+  Each `Page` contains a tree of elements. For a given instance `page`, its root shape is `page.root`.
+  A Page is frequently structured into boards. A `Board` is a high-level grouping element.
+  A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit.
+  Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`.
+  `ShapeBase` is a base type most shapes build upon.
+
+  # Core Shape Properties and Methods
+
+  **Type**: 
+      Any given shape contains information on the concrete type via its `type` field.
+
+  **Position and Dimensions**:
+    * The location properties `x` and `y` refer to the top left corner of a shape's bounding box in the absolute (Page) coordinate system.
+      These are writable - set them directly to position shapes.
+    * `parentX` and `parentY` (as well as `boardX` and `boardY`) are READ-ONLY computed properties showing position relative to parent/board.
+      To position relative to parent, use `penpotUtils.setParentXY(shape, parentX, parentY)` or manually set `shape.x = parent.x + parentX`.
+    * `width` and `height` are READ-ONLY. Use `resize(width, height)` method to change dimensions.
+    * `bounds` is a READ-ONLY property. Use `x`, `y` with `resize()` to modify shape bounds.
+
+  **Other Writable Properties**:
+    * `name` - Shape name
+    * `fills`, `strokes` - Styling properties
+    * `rotation`, `opacity`, `blocked`, `hidden`, `visible`
+
+  **Z-Order**:
+    * The z-order of shapes is determined by the order in the `children` array of the parent shape.
+      Therefore, when creating shapes that should be on top of each other, add them to the parent in the correct order
+      (i.e. add background shapes first, then foreground shapes later).
+      CRITICAL: NEVER use the broken function `appendChild` to achieve this, ALWAYS use `parent.insertChild(parent.children.length, shape)`
+    * To modify z-order after creation, use these methods: `bringToFront()`, `sendToBack()`, `bringForward()`, `sendBackward()`,
+      and, for precise control, `setParentIndex(index)` (0-based).
+
+  **Modification Methods**:
+    * `resize(width, height)` - Change dimensions (required for width/height since they're read-only)
+    * `rotate(angle, center?)` - Rotate shape
+    * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting)
+
+  **Hierarchical Structure**:
+    * `parent` - The parent shape (null for root shapes)
+      Note: Hierarchical nesting does not necessarily imply visual containment
+    * CRITICAL: To add children to a parent shape (e.g. a `Board`):
+      - ALWAYS use `parent.insertChild(index, shape)` to add a child, e.g. `parent.insertChild(parent.children.length, shape)` to append
+      - NEVER use `parent.appendChild(shape)` as it is BROKEN and will not insert in a predictable place (except in flex layout boards)
+    * Reparenting: `newParent.appendChild(shape)` or `newParent.insertChild(index, shape)` will move a shape to new parent
+      - Automatically removes the shape from its old parent
+      - Absolute x/y positions are preserved (use `penpotUtils.setParentXY` to adjust relative position)
+
+  # Images
+
+  The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an 
+  `ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set.
+  Use the `export_shape` and `import_image` tools to export and import images.
+
+  # Layout Systems
+
+  Boards can have layout systems that automatically control the positioning and spacing of their children:
+
+    * If a board has a layout system, then child positions are controlled by the layout system.
+      For every child, key properties of the child within the layout are stored in `child.layoutChild: LayoutChildProperties`:
+      - `absolute: boolean` - if true, child position is not controlled by layout system. x/y will set *relative* position within parent!
+      - margins (`topMargin`, `rightMargin`, `bottomMargin`, `leftMargin` or combined `verticalMargin`, `horizontalMargin`)
+      - sizing (`verticalSizing`, `horizontalSizing`: "fill" | "auto" | "fix")
+      - min/max sizes (`minWidth`, `maxWidth`, `minHeight`, `maxHeight`)
+      - `zIndex: number` (higher numbers on top)
+      
+    * **Flex Layout**: A flexbox-style layout system
+      - Properties: `dir`, `rowGap`, `columnGap`, `alignItems`, `justifyContent`;
+         - `dir`: "row" | "column" | "row-reverse" | "column-reverse"
+         - Padding: `topPadding`, `rightPadding`, `bottomPadding`, `leftPadding`, or combined `verticalPadding`, `horizontalPadding`
+         - To modify spacing: adjust `rowGap` and `columnGap` properties, not individual child positions.
+           Optionally, adjust indivudual child margins via `child.layoutChild`.
+      - When a board has flex layout, 
+         - child positions are controlled by the layout system, not by individual x/y coordinates (unless `child.layoutChild.absolute` is true);
+           appending or inserting children automatically positions them according to the layout rules.
+         - CRITICAL: For for dir="column" or dir="row", the order of the `children` array is reversed relative to the visual order!
+           Therefore, the element that appears first in the array, appears visually at the end (bottom/right) and vice versa.
+           ALWAYS BEAR IN MIND THAT THE CHILDREN ARRAY ORDER IS REVERSED FOR dir="column" OR dir="row"!
+      - CRITICAL: The FlexLayout method `board.flex.appendChild` is BROKEN. To append children to a flex layout board such that
+        they appear visually at the end, ALWAYS use the Board's method `board.appendChild(shape)`; it will insert at the front
+        of the `children` array for dir="column" or dir="row", which is what you want. So call it in the order of visual appearance.
+        To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column" 
+        or dir="row".
+      - Add to a board with `board.addFlexLayout(): FlexLayout`; instance then accessible via `board.flex`.
+        IMPORTANT: When adding a flex layout to a container that already has children, 
+        use `penpotUtils.addFlexLayout(container, dir)` instead! This preserves the existing visual order of children.
+        Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order. 
+      - Check with: `if (board.flex) { ... }`
+    
+    * **Grid Layout**: A CSS grid-style layout system
+      - Add to a board with `board.addGridLayout(): GridLayout`; instance then accessibly via `board.grid`;
+        Check with: `if (board.grid) { ... }`
+      - Properties: `rows`, `columns`, `rowGap`, `columnGap`
+      - Children are positioned via 1-based row/column indices
+          - Add to grid via `board.flex.appendChild(shape, row, column)` 
+          - Modify grid positioning after the fact via `shape.layoutCell: LayoutCellProperties`
+    
+    * When working with boards:
+      - ALWAYS check if the board has a layout system before attempting to reposition children
+      - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly
+      - Layout systems override manual positioning of children
+
+  # Text Elements
+
+  The rendered content of `Text` element is given by the `characters` property.
+
+  To change the size of the text, change the `fontSize` property; applying `resize()` does NOT change the font size,
+  it only changes the formal bounding box; if the text does not fit it, it will overflow.
+  The bounding box is sized automatically as long as the `growType` property is set to "auto-width" or "auto-height".
+  `resize` always sets `growType` to "fixed", so ALWAYS set it back to "auto-*" if you want automatic sizing - otherwise the bounding box will be meaningless, with the text overflowing!
+  The auto-sizing is not immediate; sleep for a short time (100ms) if you want to read the updated bounding box.
+
+  # The `penpot` and `penpotUtils` Objects, Exploring Designs
+
+  A key object to use in your code is the `penpot` object (which is of type `Penpot`):
+    * `penpot.selection` provides the list of shapes the user has selected in the Penpot UI.
+       If it is unclear which elements to work on, you can ask the user to select them for you.
+       ALWAYS immediately copy the selected shape(s) into `storage`! Do not assume that the selection remains unchanged.
+    * `penpot.root` provides the root shape of the currently active page.
+    * Generation of CSS content for elements via `penpot.generateStyle`
+    * Generation of HTML/SVG content for elements via `penpot.generateMarkup`
+
+  For example, to generate CSS for the currently selected elements, you can execute this:
+      return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true });
+
+  CRITICAL: The `penpotUtils` object provides essential utilities - USE THESE INSTEAD OF WRITING YOUR OWN:
+    * getPages(): { id: string; name: string }[]
+    * getPageById(id: string): Page | null
+    * getPageByName(name: string): Page | null
+    * shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): { id, name, type, children?, layout? }
+      Generates an overview structure of the given shape.
+      - children: recursive, limited by maxDepth 
+      - layout: present if shape has flex/grid layout, contains { type: "flex" | "grid", ... }
+    * findShapeById(id: string): Shape | null
+    * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null
+      If no root is provided, search globally (in all pages).
+    * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[]
+    * isContainedIn(shape: Shape, container: Shape): boolean
+      Returns true iff shape is fully within the container's geometric bounds.
+      Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below). 
+    * setParentXY(shape: Shape, parentX: number, parentY: number): void
+      Sets shape position relative to its parent (since parentX/parentY are read-only)
+    * analyzeDescendants<T>(root: Shape, evaluator: (root: Shape, descendant: Shape) => T | null | undefined, maxDepth?: number): Array<{ shape: Shape, result: T }>
+      General-purpose utility for analyzing/validating descendants
+      Calls evaluator on each descendant; collects non-null/undefined results
+      Powerful pattern: evaluator can return corrector functions or diagnostic data
+
+  General pointers for working with Penpot designs:
+    * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching.
+    * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. 
+      Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s).
+    * Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently.
+
+  Common tasks - Quick Reference (ALWAYS use penpotUtils for these):
+    * Find all images:
+        const images = penpotUtils.findShapes(
+          shape => shape.type === 'image' || shape.fills?.some(fill => fill.fillImage),
+          penpot.root
+        );
+    * Find text elements:
+        const texts = penpotUtils.findShapes(shape => shape.type === 'text', penpot.root);
+    * Find (the first) shape with a given name:
+        const shape = penpotUtils.findShape(shape => shape.name === 'MyShape');
+    * Get structure of current selection:
+        const structure = penpotUtils.shapeStructure(penpot.selection[0]);
+    * Find shapes in current selection/board:
+        const shapes = penpotUtils.findShapes(predicate, penpot.selection[0] || penpot.root);
+    * Validate/analyze descendants (returning corrector functions):
+        const fixes = penpotUtils.analyzeDescendants(board, (root, shape) => {
+          const xMod = shape.parentX % 4;
+          if (xMod !== 0) {
+            return () => penpotUtils.setParentXY(shape, Math.round(shape.parentX / 4) * 4, shape.parentY);
+          }
+        });
+        fixes.forEach(f => f.result()); // Apply all fixes
+    * Find containment violations:
+        const violations = penpotUtils.analyzeDescendants(board, (root, shape) => {
+          return !penpotUtils.isContainedIn(shape, root) ? 'outside-bounds' : null;
+        });
+        Always validate against the root container that is supposed to contain the shapes.
+
+  # Visual Inspection of Designs
+
+  For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! 
+
+  # Revising Designs
+
+  * Before applying design changes, ask: "Would a designer consider this appropriate?"
+  * When dealing with containment issues, ask: Is the parent too small OR is the child too large?
+    Container sizes are usually intentional, check content first.
+  * Check for reasonable font sizes and typefaces
+  * The use of flex layouts is encouraged for cases where elements are arranged in rows or columns with consistent spacing/positioning.
+    Consider converting boards to flex layout when appropriate.
+
+  # Asset Libraries
+    
+  Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files. 
+  They enable design systems and consistent styling across projects.
+  Each Penpot file has its own local library and can connect to external shared libraries.
+    
+  Accessing libraries: via `penpot.library` (type: `LibraryContext`):
+    * `penpot.library.local` (type: `Library`) - The current file's own library
+    * `penpot.library.connected` (type: `Library[]`) - Array of already-connected external libraries
+    * `penpot.library.availableLibraries()` (returns: `Promise<LibrarySummary[]>`) - Libraries available to connect
+    * `penpot.library.connectLibrary(libraryId: string)` (returns: `Promise<Library>`) - Connect a new library
+    
+  Each `Library` object has:
+    * `id: string`
+    * `name: string`
+    * `components: LibraryComponent[]` - Array of components
+    * `colors: LibraryColor[]` - Array of colors
+    * `typographies: LibraryTypography[]` - Array of typographies
+    
+  Using library components:
+    * find a component in the library by name:
+        const component: LibraryComponent = library.components.find(comp => comp.name.includes('Button'));
+    * create a new instance of the component on the current page: 
+        const instance: Shape = component.instance();
+      This returns a `Shape` (often a `Board` containing child elements).
+      After instantiation, modify the instance's properties as desired.
+    * get the reference to the main component shape:
+        const mainShape: Shape = component.mainInstance();
+    
+  Adding assets to a library:
+    * const newColor: LibraryColor = penpot.library.local.createColor();
+      newColor.name = 'Brand Primary';
+      newColor.color = '#0066FF';
+    * const newTypo: LibraryTypography = penpot.library.local.createTypography();
+      newTypo.name = 'Heading Large';
+      // Set typography properties...
+    * const shapes: Shape[] = [shape1, shape2]; // shapes to include
+      const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes);
+      newComponent.name = 'My Button';
+    
+  --
+  You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.

mcp/packages/server/src/ConfigurationLoader.ts

@@ -1,7 +1,18 @@
-import { existsSync, readFileSync } from "fs";
+import { readFileSync, existsSync } from "fs";
-import { join } from "path";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import yaml from "js-yaml";
 import { createLogger } from "./logger.js";
 
+/**
+ * Interface defining the structure of the prompts configuration file.
+ */
+export interface PromptsConfig {
+    /** Initial instructions displayed when the server starts or connects to a client */
+    initial_instructions: string;
+    [key: string]: any; // Allow for future extension with additional prompt types
+}
+
 /**
  * Configuration loader for prompts and server settings.
  *
@@ -12,7 +23,7 @@ import { createLogger } from "./logger.js";
 export class ConfigurationLoader {
     private readonly logger = createLogger("ConfigurationLoader");
     private readonly baseDir: string;
-    private initialInstructions: string;
+    private promptsConfig: PromptsConfig | null = null;
 
     /**
      * Creates a new configuration loader instance.
@@ -21,14 +32,34 @@ export class ConfigurationLoader {
      */
     constructor(baseDir: string) {
         this.baseDir = baseDir;
-        this.initialInstructions = this.loadFileContent(join(this.baseDir, "data", "initial_instructions.md"));
     }
 
-    private loadFileContent(filePath: string): string {
+    /**
-        if (!existsSync(filePath)) {
+     * Loads the prompts configuration from the YAML file.
-            throw new Error(`Configuration file not found at ${filePath}`);
+     *
+     * Reads and parses the prompts.yml file, providing cached access
+     * to configuration values on subsequent calls.
+     *
+     * @returns The parsed prompts configuration object
+     */
+    public getPromptsConfig(): PromptsConfig {
+        if (this.promptsConfig !== null) {
+            return this.promptsConfig;
         }
-        return readFileSync(filePath, "utf8");
+
+        const promptsPath = join(this.baseDir, "data", "prompts.yml");
+
+        if (!existsSync(promptsPath)) {
+            throw new Error(`Prompts configuration file not found at ${promptsPath}, using defaults`);
+        }
+
+        const fileContent = readFileSync(promptsPath, "utf8");
+        const parsedConfig = yaml.load(fileContent) as PromptsConfig;
+
+        this.promptsConfig = parsedConfig || {};
+        this.logger.info(`Loaded prompts configuration from ${promptsPath}`);
+
+        return this.promptsConfig;
     }
 
     /**
@@ -37,6 +68,18 @@ export class ConfigurationLoader {
      * @returns The initial instructions string, or undefined if not configured
      */
     public getInitialInstructions(): string {
-        return this.initialInstructions;
+        const config = this.getPromptsConfig();
+        return config.initial_instructions;
+    }
+
+    /**
+     * Reloads the configuration from disk.
+     *
+     * Forces a fresh read of the configuration file on the next access,
+     * useful for development or when configuration files are updated at runtime.
+     */
+    public reloadConfiguration(): void {
+        this.promptsConfig = null;
+        this.logger.info("Configuration cache cleared, will reload on next access");
     }
 }

mcp/scripts/build-types

@@ -15,9 +15,9 @@ fi
 if [[ "$URL" = "http://localhost:9090" ]]; then
     pnpx concurrently --kill-others-on-fail -s last -k \
          "caddy file-server --root ../../plugins/dist/doc/ --listen :9090" \
-         "bash ../types-generator/build $URL";
+         "../types-generator/build $URL";
 else
-    bash ../types-generator/build $URL;
+    ../types-generator/build $URL;
 fi
 
 popd

mcp/types-generator/README.md

@@ -1,8 +1,7 @@
 # Types Generator
 
 This subproject contains helper scripts used in the development of the
-Penpot MCP server, specifically for the generation of a YAML file containing 
+Penpot MCP server for generate the types yaml.
-Penpot plugin API types and their documentation.
 
 ## Setup
 
@@ -13,41 +12,15 @@ Install the environment via (optional, already handled by `build` script)
 
     pixi install
 
-## Running the API Documentation Preparation Script
 
-The script `prepare_api_docs.py` reads API documentation from a Web URL
+### Buld API types
-and collects it in a single YAML file, which is then used by an MCP
+
+The script `prepare_api_docs.py` reads API documentation from the Web
+and collects it in a single yaml file, which is then used by an MCP
 tool to provide API documentation to an LLM on demand.
 
-Successful execution will generate the output file `../packages/server/data/api_types.yml`.
-
-### Generating the YAML File for a Given URL
-
 Running the script:
 
-    pixi run python prepare_api_docs.py <url>
+    ./build <optional-url>
-
-You can alternatively run `./build <url>`, which additionally performs pixi environment installation. 
-
-For example, to generate the API documentation based on the current PROD Penpot API documentation,
-use the URL
-
-    https://doc.plugins.penpot.app
-
-### Generating the YAML File Based on the Current Documentation in the Repository  
-
-Requirement: [Caddy](https://caddyserver.com/download) must be installed and available in the system path.
-
-To generate the API documentation based on the current documentation in the repository,
-run the `build:types` script in the parent directory, i.e.
-
-    cd ..
-    pnpm run build:types
-
-This will spawn a local HTTP server on port 9090 and run the `prepare_api_docs.py` script with the 
-URL `http://localhost:9090`.  
-To run only the server without executing the script, run
-
-    cd ..
-    caddy file-server --root ../plugins/dist/doc/ --listen 127.0.0.1:9090
 
+This will generate `../packages/server/data/api_types.yml`.

mcp/types-generator/prepare_api_docs.py

@@ -80,25 +80,6 @@ class PenpotAPIContentMarkdownConverter(MarkdownConverter):
             # return as code block
             return f"\n```\n{soup.get_text()}\n```\n\n"
 
-        # check for <ul> tag with a single <li>: move the <li> content a <div> and process it as normal,
-        # to avoid single list items with superfluous bullet points and indentations.
-        # This happens frequently, especially in new versions of the docs generator, e.g. for methods:
-        #   <ul class="tsd-signatures tsd-is-inherited">
-        #     <li class="tsd-is-inherited">
-        #       <div class="tsd-signature tsd-anchor-link" id="remove-1">...</div>
-        #     </li>
-        #   </ul>
-        if node.name == "ul" and "class" in node.attrs and "tsd-signatures" in node.attrs["class"]:
-            soup_ul = soup.find("ul")
-            if soup_ul is not None:
-                li_children = soup_ul.find_all("li", recursive=False)
-                if len(li_children) == 1:
-                    # create a new div with the content of the single li
-                    new_div = soup.new_tag("div")
-                    for child in list(li_children[0].contents):
-                        new_div.append(child)
-                    return self.process_tag(new_div, parent_tags=parent_tags)
-
         # other cases: use the default processing
         return super().process_tag(node, parent_tags=parent_tags)
 
@@ -154,7 +135,7 @@ class YamlConverter:
 
 
 class PenpotAPIDocsProcessor:
-    def __init__(self, url: str):
+    def __init__(self, url=None):
         self.md_converter = PenpotAPIContentMarkdownConverter()
         self.base_url = url
         self.types: dict[str, TypeInfo] = {}
@@ -176,7 +157,7 @@ class PenpotAPIDocsProcessor:
                 type_name = href.split("/")[-1].replace(".html", "")
                 log.info("Processing page: %s", type_name)
                 type_info = self.process_page(href, type_name)
-                log.info(f"Adding '{type_name}' with {type_info}")
+                print(f"Adding '{type_name}' with {type_info}")
                 self.types[type_name] = type_info
 
         # add type reference information
@@ -220,21 +201,11 @@ class PenpotAPIDocsProcessor:
                     members_in_group = {}
                     members[members_type] = members_in_group
                     for member_tag in el.find_all(attrs={"class": "tsd-member"}):
-                        # determine member name
-                        member_name = None
                         member_anchor = member_tag.find("a", attrs={"class": "tsd-anchor"}, recursive=False)
-                        if member_anchor is not None:
+                        member_name = member_anchor.attrs["id"]
-                            member_name = member_anchor.attrs["id"]
+                        member_heading = member_tag.find("h3")
-                        else:
-                            member_h3 = member_tag.find("h3", recursive=False)
-                            if member_h3 is not None:
-                                h3_span = member_h3.find("span", recursive=False)
-                                if h3_span is not None:
-                                    member_name = h3_span.get_text().strip()
-                        assert member_name is not None, f"Could not determine member name for\n{member_tag}"
                         # extract tsd-tag info (e.g., "Readonly") from the heading and reinsert it into the signature,
                         # where we want to see it. The heading is removed, as it is redundant.
-                        member_heading = member_tag.find("h3")
                         if member_heading:
                             tags_in_heading = member_heading.find_all(attrs={"class": "tsd-tag"})
                             if tags_in_heading:
@@ -266,29 +237,25 @@ class PenpotAPIDocsProcessor:
         )
 
 
-LOCAL_API_DOCS_URL = "http://localhost:9090"
+DEFAULT_API_DOCS_URL = "http://localhost:9090"
-PROD_API_DOCS_URL = "https://doc.plugins.penpot.app"
-DEFAULT_API_DOCS_URL = LOCAL_API_DOCS_URL
-
 
 def main():
     target_dir = Path(__file__).parent.parent / "packages" / "server" / "data"
     url = sys.argv[1] if len(sys.argv) > 1 else DEFAULT_API_DOCS_URL
 
-    log.info("Fetching plugin data from: {}".format(url))
+    print("Fetching plugin data from: {}".format(url))
     PenpotAPIDocsProcessor(url).run(target_dir=str(target_dir))
 
 
-def debug_type_conversion(rel_url: str, base_url: str):
+def debug_type_conversion(rel_url: str):
     """
     This function is for debugging purposes only.
     It processes a single type page and prints the converted markdown to the console.
 
-    :param base_url: base URL of the API docs (e.g., "http://localhost:9090")
     :param rel_url: relative URL of the type page (e.g., "interfaces/ShapeBase")
     """
-    type_name = rel_url.split("/")[-1].replace(".html", "")
+    type_name = rel_url.split("/")[-1]
-    processor = PenpotAPIDocsProcessor(url=base_url)
+    processor = PenpotAPIDocsProcessor()
     type_info = processor.process_page(rel_url, type_name)
     print(f"--- overview ---\n{type_info.overview}\n")
     for member_type, members in type_info.members.items():
@@ -298,5 +265,5 @@ def debug_type_conversion(rel_url: str, base_url: str):
 
 
 if __name__ == '__main__':
-    # debug_type_conversion("interfaces/Path.html", LOCAL_API_DOCS_URL)
+    # debug_type_conversion("interfaces/LayoutChildProperties")
     logging.run_main(main)

plugins/.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "prettier.singleQuote": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "prettier.prettier-vscode",
   "editor.formatOnSave": true
 }

plugins/angular.json

@@ -12,7 +12,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/apps/contrast-plugin",
+            "outputPath": {
+              "base": "dist/apps/contrast-plugin",
+              "browser": "",
+            },
             "index": "apps/contrast-plugin/src/index.html",
             "browser": "apps/contrast-plugin/src/main.ts",
             "polyfills": ["zone.js"],
@@ -20,6 +23,7 @@
             "assets": [
               "apps/contrast-plugin/src/_headers",
               "apps/contrast-plugin/src/favicon.ico",
+              "apps/contrast-plugin/src/manifest.json",
               "apps/contrast-plugin/src/assets"
             ],
             "styles": [
@@ -218,7 +222,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/apps/table-plugin",
+            "outputPath": {
+              "base": "dist/apps/table-plugin",
+              "browser": ""
+            },
             "index": "apps/table-plugin/src/index.html",
             "browser": "apps/table-plugin/src/main.ts",
             "polyfills": ["zone.js"],
@@ -226,6 +233,7 @@
             "assets": [
               "apps/table-plugin/src/_headers",
               "apps/table-plugin/src/favicon.ico",
+              "apps/table-plugin/src/manifest.json",
               "apps/table-plugin/src/assets"
             ],
             "styles": [
@@ -356,7 +364,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/apps/colors-to-tokens-plugin",
+            "outputPath": {
+              "base": "dist/apps/colors-to-tokens-plugin",
+              "browser": ""
+            },
             "index": "apps/colors-to-tokens-plugin/src/index.html",
             "browser": "apps/colors-to-tokens-plugin/src/main.ts",
             "polyfills": ["zone.js"],
@@ -364,6 +375,7 @@
             "assets": [
               "apps/colors-to-tokens-plugin/src/_headers",
               "apps/colors-to-tokens-plugin/src/favicon.ico",
+              "apps/colors-to-tokens-plugin/src/manifest.json",
               "apps/colors-to-tokens-plugin/src/assets"
             ],
             "styles": [

plugins/apps/colors-to-tokens-plugin/package.json

@@ -4,12 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build colors-to-tokens-plugin && pnpm run build:plugin",
+    "build": "ng build colors-to-tokens-plugin",
     "build:dev": "ng build colors-to-tokens-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin",
+    "watch": "ng build colors-to-tokens-plugin --configuration development --watch",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin --watch",
     "serve": "ng serve colors-to-tokens-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/colors-to-tokens-plugin/src/app/app.config.ts

@@ -1,6 +1,8 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withHashLocation } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter([])],
+  providers: [
-};
+    provideRouter([], withHashLocation())
+  ],
+};

plugins/apps/colors-to-tokens-plugin/src/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title>colors-to-tokens-plugin</title>
-    <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>

plugins/apps/colors-to-tokens-plugin/src/manifest.json

@@ -1,7 +1,8 @@
 {
   "name": "Colors to Tokens",
   "description": "Generate a design tokens file from a list of colors",
-  "code": "/assets/plugin.js",
+  "version": 2,
-  "icon": "/assets/icon.png",
+  "code": "assets/plugin.js",
+  "icon": "assets/icon.png",
   "permissions": ["content:read", "library:read", "allow:downloads"]
 }

plugins/apps/colors-to-tokens-plugin/wrangler.toml

@@ -3,6 +3,21 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/colors-to-tokens-plugin/browser" }
 
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true
+
+[observability.traces]
+enabled = false
+persist = true
+head_sampling_rate = 1
+
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/contrast-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build contrast-plugin && pnpm run build:plugin",
+    "build": "ng build contrast-plugin",
     "build:dev": "ng build contrast-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin --watch",
     "serve": "ng serve contrast-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/contrast-plugin/src/app/app.config.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withHashLocation } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter([])],
+  providers: [provideRouter([], withHashLocation())],
 };

plugins/apps/contrast-plugin/src/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title>contrast-plugin</title>
-    <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>

plugins/apps/contrast-plugin/src/manifest.json

@@ -1,7 +1,8 @@
 {
   "name": "Contrast",
   "description": "Measure contrast plugin",
-  "code": "/assets/plugin.js",
+  "version": 2,
-  "icon": "/assets/icon.png",
+  "code": "assets/plugin.js",
+  "icon": "assets/icon.png",
   "permissions": ["content:read"]
 }

plugins/apps/contrast-plugin/wrangler.toml

@@ -3,6 +3,21 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/contrast-plugin/browser" }
 
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true
+
+[observability.traces]
+enabled = false
+persist = true
+head_sampling_rate = 1
+
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/create-palette-plugin/eslint.config.js

@@ -3,7 +3,6 @@ import baseConfig from '../../eslint.config.js';
 export default [
   ...baseConfig,
   {
-    files: ['**/*.ts', '**/*.tsx'],
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -23,5 +22,5 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
-  { ignores: ['**/assets/*.js', 'vite.config.ts'] },
+  { ignores: ['vite.config.ts'] },
 ];

plugins/apps/create-palette-plugin/package.json

@@ -8,7 +8,6 @@
     "build": "vite build",
     "build:watch": "vite build --watch --mode development",
     "preview": "vite preview",
-    "init": "concurrently --kill-others --names build,serve \"pnpm run build:watch\" \"pnpm run preview\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/create-palette-plugin/wrangler.toml

@@ -3,6 +3,21 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/create-palette-plugin" }
 
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true
+
+[observability.traces]
+enabled = false
+persist = true
+head_sampling_rate = 1
+
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/e2e/eslint.config.js

@@ -28,5 +28,5 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
-  { ignores: ['vite.config.ts', 'vitest.setup.ts'] },
+  { ignores: ['vite.config.ts'] },
 ];

plugins/apps/e2e/src/plugins.spec.ts

@@ -29,7 +29,6 @@ describe('Plugins', () => {
 
   it('create grid layout', async () => {
     const agent = await Agent();
-
     const result = await agent.runCode(grid.toString(), {
       screenshot: 'create-gridlayout',
     });
@@ -84,9 +83,9 @@ describe('Plugins', () => {
 
   it('comments', async () => {
     const agent = await Agent();
-    console.log(comments.toString());
     const result = await agent.runCode(comments.toString(), {
       screenshot: 'create-comments',
+      avoidSavedStatus: true,
     });
     expect(result).toMatchSnapshot();
   });

plugins/apps/e2e/src/utils/agent.ts

@@ -1,4 +1,4 @@
-import puppeteer, { ConsoleMessage } from 'puppeteer';
+import puppeteer from 'puppeteer';
 import { PenpotApi } from './api';
 import { getFileUrl } from './get-file-url';
 import { idObjectToArray } from './clean-id';
@@ -56,16 +56,10 @@ export async function Agent() {
   console.log('File URL:', fileUrl);
 
   console.log('Launching browser...');
-  const browser = await puppeteer.launch({
+  const browser = await puppeteer.launch({});
-    headless: process.env['E2E_HEADLESS'] !== 'false',
-    args: ['--ignore-certificate-errors'],
-  });
   const page = await browser.newPage();
 
   await page.setViewport({ width: 1920, height: 1080 });
-  await page.setExtraHTTPHeaders({
-    'X-Client': 'plugins/e2e:puppeter',
-  });
 
   console.log('Setting authentication cookie...');
   page.setCookie({
@@ -91,11 +85,8 @@ export async function Agent() {
 
   const finish = async () => {
     console.log('Deleting file and closing browser...');
-    // TODO
+    await penpotApi.deleteFile(file['~:id']);
-    // await penpotApi.deleteFile(file['~:id']);
+    await browser.close();
-    if (process.env['E2E_CLOSE_BROWSER'] !== 'false') {
-      await browser.close();
-    }
     console.log('Clean up done.');
   };
 
@@ -105,9 +96,11 @@ export async function Agent() {
       options: {
         screenshot?: string;
         autoFinish?: boolean;
+        avoidSavedStatus?: boolean;
       } = {
         screenshot: '',
         autoFinish: true,
+        avoidSavedStatus: false,
       },
     ) {
       const autoFinish = options.autoFinish ?? true;
@@ -116,27 +109,28 @@ export async function Agent() {
       await page.evaluate((testingPlugin) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (globalThis as any).ɵloadPlugin({
-          pluginId: '00000000-0000-0000-0000-000000000000',
+          pluginId: 'TEST',
           name: 'Test',
           code: `
             (${testingPlugin})();
           `,
           icon: '',
           description: '',
-          permissions: [
+          permissions: ['content:read', 'content:write'],
-            'content:read',
-            'content:write',
-            'library:read',
-            'library:write',
-            'user:read',
-            'comment:read',
-            'comment:write',
-            'allow:downloads',
-            'allow:localstorage',
-          ],
         });
       }, code);
 
+      if (!options.avoidSavedStatus) {
+        console.log('Waiting for save status...');
+        await page.waitForSelector(
+          '.main_ui_workspace_right_header__saved-status',
+          {
+            timeout: 10000,
+          },
+        );
+        console.log('Save status found.');
+      }
+
       if (options.screenshot && screenshotsEnable) {
         console.log('Taking screenshot:', options.screenshot);
         await page.screenshot({
@@ -144,55 +138,30 @@ export async function Agent() {
         });
       }
 
-      const result = await new Promise((resolve) => {
+      return new Promise((resolve) => {
-        const handleConsole = async (msg: ConsoleMessage) => {
+        page.once('console', async (msg) => {
           const args = (await Promise.all(
             msg.args().map((arg) => arg.jsonValue()),
-          )) as unknown[];
+          )) as Record<string, unknown>[];
 
-          const type = args[0];
+          const result = Object.values(args[1]) as Shape[];
-          const data = args[1];
-
-          if (type !== 'objects' || !data || typeof data !== 'object') {
-            console.log('Invalid console message, waiting for valid one...');
-            page.once('console', handleConsole);
-            return;
-          }
-
-          const result = Object.values(data) as Shape[];
 
           replaceIds(result);
           console.log('IDs replaced in result.');
 
           resolve(result);
-        };
 
-        page.once('console', handleConsole);
+          if (autoFinish) {
+            console.log('Auto finish enabled. Cleaning up...');
+            finish();
+          }
+        });
 
         console.log('Evaluating debug.dump_objects...');
         page.evaluate(`
           debug.dump_objects();
         `);
       });
-
-      await page.waitForNetworkIdle({ idleTime: 2000 });
-
-      // Wait for the update-file API call to complete
-      if (process.env['E2E_WAIT_API_RESPONSE'] === 'true') {
-        await page.waitForResponse(
-          (response) =>
-            response.url().includes('api/main/methods/update-file') &&
-            response.status() === 200,
-          { timeout: 10000 },
-        );
-      }
-
-      if (autoFinish) {
-        console.log('Auto finish enabled. Cleaning up...');
-        await finish();
-      }
-
-      return result;
     },
     finish,
   };

plugins/apps/e2e/src/utils/api.ts

@@ -1,34 +1,31 @@
 import { FileRpc } from '../models/file-rpc.model';
-const apiUrl = 'https://localhost:3449';
+
+const apiUrl = 'http://localhost:3449';
 
 export async function PenpotApi() {
   if (!process.env['E2E_LOGIN_EMAIL']) {
     throw new Error('E2E_LOGIN_EMAIL not set');
   }
 
-  const body = JSON.stringify({
-    email: process.env['E2E_LOGIN_EMAIL'],
-    password: process.env['E2E_LOGIN_PASSWORD'],
-  });
-
   const resultLoginRequest = await fetch(
-    `${apiUrl}/api/main/methods/login-with-password`,
+    `${apiUrl}/api/rpc/command/login-with-password`,
     {
-      credentials: 'include',
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
+        'Content-Type': 'application/transit+json',
       },
-      body: body,
+      body: JSON.stringify({
+        '~:email': process.env['E2E_LOGIN_EMAIL'],
+        '~:password': process.env['E2E_LOGIN_PASSWORD'],
+      }),
     },
   );
 
   const loginData = await resultLoginRequest.json();
-
   const authToken = resultLoginRequest.headers
-    .getSetCookie()
+    .get('set-cookie')
-    .find((cookie: string) => cookie.startsWith('auth-token='))
+    ?.split(';')
-    ?.split(';')[0];
+    .at(0);
 
   if (!authToken) {
     throw new Error('Login failed');
@@ -38,7 +35,7 @@ export async function PenpotApi() {
     getAuth: () => authToken,
     createFile: async () => {
       const createFileRequest = await fetch(
-        `${apiUrl}/api/main/methods/create-file`,
+        `${apiUrl}/api/rpc/command/create-file`,
         {
           method: 'POST',
           headers: {
@@ -54,9 +51,6 @@ export async function PenpotApi() {
                 'fdata/objects-map',
                 'fdata/pointer-map',
                 'fdata/shape-data-type',
-                'fdata/path-data',
-                'design-tokens/v1',
-                'variants/v1',
                 'components/v2',
                 'styles/v2',
                 'layout/grid',
@@ -67,13 +61,11 @@ export async function PenpotApi() {
         },
       );
 
-      const fileData = (await createFileRequest.json()) as FileRpc;
+      return (await createFileRequest.json()) as FileRpc;
-      console.log('File data received:', fileData);
-      return fileData;
     },
     deleteFile: async (fileId: string) => {
       const deleteFileRequest = await fetch(
-        `${apiUrl}/api/main/methods/delete-file`,
+        `${apiUrl}/api/rpc/command/delete-file`,
         {
           method: 'POST',
           headers: {

plugins/apps/e2e/src/utils/get-file-url.ts

@@ -6,5 +6,5 @@ export function getFileUrl(file: FileRpc) {
   const fileId = cleanId(file['~:id']);
   const pageId = cleanId(file['~:data']['~:pages'][0]);
 
-  return `https://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`;
+  return `http://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`;
 }

plugins/apps/e2e/vite.config.ts

@@ -7,27 +7,13 @@ export default defineConfig({
     testTimeout: 20000,
     watch: false,
     globals: true,
-    environment: 'node',
+    environment: 'happy-dom',
-    environmentOptions: {
-      happyDOM: {
-        settings: {
-          disableCSSFileLoading: true,
-          disableJavaScriptFileLoading: true,
-          disableJavaScriptEvaluation: true,
-          enableFileSystemHttpRequests: false,
-          navigator: {
-            userAgent:
-              'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
-          },
-        },
-      },
-    },
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/e2e',
       provider: 'v8',
     },
-    setupFiles: ['dotenv/config', 'vitest.setup.ts'],
+    setupFiles: ['dotenv/config'],
   },
 });

plugins/apps/e2e/vitest.setup.ts

@@ -1 +0,0 @@
-process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

plugins/apps/icons-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build icons-plugin && pnpm run build:plugin",
+    "build": "ng build icons-plugin",
     "build:dev": "ng build icons-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin --watch",
     "serve": "ng serve icons-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/icons-plugin/wrangler.toml

@@ -3,6 +3,21 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/icons-plugin/browser" }
 
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true
+
+[observability.traces]
+enabled = false
+persist = true
+head_sampling_rate = 1
+
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/lorem-ipsum-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build lorem-ipsum-plugin && pnpm run build:plugin",
+    "build": "ng build lorem-ipsum-plugin",
     "build:dev": "ng build lorem-ipsum-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin --watch",
     "serve": "ng serve lorem-ipsum-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }