WIP

🔧 Update build-tag.yml github workflow
2026-01-11 07:49:06 -05:00 · 2025-12-11 12:22:28 +01:00 · 2025-12-11 12:16:39 +01:00 · 2025-12-11 12:00:42 +01:00 · 2025-12-11 11:51:47 +01:00 · 2025-12-11 10:46:54 +01:00
55 changed files with 1442 additions and 400 deletions
--- a/.github/workflows/build-tag.yml
+++ b/.github/workflows/build-tag.yml
@@ -11,7 +11,7 @@ jobs:
    secrets: inherit
    with:
      gh_ref: ${{ github.ref_name }}
-      build_wasm: "no"
+      build_wasm: "yes"
      build_storybook: "yes"

  build-docker:
@@ -21,6 +21,22 @@ jobs:
    with:
      gh_ref: ${{ github.ref_name }}

+  notify:
+    name: Notifications
+    runs-on: ubuntu-24.04
+    needs: build-docker
+
+    steps:
+      - name: Notify Mattermost
+        uses: mattermost/action-mattermost-notify@master
+        with:
+          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
+          MATTERMOST_CHANNEL: bot-alerts-cicd
+          TEXT: |
+            🐳 *[PENPOT] Docker image available.*
+            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+            @infra
+
  publish-final-tag:
    if: ${{ !contains(github.ref_name, '-RC') && !contains(github.ref_name, '-alpha') && !contains(github.ref_name, '-beta')  && contains(github.ref_name, '.') }}
    needs: build-docker
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -92,6 +92,8 @@ example. It's still usable as before, we just removed the example.
 - Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
 - Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
 - Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
+- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
+- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)

 ## 2.11.1

--- a/backend/resources/app/onboarding.edn
+++ b/backend/resources/app/onboarding.edn
@@ -3,7 +3,7 @@
  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Tokens%20starter%20kit.penpot"}
 {:id "penpot-design-system"
  :name "Penpot Design System | Pencil"
-  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/penpot-app.penpot"}
+  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Pencil-Penpot-Design-System.penpot"}
 {:id "wireframing-kit"
  :name "Wireframe library"
  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Wireframing%20kit%20v1.1.penpot"}
--- a/common/src/app/common/logic/libraries.cljc
+++ b/common/src/app/common/logic/libraries.cljc
@@ -12,8 +12,11 @@
   [app.common.files.changes-builder :as pcb]
   [app.common.files.helpers :as cfh]
   [app.common.files.variant :as cfv]
+   [app.common.geom.matrix :as gmt]
   [app.common.geom.point :as gpt]
+   [app.common.geom.rect :as grc]
   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.common :as gco]
   [app.common.logging :as log]
   [app.common.logic.shapes :as cls]
   [app.common.logic.variant-properties :as clvp]
@@ -26,6 +29,7 @@
   [app.common.types.library :as ctl]
   [app.common.types.page :as ctp]
   [app.common.types.pages-list :as ctpl]
+   [app.common.types.path.segment :as segment]
   [app.common.types.shape :as cts]
   [app.common.types.shape-tree :as ctst]
   [app.common.types.shape.interactions :as ctsi]
@@ -1876,6 +1880,44 @@
                   roperations'
                   uoperations')))))))

+(defn- set-path-new-values
+  [current-shape prev-shape transform]
+  (let [new-content   (segment/transform-content
+                       (:content current-shape)
+                       (gmt/transform-in (gpt/point 0 0) transform))
+        new-points    (-> (segment/content->selrect new-content)
+                          (grc/rect->points))
+        points-center (gco/points->center new-points)
+        new-selrect   (gsh/calculate-selrect new-points points-center)
+        shape         (assoc current-shape
+                             :content new-content
+                             :points new-points
+                             :selrect new-selrect)
+
+        prev-center   (segment/content-center (:content prev-shape))
+        delta         (gpt/subtract points-center (first new-points))
+        new-pos       (gpt/subtract prev-center delta)]
+    (gsh/absolute-move shape new-pos)))
+
+(defn- switch-path-change-value
+  [prev-shape           ;; The shape before the switch
+   current-shape        ;; The shape after the switch (a clean copy)
+   ref-shape            ;; The referenced shape on the main component
+                        ;; before the switch
+   attr]
+  (let [old-width (-> ref-shape :selrect :width)
+        new-width (-> prev-shape :selrect :width)
+
+        old-height (-> ref-shape :selrect :height)
+        new-height (-> prev-shape :selrect :height)
+
+        transform (-> (gpt/point (/ new-width old-width)
+                                 (/ new-height old-height))
+                      (gmt/scale-matrix))
+
+        shape     (set-path-new-values current-shape prev-shape transform)]
+    (get shape attr)))
+

 (defn- switch-text-change-value
  [prev-content         ;; The :content of the text before the switch
@@ -2027,6 +2069,10 @@
               (= :content attr)
               (touched attr-group))

+              path-change?
+              (and (= :path (:type current-shape))
+                   (contains? #{:points :selrect :content} attr))
+
              ;; position-data is a special case because can be affected by :geometry-group and :content-group
              ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
              ;; so it's calculated again
@@ -2055,6 +2101,12 @@
                                            (:content origin-ref-shape)
                                            touched)

+                  path-change?
+                  (switch-path-change-value previous-shape
+                                            current-shape
+                                            origin-ref-shape
+                                            attr)
+
                  :else
                  (get previous-shape attr)))

--- a/common/src/app/common/schema.cljc
+++ b/common/src/app/common/schema.cljc
@@ -281,7 +281,20 @@
 (defn check-fn
  "Create a predefined check function"
  [s & {:keys [hint type code]}]
-  (let [s          (schema s)
+  (let [s          #?(:clj
+                      (schema s)
+                      :cljs
+                      (try
+                        (schema s)
+                        (catch :default cause
+                          (let [data (ex-data cause)]
+                            (if (= :malli.core/invalid-schema (:type data))
+                              (throw (ex-info
+                                      (str "Invalid schema\n"
+                                           (pp/pprint-str (:data data)))
+                                      {}))
+                              (throw cause))))))
+
        validator* (delay (m/validator s))
        explainer* (delay (m/explainer s))
        hint       (or ^boolean hint "check error")
--- a/docker/devenv/files/nginx.conf
+++ b/docker/devenv/files/nginx.conf
@@ -223,16 +223,19 @@ http {
                add_header X-Cache-Status $upstream_cache_status;
            }

-            location ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
+            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+                add_header Cache-Control "public, max-age=604800" always; # 7 days
+            }
+
+            location ~* \.(js|css|wasm)$ {
+                add_header Cache-Control "no-store" always;
            }

            location ~ ^/[^/]+/(.*)$ {
                return 301 " /404";
            }

-            add_header Cache-Control "no-store";
-            # This header is what we need to use on prod
-            # add_header Cache-Control "public, must-revalidate, max-age=0";
+            add_header Cache-Control "no-store" always;
            try_files $uri /index.html$is_args$args /index.html =404;
        }
    }
--- a/exporter/package.json
+++ b/exporter/package.json
@@ -21,6 +21,7 @@
    "raw-body": "^3.0.1",
    "source-map-support": "^0.5.21",
    "svgo": "penpot/svgo#v3.1",
+    "undici": "^7.16.0",
    "xml-js": "^1.6.11",
    "xregexp": "^5.1.2"
  },
--- a/exporter/src/app/browser.cljs
+++ b/exporter/src/app/browser.cljs
@@ -100,7 +100,7 @@

 (def browser-pool-factory
  (letfn [(create []
-            (p/let [opts    #js {:args #js ["--font-render-hinting=none"]}
+            (p/let [opts    #js {:args #js ["--allow-insecure-localhost" "--font-render-hinting=none"]}
                    browser (.launch pw/chromium opts)
                    id      (swap! pool-browser-id inc)]
              (l/info :origin "factory" :action "create" :browser-id id)
--- a/exporter/src/app/handlers/export_shapes.cljs
+++ b/exporter/src/app/handlers/export_shapes.cljs
@@ -74,7 +74,7 @@
         (p/fmap (fn [resource]
                   (assoc exchange :response/body resource)))
         (p/merr (fn [cause]
-                   (l/error :hint "unexpected error on export multiple"
+                   (l/error :hint "unexpected error on single export"
                            :cause cause)
                   (p/rejected cause))))))

@@ -94,7 +94,7 @@
                          (redis/pub! topic data))))

        on-error    (fn [cause]
-                      (l/error :hint "unexpected error on multiple exportation" :cause cause)
+                      (l/error :hint "unexpected error on multiple export" :cause cause)
                      (if wait
                        (p/rejected cause)
                        (redis/pub! topic {:type :export-update
@@ -107,12 +107,12 @@
                                    :on-progress on-progress)

        append      (fn [{:keys [filename path] :as resource}]
-                      (rsc/add-to-zip! zip path (str/replace filename sanitize-file-regex "_")))
+                      (rsc/add-to-zip zip path (str/replace filename sanitize-file-regex "_")))

        proc        (->> exports
                         (map (fn [export] (rd/render export append)))
                         (p/all)
-                         (p/fnly (fn [_] (.finalize zip)))
+                         (p/mcat (fn [_] (rsc/close-zip zip)))
                         (p/fmap (constantly resource))
                         (p/mcat (partial rsc/upload-resource auth-token))
                         (p/fmap (fn [resource]
--- a/exporter/src/app/handlers/resources.cljs
+++ b/exporter/src/app/handlers/resources.cljs
@@ -11,6 +11,7 @@
   ["node:fs" :as fs]
   ["node:fs/promises" :as fsp]
   ["node:path" :as path]
+   ["undici" :as http]
   [app.common.exceptions :as ex]
   [app.common.transit :as t]
   [app.common.uri :as u]
@@ -53,30 +54,40 @@
    (.pipe zip out)
    zip))

-(defn add-to-zip!
+(defn add-to-zip
  [zip path name]
  (.file ^js zip path #js {:name name}))

-(defn close-zip!
+(defn close-zip
  [zip]
-  (.finalize ^js zip))
+  (p/create (fn [resolve]
+              (.on ^js zip "close" resolve)
+              (.finalize ^js zip))))

 (defn upload-resource
  [auth-token resource]
  (->> (fsp/readFile (:path resource))
       (p/fmap (fn [buffer]
+                 (js/console.log buffer)
                 (new js/Blob #js [buffer] #js {:type (:mtype resource)})))
       (p/mcat (fn [blob]
-                 (let [fdata (new js/FormData)
-                       uri   (-> (cf/get :public-uri)
-                                 (u/ensure-path-slash)
-                                 (u/join "api/management/methods/upload-tempfile")
-                                 (str))]
+                 (let [fdata  (new http/FormData)
+                       agent  (new http/Agent #js {:connect #js {:rejectUnauthorized false}})
+                       headers #js {"X-Shared-Key" cf/management-key
+                                    "Authorization" (str "Bearer " auth-token)}
+
+                       request #js {:headers headers
+                                    :method "POST"
+                                    :body fdata
+                                    :dispatcher agent}
+                       uri     (-> (cf/get :public-uri)
+                                   (u/ensure-path-slash)
+                                   (u/join "api/management/methods/upload-tempfile")
+                                   (str))]
+
                   (.append fdata "content" blob (:filename resource))
-                   (js/fetch uri #js {:headers #js {"X-Shared-Key" cf/management-key
-                                                    "Authorization" (str "Bearer " auth-token)}
-                                      :method "POST"
-                                      :body fdata}))))
+                   (http/fetch uri request))))
+
       (p/mcat (fn [response]
                 (if (not= (.-status response) 200)
                   (ex/raise :type :internal
--- a/exporter/src/app/util/shell.cljs
+++ b/exporter/src/app/util/shell.cljs
@@ -75,7 +75,8 @@
  [path]
  (->> (.stat fs/promises path)
       (p/fmap (fn [data]
-                 {:created-at (inst-ms (.-ctime ^js data))
+                 {:path path
+                  :created-at (inst-ms (.-ctime ^js data))
                  :size (.-size data)}))
       (p/merr (fn [_cause]
                 (p/resolved nil)))))
--- a/exporter/yarn.lock
+++ b/exporter/yarn.lock
@@ -582,6 +582,7 @@ __metadata:
    raw-body: "npm:^3.0.1"
    source-map-support: "npm:^0.5.21"
    svgo: "penpot/svgo#v3.1"
+    undici: "npm:^7.16.0"
    ws: "npm:^8.18.3"
    xml-js: "npm:^1.6.11"
    xregexp: "npm:^5.1.2"
@@ -1513,6 +1514,13 @@ __metadata:
  languageName: node
  linkType: hard

+"undici@npm:^7.16.0":
+  version: 7.16.0
+  resolution: "undici@npm:7.16.0"
+  checksum: 10c0/efd867792e9f233facf9efa0a087e2d9c3e4415c0b234061b9b40307ca4fa01d945fee4d43c7b564e1b80e0d519bcc682f9f6e0de13c717146c00a80e2f1fb0f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^4.0.0":
  version: 4.0.0
  resolution: "unique-filename@npm:4.0.0"
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -50,5 +50,8 @@

  :shadow-cljs
  {:main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :jvm-opts ["--sun-misc-unsafe-memory-access=allow" "-Dpenpot.wasm.profile-marks=true"]}
+   :jvm-opts ["--sun-misc-unsafe-memory-access=allow"
+              "-Dpenpot.wasm.profile-marks=true"
+              "-XX:+UnlockExperimentalVMOptions"
+              "-XX:CompileCommand=blackhole,criterium.blackhole.Blackhole::consume"]}
  }}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,9 +45,9 @@
    "translations": "node ./scripts/translations.js",
    "watch:app:assets": "node ./scripts/watch.js",
    "watch:app:libs": "node ./scripts/build-libs.js --watch",
-    "watch:app:main": "clojure -M:dev:shadow-cljs watch main storybook",
+    "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
    "clear:shadow-cache": "rm -rf .shadow-cljs",
-    "watch:app": "yarn run clear:shadow-cache && yarn run build:app:worker && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
    "watch": "yarn run watch:app:assets",
    "watch:storybook": "yarn run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
    "watch:storybook:assets": "node ./scripts/watch-storybook.js"
@@ -106,7 +106,7 @@
    "@penpot/hljs": "portal:./vendor/hljs",
    "@penpot/mousetrap": "portal:./vendor/mousetrap",
    "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/svgo": "penpot/svgo#v3.2",
    "@penpot/text-editor": "portal:./text-editor",
    "@tokens-studio/sd-transforms": "1.2.11",
    "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -180,8 +180,8 @@ export async function watch(baseDir, predicate, callback) {
  });
 }

-async function readManifestFile() {
-  const manifestPath = "resources/public/js/manifest.json";
+async function readManifestFile(resource) {
+  const manifestPath = "resources/public/" + resource;
  let content = await fs.readFile(manifestPath, { encoding: "utf8" });
  return JSON.parse(content);
 }
@@ -189,19 +189,23 @@ async function readManifestFile() {
 async function readShadowManifest() {
  const ts = Date.now();
  try {
-    const content = await readManifestFile();
+    const content = await readManifestFile("js/manifest.json");

    const index = {
      ts: ts,
      config: "js/config.js?ts=" + ts,
      polyfills: "js/polyfills.js?ts=" + ts,
-      worker_main: "js/worker/main.js?ts=" + ts,
    };

    for (let item of content) {
      index[item.name] = "js/" + item["output-name"];
    }

+    const content2 = await readManifestFile("js/worker/manifest.json");
+    for (let item of content2) {
+      index["worker_" + item.name] = "js/worker/" + item["output-name"];
+    }
+
    return index;
  } catch (cause) {
    return {
--- a/frontend/scripts/build
+++ b/frontend/scripts/build
@@ -20,16 +20,18 @@ echo $PATH
 set -ex

 corepack enable;
-corepack install || exit 1;
+corepack install;
 yarn install || exit 1;

 rm -rf resources/public;
 rm -rf target/dist;

-yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1
+yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS;

 if [ "$INCLUDE_WASM" = "yes" ];  then
-    yarn run build:wasm || exit 1;
+    pushd ../render-wasm;
+    ./build
+    popd
 fi

 yarn run build:app:libs || exit 1;
@@ -44,10 +46,6 @@ sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/rasterizer.html;
 sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/index.html;
 sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/rasterizer.html;

-if [ "$INCLUDE_WASM" = "yes" ];  then
-    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./target/dist/js/render_wasm.js;
-fi
-
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then
    # build storybook
    yarn run build:storybook || exit 1;
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -83,7 +83,7 @@
     :source-map-detail-level :all}}}

  :worker
-  {:target :esm
+  {:target :browser
   :output-dir "resources/public/js/worker/"
   :asset-path "/js/worker"
   :devtools {:browser-inject :main
@@ -94,6 +94,7 @@
   {:main
    {:entries [app.worker]
     :web-worker true
+     :prepend-js "importScripts('/js/worker/render.js');"
     :depends-on #{}}}

   :js-options
--- a/frontend/src/app/config.cljs
+++ b/frontend/src/app/config.cljs
@@ -127,7 +127,7 @@
      public-uri))

 (def worker-uri
-  (obj/get global "penpotWorkerURI" "/js/worker.js"))
+  (obj/get global "penpotWorkerURI" "/js/worker/main.js"))

 (defn external-feature-flag
  [flag value]
@@ -189,7 +189,11 @@
        (true? thumbnail?) (u/join (dm/str id "/thumbnail"))
        (false? thumbnail?) (u/join (dm/str id)))))))

-(defn resolve-static-asset
-  [path]
-  (let [uri (u/join public-uri path)]
-    (assoc uri :query (dm/str "version=" (:full version)))))
+(defn resolve-href
+  [resource]
+  (let [version (get version :full)
+        href    (-> public-uri
+                    (u/ensure-path-slash)
+                    (u/join resource)
+                    (get :path))]
+    (str href "?version=" version)))
--- a/frontend/src/app/main/data/style_dictionary.cljs
+++ b/frontend/src/app/main/data/style_dictionary.cljs
@@ -255,14 +255,19 @@

 (defn- parse-sd-token-font-family-value
  [value]
-  (let [missing-references (seq (some cto/find-token-value-references value))]
+  (let [value (-> (js->clj value) (flatten))
+        valid-font-family (or (string? value) (every? string? value))
+        missing-references (seq (some cto/find-token-value-references value))]
    (cond
+      (not valid-font-family)
+      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-font-family value)]}
+
      missing-references
      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
       :references missing-references}

      :else
-      {:value (-> (js->clj value) (flatten))})))
+      {:value value})))

 (defn parse-atomic-typography-value [token-type token-value]
  (case token-type
--- a/frontend/src/app/main/data/team.cljs
+++ b/frontend/src/app/main/data/team.cljs
@@ -351,19 +351,31 @@
                 (on-success))))
             (rx/catch on-error))))))

+
+(def ^:private schema:create-invitation
+  [:and
+   [:map
+    [:emails {:optional true} [::sm/set ::sm/email]]
+    [:invitations {:optional true}
+     [:vector
+      [:map
+       [:email ::sm/email]
+       [:role [::sm/one-of ctt/valid-roles]]]]]
+    [:team-id ::sm/uuid]
+    [:resend? {:optional true} ::sm/boolean]]
+   [:fn (fn [attrs]
+          (or (contains? attrs :emails)
+              (contains? attrs :invitations)))]])
+
+(def ^:private check-create-invitations-params
+  (sm/check-fn schema:create-invitation))
+
 (defn create-invitations
  "Unified function to create invitations. Supports two parameter formats:
  1. {:emails #{...} :role :admin :team-id uuid} - single role for all emails
  2. {:invitations [{:email ... :role ...}] :team-id uuid} - individual roles per email"
  [{:keys [emails role team-id invitations resend?] :as params}]
-
-  (assert (uuid? team-id))
-  ;; Validate input format - must have either emails+role OR invitations
-  (assert (or (and emails role (sm/check-set-of-emails emails) (keyword? role))
-              (and invitations
-                   (sm/check-set-of-emails (map :email invitations))
-                   (every? #(contains? ctt/valid-roles (:role %)) invitations)))
-          "Must provide either emails+role or invitations with individual roles")
+  (check-create-invitations-params params)

  (ptk/reify ::create-invitations
    ev/Event
--- a/frontend/src/app/main/data/workspace/tokens/errors.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/errors.cljs
@@ -88,6 +88,10 @@
   {:error/code :error.style-dictionary/invalid-token-value-font-weight
    :error/fn #(tr "workspace.tokens.invalid-font-weight-token-value" %)}

+   :error.style-dictionary/invalid-token-value-font-family
+   {:error/code :error.style-dictionary/invalid-token-value-font-family
+    :error/fn #(tr "workspace.tokens.invalid-font-family-token-value" %)}
+
   :error.style-dictionary/invalid-token-value-typography
   {:error/code :error.style-dictionary/invalid-token-value-typography
    :error/fn #(tr "workspace.tokens.invalid-token-value-typography" %)}
--- a/frontend/src/app/main/ui/delete_shared.scss
+++ b/frontend/src/app/main/ui/delete_shared.scss
@@ -45,7 +45,7 @@
 .element-list {
  @include t.use-typography("body-large");
  color: var(--modal-text-foreground-color);
-  overflow-y: scroll;
+  overflow-y: auto;
  margin-block: 0;
 }

--- a/frontend/src/app/main/ui/exports/assets.cljs
+++ b/frontend/src/app/main/ui/exports/assets.cljs
@@ -223,24 +223,30 @@
        circ              (* 2 Math/PI 12)
        pct               (- circ (* circ (/ progress total)))

-        pwidth (if error?
-                 280
-                 (/ (* progress 280) total))
-        color  (cond
-                 error?         clr/new-danger
-                 healthy?       (if is-default-theme?
-                                  clr/new-primary
-                                  clr/new-primary-light)
-                 (not healthy?) clr/new-warning)
+        pwidth
+        (if error?
+          280
+          (/ (* progress 280) total))

-        background-clr (if is-default-theme?
-                         clr/background-quaternary
-                         clr/background-quaternary-light)
-        title  (cond
-                 error?          (tr "workspace.options.exporting-object-error")
-                 complete?       (tr "workspace.options.exporting-complete")
-                 healthy?        (tr "workspace.options.exporting-object")
-                 (not healthy?)  (tr "workspace.options.exporting-object-slow"))
+        color
+        (cond
+          error?         clr/new-danger
+          healthy?       (if is-default-theme?
+                           clr/new-primary
+                           clr/new-primary-light)
+          (not healthy?) clr/new-warning)
+
+        background-clr
+        (if is-default-theme?
+          clr/background-quaternary
+          clr/background-quaternary-light)
+
+        title
+        (cond
+          error?          (tr "workspace.options.exporting-object-error")
+          complete?       (tr "workspace.options.exporting-complete")
+          healthy?        (tr "workspace.options.exporting-object")
+          (not healthy?)  (tr "workspace.options.exporting-object-slow"))

        retry-last-export
        (mf/use-fn #(st/emit! (de/retry-last-export)))
@@ -284,7 +290,7 @@
                     :on-click retry-last-export}
            (tr "workspace.options.retry")]

-           [:p {:class (stl/css :progress)}
+           [:span {:class (stl/css :progress)}
            (dm/str progress " / " total)])]

        [:button {:class (stl/css :progress-close-button)
--- a/frontend/src/app/main/ui/inspect/attributes.cljs
+++ b/frontend/src/app/main/ui/inspect/attributes.cljs
@@ -36,7 +36,7 @@
   :text     [:visibility :geometry :text :shadow :blur :stroke :layout-element]
   :variant  [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]})

-(mf/defc attributes
+(mf/defc attributes*
  [{:keys [page-id file-id shapes frame from libraries share-id objects color-space]}]
  (let [shapes             (hooks/use-equal-memo shapes)
        first-shape        (first shapes)
--- a/frontend/src/app/main/ui/inspect/code.cljs
+++ b/frontend/src/app/main/ui/inspect/code.cljs
@@ -96,7 +96,7 @@
                     embed-images? (replace-map images-data))]
    (str/format page-template style-code markup-code)))

-(mf/defc code
+(mf/defc code*
  [{:keys [shapes frame on-expand from]}]
  (let [style-type*    (mf/use-state "css")
        markup-type*   (mf/use-state "html")
--- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs
+++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs
@@ -16,8 +16,8 @@
   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
   [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
   [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.inspect.attributes :refer [attributes]]
-   [app.main.ui.inspect.code :refer [code]]
+   [app.main.ui.inspect.attributes :refer [attributes*]]
+   [app.main.ui.inspect.code :refer [code*]]
   [app.main.ui.inspect.selection-feedback :refer [resolve-shapes]]
   [app.main.ui.inspect.styles :refer [styles-tab*]]
   [app.util.dom :as dom]
@@ -122,8 +122,7 @@
     (fn []
       (if (seq shapes)
         (st/emit! (ptk/event ::ev/event {::ev/name "inspect-mode-click-element"}))
-         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))
-       (reset! color-space* "hex")))
+         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))))

    [:aside {:class (stl/css-case :settings-bar-right true
                                  :viewer-code (= from :viewer))}
@@ -189,41 +188,41 @@
                               :libraries libraries
                               :file-id file-id}]
              :computed
-              [:& attributes {:color-space color-space
-                              :page-id page-id
-                              :objects objects
-                              :file-id file-id
-                              :frame frame
-                              :shapes shapes
-                              :from from
-                              :libraries libraries
-                              :share-id share-id}]
+              [:> attributes* {:color-space color-space
+                               :page-id page-id
+                               :objects objects
+                               :file-id file-id
+                               :frame frame
+                               :shapes shapes
+                               :from from
+                               :libraries libraries
+                               :share-id share-id}]

              :code
-              [:& code {:frame frame
-                        :shapes shapes
-                        :on-expand handle-expand
-                        :from from}])]
+              [:> code* {:frame frame
+                         :shapes shapes
+                         :on-expand handle-expand
+                         :from from}])]
           [:> tab-switcher* {:tabs tabs
                              :selected (name @section)
                              :on-change handle-change-tab
                              :class (stl/css :viewer-tab-switcher)}
            (case @section
              :info
-              [:& attributes {:page-id page-id
-                              :objects objects
-                              :file-id file-id
-                              :frame frame
-                              :shapes shapes
-                              :from from
-                              :libraries libraries
-                              :share-id share-id}]
+              [:> attributes* {:page-id page-id
+                               :objects objects
+                               :file-id file-id
+                               :frame frame
+                               :shapes shapes
+                               :from from
+                               :libraries libraries
+                               :share-id share-id}]

              :code
-              [:& code {:frame frame
-                        :shapes shapes
-                        :on-expand handle-expand
-                        :from from}])])]]
+              [:> code* {:frame frame
+                         :shapes shapes
+                         :on-expand handle-expand
+                         :from from}])])]]
       [:div {:class (stl/css :empty)}
        [:div {:class (stl/css :code-info)}
         [:span {:class (stl/css :placeholder-icon)}
--- a/frontend/src/app/main/ui/inspect/styles.cljs
+++ b/frontend/src/app/main/ui/inspect/styles.cljs
@@ -133,7 +133,7 @@
           (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
    [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
     ;;  TOKENS PANEL
-     (when (or active-themes active-sets)
+     (when (or (seq active-themes) (seq active-sets))
       [:li
        [:> style-box* {:panel :token}
         [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]])
--- a/frontend/src/app/main/ui/settings/subscription.cljs
+++ b/frontend/src/app/main/ui/settings/subscription.cljs
@@ -77,7 +77,7 @@
     [:button {:class (stl/css :cta-button :bottom-link)
               :on-click cta-link-trial} cta-text-trial])])

-(defn schema:seats-form [min-editors]
+(defn- make-management-form-schema [min-editors]
  [:map {:title "SeatsForm"}
   [:min-members [::sm/number {:min min-editors
                               :max 9999}]]
@@ -87,7 +87,6 @@
  {::mf/register modal/components
   ::mf/register-as :management-dialog}
  [{:keys [subscription-type current-subscription editors subscribe-to-trial]}]
-
  (let [unlimited-modal-step*
        (mf/use-state 1)

@@ -112,9 +111,12 @@
          {:min-members min-editors
           :redirect-to-payment-details false})

+        schema
+        (mf/with-memo [min-editors]
+          (make-management-form-schema min-editors))
+
        form
-        (fm/use-form :schema (schema:seats-form min-editors)
-                     :initial initial)
+        (fm/use-form :schema schema :initial initial)

        submit-in-progress
        (mf/use-ref false)
@@ -334,11 +336,15 @@
        [:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]]

       [:div {:class (stl/css :modal-end)}
-        [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
+        [:div {:class (stl/css :modal-title)}
+         (tr "subscription.settings.sucess.dialog.title" subscription-name)]
        (when (not= subscription-name "professional")
-          [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.thanks" subscription-name)])
-        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.description")]
-        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.sucess.dialog.footer")]
+          [:p {:class (stl/css :modal-text-large)}
+           (tr "subscription.settings.success.dialog.thanks" subscription-name)])
+        [:p {:class (stl/css :modal-text-large)}
+         (tr "subscription.settings.success.dialog.description")]
+        [:p {:class (stl/css :modal-text-large)}
+         (tr "subscription.settings.sucess.dialog.footer")]

        [:div {:class (stl/css :success-action-buttons)}
         [:input
@@ -418,7 +424,11 @@
    (mf/with-effect []
      (dom/set-html-title (tr "subscription.labels")))

-    (mf/with-effect [authenticated? show-subscription-success-modal? show-trial-subscription-modal? success-modal-is-trial? subscription]
+    (mf/with-effect [authenticated?
+                     show-subscription-success-modal?
+                     show-trial-subscription-modal?
+                     success-modal-is-trial?
+                     subscription]
      (when ^boolean authenticated?
        (cond
          ^boolean show-trial-subscription-modal?
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -27,7 +27,7 @@
   [app.main.ui.workspace.coordinates :as coordinates]
   [app.main.ui.workspace.libraries]
   [app.main.ui.workspace.nudge]
-   [app.main.ui.workspace.palette :refer [palette]]
+   [app.main.ui.workspace.palette :refer [palette*]]
   [app.main.ui.workspace.plugins]
   [app.main.ui.workspace.sidebar :refer [sidebar*]]
   [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -84,8 +84,8 @@
        node-ref (use-resize-observer on-resize)]
    [:*
     (when (not ^boolean hide-ui?)
-       [:& palette {:layout layout
-                    :on-change-palette-size on-resize-palette}])
+       [:> palette* {:layout layout
+                     :on-change-size on-resize-palette}])

     [:section
      {:key (dm/str "workspace-" page-id)
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
@@ -156,7 +156,7 @@
                       (let [{:keys [modal title]} (get dwta/token-properties :color)
                             window-size (dom/get-window-size)
                             left-sidebar (dom/get-element "left-sidebar-aside")
-                             x-size (dom/get-data left-sidebar "left-sidebar-width")
+                             x-size (dom/get-data left-sidebar "width")
                             modal-height 392
                             x (- (int x-size) 30)
                             y (- (/ (:height window-size) 2) (/ modal-height 2))]
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -33,12 +33,13 @@
   [okulary.core :as l]
   [rumext.v2 :as mf]))

-(def viewport
+(def ^:private ref:viewport
  (l/derived :vport refs/workspace-local))

-(defn calculate-palette-padding [rulers?]
+(defn- calculate-palette-style
+  [rulers?]
  (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
+        left-sidebar-size      (-> (dom/get-data left-sidebar "width")
                                   (d/parse-integer))
        rulers-width           (if rulers? 22 0)
        min-left-sidebar-width left-sidebar-default-width
@@ -48,36 +49,46 @@
    #js {"paddingLeft" (dm/str calculate-padding-left "px")
         "paddingRight" "322px"}))

-(mf/defc palette
-  [{:keys [layout on-change-palette-size]}]
-  (let [color-palette?       (:colorpalette layout)
-        text-palette?        (:textpalette layout)
-        hide-palettes?       (:hide-palettes layout)
-        workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
-        container            (mf/use-ref nil)
-        state*               (mf/use-state {:show-menu false})
-        state                (deref state*)
-        show-menu?           (:show-menu state)
-        selected             (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
-        selected-text*       (mf/use-state :file)
-        selected-text        (deref selected-text*)
-        on-select            (mf/use-fn #(reset! selected %))
-        rulers?              (mf/deref refs/rulers?)
-        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
+(mf/defc palette*
+  [{:keys [layout on-change-size]}]
+  (let [color-palette? (:colorpalette layout)
+        text-palette?  (:textpalette layout)
+        hide-palettes? (:hide-palettes layout)

-        vport (mf/deref viewport)
-        vport-width (:width vport)
+        read-only?     (mf/use-ctx ctx/workspace-read-only?)
+        container      (mf/use-ref nil)
+
+        state*         (mf/use-state #(-> {:show-menu false}))
+        state          (deref state*)
+        show-menu?     (:show-menu state)
+
+        selected       (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
+
+        selected-text* (mf/use-state :file)
+        selected-text  (deref selected-text*)
+
+        on-select      (mf/use-fn #(reset! selected %))
+
+        rulers?        (mf/deref refs/rulers?)
+        vport          (mf/deref ref:viewport)
+        vport-width    (get vport :width)
+
+        {:keys [on-pointer-down
+                on-lost-pointer-capture
+                on-pointer-move
+                parent-ref
+                size]}
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size)

        on-resize
-        (mf/use-callback
+        (mf/use-fn
         (fn [_]
           (let [dom   (mf/ref-val container)
                 width (obj/get dom "clientWidth")]
             (swap! state* assoc :width width))))

        on-close-menu
-        (mf/use-callback
+        (mf/use-fn
         (fn [_]
           (swap! state* assoc :show-menu false)))

@@ -100,7 +111,7 @@
             (reset! selected-text* (:id lib)))))

        toggle-palettes
-        (mf/use-callback
+        (mf/use-fn
         (fn [_]
           (r/set-resize-type! :top)
           (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -131,7 +142,9 @@
                                             (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
             (dom/blur! node))))

-        any-palette? (or color-palette? text-palette?)
+        any-palette?
+        (or color-palette? text-palette?)
+
        size-classname
        (cond
          (<= size 64) (stl/css :small-palette)
@@ -142,16 +155,16 @@
      (let [key1 (events/listen js/window "resize" on-resize)]
        #(events/unlistenByKey key1)))

-    (mf/use-layout-effect
-     #(let [dom     (mf/ref-val parent-ref)
+    (mf/with-layout-effect []
+      (let [dom     (mf/ref-val parent-ref)
            width (obj/get dom "clientWidth")]
        (swap! state* assoc :width width)))

    [:div {:class (stl/css :palette-wrapper)
           :id "palette-wrapper"
-           :style  (calculate-palette-padding rulers?)
+           :style  (calculate-palette-style rulers?)
           :data-testid "palette"}
-     (when-not workspace-read-only?
+     (when-not ^boolean read-only?
       [:div {:ref parent-ref
              :class (dm/str size-classname " " (stl/css-case :palettes true
                                                              :wide any-palette?
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -27,7 +27,6 @@
   [app.main.ui.workspace.left-header :refer [left-header*]]
   [app.main.ui.workspace.right-header :refer [right-header*]]
   [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox*]]
-   [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button*]]
   [app.main.ui.workspace.sidebar.debug :refer [debug-panel*]]
   [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info*]]
   [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -44,19 +43,34 @@

 ;; --- Left Sidebar (Component)

-(defn- on-collapse-left-sidebar
-  []
-  (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
+(def ^:private toggle-collapse-left-sidebar
+  (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))

 (mf/defc collapse-button*
+  {::mf/private true}
  []
  ;; NOTE: This custom button may be replace by an action button when this variant is designed
  [:button {:class (stl/css :collapse-sidebar-button)
-            :on-click on-collapse-left-sidebar}
+            :on-click toggle-collapse-left-sidebar}
   [:> icon* {:icon-id i/arrow
              :size "s"
              :aria-label (tr "workspace.sidebar.collapse")}]])

+(mf/defc collapsed-button*
+  {::mf/memo true
+   ::mf/private true}
+  []
+  [:div {:id "left-sidebar-aside"
+         :data-width "0"
+         :class (stl/css :collapsed-sidebar)}
+   [:div {:class (stl/css :collapsed-title)}
+    [:button {:class (stl/css :collapsed-button)
+              :title (tr "workspace.sidebar.expand")
+              :on-click toggle-collapse-left-sidebar}
+     [:> icon* {:icon-id i/arrow
+                :size "s"
+                :aria-label (tr "workspace.sidebar.expand")}]]]])
+
 (mf/defc layers-content*
  {::mf/private true
   ::mf/memo true}
@@ -97,6 +111,7 @@

     [:> layers-toolbox* {:size-parent width}]]))

+
 (mf/defc left-sidebar*
  {::mf/memo true}
  [{:keys [layout file page-id tokens-lib active-tokens resolved-active-tokens]}]
@@ -161,7 +176,7 @@
     [:aside {:ref parent-ref
              :id "left-sidebar-aside"
              :data-testid "left-sidebar"
-              :data-left-sidebar-width (str width)
+              :data-width (str width)
              :class aside-class
              :style {:--left-sidebar-width (dm/str width "px")}}

--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -116,6 +116,44 @@
  }
 }

+.collapsed-sidebar {
+  @include deprecated.flexCenter;
+  position: absolute;
+  top: deprecated.$s-48;
+  left: 0;
+  padding: deprecated.$s-4;
+  border-radius: deprecated.$br-8;
+  background: var(--color-background-primary);
+  margin-inline-start: var(--sp-m);
+}
+.collapsed-title {
+  @include deprecated.flexCenter;
+  height: deprecated.$s-36;
+  width: deprecated.$s-24;
+  border-radius: deprecated.$br-8;
+  background: var(--color-background-secondary);
+}
+.collapsed-button {
+  @include deprecated.buttonStyle;
+  height: deprecated.$s-24;
+  width: deprecated.$s-16;
+  padding: 0;
+  border-radius: deprecated.$br-5;
+  svg {
+    @include deprecated.flexCenter;
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+    color: transparent;
+    fill: none;
+    stroke: var(--icon-foreground);
+  }
+  &:hover {
+    svg {
+      stroke: var(--icon-foreground-hover);
+    }
+  }
+}
+
 .versions-tab {
  width: 100%;
  overflow: hidden;
--- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
@@ -1,29 +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.main.ui.workspace.sidebar.collapsable-button
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.main.data.workspace :as dw]
-   [app.main.store :as st]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
-   [app.util.i18n :refer [tr]]
-   [rumext.v2 :as mf]))
-
-(mf/defc collapsed-button*
-  {::mf/memo true}
-  []
-  (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
-    [:div {:id "left-sidebar-aside"
-           :data-size "0"
-           :class (stl/css :collapsed-sidebar)}
-     [:div {:class (stl/css :collapsed-title)}
-      [:button {:class (stl/css :collapsed-button)
-                :title (tr "workspace.sidebar.expand")
-                :on-click on-click}
-       [:> icon* {:icon-id i/arrow
-                  :size "s"
-                  :aria-label (tr "workspace.sidebar.expand")}]]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss
@@ -1,45 +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
-
-@use "refactor/common-refactor.scss" as deprecated;
-
-.collapsed-sidebar {
-  @include deprecated.flexCenter;
-  position: absolute;
-  top: deprecated.$s-48;
-  left: 0;
-  padding: deprecated.$s-4;
-  border-radius: deprecated.$br-8;
-  background: var(--color-background-primary);
-  margin-inline-start: var(--sp-m);
-}
-.collapsed-title {
-  @include deprecated.flexCenter;
-  height: deprecated.$s-36;
-  width: deprecated.$s-24;
-  border-radius: deprecated.$br-8;
-  background: var(--color-background-secondary);
-}
-.collapsed-button {
-  @include deprecated.buttonStyle;
-  height: deprecated.$s-24;
-  width: deprecated.$s-16;
-  padding: 0;
-  border-radius: deprecated.$br-5;
-  svg {
-    @include deprecated.flexCenter;
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-    color: transparent;
-    fill: none;
-    stroke: var(--icon-foreground);
-  }
-  &:hover {
-    svg {
-      stroke: var(--icon-foreground-hover);
-    }
-  }
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -68,7 +68,7 @@

 (mf/defc color-token-row*
  {::mf/private true}
-  [{:keys [active-tokens color-token color on-swatch-click-token detach-token open-modal-from-token]}]
+  [{:keys [active-tokens applied-token-name color on-swatch-click-token detach-token open-modal-from-token]}]
  (let [;; `active-tokens` may be provided as a `delay` (lazy computation).
        ;; In that case we must deref it (`@active-tokens`) to force evaluation
        ;; and obtain the actual value. If it’s already realized (not a delay),
@@ -77,21 +77,22 @@
                        @active-tokens
                        active-tokens)

-        color-tokens (:color active-tokens)
+        active-color-tokens (:color active-tokens)

-        token (some #(when (= (:name %) color-token) %) color-tokens)
+        token (some #(when (= (:name %) applied-token-name) %) active-color-tokens)

        on-detach-token
        (mf/use-fn
-         (mf/deps detach-token token color-token)
+         (mf/deps detach-token token applied-token-name)
         (fn []
-           (let [token (or token color-token)]
+           (let [token (or token applied-token-name)]
             (detach-token token))))

        has-errors (some? (:errors token))
        token-name (:name token)
        resolved (:resolved-value token)
-        not-active (and (some? active-tokens) (nil? token))
+        not-active (and (empty? active-tokens)
+                        (nil? token))
        id (dm/str (:id token) "-name")
        swatch-tooltip-content (cond
                                 not-active
@@ -109,7 +110,7 @@
                               #(mf/html
                                 [:div
                                  [:span (dm/str (tr "workspace.tokens.token-name") ": ")]
-                                  [:span {:class (stl/css :token-name-tooltip)} color-token]]))]
+                                  [:span {:class (stl/css :token-name-tooltip)} applied-token-name]]))]

    [:div {:class (stl/css :color-info)}
     [:div {:class (stl/css-case :token-color-wrapper true
@@ -128,7 +129,7 @@
                    :class (stl/css :token-tooltip)}
       [:div {:class (stl/css :token-name)
              :aria-labelledby id}
-        (or token-name color-token)]]
+        (or token-name applied-token-name)]]
      [:div {:class (stl/css :token-actions)}
       [:> icon-button*
        {:variant "action"
@@ -146,7 +147,11 @@
           on-change on-reorder on-detach on-open on-close on-remove origin on-detach-token
           disable-drag on-focus on-blur select-only select-on-focus on-token-change applied-token]}]

-  (let [token-color      (contains? cfg/flags :token-color)
+  (let [;; TODO: Remove this workaround fixing `get-attrs*` fn on sidebar/options/shapes/multiple.cljs
+        applied-token (if (= :multiple applied-token)
+                        nil
+                        applied-token)
+        token-color      (contains? cfg/flags :token-color)
        libraries        (mf/deref refs/files)

        color-without-hash (mf/use-memo
@@ -177,7 +182,6 @@
                                (-> (deref active-tokens*)
                                    (select-keys (get tk/tokens-by-input origin))
                                    (not-empty)))))
-
        on-focus'
        (mf/use-fn
         (mf/deps on-focus)
@@ -352,7 +356,7 @@
     (cond
       (and token-color applied-token)
       [:> color-token-row* {:active-tokens tokens
-                             :color-token applied-token
+                             :applied-token-name applied-token
                             :color (dissoc color :ref-id :ref-file)
                             :on-swatch-click-token  on-swatch-click-token
                             :detach-token detach-token
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -63,7 +63,8 @@
           :data {:index index})
          [nil nil])

-        stroke-color-token (:stroke-color applied-tokens)
+        stroke-color-token
+        (:stroke-color applied-tokens)

        on-color-change-refactor
        (mf/use-fn
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
@@ -20,15 +20,21 @@

 ;; Component -------------------------------------------------------------------

-(defn calculate-position
+(defn- calculate-position
  "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y color?]
-  (let [;; picker height in pixels
-        ;; TODO: Revisit these harcoded values
-        h (if color? 610 510)
+  [{vh :height} position x y token-type]
+  (let [; TODO: Revisit these harcoded values
+        modal-height (case token-type
+                       :color
+                       500
+                       :typography
+                       660
+                       :shadow
+                       660
+                       400)
        ;; Checks for overflow outside the viewport height
-        max-y             (- vh h)
-        overflow-fix      (max 0 (+ y (- 50) h (- vh)))
+        max-y             (- vh modal-height)
+        overflow-fix      (max 0 (+ y (- 50) modal-height (- vh)))
        bottom-offset     "1rem"
        top-offset        (dm/str (- y 70) "px")
        max-height-top    (str "calc(100vh - " top-offset)
@@ -61,17 +67,19 @@
         :top (dm/str (- y 70 overflow-fix) "px")
         :maxHeight max-height-top}))))

-(defn use-viewport-position-style [x y position color?]
+(defn use-viewport-position-style [x y position token-type]
  (let [vport (-> (l/derived :vport refs/workspace-local)
                  (mf/deref))]
-    (-> (calculate-position vport position x y color?)
+    (-> (calculate-position vport position x y token-type)
        (clj->js))))

 (mf/defc token-update-create-modal
  {::mf/wrap-props false}
  [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
-  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
-        modal-size-large* (mf/use-state (= token-type :typography))
+  (let [wrapper-style (use-viewport-position-style x y position token-type)
+        modal-size-large* (mf/use-state (or (= token-type :typography)
+                                            (= token-type :color)
+                                            (= token-type :shadow)))
        modal-size-large? (deref modal-size-large*)
        close-modal (mf/use-fn
                     (fn []
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -18,7 +18,7 @@
  padding: deprecated.$s-8 deprecated.$s-16;
  border-radius: deprecated.$s-8;
  border: deprecated.$s-2 solid var(--panel-border-color);
-  z-index: deprecated.$z-index-3;
+  z-index: deprecated.$z-index-1;
  background-color: var(--color-background-primary);
  transition:
    top 0.3s,
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -1316,51 +1316,16 @@
      (mem/free)
      content)))

-
 (defn init-wasm-module
  [module]
  (let [default-fn (unchecked-get module "default")
-        serializers
-        #js
-         {:blur-type (unchecked-get module "RawBlurType")
-          :blend-mode (unchecked-get module "RawBlendMode")
-          :bool-type (unchecked-get module "RawBoolType")
-          :font-style (unchecked-get module "RawFontStyle")
-          :flex-direction (unchecked-get module "RawFlexDirection")
-          :grid-direction (unchecked-get module "RawGridDirection")
-          :grow-type (unchecked-get module "RawGrowType")
-          :align-items (unchecked-get module "RawAlignItems")
-          :align-self (unchecked-get module "RawAlignSelf")
-          :align-content (unchecked-get module "RawAlignContent")
-          :justify-items (unchecked-get module "RawJustifyItems")
-          :justify-content (unchecked-get module "RawJustifyContent")
-          :justify-self (unchecked-get module "RawJustifySelf")
-          :wrap-type (unchecked-get module "RawWrapType")
-          :grid-track-type (unchecked-get module "RawGridTrackType")
-          :shadow-style (unchecked-get module "RawShadowStyle")
-          :stroke-style (unchecked-get module "RawStrokeStyle")
-          :stroke-cap (unchecked-get module "RawStrokeCap")
-          :shape-type (unchecked-get module "RawShapeType")
-          :constraint-h (unchecked-get module "RawConstraintH")
-          :constraint-v (unchecked-get module "RawConstraintV")
-          :sizing (unchecked-get module "RawSizing")
-          :vertical-align (unchecked-get module "RawVerticalAlign")
-          :fill-data (unchecked-get module "RawFillData")
-          :text-align (unchecked-get module "RawTextAlign")
-          :text-direction (unchecked-get module "RawTextDirection")
-          :text-decoration (unchecked-get module "RawTextDecoration")
-          :text-transform (unchecked-get module "RawTextTransform")
-          :segment-data (unchecked-get module "RawSegmentData")
-          :stroke-linecap (unchecked-get module "RawStrokeLineCap")
-          :stroke-linejoin (unchecked-get module "RawStrokeLineJoin")
-          :fill-rule (unchecked-get module "RawFillRule")}]
-    (set! wasm/serializers serializers)
-    (default-fn)))
+        href       (cf/resolve-href "js/render-wasm.wasm")]
+    (default-fn #js {:locateFile (constantly href)})))

 (defonce module
  (delay
    (if (exists? js/dynamicImport)
-      (let [uri (cf/resolve-static-asset "js/render_wasm.js")]
+      (let [uri (cf/resolve-href "js/render-wasm.js")]
        (->> (js/dynamicImport (str uri))
             (p/mcat init-wasm-module)
             (p/fmap
--- a/frontend/src/app/render_wasm/api/shared.js
+++ b/frontend/src/app/render_wasm/api/shared.js
@@ -0,0 +1,242 @@
+export const GrowType = {
+  "fixed": 0,
+  "auto-width": 1,
+  "auto-height": 2,
+};
+
+export const RawBlendMode = {
+  "normal": 3,
+  "screen": 14,
+  "overlay": 15,
+  "darken": 16,
+  "lighten": 17,
+  "color-dodge": 18,
+  "color-burn": 19,
+  "hard-light": 20,
+  "soft-light": 21,
+  "difference": 22,
+  "exclusion": 23,
+  "multiply": 24,
+  "hue": 25,
+  "saturation": 26,
+  "color": 27,
+  "luminosity": 28,
+};
+
+export const RawBlurType = {
+  "layer-blur": 0,
+};
+
+export const RawFillData = {
+  "solid": 0,
+  "linear": 1,
+  "radial": 2,
+  "image": 3,
+};
+
+export const RawFontStyle = {
+  "normal": 0,
+  "italic": 1,
+};
+
+export const RawAlignItems = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "stretch": 3,
+};
+
+export const RawAlignContent = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "space-between": 3,
+  "space-around": 4,
+  "space-evenly": 5,
+  "stretch": 6,
+};
+
+export const RawJustifyItems = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "stretch": 3,
+};
+
+export const RawJustifyContent = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "space-between": 3,
+  "space-around": 4,
+  "space-evenly": 5,
+  "stretch": 6,
+};
+
+export const RawJustifySelf = {
+  "none": 0,
+  "auto": 1,
+  "start": 2,
+  "end": 3,
+  "center": 4,
+  "stretch": 5,
+};
+
+export const RawAlignSelf = {
+  "none": 0,
+  "auto": 1,
+  "start": 2,
+  "end": 3,
+  "center": 4,
+  "stretch": 5,
+};
+
+export const RawVerticalAlign = {
+  "top": 0,
+  "center": 1,
+  "bottom": 2,
+};
+
+export const RawConstraintH = {
+  "left": 0,
+  "right": 1,
+  "leftright": 2,
+  "center": 3,
+  "scale": 4,
+};
+
+export const RawConstraintV = {
+  "top": 0,
+  "bottom": 1,
+  "topbottom": 2,
+  "center": 3,
+  "scale": 4,
+};
+
+export const RawFlexDirection = {
+  "row": 0,
+  "row-reverse": 1,
+  "column": 2,
+  "column-reverse": 3,
+};
+
+export const RawWrapType = {
+  "wrap": 0,
+  "nowrap": 1,
+};
+
+export const RawGridDirection = {
+  "row": 0,
+  "column": 1,
+};
+
+export const RawGridTrackType = {
+  "percent": 0,
+  "flex": 1,
+  "auto": 2,
+  "fixed": 3,
+};
+
+export const RawSizing = {
+  "fill": 0,
+  "fix": 1,
+  "auto": 2,
+};
+
+export const RawBoolType = {
+  "union": 0,
+  "difference": 1,
+  "intersection": 2,
+  "exclusion": 3,
+};
+
+export const RawSegmentData = {
+  "move-to": 1,
+  "line-to": 2,
+  "curve-to": 3,
+  "close": 4,
+};
+
+export const RawShadowStyle = {
+  "drop-shadow": 0,
+  "inner-shadow": 1,
+};
+
+export const RawShapeType = {
+  "frame": 0,
+  "group": 1,
+  "bool": 2,
+  "rect": 3,
+  "path": 4,
+  "text": 5,
+  "circle": 6,
+  "svg-raw": 7,
+};
+
+export const RawStrokeStyle = {
+  "solid": 0,
+  "dotted": 1,
+  "dashed": 2,
+  "mixed": 3,
+};
+
+export const RawStrokeCap = {
+  "none": 0,
+  "line-arrow": 1,
+  "triangle-arrow": 2,
+  "square-marker": 3,
+  "circle-marker": 4,
+  "diamond-marker": 5,
+  "round": 6,
+  "square": 7,
+};
+
+export const RawFillRule = {
+  "nonzero": 0,
+  "evenodd": 1,
+};
+
+export const RawStrokeLineCap = {
+  "butt": 0,
+  "round": 1,
+  "square": 2,
+};
+
+export const RawStrokeLineJoin = {
+  "miter": 0,
+  "round": 1,
+  "bevel": 2,
+};
+
+export const RawTextAlign = {
+  "left": 0,
+  "center": 1,
+  "right": 2,
+  "justify": 3,
+};
+
+export const RawTextDirection = {
+  "ltr": 0,
+  "rtl": 1,
+};
+
+export const RawTextDecoration = {
+  "none": 0,
+  "underline": 1,
+  "line-through": 2,
+  "overline": 3,
+};
+
+export const RawTextTransform = {
+  "none": 0,
+  "uppercase": 1,
+  "lowercase": 2,
+  "capitalize": 3,
+};
+
+export const RawGrowType = {
+  "fixed": 0,
+  "auto-width": 1,
+  "auto-height": 2,
+};
+
--- a/frontend/src/app/render_wasm/wasm.cljs
+++ b/frontend/src/app/render_wasm/wasm.cljs
@@ -4,9 +4,43 @@
 ;;
 ;; Copyright (c) KALEIDOS INC

-(ns app.render-wasm.wasm)
+(ns app.render-wasm.wasm
+  (:require ["./api/shared.js" :as shared]))

 (defonce internal-frame-id nil)
 (defonce internal-module #js {})
-(defonce serializers #js {})
+(defonce serializers
+  #js {:blur-type shared/RawBlurType
+       :blend-mode shared/RawBlendMode
+       :bool-type shared/RawBoolType
+       :font-style shared/RawFontStyle
+       :flex-direction shared/RawFlexDirection
+       :grid-direction shared/RawGridDirection
+       :grow-type shared/RawGrowType
+       :align-items shared/RawAlignItems
+       :align-self shared/RawAlignSelf
+       :align-content shared/RawAlignContent
+       :justify-items shared/RawJustifyItems
+       :justify-content shared/RawJustifyContent
+       :justify-self shared/RawJustifySelf
+       :wrap-type shared/RawWrapType
+       :grid-track-type shared/RawGridTrackType
+       :shadow-style shared/RawShadowStyle
+       :stroke-style shared/RawStrokeStyle
+       :stroke-cap shared/RawStrokeCap
+       :shape-type shared/RawShapeType
+       :constraint-h shared/RawConstraintH
+       :constraint-v shared/RawConstraintV
+       :sizing shared/RawSizing
+       :vertical-align shared/RawVerticalAlign
+       :fill-data shared/RawFillData
+       :text-align shared/RawTextAlign
+       :text-direction shared/RawTextDirection
+       :text-decoration shared/RawTextDecoration
+       :text-transform shared/RawTextTransform
+       :segment-data shared/RawSegmentData
+       :stroke-linecap shared/RawStrokeLineCap
+       :stroke-linejoin shared/RawStrokeLineJoin
+       :fill-rule shared/RawFillRule})
+
 (defonce context-initialized? false)
--- a/frontend/src/app/util/worker.cljs
+++ b/frontend/src/app/util/worker.cljs
@@ -89,7 +89,7 @@
 (defn init
  "Return a initialized webworker instance."
  [path on-error]
-  (let [instance (js/Worker. path #js {:type "module"})
+  (let [instance (js/Worker. path)
        bus     (rx/subject)
        worker  (Worker. instance (rx/to-observable bus))

--- a/frontend/src/app/worker/thumbnails.cljs
+++ b/frontend/src/app/worker/thumbnails.cljs
@@ -24,11 +24,12 @@
   [beicon.v2.core :as rx]
   [okulary.core :as l]
   [promesa.core :as p]
-   [rumext.v2 :as mf]
-   [shadow.esm :refer (dynamic-import)]))
+   [rumext.v2 :as mf]))

 (log/set-level! :trace)

+(def ^:private ^:const thumbnail-aspect-ratio (/ 2 3))
+
 (defn- handle-response
  [{:keys [body status] :as response}]
  (cond
@@ -64,6 +65,10 @@
         (rx/map http/conditional-decode-transit)
         (rx/mapcat handle-response))))

+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SVG RENDERING (LEGACY RENDER)
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (defn- render-thumbnail
  [{:keys [page file-id revn] :as params}]
  (try
@@ -98,15 +103,13 @@
  (->> (request-data-for-thumbnail file-id revn true)
       (rx/map render-thumbnail)))

-(def init-wasm
-  (delay
-    (let [uri (cf/resolve-static-asset "js/render_wasm.js")]
-      (-> (dynamic-import (str uri))
-          (p/then #(wasm.api/init-wasm-module %))
-          (p/then #(set! wasm/internal-module %))))))
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; WASM RENDERING
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

-(mf/defc svg-wrapper
-  [{:keys [data-uri background width height]}]
+(mf/defc svg-wrapper*
+  {::mf/private true}
+  [{:keys [uri background width height]}]
  [:svg {:version "1.1"
         :xmlns "http://www.w3.org/2000/svg"
         :xmlnsXlink "http://www.w3.org/1999/xlink"
@@ -116,85 +119,97 @@
                 :background background}
         :fill "none"
         :viewBox (dm/str "0 0 " width " " height)}
-   [:image {:xlinkHref data-uri
+   [:image {:xlinkHref uri
            :width width
            :height height}]])

-(defn blob->uri
+(defn- blob->uri
  [blob]
  (.readAsDataURL (js/FileReaderSync.) blob))

-(def thumbnail-aspect-ratio (/ 2 3))
+(defn- render-canvas-blob
+  [canvas width height background]
+  (->> (.convertToBlob ^js canvas)
+       (p/fmap (fn [blob]
+                 (rds/renderToStaticMarkup
+                  (mf/element svg-wrapper*
+                              #js {:uri (blob->uri blob)
+                                   :width width
+                                   :height height
+                                   :background background}))))))

-(defn render-canvas-blob
-  [canvas width height background-color]
-  (-> (.convertToBlob canvas)
-      (p/then
-       (fn [blob]
-         (rds/renderToStaticMarkup
-          (mf/element
-           svg-wrapper
-           #js {:data-uri (blob->uri blob)
-                :width width
-                :height height
-                :background background-color}))))))
+(defonce ^:private wasm-module
+  (delay
+    (let [module  (unchecked-get js/globalThis "WasmModule")
+          init-fn (unchecked-get module "default")
+          href    (cf/resolve-href "js/render-wasm.wasm")]
+      (->> (init-fn #js {:locateFile (constantly href)})
+           (p/fnly (fn [module cause]
+                     (if cause
+                       (js/console.error cause)
+                       (set! wasm/internal-module module))))))))

-(defn process-wasm-thumbnail
+(defn- render-thumbnail-with-wasm
  [{:keys [id file-id revn width] :as message}]
-  (->> (rx/from @init-wasm)
+  (->> (rx/from @wasm-module)
       (rx/mapcat #(request-data-for-thumbnail file-id revn false))
       (rx/mapcat
        (fn [{:keys [page] :as file}]
          (rx/create
           (fn [subs]
-             (let [background-color (or (:background page) cc/canvas)
-                   height (* width thumbnail-aspect-ratio)
-                   canvas (js/OffscreenCanvas. width height)
-                   init? (wasm.api/init-canvas-context canvas)]
+             (let [bgcolor (or (:background page) cc/canvas)
+                   height  (* width thumbnail-aspect-ratio)
+                   canvas  (js/OffscreenCanvas. width height)
+                   init?   (wasm.api/init-canvas-context canvas)]
               (if init?
                 (let [objects (:objects page)
-                       frame (some->> page :thumbnail-frame-id (get objects))
-                       vbox (if frame
-                              (-> (gsb/get-object-bounds objects frame)
-                                  (grc/fix-aspect-ratio thumbnail-aspect-ratio))
-                              (render/calculate-dimensions objects thumbnail-aspect-ratio))
-                       zoom (/ width (:width vbox))]
+                       frame   (some->> page :thumbnail-frame-id (get objects))
+                       vbox    (if frame
+                                 (-> (gsb/get-object-bounds objects frame)
+                                     (grc/fix-aspect-ratio thumbnail-aspect-ratio))
+                                 (render/calculate-dimensions objects thumbnail-aspect-ratio))
+                       zoom    (/ width (:width vbox))]

                   (wasm.api/initialize-viewport
-                    objects zoom vbox background-color
+                    objects zoom vbox bgcolor
                    (fn []
                      (if frame
                        (wasm.api/render-sync-shape (:id frame))
                        (wasm.api/render-sync))

-                      (-> (render-canvas-blob canvas width height background-color)
-                          (p/then #(rx/push! subs {:id id :data % :file-id file-id :revn revn}))
-                          (p/catch #(rx/error! subs %))
-                          (p/finally #(rx/end! subs))))))
-
+                      (->> (render-canvas-blob canvas width height bgcolor)
+                           (p/fnly (fn [data cause]
+                                     (if cause
+                                       (rx/error! subs cause)
+                                       (rx/push! subs
+                                                 {:id id
+                                                  :data data
+                                                  :file-id file-id
+                                                  :revn revn}))
+                                     (rx/end! subs)))))))
                 (rx/end! subs))
-
               nil)))))))

-(defonce thumbs-subject (rx/subject))
+(defonce ^:private
+  thumbnails-queue
+  (rx/subject))

-(defonce thumbs-stream
-  (->> thumbs-subject
-       (rx/mapcat process-wasm-thumbnail)
+(defonce ^:private
+  thumbnails-stream
+  (->> thumbnails-queue
+       (rx/mapcat render-thumbnail-with-wasm)
       (rx/share)))

 (defmethod impl/handler :thumbnails/generate-for-file-wasm
  [message _]
  (rx/create
   (fn [subs]
-     (let [id (uuid/next)
-           sid
-           (->> thumbs-stream
-                (rx/filter #(= id (:id %)))
-                (rx/subs!
-                 #(do
-                    (rx/push! subs %)
-                    (rx/end! subs))))]
-       (rx/push! thumbs-subject (assoc message :id id))
-
+     (let [id  (uuid/next)
+           sid (->> thumbnails-stream
+                    (rx/filter #(= id (:id %)))
+                    (rx/subs!
+                     (fn [result]
+                       (rx/push! subs result)
+                       (rx/end! subs))))]
+       (rx/push! thumbnails-queue (assoc message :id id))
       #(rx/dispose! sid)))))
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -7745,6 +7745,10 @@ msgstr ""
 "Invalid token value: only none, Uppercase, Lowercase or Capitalize are "
 "accepted"

+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr "Invalid token value: you can only reference a font-family token"
+
 #: src/app/main/data/workspace/tokens/errors.cljs:85
 msgid "workspace.tokens.invalid-text-decoration-token-value"
 msgstr "Invalid token value: only none, underline and strike-through are accepted"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -7670,6 +7670,14 @@ msgstr ""
 msgid "workspace.tokens.invalid-shadow-type-token-value"
 msgstr "Tipo de sombra no válida: solo se aceptan 'innerShadow' o 'dropShadow'"

+#: src/app/main/data/workspace/tokens/errors.cljs:93
+msgid "workspace.tokens.invalid-font-family-token-value"
+msgstr "Valor de token no válido: solo puedes referenciar tokens tipo font-family"
+
+#: src/app/main/data/workspace/tokens/errors.cljs:85
+msgid "workspace.tokens.invalid-text-decoration-token-value"
+msgstr "Valor de token no válido: solo none, underline y strike-through son aceptados"
+
 #: src/app/main/data/workspace/tokens/errors.cljs:93
 msgid "workspace.tokens.invalid-token-value-typography"
 msgstr "Valor no válido: debe hacer referencia a un token tipográfico compuesto."
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1226,16 +1226,16 @@ __metadata:
  languageName: node
  linkType: hard

-"@penpot/svgo@penpot/svgo#v3.1":
+"@penpot/svgo@penpot/svgo#v3.2":
  version: 4.0.0
-  resolution: "@penpot/svgo@https://github.com/penpot/svgo.git#commit=a46262c12c0d967708395972c374eb2adead4180"
+  resolution: "@penpot/svgo@https://github.com/penpot/svgo.git#commit=8c9b0e32e9cb5f106085260bd9375f3c91a5010b"
  dependencies:
    "@trysound/sax": "npm:0.2.0"
    css-select: "npm:^5.1.0"
    css-tree: "npm:^3.1.0"
    csso: "npm:^5.0.5"
    lodash: "npm:^4.17.21"
-  checksum: 10c0/db5f81c99dec2765721d73b69bb30594869ebf657380dfb46709c79775b6c0dc1af678fe9fe51bbe2272a2c78d19c2694a12ec6578bcc41235fa4aff475c9416
+  checksum: 10c0/d7af2801451b97f8ffb17664147c609456f5bcc786c6d03b222546125260c0f268e750748311d61598e31f66610b00038d2b969635b1a15e5694647e19c6b63a
  languageName: node
  linkType: hard

@@ -4311,7 +4311,7 @@ __metadata:
    "@penpot/hljs": "portal:./vendor/hljs"
    "@penpot/mousetrap": "portal:./vendor/mousetrap"
    "@penpot/plugins-runtime": "npm:1.3.2"
-    "@penpot/svgo": "penpot/svgo#v3.1"
+    "@penpot/svgo": "penpot/svgo#v3.2"
    "@penpot/text-editor": "portal:./text-editor"
    "@playwright/test": "npm:1.52.0"
    "@storybook/addon-docs": "npm:10.0.4"
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "license": "MPL-2.0",
  "author": "Kaleidos INC",
  "private": true,
-  "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538",
+  "packageManager": "yarn@4.12.0+sha512.f45ab632439a67f8bc759bf32ead036a1f413287b9042726b7cc4818b7b49e14e9423ba49b18f9e06ea4941c1ad062385b1d8760a8d5091a1a31e5f6219afca8",
  "repository": {
    "type": "git",
    "url": "https://github.com/penpot/penpot"
@@ -15,6 +15,7 @@
    "fmt": "./scripts/fmt"
  },
  "devDependencies": {
-    "@types/node": "^20.12.7"
+    "@types/node": "^20.12.7",
+    "esbuild": "^0.25.9"
  }
 }
--- a/render-wasm/_build_env
+++ b/render-wasm/_build_env
@@ -1,17 +1,23 @@
 #!/usr/bin/env bash

+export CURRENT_VERSION=${CURRENT_VERSION:-develop};
+
 if [ "$NODE_ENV" = "production" ];  then
-    export _BUILD_MODE="release";
+    export BUILD_MODE="release";
 else
-    export _BUILD_MODE=${1:-debug};
+    export BUILD_MODE=${1:-debug};
 fi

+export BUILD_NAME="${BUILD_NAME:-render-wasm}"
+export CARGO_BUILD_TARGET=${CARGO_BUILD_TARGET:-"wasm32-unknown-emscripten"};
+export SKIA_BINARIES_URL=${SKIA_BINARIES_URL:-"https://github.com/penpot/skia-binaries/releases/download/0.87.0/skia-binaries-e551f334ad5cbdf43abf-wasm32-unknown-emscripten-gl-svg-textlayout-binary-cache-webp.tar.gz"}
+
 # 256 MB of initial heap to perform less
 # initial calls to memory grow.
-EM_INITIAL_HEAP=$((256 * 1024 * 1024))
+export EM_INITIAL_HEAP=$((256 * 1024 * 1024))

 # 1.0 doubles the heap on every growth.
-EM_MEMORY_GROWTH_GEOMETRIC_STEP="0.8"
+export EM_MEMORY_GROWTH_GEOMETRIC_STEP="0.8"

 # Malloc implementation to use.
 # - dlmalloc: a powerful general-purpose malloc.
@@ -21,38 +27,63 @@ EM_MEMORY_GROWTH_GEOMETRIC_STEP="0.8"
 # - emmalloc-verbose: use emmalloc with assertions + verbose logging.
 # - emmalloc-memvalidate-verbose: use emmalloc with assertions + heap consistency checking + verbose logging.
 # Default: dlmalloc
-EM_MALLOC="dlmalloc"
+export EM_MALLOC="dlmalloc"

-EMCC_CFLAGS="--no-entry \
+export EMCC_CFLAGS="--no-entry \
    --js-library src/js/wapi.js \
    -sASSERTIONS=1 \
    -sALLOW_TABLE_GROWTH=1 \
    -sALLOW_MEMORY_GROWTH=1 \
    -sINITIAL_HEAP=$EM_INITIAL_HEAP \
    -sMEMORY_GROWTH_GEOMETRIC_STEP=$EM_MEMORY_GROWTH_GEOMETRIC_STEP \
-    -sENVIRONMENT=web \
    -sERROR_ON_UNDEFINED_SYMBOLS=0 \
    -sMAX_WEBGL_VERSION=2 \
-    -sMODULARIZE=1 \
    -sEXPORT_NAME=createRustSkiaModule \
    -sEXPORTED_RUNTIME_METHODS=GL,stringToUTF8,HEAPU8,HEAP32,HEAPU32,HEAPF32 \
-    -sEXPORT_ES6=1"
+    -sENVIRONMENT=web \
+    -sMODULARIZE=1 \
+    -sEXPORT_ES6=1";

 export EM_CACHE="/tmp/emsdk_cache";

-_CARGO_PARAMS="${@:2}";
+export CARGO_PARAMS="${@:2}";

-if [ "$_BUILD_MODE" = "release" ]; then
-    _CARGO_PARAMS="--release $_CARGO_PARAMS"
-    EMCC_CFLAGS="-Os $EMCC_CFLAGS"
+if [ "$BUILD_MODE" = "release" ]; then
+    export CARGO_PARAMS="--release $CARGO_PARAMS"
+    export EMCC_CFLAGS="-Os $EMCC_CFLAGS"
 else
    # TODO: Extra parameters that could be good to look into:
    #        -gseparate-dwarf
    #        -gsplit-dwarf
    #        -gsource-map
-    EMCC_CFLAGS="-g $EMCC_CFLAGS -sVERBOSE=1 -sMALLOC=$EM_MALLOC"
+    export EMCC_CFLAGS="-g $EMCC_CFLAGS -sVERBOSE=1 -sMALLOC=$EM_MALLOC"
 fi

-export EMCC_CFLAGS;
-export _CARGO_PARAMS;
+function clean {
+    cargo clean;
+}

+function build {
+    cargo build $CARGO_PARAMS;
+}
+
+function copy_artifacts {
+    DEST=$1;
+
+    cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
+    cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;
+
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
+
+    yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
+        --log-level=error \
+        --outfile=$DEST/worker/render.js \
+        --platform=neutral \
+        --format=iife \
+        --global-name=WasmModule;
+}
+
+function copy_shared_artifact {
+    SHARED_FILE=$(find target/wasm32-unknown-emscripten -name render_wasm_shared.js | head -n 1);
+    cp $SHARED_FILE ../frontend/src/app/render_wasm/api/shared.js;
+}
--- a/render-wasm/build
+++ b/render-wasm/build
@@ -2,8 +2,6 @@

 EMSDK_QUIET=1 . /opt/emsdk/emsdk_env.sh

-set -x
-
 _BUILD_NAME="${_BUILD_NAME:-render_wasm}"

 _SCRIPT_DIR=$(dirname $0);
@@ -11,18 +9,16 @@ pushd $_SCRIPT_DIR;

 . ./_build_env

-export CARGO_BUILD_TARGET=${CARGO_BUILD_TARGET:-"wasm32-unknown-emscripten"};
-export SKIA_BINARIES_URL=${SKIA_BINARIES_URL:-"https://github.com/penpot/skia-binaries/releases/download/0.87.0/skia-binaries-e551f334ad5cbdf43abf-wasm32-unknown-emscripten-gl-svg-textlayout-binary-cache-webp.tar.gz"}
+set -ex;

-cargo build $_CARGO_PARAMS
+corepack enable;
+corepack install;
+yarn install;

-_SHARED_FILE=$(find target/wasm32-unknown-emscripten -name render_wasm_shared.js | head -n 1);
+build;
+copy_artifacts "../frontend/resources/public/js";
+copy_shared_artifact;

-cat target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.js "$_SHARED_FILE" > ../frontend/resources/public/js/$_BUILD_NAME.js
-cp target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.wasm ../frontend/resources/public/js/$_BUILD_NAME.wasm
-
-sed -i "s/render_wasm.wasm/$_BUILD_NAME.wasm?version=develop/g" ../frontend/resources/public/js/$_BUILD_NAME.js;
-
-exit $?
+exit $?;

 popd
--- a/render-wasm/package.json
+++ b/render-wasm/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "penpot-render-wasm",
+  "version": "1.20.0",
+  "license": "MPL-2.0",
+  "author": "Kaleidos INC",
+  "private": true,
+  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/penpot/penpot"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "esbuild": "^0.25.9"
+  }
+}
--- a/render-wasm/test
+++ b/render-wasm/test
@@ -1,14 +1,14 @@
 #!/usr/bin/env bash
 set -x

+export SKIA_BINARIES_URL=${SKIA_BINARIES_URL:-"https://github.com/penpot/skia-binaries/releases/download/0.87.0/skia-binaries-e551f334ad5cbdf43abf-x86_64-unknown-linux-gnu-gl-svg-textlayout-binary-cache-webp.tar.gz"}
+export CARGO_BUILD_TARGET=${CARGO_BUILD_TARGET:-"x86_64-unknown-linux-gnu"};
+
 _SCRIPT_DIR=$(dirname $0);
 pushd $_SCRIPT_DIR;

 . ./_build_env

-export SKIA_BINARIES_URL=${SKIA_BINARIES_URL:-"https://github.com/penpot/skia-binaries/releases/download/0.87.0/skia-binaries-e551f334ad5cbdf43abf-x86_64-unknown-linux-gnu-gl-svg-textlayout-binary-cache-webp.tar.gz"}
-export CARGO_BUILD_TARGET=${CARGO_BUILD_TARGET:-"x86_64-unknown-linux-gnu"};
-
 cargo test --bin render_wasm -- --show-output

 # Exit with the same status code as cargo test
--- a/render-wasm/watch
+++ b/render-wasm/watch
@@ -6,20 +6,17 @@ pushd $_SCRIPT_DIR;

 . ./_build_env

-export CARGO_BUILD_TARGET=${CARGO_BUILD_TARGET:-"wasm32-unknown-emscripten"};
-export SKIA_BINARIES_URL=${SKIA_BINARIES_URL:-"https://github.com/penpot/skia-binaries/releases/download/0.87.0/skia-binaries-e551f334ad5cbdf43abf-wasm32-unknown-emscripten-gl-svg-textlayout-binary-cache-webp.tar.gz"}
+set -x

-_SHARED_FILE=$(find target/wasm32-unknown-emscripten -name render_wasm_shared.js | head -n 1);
-
-cat target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.js "$_SHARED_FILE" > ../frontend/resources/public/js/$_BUILD_NAME.js
-cp target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.wasm ../frontend/resources/public/js/$_BUILD_NAME.wasm
+build;
+copy_artifacts "../frontend/resources/public/js";
+copy_shared_artifact;

 pushd $_SCRIPT_DIR;
+
 cargo watch \
-      -x "build $_CARGO_PARAMS" \
-      -s "cat target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.js \"$_SHARED_FILE\" > ../frontend/resources/public/js/$_BUILD_NAME.js" \
-      -s "cp target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.wasm ../frontend/resources/public/js/" \
-      -s "sed -i 's/render_wasm.wasm/render_wasm.wasm?version=develop/g' ../frontend/resources/public/js/render_wasm.js" \
+      -x "build $CARGO_PARAMS" \
+      -s "./build" \
      -s "echo 'DONE\n'";

 popd
--- a/render-wasm/yarn.lock
+++ b/render-wasm/yarn.lock
@@ -0,0 +1,302 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10c0
+
+"@esbuild/aix-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/aix-ppc64@npm:0.25.12"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm64@npm:0.25.12"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm@npm:0.25.12"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-x64@npm:0.25.12"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-arm64@npm:0.25.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-x64@npm:0.25.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.12"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-x64@npm:0.25.12"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm64@npm:0.25.12"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm@npm:0.25.12"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ia32@npm:0.25.12"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-loong64@npm:0.25.12"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-mips64el@npm:0.25.12"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ppc64@npm:0.25.12"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-riscv64@npm:0.25.12"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-s390x@npm:0.25.12"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-x64@npm:0.25.12"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.12"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-x64@npm:0.25.12"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.12"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-x64@npm:0.25.12"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openharmony-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.12"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/sunos-x64@npm:0.25.12"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-arm64@npm:0.25.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-ia32@npm:0.25.12"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-x64@npm:0.25.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@types/node@npm:^20.12.7":
+  version: 20.19.26
+  resolution: "@types/node@npm:20.19.26"
+  dependencies:
+    undici-types: "npm:~6.21.0"
+  checksum: 10c0/68e7d92dd2b7bddff9dffabb9c740e655906ceac428dcf070915cdcae720579e4d72261c55ed7eccbfa907a75cbb1ff3a9148ea49878a07a72d5dd6c9e06d9d7
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.25.9":
+  version: 0.25.12
+  resolution: "esbuild@npm:0.25.12"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.12"
+    "@esbuild/android-arm": "npm:0.25.12"
+    "@esbuild/android-arm64": "npm:0.25.12"
+    "@esbuild/android-x64": "npm:0.25.12"
+    "@esbuild/darwin-arm64": "npm:0.25.12"
+    "@esbuild/darwin-x64": "npm:0.25.12"
+    "@esbuild/freebsd-arm64": "npm:0.25.12"
+    "@esbuild/freebsd-x64": "npm:0.25.12"
+    "@esbuild/linux-arm": "npm:0.25.12"
+    "@esbuild/linux-arm64": "npm:0.25.12"
+    "@esbuild/linux-ia32": "npm:0.25.12"
+    "@esbuild/linux-loong64": "npm:0.25.12"
+    "@esbuild/linux-mips64el": "npm:0.25.12"
+    "@esbuild/linux-ppc64": "npm:0.25.12"
+    "@esbuild/linux-riscv64": "npm:0.25.12"
+    "@esbuild/linux-s390x": "npm:0.25.12"
+    "@esbuild/linux-x64": "npm:0.25.12"
+    "@esbuild/netbsd-arm64": "npm:0.25.12"
+    "@esbuild/netbsd-x64": "npm:0.25.12"
+    "@esbuild/openbsd-arm64": "npm:0.25.12"
+    "@esbuild/openbsd-x64": "npm:0.25.12"
+    "@esbuild/openharmony-arm64": "npm:0.25.12"
+    "@esbuild/sunos-x64": "npm:0.25.12"
+    "@esbuild/win32-arm64": "npm:0.25.12"
+    "@esbuild/win32-ia32": "npm:0.25.12"
+    "@esbuild/win32-x64": "npm:0.25.12"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/c205357531423220a9de8e1e6c6514242bc9b1666e762cd67ccdf8fdfdc3f1d0bd76f8d9383958b97ad4c953efdb7b6e8c1f9ca5951cd2b7c5235e8755b34a6b
+  languageName: node
+  linkType: hard
+
+"penpot-render-wasm@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "penpot-render-wasm@workspace:."
+  dependencies:
+    "@types/node": "npm:^20.12.7"
+    esbuild: "npm:^0.25.9"
+  languageName: unknown
+  linkType: soft
+
+"undici-types@npm:~6.21.0":
+  version: 6.21.0
+  resolution: "undici-types@npm:6.21.0"
+  checksum: 10c0/c01ed51829b10aa72fc3ce64b747f8e74ae9b60eafa19a7b46ef624403508a54c526ffab06a14a26b3120d055e1104d7abe7c9017e83ced038ea5cf52f8d5e04
+  languageName: node
+  linkType: hard
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,188 @@ __metadata:
  version: 8
  cacheKey: 10c0

+"@esbuild/aix-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/aix-ppc64@npm:0.25.12"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm64@npm:0.25.12"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm@npm:0.25.12"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-x64@npm:0.25.12"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-arm64@npm:0.25.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-x64@npm:0.25.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.12"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-x64@npm:0.25.12"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm64@npm:0.25.12"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm@npm:0.25.12"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ia32@npm:0.25.12"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-loong64@npm:0.25.12"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-mips64el@npm:0.25.12"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ppc64@npm:0.25.12"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-riscv64@npm:0.25.12"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-s390x@npm:0.25.12"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-x64@npm:0.25.12"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.12"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-x64@npm:0.25.12"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.12"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-x64@npm:0.25.12"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openharmony-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.12"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/sunos-x64@npm:0.25.12"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-arm64@npm:0.25.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-ia32@npm:0.25.12"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-x64@npm:0.25.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20.12.7":
  version: 20.12.12
  resolution: "@types/node@npm:20.12.12"
@@ -14,11 +196,101 @@ __metadata:
  languageName: node
  linkType: hard

+"esbuild@npm:^0.25.9":
+  version: 0.25.12
+  resolution: "esbuild@npm:0.25.12"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.12"
+    "@esbuild/android-arm": "npm:0.25.12"
+    "@esbuild/android-arm64": "npm:0.25.12"
+    "@esbuild/android-x64": "npm:0.25.12"
+    "@esbuild/darwin-arm64": "npm:0.25.12"
+    "@esbuild/darwin-x64": "npm:0.25.12"
+    "@esbuild/freebsd-arm64": "npm:0.25.12"
+    "@esbuild/freebsd-x64": "npm:0.25.12"
+    "@esbuild/linux-arm": "npm:0.25.12"
+    "@esbuild/linux-arm64": "npm:0.25.12"
+    "@esbuild/linux-ia32": "npm:0.25.12"
+    "@esbuild/linux-loong64": "npm:0.25.12"
+    "@esbuild/linux-mips64el": "npm:0.25.12"
+    "@esbuild/linux-ppc64": "npm:0.25.12"
+    "@esbuild/linux-riscv64": "npm:0.25.12"
+    "@esbuild/linux-s390x": "npm:0.25.12"
+    "@esbuild/linux-x64": "npm:0.25.12"
+    "@esbuild/netbsd-arm64": "npm:0.25.12"
+    "@esbuild/netbsd-x64": "npm:0.25.12"
+    "@esbuild/openbsd-arm64": "npm:0.25.12"
+    "@esbuild/openbsd-x64": "npm:0.25.12"
+    "@esbuild/openharmony-arm64": "npm:0.25.12"
+    "@esbuild/sunos-x64": "npm:0.25.12"
+    "@esbuild/win32-arm64": "npm:0.25.12"
+    "@esbuild/win32-ia32": "npm:0.25.12"
+    "@esbuild/win32-x64": "npm:0.25.12"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/c205357531423220a9de8e1e6c6514242bc9b1666e762cd67ccdf8fdfdc3f1d0bd76f8d9383958b97ad4c953efdb7b6e8c1f9ca5951cd2b7c5235e8755b34a6b
+  languageName: node
+  linkType: hard
+
 "penpot@workspace:.":
  version: 0.0.0-use.local
  resolution: "penpot@workspace:."
  dependencies:
    "@types/node": "npm:^20.12.7"
+    esbuild: "npm:^0.25.9"
  languageName: unknown
  linkType: soft
Author	SHA1	Message	Date
Andrey Antukh	347a758831	WIP	2025-12-11 12:22:28 +01:00
Andrey Antukh	4aea00a76f	WIP	2025-12-11 12:16:39 +01:00
Andrey Antukh	5a260294a1	🔧 Update build-tag.yml github workflow	2025-12-11 12:00:42 +01:00
Andrey Antukh	3f6e44316e	🐛 Add missing node depes install on render-wasm	2025-12-11 11:51:47 +01:00
Eva Marco	77ef8e6fe6	🐛 Fix scroll on move library modal (#7952 )	2025-12-11 10:46:54 +01:00
Alejandro Alonso	916b7709dc	✨ Update Pencil Penpot Design System System template in carousel (#7948 )	2025-12-10 15:09:28 +01:00
Eva Marco	443e41fea4	🐛 Fix multiple selection with color tokens (#7941 )	2025-12-10 14:36:08 +01:00
Alejandro Alonso	c7c9b04095	Merge pull request #7944 from penpot/niwinz-staging-exporter-fix 🐛 Fix incorrect resource lifetime handling on exporter	2025-12-10 14:35:20 +01:00
Eva Marco	c61a0c0332	📚 Add line to changelog (#7945 )	2025-12-10 13:58:18 +01:00
Eva Marco	8707ff6511	🎉 Add spanish translation	2025-12-10 13:12:30 +01:00
Florian Schroedl	3d8a251741	🐛 Disallow font-family referencing composite token	2025-12-10 13:12:30 +01:00
Andrey Antukh	34e84ee3c8	🐛 Fix incorrect resource lifetime handling on exporter	2025-12-10 13:02:31 +01:00
Alejandro Alonso	e8201402a7	Merge pull request #7938 from penpot/niwinz-staging-bugfix-5 🐛 Fix several issues	2025-12-10 12:05:42 +01:00
Aitor Moreno	8a22477b96	Merge pull request #7932 from penpot/niwinz-staging-worker-wasm-load 🐛 Fix WASM loading strategy on worker	2025-12-10 11:47:31 +01:00
Alejandro Alonso	3e684ea54f	⬆️ Update svgo dependency on frontend (#7936 )	2025-12-10 10:07:02 +01:00
Andrey Antukh	98039f13d8	🐛 Fix main toolbar z-index	2025-12-10 09:47:40 +01:00
Alejandro Alonso	40c27591f6	🐛 Fix svg import (#7925 )	2025-12-10 08:36:54 +01:00
Andrey Antukh	91d20a46d1	💄 Add cosmetic changes to exports assets progress component	2025-12-10 08:23:05 +01:00
Andrey Antukh	50bead7c56	🐛 Fix react warning on having p inside p on assets export progress	2025-12-10 08:22:41 +01:00
Andrey Antukh	b75b999903	📎 Fix devenv jvm warning	2025-12-10 08:22:05 +01:00
Andrey Antukh	810f1721c8	🐛 Fix recursion render on subscription modal	2025-12-10 07:54:52 +01:00
Andrey Antukh	a4646373cf	♻️ Refactor wasm loading strategy on worker	2025-12-09 19:41:19 +01:00
Andrey Antukh	f111cbb2a4	✨ Add better cache config on devenv nginx	2025-12-09 19:38:30 +01:00
Aitor Moreno	a614207f7e	🐛 Fix exporter failing with HTTPS	2025-12-09 16:08:20 +01:00
Luis de Dios	6ce3249c6d	🐛 Fix color format does not switch in the view mode (#7923 ) * 🐛 Fix color format does not switch in the inspect mode of the view mode * ♻️ Update components	2025-12-09 14:38:15 +01:00
Pablo Alba	b0351be724	🐛 Fix switch variants with paths	2025-12-09 11:08:55 +01:00
Andrey Antukh	b8392b3731	🐛 Fix regression on sending team invitations (#7912 )	2025-12-05 12:36:06 +01:00
Andrey Antukh	77dba477ca	🔧 Backport build-tag github workflow from develop	2025-12-05 10:25:03 +01:00
Eva Marco	b6598d1f07	🐛 Fix scrollbar on color modal (#7906 )	2025-12-05 09:55:41 +01:00
Xaviju	bf1dc21c75	💄 Hide themes & sets panels when none active (#7902 )	2025-12-04 14:11:57 +01:00
Alejandro Alonso	46c20a993f	Merge pull request #7904 from penpot/niwinz-staging-fix-invitation-resend 🐛 Fix exception on resending invitation	2025-12-04 11:56:07 +01:00
Andrey Antukh	0e0106f69a	🐛 Add correct assertion on create-invitation fn	2025-12-04 11:38:32 +01:00
Andrey Antukh	19bb69cc60	✨ Improve invalid schema error report	2025-12-04 11:38:16 +01:00
Alejandro Alonso	504eb70988	Merge pull request #7885 from penpot/niwinz-staging-bugfix-2 🐛 Make workspace palette reposition on left sidebar collapse	2025-12-04 11:19:20 +01:00
Andrey Antukh	feababe2a8	🐛 Make workspace palette reposition on left sidebar collapse	2025-12-03 09:56:14 +01:00
Andrey Antukh	5ef06685fc	💄 Add cosmetic improvements to workspace palette component	2025-12-03 09:38:23 +01:00