💄 Avoid code tab overflow

2026-02-24 18:56:28 -05:00 · 2025-11-28 12:00:53 +01:00
135 changed files with 692 additions and 2306 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: "yes"
+      build_wasm: "no"
      build_storybook: "yes"

  build-docker:
@@ -21,22 +21,6 @@ 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/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -20,7 +20,7 @@ concurrency:

 jobs:
  lint:
-    name: "Linter"
+    name: "Code Linter"
    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

@@ -30,7 +30,10 @@ jobs:

      - name: Check clojure code format
        run: |
-          ./scripts/lint
+          corepack enable;
+          corepack install;
+          yarn install
+          yarn run fmt:clj:check

  test-common:
    name: "Common Tests"
@@ -49,7 +52,10 @@ jobs:
      - name: Run tests on NODE
        working-directory: ./common
        run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run test;

  test-frontend:
    name: "Frontend Tests"
@@ -63,12 +69,25 @@ jobs:
      - name: Unit Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run test;

      - name: Component Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test-components
+            yarn run playwright install chromium --with-deps;
+            yarn run build:storybook
+
+            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+              "npx http-server storybook-static --port 6006 --silent" \
+              "npx wait-on tcp:6006 && yarn test:storybook"
+
+      - name: Check SCSS Format
+        working-directory: ./frontend
+        run: |
+          yarn run lint:scss;

  test-render-wasm:
    name: "Render WASM Tests"
@@ -145,7 +164,11 @@ jobs:
      - name: Run tests
        working-directory: ./library
        run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run build:bundle;
+          yarn run test;

  build-integration:
    name: "Build Integration Bundle"
@@ -196,7 +219,11 @@ jobs:
      - name: Run Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test-e2e --shard="1/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard="1/4";

      - name: Upload test result
        uses: actions/upload-artifact@v4
@@ -226,7 +253,11 @@ jobs:
      - name: Run Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test-e2e --shard="2/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "2/4";

      - name: Upload test result
        uses: actions/upload-artifact@v4
@@ -256,7 +287,11 @@ jobs:
      - name: Run Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test-e2e --shard="3/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "3/4";

      - name: Upload test result
        uses: actions/upload-artifact@v4
@@ -268,7 +303,7 @@ jobs:
          retention-days: 3

  test-integration-4:
-    name: "Integration Tests 4/4"
+    name: "Integration Tests 3/4"
    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest
    needs: build-integration
@@ -286,7 +321,11 @@ jobs:
      - name: Run Tests
        working-directory: ./frontend
        run: |
-          ./scripts/test-e2e --shard="4/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "4/4";

      - name: Upload test result
        uses: actions/upload-artifact@v4
--- a/.gitignore
+++ b/.gitignore
@@ -80,4 +80,3 @@ node_modules
 /playwright/.cache/
 /render-wasm/target/
 /**/.yarn/*
-/.pnpm-store
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -61,7 +61,6 @@ example. It's still usable as before, we just removed the example.
 ### :heart: Community contributions (Thank you!)

 - Ensure consistent snap behavior across all zoom levels [Github #7774](https://github.com/penpot/penpot/pull/7774) by [@Tokytome](https://github.com/Tokytome)
- Fix crash in token grid view due to tooltip validation (by @dfelinto) [Github #7887](https://github.com/penpot/penpot/pull/7887)

 ### :sparkles: New features & Enhancements

@@ -88,12 +87,6 @@ example. It's still usable as before, we just removed the example.
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
- Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
- 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/Pencil-Penpot-Design-System.penpot"}
+  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/penpot-app.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/backend/scripts/_env
+++ b/backend/scripts/_env
@@ -3,7 +3,6 @@
 export PENPOT_MANAGEMENT_API_KEY=super-secret-management-api-key
 export PENPOT_SECRET_KEY=super-secret-devenv-key
 export PENPOT_HOST=devenv
-export PENPOT_PUBLIC_URI=https://localhost:3449

 export PENPOT_FLAGS="\
       $PENPOT_FLAGS \
--- a/backend/src/app/email.clj
+++ b/backend/src/app/email.clj
@@ -106,17 +106,17 @@
      (let [content-part      (MimeBodyPart.)
            alternative-mpart (MimeMultipart. "alternative")]

-        (when-let [content (get body "text/plain")]
-          (let [text-part (MimeBodyPart.)]
-            (.setText text-part ^String content ^String charset)
-            (.addBodyPart alternative-mpart text-part)))
-
        (when-let [content (get body "text/html")]
          (let [html-part (MimeBodyPart.)]
            (.setContent html-part ^String content
                         (str "text/html; charset=" charset))
            (.addBodyPart alternative-mpart html-part)))

+        (when-let [content (get body "text/plain")]
+          (let [text-part (MimeBodyPart.)]
+            (.setText text-part ^String content ^String charset)
+            (.addBodyPart alternative-mpart text-part)))
+
        (.setContent content-part alternative-mpart)
        (.addBodyPart mixed-mpart content-part))

--- a/backend/src/app/loggers/audit.clj
+++ b/backend/src/app/loggers/audit.clj
@@ -79,6 +79,18 @@
         (remove #(contains? reserved-props (key %))))
        props))

+(defn event-from-rpc-params
+  "Create a base event skeleton with pre-filled some important
+  data that can be extracted from RPC params object"
+  [params]
+  (let [context {:external-session-id (::rpc/external-session-id params)
+                 :external-event-origin (::rpc/external-event-origin params)
+                 :triggered-by (::rpc/handler-name params)}]
+    {::type "action"
+     ::profile-id (::rpc/profile-id params)
+     ::ip-addr (::rpc/ip-addr params)
+     ::context (d/without-nils context)}))
+
 (defn get-external-session-id
  [request]
  (when-let [session-id (yreq/get-header request "x-external-session-id")]
@@ -87,24 +99,13 @@
                  (str/blank? session-id))
      session-id)))

-(defn- get-client-event-origin
+(defn- get-external-event-origin
  [request]
  (when-let [origin (yreq/get-header request "x-event-origin")]
-    (when-not (or (= origin "null")
+    (when-not (or (> (count origin) 256)
+                  (= origin "null")
                  (str/blank? origin))
-      (str/prune origin 200))))
-
-(defn get-client-user-agent
-  [request]
-  (when-let [user-agent (yreq/get-header request "user-agent")]
-    (str/prune user-agent 500)))
-
-(defn- get-client-version
-  [request]
-  (when-let [origin (yreq/get-header request "x-frontend-version")]
-    (when-not (or (= origin "null")
-                  (str/blank? origin))
-      (str/prune origin 100))))
+      origin)))

 ;; --- SPECS

@@ -133,33 +134,6 @@
 (def ^:private check-event
  (sm/check-fn schema:event))

-(defn- prepare-context-from-request
-  [request]
-  (let [client-event-origin (get-client-event-origin request)
-        client-version      (get-client-version request)
-        client-user-agent   (get-client-user-agent request)
-        session-id          (get-external-session-id request)
-        token-id       (::actoken/id request)]
-    (d/without-nils
-     {:external-session-id session-id
-      :access-token-id (some-> token-id str)
-      :client-event-origin client-event-origin
-      :client-user-agent client-user-agent
-      :client-version client-version
-      :version (:full cf/version)})))
-
-(defn event-from-rpc-params
-  "Create a base event skeleton with pre-filled some important
-  data that can be extracted from RPC params object"
-  [params]
-  (let [context (some-> params meta ::http/request prepare-context-from-request)
-        event   {::type "action"
-                 ::profile-id (or (::rpc/profile-id params) uuid/zero)
-                 ::ip-addr (::rpc/ip-addr params)}]
-    (cond-> event
-      (some? context)
-      (assoc ::context context))))
-
 (defn prepare-event
  [cfg mdata params result]
  (let [resultm      (meta result)
@@ -174,10 +148,18 @@
                                 (merge (::props resultm))
                                 (dissoc :profile-id)
                                 (dissoc :type)))
+
                         (clean-props))

-        context      (merge (::context resultm)
-                            (prepare-context-from-request request))
+        token-id     (::actoken/id request)
+        context      (-> (::context resultm)
+                         (assoc :external-session-id
+                                (get-external-session-id request))
+                         (assoc :external-event-origin
+                                (get-external-event-origin request))
+                         (assoc :access-token-id (some-> token-id str))
+                         (d/without-nils))
+
        ip-addr      (inet/parse-request request)]

    {::type (or (::type resultm)
--- a/common/scripts/test
+++ b/common/scripts/test
@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-yarn run test;
--- a/common/src/app/common/logic/libraries.cljc
+++ b/common/src/app/common/logic/libraries.cljc
@@ -12,11 +12,8 @@
   [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]
@@ -29,7 +26,6 @@
   [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]
@@ -1880,44 +1876,6 @@
                   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
@@ -2069,10 +2027,6 @@
               (= :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
@@ -2101,12 +2055,6 @@
                                            (: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,20 +281,7 @@
 (defn check-fn
  "Create a predefined check function"
  [s & {:keys [hint type code]}]
-  (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))))))
-
+  (let [s          (schema s)
        validator* (delay (m/validator s))
        explainer* (delay (m/explainer s))
        hint       (or ^boolean hint "check error")
--- a/common/src/app/common/types/path.cljc
+++ b/common/src/app/common/types/path.cljc
@@ -267,4 +267,3 @@
   (-> (stp/convert-to-path shape objects)
       (update :content impl/path-data))))

-(dm/export impl/decode-segments)
--- a/common/src/app/common/types/path/impl.cljc
+++ b/common/src/app/common/types/path/impl.cljc
@@ -565,9 +565,6 @@
 (def check-content
  (sm/check-fn schema:content))

-(def decode-segments
-  (sm/lazy-decoder schema:segments sm/json-transformer))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; CONSTRUCTORS & PREDICATES
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
--- a/docker/devenv/Dockerfile
+++ b/docker/devenv/Dockerfile
@@ -101,38 +101,6 @@ RUN set -eux; \
    corepack enable; \
    rm -rf /tmp/nodejs.tar.gz;

-
-################################################################################
-## CADDYSERVER SETUP
-################################################################################
-
-FROM base AS setup-caddy
-
-ENV CADDY_VERSION=2.10.2
-
-RUN set -eux; \
-    ARCH="$(dpkg --print-architecture)"; \
-    case "${ARCH}" in \
-       aarch64|arm64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_arm64.tar.gz"; \
-         ;; \
-       amd64|x86_64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_amd64.tar.gz"; \
-         ;; \
-       *) \
-         echo "Unsupported arch: ${ARCH}"; \
-         exit 1; \
-         ;; \
-    esac; \
-    curl -LfsSo /tmp/caddy.tar.gz ${BINARY_URL}; \
-    mkdir -p /tmp/caddy; \
-    cd /tmp/caddy; \
-    tar -xf /tmp/caddy.tar.gz; \
-    chown -R root /tmp/caddy; \
-    mv /tmp/caddy/caddy /usr/bin/; \
-    rm -rf /tmp/caddy.tar.gz; \
-    rm -rf /tmp/caddy;
-
 ################################################################################
 ## JVM SETUP
 ################################################################################
@@ -425,7 +393,6 @@ COPY --from=setup-utils /opt/utils /opt/utils
 COPY --from=setup-rust /opt/cargo /opt/cargo
 COPY --from=setup-rust /opt/rustup /opt/rustup
 COPY --from=setup-rust /opt/emsdk /opt/emsdk
-COPY --from=setup-caddy /usr/bin/caddy /usr/bin/caddy

 COPY files/nginx.conf /etc/nginx/nginx.conf
 COPY files/nginx-mime.types /etc/nginx/mime.types
@@ -436,9 +403,6 @@ COPY files/vimrc          /root/.vimrc
 COPY files/tmux.conf      /root/.tmux.conf
 COPY files/sudoers        /etc/sudoers

-COPY files/Caddyfile           /home/
-COPY files/selfsigned.crt      /home/
-COPY files/selfsigned.key      /home/
 COPY files/start-tmux.sh       /home/start-tmux.sh
 COPY files/start-tmux-back.sh  /home/start-tmux-back.sh
 COPY files/entrypoint.sh       /home/entrypoint.sh
--- a/docker/devenv/docker-compose.yaml
+++ b/docker/devenv/docker-compose.yaml
@@ -33,8 +33,6 @@ services:
      - 3447:3447
      - 3448:3448
      - 3449:3449
-      - 3449:3449/udp
-      - 3450:3450
      - 6006:6006
      - 6060:6060
      - 6061:6061
--- a/docker/devenv/files/Caddyfile
+++ b/docker/devenv/files/Caddyfile
@@ -1,12 +0,0 @@
-{
-    auto_https off
-}
-
-localhost:3449 {
-   reverse_proxy localhost:4449
-   tls /home/selfsigned.crt /home/selfsigned.key
-}
-
-http://localhost:3450 {
-   reverse_proxy localhost:4449
-}
--- a/docker/devenv/files/init.sh
+++ b/docker/devenv/files/init.sh
@@ -2,5 +2,4 @@

 set -e
 nginx
-caddy start -c /home/Caddyfile
-tail -f /dev/null;
+tail -f /dev/null
--- a/docker/devenv/files/nginx.conf
+++ b/docker/devenv/files/nginx.conf
@@ -12,7 +12,7 @@ http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
-    keepalive_timeout 100;
+    keepalive_timeout 0;
    types_hash_max_size 2048;
    server_tokens off;

@@ -55,7 +55,7 @@ http {
    proxy_cache_key "$host$request_uri";

    server {
-        listen 4449 default_server;
+        listen 3449 default_server;
        server_name _;

        client_max_body_size 300M;
@@ -223,19 +223,17 @@ http {
                add_header X-Cache-Status $upstream_cache_status;
            }

-            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 ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
            }

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

-            add_header Cache-Control "no-store" always;
+            add_header Cache-Control "no-store";
+            add_header Connection close always;
+            # This header is what we need to use on prod
+            # add_header Cache-Control "public, must-revalidate, max-age=0";
            try_files $uri /index.html$is_args$args /index.html =404;
        }
    }
--- a/docker/devenv/files/selfsigned.crt
+++ b/docker/devenv/files/selfsigned.crt
@@ -1,22 +0,0 @@
-----BEGIN CERTIFICATE-----
-MIIDuzCCAqOgAwIBAgIUa3THJQSn1+ErK65g1jDL0tjUkBYwDQYJKoZIhvcNAQEL
-BQAwXzELMAkGA1UEBhMCVVMxDjAMBgNVBAgMBUxvY2FsMQ4wDAYDVQQHDAVMb2Nh
-bDEOMAwGA1UECgwFTG9jYWwxDDAKBgNVBAsMA0RldjESMBAGA1UEAwwJbG9jYWxo
-b3N0MB4XDTI1MTIwMjA4MjUyM1oXDTI2MTIwMjA4MjUyM1owXzELMAkGA1UEBhMC
-VVMxDjAMBgNVBAgMBUxvY2FsMQ4wDAYDVQQHDAVMb2NhbDEOMAwGA1UECgwFTG9j
-YWwxDDAKBgNVBAsMA0RldjESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG
-9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyVIlfpIPE+QyL/q7IQOilEA7wEOZ6wbsh2Fr
-59H1gSLFvgoCxI6RVUkQ/MFRnw/r1ZbAqRpc2xAl5a9Ml14q20Zlj6dAHsWX6O2J
-EwNsD18dQmX3BncnjV3yCZM2iQcMFKuXG4KQNdIQNNvdIgtlrHYp0ohS9s3XC7cj
-KxNrm/pW9EAXfn9AYDd/qER090L2E4ipP9m/5l3MjinNc4l2kpH9rLOgb79H0RLt
-PK3/KP8ErZhAvzdmDBAdM5Z5K37b+TfB/kSVNUKL6qyw5CCjlShERLhBNprlnRfz
-tHNIQ1RHq3qJJN19ZnJrLqICuQ5ztvj7hBDiOSV0LnmyKgXr6wIDAQABo28wbTAd
-BgNVHQ4EFgQUPL8WGf6z/wB8TimJBx1zybsIeikwHwYDVR0jBBgwFoAUPL8WGf6z
-/wB8TimJBx1zybsIeikwDwYDVR0TAQH/BAUwAwEB/zAaBgNVHREEEzARgglsb2Nh
-bGhvc3SHBH8AAAEwDQYJKoZIhvcNAQELBQADggEBACMMVyR3kbNxnzuUc2lahKH4
-cPXVWOsvCvnDtjzm41XmKjUJTbtjn3p5d/ZmLbZ4zzIQULfWXO3XG/HevkvVo0g6
-6pJXTXc6C6ZhFG0rIYMcPPzmGmalDV5n+lUaCVx5XbFFxvRQ7893auwhRATdwGs+
-xiMyYbE2w9otKqyDItmJZJ5nW6vmXJ42YHxlXF18u9U88xqtOSMd5xZahbsmw7Gg
-A4/o4TPoAX5QfA306sL443WaczsF7bmsTf9qcYa/3xxQkP5Seyqx8ePWpS22qysE
-jG6XPpymxb6sb2mVaFBAzhEMb/eBvE9nRAopxmB7uV4TbqC51K/U3uo6jFX4Jbw=
-----END CERTIFICATE-----
--- a/docker/devenv/files/selfsigned.key
+++ b/docker/devenv/files/selfsigned.key
@@ -1,28 +0,0 @@
-----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDJUiV+kg8T5DIv
-+rshA6KUQDvAQ5nrBuyHYWvn0fWBIsW+CgLEjpFVSRD8wVGfD+vVlsCpGlzbECXl
-r0yXXirbRmWPp0AexZfo7YkTA2wPXx1CZfcGdyeNXfIJkzaJBwwUq5cbgpA10hA0
-290iC2WsdinSiFL2zdcLtyMrE2ub+lb0QBd+f0BgN3+oRHT3QvYTiKk/2b/mXcyO
-Kc1ziXaSkf2ss6Bvv0fREu08rf8o/wStmEC/N2YMEB0zlnkrftv5N8H+RJU1Qovq
-rLDkIKOVKEREuEE2muWdF/O0c0hDVEereokk3X1mcmsuogK5DnO2+PuEEOI5JXQu
-ebIqBevrAgMBAAECggEABqtE+LNn8nW9v98jcc2IBjc2g4D5yVJaZYWxqGVJJ7T6
-Lfhw7Qf4AoZAHM9en9FMM7Ahw7hO2SboynoLJHyHGOp1FNQqiJptFNdBkjKr0rqI
-4pk0HK+3zLQO/4gz50gne0vP3qZtlorV5Jpf8e/Et3jWm9XOQcTB2e6AKL4k827B
-dv4Tld+/7PoZVXjahfrUWuIZr5mzyF1eUkD8sPOpdr3HJxSueqsOMjbG8XMRqCQ+
-5eCWWSW5yPQlMr7M7cXM+a0k73Xn1sKl7fP3/9byji25zxGUaMu5RA1kw0Oqseid
-RXuRxGphGZgnx1aFxDAPg3FtmGch7/Cc6WfqboOL0QKBgQD4GZO1gGaE8cg4lvuo
-ZUX2YJu6UJuNOmuhfvG3ui4WO9PHy3btc2q+3kutSuBcyIjhi+qbXasBcX/QOOJF
-udyTZc5PopNkJojS4JdXAZCiu5sKI3lp4DIt9qNISlXGgrJgdxGUO+DzarBctXdn
-BSwXFw5hcjJjl7wsPGQl1tBTQwKBgQDPuz5MEM5ZeUe9CT5sQDq/ld0u4aL5AHmx
-aaA2gzDgd9l2R5wHX6wLzjoVWXOmeqaYzJopt2JN4iXrtbjWkyePgZeZMyWoyJ/v
-clW9bi8HM9f9EpPr7czSj9sLUnsjd9cuTD+JuXK//jRGbRpw7r7nWtLHImjj6d2v
-APZRq0v2OQKBgBcESG/OObSbubeGSlKVEqiIzem7ELNJeDLDVCl3XE8zvbILbj0Z
-OA39EYhCKg5xjEFgeaNwTS0VGoZ2wIc3dv81sq4wpvvjl035CBFKU+DFBt0p7Vml
-MwKQnxVV0B9agLHyWe8mnvf2LeZr72ffUvfRa8QelA4pRYvVDnV0OF+BAoGAW6rM
-+tQPuvwB5DFIEozlX9XKHP4E5MyI5vktceDCmMtKcx92gup9CVif2Pv4ROaqzZK8
-FNyPzL6W7UTrpASb2H/fXgNsAudFbGyP2V/d8Ne34D1qeRoe4GwKxRxIqoYftpZ/
-E096i66pcsqCeINiSsWRbb6JesmgwbEzAScOBkECgYEA6O/Dibc9PaqRpaiE6Qut
-S3W/Rr1Pd1jbN4rOVI2TFCgMJQmc6jOdq2fCntR9acsa8HPx+djOlXTUBPKBZ/Ae
-p8umRdXVWcNMnwWVWHt7tsEuR/gYkxQ5xjXeS1VDPnEre9+EaevMBuVs8HdRsKQO
-uzvNGeAFEfqwIqn7CFQ+ndU=
-----END PRIVATE KEY-----
--- a/docs/user-guide/account-teams/index.njk
+++ b/docs/user-guide/account-teams/index.njk
@@ -10,19 +10,19 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/account-teams/your-account">
      <h2>Your account →</h2>
-      <p>Access your account settings and manage personal access tokens</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/account-teams/teams">
      <h2>Teams →</h2>
-      <p>Create and manage your teams</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/account-teams/comments/">
      <h2>Comments →</h2>
-      <p>Give and receive feedback right over your designs</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/design-systems/index.njk
+++ b/docs/user-guide/design-systems/index.njk
@@ -10,31 +10,31 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/design-systems/assets">
      <h2>Assets →</h2>
-      <p>Store elements and styles to easily reuse them</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/design-systems/libraries">
      <h2>Libraries →</h2>
-      <p>Organize and manage your stored elements with Libraries</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/design-systems/components">
      <h2>Components →</h2>
-      <p>Speed your design workflow with reusable components</p>
+      <p>Speed your design workflow</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/design-systems/variants">
      <h2>Variants →</h2>
-      <p>Group components into a single, customizable one</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/design-systems/design-tokens">
      <h2>Design Tokens →</h2>
-      <p>Synchronize visual elements across your designs</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/design-systems/libraries.njk
+++ b/docs/user-guide/design-systems/libraries.njk
@@ -5,7 +5,7 @@ desc: Use Penpot's libraries for reusable design elements! Learn to create, mana
 ---
 <h1 id="libraries">Libraries</h1>

-<p class="main-paragraph">Libraries may include components, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
+<p class="main-paragraph">Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>

 <h3 id="file-libraries">File libraries</h3>
 <p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
--- a/docs/user-guide/designing/index.njk
+++ b/docs/user-guide/designing/index.njk
@@ -10,31 +10,31 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/designing/workspace-basics">
      <h2>Workspace basics →</h2>
-      <p>Get to know the Workspace, where designs are created</p>
+      <p>Workspace basics</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/designing/layers">
      <h2>Layers →</h2>
-      <p>Objects available in Penpot and how to get the most of them</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/designing/color-stroke/">
      <h2>Color & Strokes→</h2>
-      <p>Styling options available for each layer</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/designing/text-typo">
      <h2>Text & Typography→</h2>
-      <p>Styling text content & using custom fonts</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/designing/flexible-layouts">
      <h2>Flexible layouts →</h2>
-      <p>Create designs that adapt automatically</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/export-import/index.njk
+++ b/docs/user-guide/export-import/index.njk
@@ -10,13 +10,13 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/export-import/export-import-files/">
      <h2>Export/Import Penpot files →</h2>
-      <p>How to export and import your Penpot files</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/export-import/exporting-layers/">
      <h2>Exporting layers →</h2>
-      <p>How to export elements from your design into different file formats</p>
+      <p>Exporting layers</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/first-steps/index.njk
+++ b/docs/user-guide/first-steps/index.njk
@@ -16,7 +16,7 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
    <li>
    <a href="/user-guide/first-steps/the-interface">
      <h2>Interface tour →</h2>
-      <p>Take a tour of Penpot's main areas</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
  <li>
@@ -28,7 +28,7 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/first-steps/info">
      <h2>Tutorials & info →</h2>
-      <p>Useful resources to better understand Penpot</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/index.njk
+++ b/docs/user-guide/index.njk
@@ -22,49 +22,49 @@ eleventyNavigation:
  <li>
    <a href="/user-guide/designing/layers/">
      <h2>Layers</h2>
-      <p>Objects available in Penpot and how to get the most of them</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/designing/flexible-layouts/">
      <h2>Flexible layouts</h2>
-      <p>Create designs that adapt automatically</p>
+      <p>Create designs that adapt automatically.</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/design-systems/components/">
      <h2>Components</h2>
-      <p>Speed your design workflow with reusable components</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/design-systems/variants/">
      <h2>Variants</h2>
-      <p>Group components into a single, customizable one</p>
+      <p>Penpot's main areas and features</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/design-systems/design-tokens/">
      <h2>Design Tokens</h2>
-      <p>Synchronize visual elements across your designs</p>
+      <p>Penpot's main areas and features</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/dev-tools/#inspect-design">
      <h2>Inspect design</h2>
-      <p>Get production-ready code</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
      <li>
    <a href="/user-guide/prototyping-testing/prototyping/">
      <h2>Prototyping</h2>
-      <p>Build interactive prototypes to mimic your product behaviour</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
      <li>
    <a href="/user-guide/design-systems/libraries/">
      <h2>Libraries</h2>
-      <p>Organize and manage your stored elements with Libraries</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
 </ul>
--- a/docs/user-guide/prototyping-testing/index.njk
+++ b/docs/user-guide/prototyping-testing/index.njk
@@ -10,13 +10,13 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
  <li>
    <a href="/user-guide/prototyping-testing/prototyping">
      <h2>Prototyping →</h2>
-      <p>Build interactive prototypes to mimic your product behaviour</p>
+      <p>Ways to start with Penpot</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/prototyping-testing/testing-view-mode">
      <h2>Testing: View mode →</h2>
-      <p>Test your designs and play the interactions</p>
+      <p>Info of interest about Penpot</p>
    </a>
  </li>
 </ul>
--- a/exporter/package.json
+++ b/exporter/package.json
@@ -21,7 +21,6 @@
    "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/scripts/build
+++ b/exporter/scripts/build
@@ -18,15 +18,4 @@ cp ../.yarnrc.yml target/;
 cp yarn.lock target/;
 cp package.json target/;

-cat <<EOF | tee target/setup
-#/usr/bin/env bash
-set -e;
-corepack enable;
-corepack install;
-yarn install
-yarn run playwright install chromium;
-EOF
-
-chmod +x target/setup;
-
 sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/app.js;
--- 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 ["--allow-insecure-localhost" "--font-render-hinting=none"]}
+            (p/let [opts    #js {:args #js ["--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 single export"
+                   (l/error :hint "unexpected error on export multiple"
                            :cause cause)
                   (p/rejected cause))))))

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

        on-error    (fn [cause]
-                      (l/error :hint "unexpected error on multiple export" :cause cause)
+                      (l/error :hint "unexpected error on multiple exportation" :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/mcat (fn [_] (rsc/close-zip zip)))
+                         (p/fnly (fn [_] (.finalize 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,7 +11,6 @@
   ["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]
@@ -54,40 +53,30 @@
    (.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]
-  (p/create (fn [resolve]
-              (.on ^js zip "close" resolve)
-              (.finalize ^js zip))))
+  (.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 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))]
-
+                 (let [fdata (new js/FormData)
+                       uri   (-> (cf/get :public-uri)
+                                 (u/ensure-path-slash)
+                                 (u/join "api/management/methods/upload-tempfile")
+                                 (str))]
                   (.append fdata "content" blob (:filename resource))
-                   (http/fetch uri request))))
-
+                   (js/fetch uri #js {:headers #js {"X-Shared-Key" cf/management-key
+                                                    "Authorization" (str "Bearer " auth-token)}
+                                      :method "POST"
+                                      :body fdata}))))
       (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,8 +75,7 @@
  [path]
  (->> (.stat fs/promises path)
       (p/fmap (fn [data]
-                 {:path path
-                  :created-at (inst-ms (.-ctime ^js data))
+                 {: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,7 +582,6 @@ __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"
@@ -1514,13 +1513,6 @@ __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,8 +50,5 @@

  :shadow-cljs
  {:main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :jvm-opts ["--sun-misc-unsafe-memory-access=allow"
-              "-Dpenpot.wasm.profile-marks=true"
-              "-XX:+UnlockExperimentalVMOptions"
-              "-XX:CompileCommand=blackhole,criterium.blackhole.Blackhole::consume"]}
+   :jvm-opts ["--sun-misc-unsafe-memory-access=allow" "-Dpenpot.wasm.profile-marks=true"]}
  }}
--- 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 worker storybook",
+    "watch:app:main": "clojure -M:dev:shadow-cljs watch main storybook",
    "clear:shadow-cache": "rm -rf .shadow-cljs",
-    "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && yarn run build:app:worker && 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.2",
+    "@penpot/svgo": "penpot/svgo#v3.1",
    "@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/resources/images/features/2.12-export-pdf.gif
+++ b/frontend/resources/images/features/2.12-export-pdf.gif
--- a/frontend/resources/images/features/2.12-slide-0.jpg
+++ b/frontend/resources/images/features/2.12-slide-0.jpg
--- a/frontend/resources/images/features/2.12-tokens-sidebar.gif
+++ b/frontend/resources/images/features/2.12-tokens-sidebar.gif
--- a/frontend/resources/images/features/2.12-variants.gif
+++ b/frontend/resources/images/features/2.12-variants.gif
--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -180,8 +180,8 @@ export async function watch(baseDir, predicate, callback) {
  });
 }

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

    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,18 +20,16 @@ echo $PATH
 set -ex

 corepack enable;
-corepack install;
+corepack install || exit 1;
 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;
+yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1

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

 yarn run build:app:libs || exit 1;
@@ -46,6 +44,10 @@ 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/scripts/test
+++ b/frontend/scripts/test
@@ -1,9 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-
-yarn run lint:scss;
-yarn run test;
--- a/frontend/scripts/test-components
+++ b/frontend/scripts/test-components
@@ -1,13 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-
-yarn run playwright install chromium --with-deps;
-yarn run build:storybook
-
-exec npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-    "npx http-server storybook-static --port 6006 --silent" \
-    "npx wait-on tcp:6006 && yarn test:storybook"
--- a/frontend/scripts/test-e2e
+++ b/frontend/scripts/test-e2e
@@ -1,8 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-yarn run playwright install chromium --with-deps;
-yarn run test:e2e -x --workers=2 --reporter=list "$@";
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -83,7 +83,7 @@
     :source-map-detail-level :all}}}

  :worker
-  {:target :browser
+  {:target :esm
   :output-dir "resources/public/js/worker/"
   :asset-path "/js/worker"
   :devtools {:browser-inject :main
@@ -94,7 +94,6 @@
   {: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/main.js"))
+  (obj/get global "penpotWorkerURI" "/js/worker.js"))

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

-(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)))
+(defn resolve-static-asset
+  [path]
+  (let [uri (u/join public-uri path)]
+    (assoc uri :query (dm/str "version=" (:full version)))))
--- a/frontend/src/app/main/data/event.cljs
+++ b/frontend/src/app/main/data/event.cljs
@@ -67,7 +67,7 @@
  []
  (let [uagent (new ua/UAParser)]
    (merge
-     {:version (:full cf/version)
+     {:app-version (:full cf/version)
      :locale @i18n/locale}
     (let [browser (.getBrowser uagent)]
       {:browser (obj/get browser "name")
--- a/frontend/src/app/main/data/style_dictionary.cljs
+++ b/frontend/src/app/main/data/style_dictionary.cljs
@@ -255,19 +255,14 @@

 (defn- parse-sd-token-font-family-value
  [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))]
+  (let [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 value})))
+      {:value (-> (js->clj value) (flatten))})))

 (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,31 +351,19 @@
                 (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}]
-  (check-create-invitations-params 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")

  (ptk/reify ::create-invitations
    ev/Event
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -20,9 +20,7 @@
   [app.common.path-names :as cpn]
   [app.common.transit :as t]
   [app.common.types.component :as ctc]
-   [app.common.types.components-list :as ctkl]
   [app.common.types.shape :as cts]
-   [app.common.types.variant :as ctv]
   [app.common.uuid :as uuid]
   [app.main.data.changes :as dch]
   [app.main.data.comments :as dcmt]
@@ -553,6 +551,7 @@
               component-id (:component-id shape)
               undo-id (js/Symbol)]

+
           (when valid?
             (if (ctc/is-variant-container? shape)
               ;; Rename the full variant when it is a variant container
@@ -567,43 +566,6 @@
                  (dwl/rename-component component-id clean-name))
                (dwu/commit-undo-transaction undo-id))))))))))

-(defn rename-shape-or-variant
-  ([id name]
-   (rename-shape-or-variant nil nil id name))
-  ([file-id page-id id name]
-   (ptk/reify ::rename-shape-or-variant
-     ptk/WatchEvent
-     (watch [_ state _]
-       (let [file-id (d/nilv file-id (:current-file-id state))
-             page-id (d/nilv page-id (:current-page-id state))
-
-             file-data (dsh/lookup-file-data state file-id)
-             shape
-             (-> (dsh/lookup-page-objects state file-id page-id)
-                 (get id))
-
-             is-variant? (ctc/is-variant? shape)
-             variant-id (when is-variant? (:variant-id shape))
-             variant-name (when is-variant? (:variant-name shape))
-             component-id (:component-id shape)
-             component (ctkl/get-component file-data (:component-id shape))
-             variant-properties (:variant-properties component)]
-         (cond
-           (and variant-name (ctv/valid-properties-formula? name))
-           (rx/of (dwva/update-properties-names-and-values
-                   component-id variant-id variant-properties (ctv/properties-formula->map name))
-                  (dwva/remove-empty-properties variant-id)
-                  (dwva/update-error component-id))
-
-           variant-name
-           (rx/of (dwva/update-properties-names-and-values
-                   component-id variant-id variant-properties {})
-                  (dwva/remove-empty-properties variant-id)
-                  (dwva/update-error component-id name))
-
-           :else
-           (rx/of (end-rename-shape id name))))))))
-
 ;; --- Update Selected Shapes attrs

 (defn update-selected-shapes
--- a/frontend/src/app/main/data/workspace/tokens/errors.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/errors.cljs
@@ -88,10 +88,6 @@
   {: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/data/workspace/variants.cljs
+++ b/frontend/src/app/main/data/workspace/variants.cljs
@@ -128,16 +128,14 @@
            related-components (cfv/find-variant-components data objects variant-id)

            props              (-> related-components last :variant-properties)
-            valid-pos?         (> (count props) pos)
-            prop-name          (when valid-pos? (-> props (nth pos) :name))
+            prop-name          (-> props (nth pos) :name)

-            changes            (when valid-pos?
-                                 (-> (pcb/empty-changes it page-id)
-                                     (pcb/with-objects objects)
-                                     (pcb/with-library-data data)
-                                     (clvp/generate-update-property-name variant-id pos new-name)))
+            changes (-> (pcb/empty-changes it page-id)
+                        (pcb/with-objects objects)
+                        (pcb/with-library-data data)
+                        (clvp/generate-update-property-name variant-id pos new-name))
            undo-id (js/Symbol)]
-        (when (and valid-pos? (not= prop-name new-name))
+        (when (not= prop-name new-name)
          (rx/of
           (dwu/start-undo-transaction undo-id)
           (dch/commit-changes changes)
--- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
@@ -14,7 +14,6 @@
   [app.main.ui.components.dropdown :refer [dropdown-content*]]
   [app.main.ui.icons :as deprecated-icon]
   [app.util.dom :as dom]
-   [app.util.globals :as ug]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.keyboard :as kbd]
   [app.util.timers :as tm]
@@ -54,13 +53,14 @@
 (def ^:private valid-option?
  (sm/lazy-validator schema:option))

-(mf/defc context-menu-inner*
-  [{:keys [on-close options selectable selected
+(mf/defc context-menu*
+  [{:keys [show on-close options selectable selected
           top left fixed min-width origin width]
    :as props}]

  (assert (every? valid-option? options) "expected valid options")
  (assert (fn? on-close) "missing `on-close` prop")
+  (assert (boolean? show) "missing `show` prop")
  (assert (vector? options) "missing `options` prop")

  (let [width          (d/nilv width "initial")
@@ -80,15 +80,14 @@
        offset-x       (get state :offset-x)
        offset-y       (get state :offset-y)
        levels         (get state :levels)
-        internal-id    (mf/use-id)

        on-local-close
        (mf/use-fn
         (mf/deps on-close)
         (fn []
-           (swap! state* assoc :levels [{:parent nil :options options}])
-           (when (fn? on-close)
-             (on-close))))
+           (swap! state* assoc :levels [{:parent nil
+                                         :options options}])
+           (on-close)))

        props
        (mf/spread-props props {:on-close on-local-close})
@@ -217,22 +216,11 @@
      (swap! state* assoc :levels [{:parent nil
                                    :options options}]))

-    (mf/with-effect [internal-id]
-      (ug/dispatch! (ug/event "penpot:context-menu:open" #js {:id internal-id})))
-
-    (mf/with-effect [internal-id on-local-close]
-      (letfn [(on-event [event]
-                (when-let [detail (unchecked-get event "detail")]
-                  (when (not= internal-id (unchecked-get detail "id"))
-                    (on-local-close event))))]
-        (ug/listen "penpot:context-menu:open" on-event)
-        (partial ug/unlisten "penpot:context-menu:open" on-event)))
-
    (mf/with-effect [ids]
      (tm/schedule-on-idle
       #(dom/focus! (dom/get-element (first ids)))))

-    (when (some? levels)
+    (when (and show (some? levels))
      [:> dropdown-content* props
       (let [level   (peek levels)
             options (:options level)
@@ -241,7 +229,7 @@
         [:div {:class (stl/css-case
                        :is-selectable selectable
                        :context-menu true
-                        :is-open true
+                        :is-open show
                        :fixed fixed)
                :style {:top (+ top offset-y)
                        :left (+ left offset-x)}
@@ -253,7 +241,7 @@
                :role "menu"
                :ref check-menu-offscreen}

-           (when parent
+           (when-let [parent (:parent level)]
             [:*
              [:li {:id "go-back-sub-option"
                    :class (stl/css :context-menu-item)
@@ -268,7 +256,7 @@

              [:li {:class (stl/css :separator)}]])

-           (for [[index option] (d/enumerate options)]
+           (for [[index option] (d/enumerate (:options level))]
             (let [name        (:name option)
                   id          (:id option)
                   sub-options (:options option)
@@ -309,12 +297,3 @@
                           :data-testid id}
                       name
                       [:span {:class (stl/css :submenu-icon)} deprecated-icon/arrow]])]))))]])])))
-
-(mf/defc context-menu*
-  {::mf/private true}
-  [{:keys [show] :as props}]
-
-  (assert (boolean? show) "expected `show` prop to be a boolean")
-
-  (when ^boolean show
-    [:> context-menu-inner* props]))
--- a/frontend/src/app/main/ui/dashboard/subscription.cljs
+++ b/frontend/src/app/main/ui/dashboard/subscription.cljs
@@ -151,16 +151,14 @@

 (mf/defc menu-team-icon*
  [{:keys [subscription-type]}]
-  [:span {:class (stl/css :subscription-icon-wrapper)}
-   [:> icon* {:icon-id (case subscription-type
-                         "unlimited" i/character-u
-                         "enterprise" i/character-e)
-              :class (stl/css :subscription-icon)
-              :size "s"
-              :title (if (= subscription-type "unlimited")
-                       (tr "subscription.dashboard.power-up.unlimited-plan")
-                       (tr "subscription.dashboard.power-up.enterprise-plan"))
-              :data-testid "subscription-icon"}]])
+  [:span {:class (stl/css :subscription-icon)
+          :title (if (= subscription-type "unlimited")
+                   (tr "subscription.dashboard.power-up.unlimited-plan")
+                   (tr "subscription.dashboard.power-up.enterprise-plan"))
+          :data-testid "subscription-icon"}
+   (case subscription-type
+     "unlimited" i/character-u
+     "enterprise" i/character-e)])

 (mf/defc main-menu-power-up*
  [{:keys [close-sub-menu]}]
--- a/frontend/src/app/main/ui/dashboard/subscription.scss
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@@ -144,20 +144,20 @@
  padding: 0;
 }

-.subscription-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-background-primary);
-  border-radius: $br-6;
-  border: 1.75px solid var(--color-foreground-secondary);
-  block-size: var(--sp-xl);
-  inline-size: var(--sp-xl);
-}
-
 .subscription-icon {
+  @extend .button-icon;
+  background: var(--color-background-primary);
  stroke: var(--color-foreground-secondary);
+  border-radius: 6px;
+  border: 1.75px solid var(--color-foreground-secondary);
  stroke-width: 2.25px;
+  width: var(--sp-xl);
+  height: var(--sp-xl);
+
+  svg {
+    block-size: var(--sp-m);
+    inline-size: var(--sp-m);
+  }
 }

 .menu-item {
--- a/frontend/src/app/main/ui/delete_shared.cljs
+++ b/frontend/src/app/main/ui/delete_shared.cljs
@@ -106,14 +106,14 @@
       (when (not= 0 count-libraries)
         (if (pos? (count references))
           [:*
-            (when (and (string? scd-msg) (not= scd-msg ""))
-              [:p {:class (stl/css :modal-scd-msg)} scd-msg])
-
-            [:ul {:class (stl/css :element-list)}
-             (for [[file-id file-name] references]
-               [:li {:class (stl/css :list-item)
-                     :key (dm/str file-id)}
-                [:span "- " file-name]])]
+            [:div
+             (when (and (string? scd-msg) (not= scd-msg ""))
+               [:h3 {:class (stl/css :modal-scd-msg)} scd-msg])
+             [:ul {:class (stl/css :element-list)}
+              (for [[file-id file-name] references]
+                [:li {:class (stl/css :list-item)
+                      :key (dm/str file-id)}
+                 [:span "- " file-name]])]]
            (when (and (string? hint) (not= hint ""))
              [:> context-notification* {:level :info
                                         :appearance :ghost}
--- a/frontend/src/app/main/ui/delete_shared.scss
+++ b/frontend/src/app/main/ui/delete_shared.scss
@@ -4,8 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC

-@use "refactor/basic-rules.scss" as *;
-@use "ds/typography.scss" as t;
+@use "refactor/common-refactor.scss" as deprecated;

 .modal-overlay {
  @extend .modal-overlay-base;
@@ -16,19 +15,14 @@

 .modal-container {
  @extend .modal-container-base;
-  display: grid;
-  gap: var(--sp-xxl);
-  grid-template-rows: auto minmax(0, 1fr) auto;
 }

-.list-wrapper {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  max-height: 100%;
+.modal-header {
+  margin-bottom: deprecated.$s-24;
 }

 .modal-title {
-  @include t.use-typography("headline-medium");
+  @include deprecated.headlineMediumTypography;
  color: var(--modal-title-foreground-color);
 }

@@ -37,16 +31,13 @@
 }

 .modal-content {
-  @include t.use-typography("body-small");
-  display: grid;
-  gap: var(--sp-s);
+  @include deprecated.bodySmallTypography;
+  margin-bottom: deprecated.$s-24;
 }

 .element-list {
-  @include t.use-typography("body-large");
+  @include deprecated.bodyLargeTypography;
  color: var(--modal-text-foreground-color);
-  overflow-y: auto;
-  margin-block: 0;
 }

 .action-buttons {
@@ -64,14 +55,10 @@
  }
 }

-.modal-scd-msg {
-  margin-block: 0;
-}
-
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include t.use-typography("body-large");
+  @include deprecated.bodyLargeTypography;
  color: var(--modal-text-foreground-color);
  line-height: 1.5;
 }
--- a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
+++ b/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
@@ -173,7 +173,7 @@
   [:id {:optional true} :string]
   [:offset {:optional true} :int]
   [:delay {:optional true} :int]
-   [:content [:or fn? :string map?]]
+   [:content [:or fn? :string]]
   [:placement {:optional true}
    [:maybe [:enum "top" "bottom" "left" "right" "top-right" "bottom-right" "bottom-left" "top-left"]]]])

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

-        pwidth
-        (if error?
-          280
-          (/ (* progress 280) 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)

-        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"))
+        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)))
@@ -290,7 +284,7 @@
                     :on-click retry-last-export}
            (tr "workspace.options.retry")]

-           [:span {:class (stl/css :progress)}
+           [:p {: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/code.scss
+++ b/frontend/src/app/main/ui/inspect/code.scss
@@ -14,6 +14,7 @@
  padding-bottom: deprecated.$s-16;
  overflow-y: auto;
  overflow-x: hidden;
+  scrollbar-gutter: stable;
  padding-inline: var(--sp-m);
 }

--- 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,7 +122,8 @@
     (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)))))
+         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))
+       (reset! color-space* "hex")))

    [:aside {:class (stl/css-case :settings-bar-right true
                                  :viewer-code (= from :viewer))}
@@ -188,41 +189,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/right_sidebar.scss
+++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss
@@ -31,7 +31,6 @@
 .tool-windows {
  block-size: 100%;
  display: grid;
-  grid-template-rows: auto 1fr;
  gap: var(--sp-s);
 }

@@ -150,6 +149,7 @@
 }

 .inspect-content {
+  flex: 1;
  overflow: hidden;
 }

@@ -157,5 +157,6 @@
  --tabs-nav-padding-inline-start: 0;
  --tabs-nav-padding-inline-end: var(--sp-m);

+  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
  overflow: auto;
 }
--- 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 (seq active-themes) (seq active-sets))
+     (when (or active-themes active-sets)
       [:li
        [:> style-box* {:panel :token}
         [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]])
--- a/frontend/src/app/main/ui/inspect/styles.scss
+++ b/frontend/src/app/main/ui/inspect/styles.scss
@@ -1,11 +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 "ds/_utils.scss" as *;
-
-.styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
-}
--- a/frontend/src/app/main/ui/inspect/styles/style_box.scss
+++ b/frontend/src/app/main/ui/inspect/styles/style_box.scss
@@ -6,15 +6,6 @@

@use "ds/typography.scss" as *;

-// TODO: this must be a custom property in the design system
-:global(.light) {
-  --low-emphasis-background: #fafafa;
-}
-
-:global(.default) {
-  --low-emphasis-background: #121214;
-}
-
 .style-box {
  --title-gap: var(--sp-xs);
  --title-padding: var(--sp-s);
@@ -22,9 +13,12 @@
  --arrow-color: var(--color-foreground-secondary);
  --box-border-color: var(--color-background-primary);

+  // TODO: this must be a custom property in the design system
+  --lowEmphasis-background: #121214;
+
  padding-block: var(--sp-s);
  padding-inline: var(--sp-m);
-  background-color: var(--low-emphasis-background);
+  background-color: var(--lowEmphasis-background);

  border-block-end: 2px solid var(--box-border-color);
 }
--- a/frontend/src/app/main/ui/releases.cljs
+++ b/frontend/src/app/main/ui/releases.cljs
@@ -30,7 +30,6 @@
   [app.main.ui.releases.v2-1]
   [app.main.ui.releases.v2-10]
   [app.main.ui.releases.v2-11]
-   [app.main.ui.releases.v2-12]
   [app.main.ui.releases.v2-2]
   [app.main.ui.releases.v2-3]
   [app.main.ui.releases.v2-4]
@@ -103,4 +102,4 @@

 (defmethod rc/render-release-notes "0.0"
  [params]
-  (rc/render-release-notes (assoc params :version "2.12")))
+  (rc/render-release-notes (assoc params :version "2.11")))
--- a/frontend/src/app/main/ui/releases/v2_12.cljs
+++ b/frontend/src/app/main/ui/releases/v2_12.cljs
@@ -1,162 +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.releases.v2-12
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.data.macros :as dm]
-   [app.main.ui.releases.common :as c]
-   [rumext.v2 :as mf]))
-
-(defmethod c/render-release-notes "2.12"
-  [{:keys [slide klass next finish navigate version]}]
-  (mf/html
-   (case slide
-     :start
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-slide-0.jpg"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Penpot 2.12 is here!"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "What’s new in Penpot?"]
-
-          [:div {:class (stl/css :version-tag)}
-           (dm/str "Version " version)]]
-
-         [:div {:class (stl/css :features-block)}
-          [:span {:class (stl/css :feature-title)}
-           "Better tokens visibility and more!"]
-
-          [:p  {:class (stl/css :feature-content)}
-           "This release focuses on making your everyday workflow feel clearer, faster and more intuitive. Tokens are now easier to see and apply, appearing directly where you work and giving the designs better context during code inspection. Variants gain a more natural flow thanks to simple boolean toggles that remove friction when switching states. And PDF export becomes more flexible, letting you choose exactly which boards to share so your files match the story you want to tell."]
-
-          [:p  {:class (stl/css :feature-content)}
-           "Together, these enhancements bring greater control and fluidity to your entire design process."]
-
-          [:p  {:class (stl/css :feature-content)}
-           "Let’s dive in!"]]
-
-         [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
-
-     0
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-tokens-sidebar.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Better tokens visibility"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Better tokens visibility"]]
-
-         [:div {:class (stl/css :feature)}
-          [:p {:class (stl/css :feature-content)}
-           "Design systems should be both powerful and effortless to use. This release brings tokens closer to where you work, making them easier to apply and easier to understand."]
-
-          [:span {:class (stl/css :feature-title)}
-           "Apply color tokens right from the sidebar"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Your color tokens now appear directly in the properties sidebar, making it faster to apply or unapply tokens from the design tab. No more digging: now you can use tokens within your design flow."]
-
-          [:span {:class (stl/css :feature-title)}
-           "See token names in the Inspect panel"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Developers now get a clearer context during handoff. The Inspect panel shows the actual token used in your design, in a similar way to how styles are displayed. This small detail reduces ambiguity, aligns everyone on the same language, and strengthens collaboration across the team."]]
-
-         [:div {:class (stl/css :navigation)}
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
-
-     1
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-variants.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Simpler boolean variants"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Simpler boolean variants"]]
-         [:div {:class (stl/css :feature)}
-
-          [:p {:class (stl/css :feature-content)}
-           "Variants are central to building flexible, scalable components. With this release, boolean properties become far easier to work with."]
-
-          [:span {:class (stl/css :feature-title)}
-           "A simple toggle for boolean values"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Binary states now use a clean toggle, to be able to switch visually,  instead of a dropdown. This makes adjusting component states more intuitive and speeds up working with multiple instances."]
-
-          [:p {:class (stl/css :feature-content)}
-           "It’s a subtle improvement, but it removes friction you feel hundreds of times a week, and makes component work flow more naturally."]]
-
-         [:div {:class (stl/css :navigation)}
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
-
-
-     2
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-export-pdf.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Smarter PDF export"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Smarter PDF export"]]
-         [:div {:class (stl/css :feature)}
-
-          [:p {:class (stl/css :feature-content)}
-           "Exporting your work is now more precise and flexible."]
-
-          [:span {:class (stl/css :feature-title)}
-           "Select specific boards when exporting"]
-
-
-          [:p {:class (stl/css :feature-content)}
-           "You’re now in control of which boards make it into your PDF. Share just the final screens, just a flow, just the workshop materials. This streamlined export flow adapts to the way real teams work: share the story you want to tell, with exactly the boards you need."]]
-
-         [:div {:class (stl/css :navigation)}
-
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
--- a/frontend/src/app/main/ui/releases/v2_12.scss
+++ b/frontend/src/app/main/ui/releases/v2_12.scss
@@ -1,102 +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;
-
-.modal-overlay {
-  @extend .modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headlineLargeTypography;
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.bodyLargeTypography;
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.bodyMediumTypography;
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.bodyMediumTypography;
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend .button-primary;
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
--- 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- make-management-form-schema [min-editors]
+(defn schema:seats-form [min-editors]
  [:map {:title "SeatsForm"}
   [:min-members [::sm/number {:min min-editors
                               :max 9999}]]
@@ -87,6 +87,7 @@
  {::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)

@@ -111,12 +112,9 @@
          {: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 :initial initial)
+        (fm/use-form :schema (schema:seats-form min-editors)
+                     :initial initial)

        submit-in-progress
        (mf/use-ref false)
@@ -336,15 +334,11 @@
        [:> 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
@@ -424,11 +418,7 @@
    (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-size on-resize-palette}])
+       [:& palette {:layout layout
+                    :on-change-palette-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 "width")
+                             x-size (dom/get-data left-sidebar "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,13 +33,12 @@
   [okulary.core :as l]
   [rumext.v2 :as mf]))

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

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

-(mf/defc palette*
-  [{:keys [layout on-change-size]}]
-  (let [color-palette? (:colorpalette layout)
-        text-palette?  (:textpalette layout)
-        hide-palettes? (:hide-palettes layout)
+(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)

-        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)
+        vport (mf/deref viewport)
+        vport-width (:width vport)

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

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

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

        toggle-palettes
-        (mf/use-fn
+        (mf/use-callback
         (fn [_]
           (r/set-resize-type! :top)
           (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -142,9 +131,7 @@
                                             (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)
@@ -155,16 +142,16 @@
      (let [key1 (events/listen js/window "resize" on-resize)]
        #(events/unlistenByKey key1)))

-    (mf/with-layout-effect []
-      (let [dom     (mf/ref-val parent-ref)
+    (mf/use-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-style rulers?)
+           :style  (calculate-palette-padding rulers?)
           :data-testid "palette"}
-     (when-not ^boolean read-only?
+     (when-not workspace-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,6 +27,7 @@
   [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*]]
@@ -43,34 +44,19 @@

 ;; --- Left Sidebar (Component)

-(def ^:private toggle-collapse-left-sidebar
-  (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
+(defn- on-collapse-left-sidebar
+  []
+  (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 toggle-collapse-left-sidebar}
+            :on-click on-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}
@@ -111,7 +97,6 @@

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

-
 (mf/defc left-sidebar*
  {::mf/memo true}
  [{:keys [layout file page-id tokens-lib active-tokens resolved-active-tokens]}]
@@ -176,7 +161,7 @@
     [:aside {:ref parent-ref
              :id "left-sidebar-aside"
              :data-testid "left-sidebar"
-              :data-width (str width)
+              :data-left-sidebar-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,44 +116,6 @@
  }
 }

-.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/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -56,8 +56,9 @@
               (update file :data dissoc :pages-index))
             refs/file))

-(mf/defc assets-local-library*
-  {::mf/private true}
+(mf/defc assets-local-library
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
  [{:keys [filters]}]
  (let [file (mf/deref ref:local-library)]
    [:> file-library*
@@ -67,7 +68,7 @@
      :filters filters}]))

 (defn- toggle-values
-  [v a b]
+  [v [a b]]
  (if (= v a) b a))

 (mf/defc assets-toolbox*
@@ -96,7 +97,7 @@
        (mf/use-fn
         (mf/deps ordering)
         (fn []
-           (let [new-value (toggle-values ordering :asc :desc)]
+           (let [new-value (toggle-values ordering [:asc :desc])]
             (swap! filters* assoc :ordering new-value)
             (dwa/set-current-assets-ordering! new-value))))

@@ -104,7 +105,7 @@
        (mf/use-fn
         (mf/deps list-style)
         (fn []
-           (let [new-value (toggle-values list-style :thumbs :list)]
+           (let [new-value (toggle-values list-style [:thumbs :list])]
             (swap! filters* assoc :list-style new-value)
             (dwa/set-current-assets-list-style! new-value))))

@@ -208,5 +209,5 @@
      [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
       [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
        [:*
-         [:> assets-local-library* {:filters filters}]
+         [:& assets-local-library {:filters filters}]
         [:> assets-libraries* {:filters filters}]]]]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -15,7 +15,7 @@
    cursor: pointer;

    .title-menu {
-      visibility: visible;
+      display: block;
    }
  }
 }
@@ -25,7 +25,7 @@
 }

 .title-menu {
-  visibility: hidden;
+  display: none;
 }

 .group-title {
--- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
@@ -0,0 +1,29 @@
+;; 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
@@ -0,0 +1,45 @@
+// 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/layer_name.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
@@ -11,6 +11,7 @@
   [app.common.data.macros :as dm]
   [app.common.types.variant :as ctv]
   [app.main.data.workspace :as dw]
+   [app.main.data.workspace.variants :as dwv]
   [app.main.store :as st]
   [app.util.debug :as dbg]
   [app.util.dom :as dom]
@@ -68,7 +69,15 @@
                 name           (str/trim (dom/get-value name-input))]
             (on-stop-edit)
             (reset! edition* false)
-             (st/emit! (dw/rename-shape-or-variant shape-id name)))))
+             (if variant-name
+               (if (ctv/valid-properties-formula? name)
+                 (st/emit! (dwv/update-properties-names-and-values component-id variant-id variant-properties (ctv/properties-formula->map name))
+                           (dwv/remove-empty-properties variant-id)
+                           (dwv/update-error component-id))
+                 (st/emit! (dwv/update-properties-names-and-values component-id variant-id variant-properties {})
+                           (dwv/remove-empty-properties variant-id)
+                           (dwv/update-error component-id name)))
+               (st/emit! (dw/end-rename-shape shape-id name))))))

        cancel-edit
        (mf/use-fn
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -687,7 +687,7 @@
                              (str/upper (tr "workspace.assets.local-library"))
                              (dm/get-in libraries [current-library-id :name]))

-        current-lib-data    (mf/with-memo [libraries current-library-id]
+        current-lib-data    (mf/with-memo [libraries]
                              (get-in libraries [current-library-id :data]))

        current-lib-counts  (mf/with-memo [current-lib-data]
--- 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 applied-token-name color on-swatch-click-token detach-token open-modal-from-token]}]
+  [{:keys [active-tokens color-token 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,22 +77,21 @@
                        @active-tokens
                        active-tokens)

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

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

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

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

    [:div {:class (stl/css :color-info)}
     [:div {:class (stl/css-case :token-color-wrapper true
@@ -129,7 +128,7 @@
                    :class (stl/css :token-tooltip)}
       [:div {:class (stl/css :token-name)
              :aria-labelledby id}
-        (or token-name applied-token-name)]]
+        (or token-name color-token)]]
      [:div {:class (stl/css :token-actions)}
       [:> icon-button*
        {:variant "action"
@@ -147,11 +146,7 @@
           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 [;; 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)
+  (let [token-color      (contains? cfg/flags :token-color)
        libraries        (mf/deref refs/files)

        color-without-hash (mf/use-memo
@@ -182,6 +177,7 @@
                                (-> (deref active-tokens*)
                                    (select-keys (get tk/tokens-by-input origin))
                                    (not-empty)))))
+
        on-focus'
        (mf/use-fn
         (mf/deps on-focus)
@@ -356,7 +352,7 @@
     (cond
       (and token-color applied-token)
       [:> color-token-row* {:active-tokens tokens
-                             :applied-token-name applied-token
+                             :color-token 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,8 +63,7 @@
           :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,21 +20,15 @@

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

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

-(defn use-viewport-position-style [x y position token-type]
+(defn use-viewport-position-style [x y position color?]
  (let [vport (-> (l/derived :vport refs/workspace-local)
                  (mf/deref))]
-    (-> (calculate-position vport position x y token-type)
+    (-> (calculate-position vport position x y color?)
        (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)
-        modal-size-large* (mf/use-state (or (= token-type :typography)
-                                            (= token-type :color)
-                                            (= token-type :shadow)))
+  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
+        modal-size-large* (mf/use-state (= token-type :typography))
        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-1;
+  z-index: deprecated.$z-index-3;
  background-color: var(--color-background-primary);
  transition:
    top 0.3s,
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -149,9 +149,9 @@

        canvas-ref        (mf/use-ref nil)

-        ;; STATE REFS
-        disable-paste-ref (mf/use-ref false)
-        in-viewport-ref   (mf/use-ref false)
+        ;; VARS
+        disable-paste     (mf/use-var false)
+        in-viewport?      (mf/use-var false)

        ;; STREAMS
        move-stream       (mf/use-memo #(rx/subject))
@@ -210,10 +210,10 @@
        on-pointer-down   (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing?
                                                   path-drawing? create-comment? space? panning z? read-only?)

-        on-pointer-up     (actions/on-pointer-up disable-paste-ref)
+        on-pointer-up     (actions/on-pointer-up disable-paste)

-        on-pointer-enter  (actions/on-pointer-enter in-viewport-ref)
-        on-pointer-leave  (actions/on-pointer-leave in-viewport-ref)
+        on-pointer-enter  (actions/on-pointer-enter in-viewport?)
+        on-pointer-leave  (actions/on-pointer-leave in-viewport?)
        on-pointer-move   (actions/on-pointer-move move-stream)
        on-move-selected  (actions/on-move-selected hover hover-ids selected space? z? read-only?)
        on-menu-selected  (actions/on-menu-selected hover hover-ids selected read-only?)
@@ -304,7 +304,7 @@
         #(st/emit!
           (dwv/add-new-variant (:id first-shape))))]

-    (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?)
+    (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?)
    (hooks/setup-viewport-size vport viewport-ref)
    (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
    (hooks/setup-keyboard alt? mod? space? z? shift?)
--- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs
@@ -266,7 +266,7 @@
         (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids})))))))

 (defn on-pointer-up
-  [disable-paste-ref]
+  [disable-paste]
  (mf/use-callback
   (fn [event]
     (dom/stop-propagation event)
@@ -291,19 +291,21 @@
         (dom/prevent-default event)

         ;; We store this so in Firefox the middle button won't do a paste of the content
-         (mf/set-ref-val! disable-paste-ref true)
-         (ts/schedule #(mf/set-ref-val! disable-paste-ref false)))
+         (reset! disable-paste true)
+         (ts/schedule #(reset! disable-paste false)))

       (st/emit! (dw/finish-panning)
                 (dw/finish-zooming))))))

-(defn on-pointer-enter
-  [in-viewport-ref]
-  (mf/use-fn #(mf/set-ref-val! in-viewport-ref true)))
+(defn on-pointer-enter [in-viewport?]
+  (mf/use-callback
+   (fn []
+     (reset! in-viewport? true))))

-(defn on-pointer-leave
-  [in-viewport-ref]
-  (mf/use-fn #(mf/set-ref-val! in-viewport-ref false)))
+(defn on-pointer-leave [in-viewport?]
+  (mf/use-callback
+   (fn []
+     (reset! in-viewport? false))))

 (defn on-key-down []
  (mf/use-callback
@@ -522,22 +524,15 @@
                       :blobs (seq files)}]
           (st/emit! (dwm/upload-media-workspace params))))))))

-(def ^:private invalid-paste-targets
-  #{"INPUT" "TEXTAREA"})
-
 (defn on-paste
-  [disable-paste-ref in-viewport-ref read-only?]
+  [disable-paste in-viewport? read-only?]
  (mf/use-fn
   (mf/deps read-only?)
   (fn [event]
-     ;; We disable the paste when: 1. just after mouse-up of a middle
-     ;; button (so when panning won't paste the content into the
-     ;; workspace); 2. when we paste content in an input on the
-     ;; sidebar
-     (let [tag-name       (-> event dom/get-target dom/get-tag-name)
-           disable-paste? (mf/ref-val disable-paste-ref)
-           in-viewport?   (mf/ref-val in-viewport-ref)]
-       (when (and (not (contains? invalid-paste-targets tag-name))
-                  (not disable-paste?)
+     ;; We disable the paste just after mouse-up of a middle button so
+     ;; when panning won't paste the content into the workspace
+     (let [tag-name (-> event dom/get-target dom/get-tag-name)]
+       (when (and (not (#{"INPUT" "TEXTAREA"} tag-name))
+                  (not @disable-paste)
                  (not read-only?))
-         (st/emit! (dw/paste-from-event event in-viewport?)))))))
+         (st/emit! (dw/paste-from-event event @in-viewport?)))))))
--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@@ -42,12 +42,11 @@
   [rumext.v2 :as mf])
  (:import goog.events.EventType))

-(defn setup-dom-events
-  [zoom disable-paste-ref in-viewport-ref workspace-read-only? drawing-tool drawing-path?]
+(defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only? drawing-tool drawing-path?]
  (let [on-key-down       (actions/on-key-down)
        on-key-up         (actions/on-key-up)
        on-mouse-wheel    (actions/on-mouse-wheel zoom)
-        on-paste          (actions/on-paste disable-paste-ref in-viewport-ref workspace-read-only?)
+        on-paste          (actions/on-paste disable-paste in-viewport? workspace-read-only?)
        on-pointer-down   (mf/use-fn
                           (mf/deps drawing-tool drawing-path?)
                           (fn [e]
@@ -57,27 +56,27 @@
                                 (st/emit! (dwe/clear-edition-mode))))))
        on-blur           (mf/use-fn #(st/emit! (mse/->BlurEvent)))]

-    (mf/with-effect [drawing-tool drawing-path?]
-      (let [key (events/listen js/window EventType.POINTERDOWN on-pointer-down)]
+    (mf/use-effect
+     (mf/deps drawing-tool drawing-path?)
+     (fn []
+       (let [keys [(events/listen js/window EventType.POINTERDOWN on-pointer-down)]]
+         (fn []
+           (doseq [key keys]
+             (events/unlistenByKey key))))))

-        ;; We need to disable workspace paste when we on comments
-        (if (= drawing-tool :comments)
-          (mf/set-ref-val! disable-paste-ref true)
-          (mf/set-ref-val! disable-paste-ref false))
-
-        #(events/unlistenByKey key)))
-
-    (mf/with-layout-effect [on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?]
-      (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
-                  (events/listen js/document EventType.KEYUP on-key-up)
-                  ;; bind with passive=false to allow the event to be cancelled
-                  ;; https://stackoverflow.com/a/57582286/3219895
-                  (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
-                  (events/listen js/window EventType.PASTE on-paste)
-                  (events/listen js/window EventType.BLUR on-blur)]]
-        (fn []
-          (doseq [key keys]
-            (events/unlistenByKey key)))))))
+    (mf/use-layout-effect
+     (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
+     (fn []
+       (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
+                   (events/listen js/document EventType.KEYUP on-key-up)
+                   ;; bind with passive=false to allow the event to be cancelled
+                   ;; https://stackoverflow.com/a/57582286/3219895
+                   (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
+                   (events/listen js/window EventType.PASTE on-paste)
+                   (events/listen js/window EventType.BLUR on-blur)]]
+         (fn []
+           (doseq [key keys]
+             (events/unlistenByKey key))))))))

 (defn setup-viewport-size [vport viewport-ref]
  (mf/with-effect [vport]
--- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
@@ -142,9 +142,9 @@
        canvas-ref        (mf/use-ref nil)
        text-editor-ref   (mf/use-ref nil)

-        ;; STATE REFS
-        disable-paste-ref (mf/use-ref false)
-        in-viewport-ref   (mf/use-ref false)
+        ;; VARS
+        disable-paste     (mf/use-var false)
+        in-viewport?      (mf/use-var false)

        ;; STREAMS
        move-stream       (mf/use-memo #(rx/subject))
@@ -204,10 +204,10 @@
        on-pointer-down   (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing?
                                                   path-drawing? create-comment? space? panning z? read-only?)

-        on-pointer-up     (actions/on-pointer-up disable-paste-ref)
+        on-pointer-up     (actions/on-pointer-up disable-paste)

-        on-pointer-enter  (actions/on-pointer-enter in-viewport-ref)
-        on-pointer-leave  (actions/on-pointer-leave in-viewport-ref)
+        on-pointer-enter  (actions/on-pointer-enter in-viewport?)
+        on-pointer-leave  (actions/on-pointer-leave in-viewport?)
        on-pointer-move   (actions/on-pointer-move move-stream)
        on-move-selected  (actions/on-move-selected hover hover-ids selected space? z? read-only?)
        on-menu-selected  (actions/on-menu-selected hover hover-ids selected read-only?)
@@ -349,7 +349,7 @@
          (wasm.api/show-grid @hover-top-frame-id)
          (wasm.api/clear-grid))))

-    (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?)
+    (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?)
    (hooks/setup-viewport-size vport viewport-ref)
    (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
    (hooks/setup-keyboard alt? mod? space? z? shift?)
--- a/frontend/src/app/plugins/library.cljs
+++ b/frontend/src/app/plugins/library.cljs
@@ -901,10 +901,10 @@
    (fn [pos value]
      (cond
        (not (nat-int? pos))
-        (u/display-not-valid :pos (str pos))
+        (u/display-not-valid :pos pos)

-        (not (string? value))
-        (u/display-not-valid :name value)
+        (not (string? name))
+        (u/display-not-valid :name name)

        :else
        (st/emit!
--- a/frontend/src/app/plugins/parser.cljs
+++ b/frontend/src/app/plugins/parser.cljs
@@ -7,8 +7,6 @@
 (ns app.plugins.parser
  (:require
   [app.common.data :as d]
-   [app.common.json :as json]
-   [app.common.types.path :as path]
   [app.common.uuid :as uuid]
   [app.util.object :as obj]
   [cuerdas.core :as str]))
@@ -516,8 +514,3 @@
  (case axis
    "horizontal" :y
    "vertical"   :x))
-
-(defn parse-commands
-  [commands]
-  (-> (json/->clj commands)
-      (path/decode-segments)))
--- a/frontend/src/app/plugins/shape.cljs
+++ b/frontend/src/app/plugins/shape.cljs
@@ -218,7 +218,7 @@
                  (u/display-not-valid :name value)

                  :else
-                  (st/emit! (dw/rename-shape-or-variant file-id page-id id value)))))}
+                  (st/emit! (dw/end-rename-shape id value)))))}

           :blocked
           {:this true
@@ -1034,8 +1034,8 @@
           (fn []
             (let [shape (u/locate-shape file-id page-id id)]
               (cond
-                 (and (not (cfh/path-shape? shape)) (not (cfh/bool-shape? shape)))
-                 (u/display-not-valid :toD (:type shape))
+                 (not (cfh/path-shape? shape))
+                 (u/display-not-valid :makeMask (:type shape))

                 :else
                 (.toString (:content shape)))))
@@ -1488,37 +1488,13 @@

         (cond-> (or (cfh/path-shape? data) (cfh/bool-shape? data))
           (crc/add-properties!
-            {:name "commands"
-             :get #(-> % u/proxy->shape :content format/format-path-content)
-             :set
-             (fn [_ value]
-               (let [segments (parser/parse-commands value)]
-                 (cond
-                   (not (r/check-permission plugin-id "content:write"))
-                   (u/display-not-valid :content "Plugin doesn't have 'content:write' permission")
-
-                   (not (sm/validate path/schema:segments segments))
-                   (u/display-not-valid :content segments)
-
-                   :else
-                   (let [selrect (path/calc-selrect segments)
-                         content (path/from-plain segments)
-                         points  (grc/rect->points selrect)]
-                     (st/emit! (dwsh/update-shapes
-                                [id]
-                                (fn [shape]
-                                  (-> shape
-                                      (assoc :content content)
-                                      (assoc :selrect selrect)
-                                      (assoc :points points)))))))))}
-            {:name "d"
+            {:name "content"
             :get #(-> % u/proxy->shape :content str)
             :set
             (fn [_ value]
-               (let [segments
-                     (if (string? value)
-                       (svg.path/parse value)
-                       value)]
+               (let [segments (if (string? value)
+                                (svg.path/parse value)
+                                value)]
                 (cond
                   (not (r/check-permission plugin-id "content:write"))
                   (u/display-not-valid :content "Plugin doesn't have 'content:write' permission")
@@ -1538,7 +1514,4 @@
                                                     (-> shape
                                                         (assoc :content content)
                                                         (assoc :selrect selrect)
-                                                         (assoc :points points)))))))))}
-            {:name "content"
-             :get #(.-d %)
-             :set (fn [self value] (set! (.-d self) value))}))))))
+                                                         (assoc :points points)))))))))}))))))
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -1316,16 +1316,51 @@
      (mem/free)
      content)))

+
 (defn init-wasm-module
  [module]
  (let [default-fn (unchecked-get module "default")
-        href       (cf/resolve-href "js/render-wasm.wasm")]
-    (default-fn #js {:locateFile (constantly href)})))
+        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)))

 (defonce module
  (delay
    (if (exists? js/dynamicImport)
-      (let [uri (cf/resolve-href "js/render-wasm.js")]
+      (let [uri (cf/resolve-static-asset "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
@@ -1,242 +0,0 @@
-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,43 +4,9 @@
 ;;
 ;; Copyright (c) KALEIDOS INC

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

 (defonce internal-frame-id nil)
 (defonce internal-module #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 serializers #js {})
 (defonce context-initialized? false)
--- a/frontend/src/app/util/clipboard.cljs
+++ b/frontend/src/app/util/clipboard.cljs
@@ -57,11 +57,10 @@
         (= (dom/get-tag-name target) "INPUT")]

    ;; ignore when pasting into an editable control
-     (if-not (or content-editable? is-input?)
+     (when-not (or content-editable? is-input?)
       (-> event
           (dom/event->browser-event)
-           (from-clipboard-event options))
-       (rx/empty)))))
+           (from-clipboard-event options))))))

 (defn from-drop-event
  "Get clipboard stream from drop event"
--- a/frontend/src/app/util/globals.js
+++ b/frontend/src/app/util/globals.js
@@ -35,26 +35,14 @@ goog.scope(function () {
    };
  }

-  self.event = function(name, detail) {
-    const options = {};
-    if (detail !== undefined) {
-      options.detail = detail;
-    }
-    return new CustomEvent(name, options);
+  self.event = function(...args) {
+    return new CustomEvent(...args);
  };

  self.dispatch_BANG_ = function(...args) {
    self.document.dispatchEvent(...args);
  };

-  self.listen = function(...args) {
-    self.document.addEventListener(...args);
-  };
-
-  self.unlisten = function(...args) {
-    self.document.removeEventListener(...args);
-  }
-
  self.window = (function () {
    if (typeof goog.global.window !== "undefined") {
      return goog.global.window;
--- a/Show More
+++ b/Show More