Merge tag '2.12.0-RC3'

🐛 Fix incorrect resource lifetime handling on exporter

.circleci/config.yml

@@ -0,0 +1,305 @@
+version: 2.1
+
+jobs:
+  lint:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    steps:
+      - checkout
+
+      - run:
+          name: "fmt check"
+          working_directory: "."
+          command: |
+            yarn install
+            yarn run fmt:clj:check
+
+      - run:
+          name: "lint clj common"
+          working_directory: "."
+          command: |
+            yarn run lint:clj:common
+
+      - run:
+          name: "lint clj frontend"
+          working_directory: "."
+          command: |
+            yarn run lint:clj:frontend
+
+      - run:
+          name: "lint clj backend"
+          working_directory: "."
+          command: |
+            yarn run lint:clj:backend
+
+      - run:
+          name: "lint clj exporter"
+          working_directory: "."
+          command: |
+            yarn run lint:clj:exporter
+
+      - run:
+          name: "lint clj library"
+          working_directory: "."
+          command: |
+            yarn run lint:clj:library
+
+  test-common:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    environment:
+      JAVA_OPTS: -Xmx4g -Xms100m -XX:+UseSerialGC
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "common/deps.edn"}}-{{ checksum "common/yarn.lock" }}
+
+      - run:
+          name: "JVM tests"
+          working_directory: "./common"
+          command: |
+            clojure -M:dev:test
+
+      - run:
+          name: "NODE tests"
+          working_directory: "./common"
+          command: |
+            yarn install
+            yarn run test
+
+      - save_cache:
+          paths:
+            - ~/.m2
+            - ~/.yarn
+            - ~/.gitlibs
+            - ~/.cache/ms-playwright
+          key: v1-dependencies-{{ checksum "common/deps.edn"}}-{{ checksum "common/yarn.lock" }}
+
+  test-frontend:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    environment:
+      JAVA_OPTS: -Xmx4g -Xms100m -XX:+UseSerialGC
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "frontend/deps.edn"}}-{{ checksum "frontend/yarn.lock" }}
+
+      - run:
+          name: "install dependencies"
+          working_directory: "./frontend"
+          # We install playwright here because the dependent tasks
+          # uses the same cache as this task so we prepopulate it
+          command: |
+            yarn install
+            yarn run playwright install chromium --with-deps
+
+      - run:
+          name: "lint scss on frontend"
+          working_directory: "./frontend"
+          command: |
+            yarn run lint:scss
+
+      - run:
+          name: "unit tests"
+          working_directory: "./frontend"
+          command: |
+            yarn run test
+
+      - save_cache:
+          paths:
+            - ~/.m2
+            - ~/.yarn
+            - ~/.gitlibs
+            - ~/.cache/ms-playwright
+          key: v1-dependencies-{{ checksum "frontend/deps.edn"}}-{{ checksum "frontend/yarn.lock" }}
+
+  test-library:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    environment:
+      JAVA_OPTS: -Xmx6g
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "frontend/deps.edn"}}-{{ checksum "frontend/yarn.lock" }}
+
+      - run:
+          name: Install dependencies and build
+          working_directory: "./library"
+          command: |
+            yarn install
+
+      - run:
+          name: Build and Test
+          working_directory: "./library"
+          command: |
+            ./scripts/build
+            yarn run test
+
+  test-components:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    environment:
+      JAVA_OPTS: -Xmx6g -Xms2g
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "frontend/deps.edn"}}-{{ checksum "frontend/yarn.lock" }}
+
+      - run:
+          name: Install dependencies
+          working_directory: "./frontend"
+          command: |
+            yarn install
+            yarn run playwright install chromium
+
+      - run:
+          name: Build Storybook
+          working_directory: "./frontend"
+          command: yarn run build:storybook
+
+      - run:
+          name: Serve Storybook and run tests
+          working_directory: "./frontend"
+          command: |
+            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"
+
+  test-backend:
+    docker:
+      - image: penpotapp/devenv:latest
+      - image: cimg/postgres:14.5
+        environment:
+          POSTGRES_USER: penpot_test
+          POSTGRES_PASSWORD: penpot_test
+          POSTGRES_DB: penpot_test
+      - image: cimg/redis:7.0.5
+
+    working_directory: ~/repo
+    resource_class: medium+
+
+    environment:
+      JAVA_OPTS: -Xmx4g -Xms100m -XX:+UseSerialGC
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "backend/deps.edn" }}
+
+      - run:
+          name: "tests"
+          working_directory: "./backend"
+          command: |
+            clojure -M:dev:test --reporter kaocha.report/documentation
+
+          environment:
+            PENPOT_TEST_DATABASE_URI: "postgresql://localhost/penpot_test"
+            PENPOT_TEST_DATABASE_USERNAME: penpot_test
+            PENPOT_TEST_DATABASE_PASSWORD: penpot_test
+            PENPOT_TEST_REDIS_URI: "redis://localhost/1"
+
+      - save_cache:
+          paths:
+            - ~/.m2
+            - ~/.gitlibs
+          key: v1-dependencies-{{ checksum "backend/deps.edn" }}
+
+  test-render-wasm:
+    docker:
+      - image: penpotapp/devenv:latest
+
+    working_directory: ~/repo
+    resource_class: medium+
+    environment:
+
+    steps:
+      - checkout
+
+      - run:
+          name: "fmt check"
+          working_directory: "./render-wasm"
+          command: |
+            cargo fmt --check
+
+      - run:
+          name: "lint"
+          working_directory: "./render-wasm"
+          command: |
+            ./lint
+
+      - run:
+          name: "cargo tests"
+          working_directory: "./render-wasm"
+          command: |
+            ./test
+
+workflows:
+  penpot:
+    jobs:
+      - test-frontend:
+          requires:
+            - lint: success
+
+      - test-library:
+          requires:
+            - lint: success
+
+      - test-components:
+          requires:
+            - lint: success
+
+      - test-backend:
+          requires:
+            - lint: success
+
+      - test-common:
+          requires:
+            - lint: success
+
+      - lint
+      - test-render-wasm

.github/workflows/build-tag.yml

@@ -11,7 +11,7 @@ jobs:
     secrets: inherit
     with:
       gh_ref: ${{ github.ref_name }}
-      build_wasm: "no"
+      build_wasm: "yes"
       build_storybook: "yes"
 
   build-docker:
@@ -23,6 +23,7 @@ jobs:
 
   notify:
     name: Notifications
+    runs-on: ubuntu-24.04
     needs: build-docker
 
     steps:

.github/workflows/tests.yml

@@ -159,7 +159,17 @@ jobs:
       - name: Build Bundle
         working-directory: ./frontend
         run: |
-          ./scripts/build 0.0.0
+          corepack enable;
+          corepack install;
+          yarn install
+          yarn run build:app:assets
+          yarn run build:app
+          yarn run build:app:libs
+
+      - name: Build WASM
+        working-directory: "./render-wasm"
+        run: |
+          ./build release
 
       - name: Store Bundle Cache
         uses: actions/cache@v4
@@ -167,7 +177,6 @@ jobs:
           key: "integration-bundle-${{ github.sha }}"
           path: frontend/resources/public
 
-
   test-integration-1:
     name: "Integration Tests 1/4"
     runs-on: ubuntu-24.04

CHANGES.md

@@ -1,21 +1,5 @@
 # CHANGELOG
 
-## 2.13.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
-### :sparkles: New features & Enhancements
-
-### :bug: Bugs fixed
-
-- Fix problem when drag+duplicate a full grid [Taiga #12565](https://tree.taiga.io/project/penpot/issue/12565)
-- Fix problem when pasting elements in reverse flex layout [Taiga #12460](https://tree.taiga.io/project/penpot/issue/12460)
-
-
 ## 2.12.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -77,6 +61,7 @@ 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
 
@@ -104,6 +89,11 @@ example. It's still usable as before, we just removed the example.
 - 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
 

backend/resources/app/onboarding.edn

@@ -3,7 +3,7 @@
   :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Tokens%20starter%20kit.penpot"}
  {:id "penpot-design-system"
   :name "Penpot Design System | Pencil"
-  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/penpot-app.penpot"}
+  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Pencil-Penpot-Design-System.penpot"}
  {:id "wireframing-kit"
   :name "Wireframe library"
   :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Wireframing%20kit%20v1.1.penpot"}

backend/scripts/_env

@@ -3,6 +3,7 @@
 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 \

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))
 

backend/src/app/loggers/audit.clj

@@ -79,18 +79,6 @@
          (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")]
@@ -99,13 +87,24 @@
                   (str/blank? session-id))
       session-id)))
 
-(defn- get-external-event-origin
+(defn- get-client-event-origin
   [request]
   (when-let [origin (yreq/get-header request "x-event-origin")]
-    (when-not (or (> (count origin) 256)
-                  (= origin "null")
+    (when-not (or (= origin "null")
                   (str/blank? origin))
-      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))))
 
 ;; --- SPECS
 
@@ -134,6 +133,33 @@
 (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)
@@ -148,18 +174,10 @@
                                  (merge (::props resultm))
                                  (dissoc :profile-id)
                                  (dissoc :type)))
-
                          (clean-props))
 
-        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))
-
+        context      (merge (::context resultm)
+                            (prepare-context-from-request request))
         ip-addr      (inet/parse-request request)]
 
     {::type (or (::type resultm)

common/src/app/common/exceptions.cljc

@@ -14,7 +14,8 @@
    [app.common.schema :as sm]
    [clojure.core :as c]
    [clojure.spec.alpha :as s]
-   [cuerdas.core :as str])
+   [cuerdas.core :as str]
+   [expound.alpha :as expound])
   #?(:clj
      (:import
       clojure.lang.IPersistentMap)))
@@ -109,6 +110,13 @@
          (contains? data :explain))
     (explain (:explain data) opts)
 
+    (and (contains? data ::s/problems)
+         (contains? data ::s/value)
+         (contains? data ::s/spec))
+    (binding [s/*explain-out* expound/printer]
+      (with-out-str
+        (s/explain-out (update data ::s/problems #(take (:length opts 10) %)))))
+
     (contains? data ::sm/explain)
     (sm/humanize-explain (::sm/explain data) opts)))
 

common/src/app/common/logging.cljc

@@ -43,6 +43,8 @@
   "
   #?(:cljs (:require-macros [app.common.logging :as l]))
   (:require
+   #?(:clj  [clojure.edn :as edn]
+      :cljs [cljs.reader :as edn])
    [app.common.data :as d]
    [app.common.exceptions :as ex]
    [app.common.pprint :as pp]

common/src/app/common/logic/libraries.cljc

@@ -12,12 +12,16 @@
    [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]
    [app.common.path-names :as cpn]
+   [app.common.spec :as us]
    [app.common.types.component :as ctk]
    [app.common.types.components-list :as ctkl]
    [app.common.types.container :as ctn]
@@ -25,6 +29,7 @@
    [app.common.types.library :as ctl]
    [app.common.types.page :as ctp]
    [app.common.types.pages-list :as ctpl]
+   [app.common.types.path.segment :as segment]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
@@ -34,7 +39,8 @@
    [app.common.types.typography :as cty]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
-   [clojure.set :as set]))
+   [clojure.set :as set]
+   [clojure.spec.alpha :as s]))
 
 ;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
 (log/set-level! :warn)
@@ -471,10 +477,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync file with library"
@@ -508,10 +514,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync local components with library"
@@ -1874,6 +1880,44 @@
                    roperations'
                    uoperations')))))))
 
+(defn- set-path-new-values
+  [current-shape prev-shape transform]
+  (let [new-content   (segment/transform-content
+                       (:content current-shape)
+                       (gmt/transform-in (gpt/point 0 0) transform))
+        new-points    (-> (segment/content->selrect new-content)
+                          (grc/rect->points))
+        points-center (gco/points->center new-points)
+        new-selrect   (gsh/calculate-selrect new-points points-center)
+        shape         (assoc current-shape
+                             :content new-content
+                             :points new-points
+                             :selrect new-selrect)
+
+        prev-center   (segment/content-center (:content prev-shape))
+        delta         (gpt/subtract points-center (first new-points))
+        new-pos       (gpt/subtract prev-center delta)]
+    (gsh/absolute-move shape new-pos)))
+
+(defn- switch-path-change-value
+  [prev-shape           ;; The shape before the switch
+   current-shape        ;; The shape after the switch (a clean copy)
+   ref-shape            ;; The referenced shape on the main component
+                        ;; before the switch
+   attr]
+  (let [old-width (-> ref-shape :selrect :width)
+        new-width (-> prev-shape :selrect :width)
+
+        old-height (-> ref-shape :selrect :height)
+        new-height (-> prev-shape :selrect :height)
+
+        transform (-> (gpt/point (/ new-width old-width)
+                                 (/ new-height old-height))
+                      (gmt/scale-matrix))
+
+        shape     (set-path-new-values current-shape prev-shape transform)]
+    (get shape attr)))
+
 
 (defn- switch-text-change-value
   [prev-content         ;; The :content of the text before the switch
@@ -2025,6 +2069,10 @@
                (= :content attr)
                (touched attr-group))
 
+              path-change?
+              (and (= :path (:type current-shape))
+                   (contains? #{:points :selrect :content} attr))
+
               ;; position-data is a special case because can be affected by :geometry-group and :content-group
               ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
               ;; so it's calculated again
@@ -2053,6 +2101,12 @@
                                             (:content origin-ref-shape)
                                             touched)
 
+                  path-change?
+                  (switch-path-change-value previous-shape
+                                            current-shape
+                                            origin-ref-shape
+                                            attr)
+
                   :else
                   (get previous-shape attr)))
 
@@ -2813,15 +2867,13 @@
         ids-map        (into {} (map #(vector % (uuid/next))) all-ids)
 
 
-        ;; If there is an alt-duplication we change to root
-        ;; For variants so the copy is made as a child of root
+        ;; If there is an alt-duplication of a variant, change its parent to root
+        ;; so the copy is made as a child of root
         ;; This is because inside a variant-container can't be a copy
-        ;; For other shape this way the layout won't be changed when duplicated
-        ;; and if you move outside the layout will not change
         shapes  (map (fn [shape]
-                       (cond-> shape
-                         alt-duplication?
-                         (assoc :parent-id uuid/zero :frame-id uuid/zero)))
+                       (if (and alt-duplication? (ctk/is-variant? shape))
+                         (assoc shape :parent-id uuid/zero :frame-id nil)
+                         shape))
                      shapes)
 
 

common/src/app/common/schema.cljc

@@ -8,8 +8,6 @@
   (:refer-clojure :exclude [deref merge parse-uuid parse-long parse-double parse-boolean type keys])
   #?(:cljs (:require-macros [app.common.schema :refer [ignoring]]))
   (:require
-   #?(:clj [malli.dev.pretty :as mdp])
-   #?(:clj [malli.dev.virhe :as v])
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.pprint :as pp]
@@ -21,6 +19,8 @@
    [clojure.core :as c]
    [cuerdas.core :as str]
    [malli.core :as m]
+   [malli.dev.pretty :as mdp]
+   [malli.dev.virhe :as v]
    [malli.error :as me]
    [malli.generator :as mg]
    [malli.registry :as mr]
@@ -245,30 +245,27 @@
                                      :level (d/nilv level 8)
                                      :length (d/nilv length 12)})))))
 
-#?(:clj
-   (defmethod v/-format ::schemaless-explain
-     [_ explanation printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]}))
+(defmethod v/-format ::schemaless-explain
+  [_ explanation printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]})
 
-#?(:clj
-   (defmethod v/-format ::explain
-     [_ {:keys [schema] :as explanation} printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
-             (v/-block "Schema" (v/-visit schema printer) printer)]}))
+(defmethod v/-format ::explain
+  [_ {:keys [schema] :as explanation} printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
+          (v/-block "Schema" (v/-visit schema printer) printer)]})
 
-#?(:clj
-   (defn pretty-explain
-     "A helper that allows print a console-friendly output for the explain;
-  should not be used for other purposes"
-     [explain & {:keys [variant message]
-                 :or {variant ::explain
-                      message "Validation Error"}}]
-     (let [explain (fn [] (me/with-error-messages explain))]
-       ((mdp/prettifier variant message explain default-options)))))
+(defn pretty-explain
+  "A helper that allows print a console-friendly output for the
+  explain; should not be used for other purposes"
+  [explain & {:keys [variant message]
+              :or {variant ::explain
+                   message "Validation Error"}}]
+  (let [explain (fn [] (me/with-error-messages explain))]
+    ((mdp/prettifier variant message explain default-options))))
 
 (defmacro ignoring
   [expr]
@@ -284,7 +281,20 @@
 (defn check-fn
   "Create a predefined check function"
   [s & {:keys [hint type code]}]
-  (let [s          (schema s)
+  (let [s          #?(:clj
+                      (schema s)
+                      :cljs
+                      (try
+                        (schema s)
+                        (catch :default cause
+                          (let [data (ex-data cause)]
+                            (if (= :malli.core/invalid-schema (:type data))
+                              (throw (ex-info
+                                      (str "Invalid schema\n"
+                                           (pp/pprint-str (:data data)))
+                                      {}))
+                              (throw cause))))))
+
         validator* (delay (m/validator s))
         explainer* (delay (m/explainer s))
         hint       (or ^boolean hint "check error")
@@ -302,13 +312,6 @@
                                   ::explain explain}))))
         value))))
 
-(defn coercer
-  [schema & {:as opts}]
-  (let [decode-fn (decoder schema json-transformer)
-        check-fn  (check-fn schema opts)]
-    (fn [data]
-      (-> data decode-fn check-fn))))
-
 (defn check
   "A helper intended to be used on assertions for validate/check the
   schema over provided data. Raises an assertion exception.
@@ -1003,9 +1006,6 @@
 (def valid-safe-number?
   (lazy-validator ::safe-number))
 
-(def valid-safe-int?
-  (lazy-validator ::safe-int))
-
 (def valid-text?
   (validator ::text))
 

docker/devenv/Dockerfile

@@ -25,6 +25,48 @@ RUN set -ex; \
         binutils \
         build-essential autoconf libtool pkg-config
 
+
+################################################################################
+## IMAGE MAGICK
+################################################################################
+
+FROM base AS build-imagemagick
+
+ENV IMAGEMAGICK_VERSION=7.1.1-47 \
+    DEBIAN_FRONTEND=noninteractive
+
+RUN set -ex; \
+    apt-get -qq update; \
+    apt-get -qq upgrade; \
+    apt-get -qqy --no-install-recommends install \
+        libltdl-dev \
+        libpng-dev \
+        libjpeg-dev \
+        libtiff-dev \
+        libwebp-dev \
+        libopenexr-dev \
+        libfftw3-dev \
+        libzip-dev \
+        liblcms2-dev \
+        liblzma-dev \
+        libzstd-dev \
+        libheif-dev \
+        librsvg2-dev \
+    ; \
+    rm -rf /var/lib/apt/lists/*
+
+RUN set -eux; \
+    curl -LfsSo /tmp/magick.tar.gz https://github.com/ImageMagick/ImageMagick/archive/refs/tags/${IMAGEMAGICK_VERSION}.tar.gz; \
+    mkdir -p /tmp/magick; \
+    cd /tmp/magick; \
+    tar -xf /tmp/magick.tar.gz --strip-components=1; \
+    ./configure  --prefix=/opt/imagick; \
+    make -j 2; \
+    make install; \
+    rm -rf /opt/imagick/lib/libMagick++*; \
+    rm -rf /opt/imagick/include; \
+    rm -rf /opt/imagick/share;
+
 ################################################################################
 ## NODE SETUP
 ################################################################################
@@ -375,7 +417,7 @@ ENV LANG='C.UTF-8' \
     RUSTUP_HOME="/opt/rustup" \
     PATH="/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
 
-COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
+COPY --from=build-imagemagick /opt/imagick /opt/imagick
 COPY --from=setup-jvm /opt/jdk /opt/jdk
 COPY --from=setup-jvm /opt/clojure /opt/clojure
 COPY --from=setup-node /opt/node /opt/node
@@ -395,6 +437,8 @@ 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

docker/devenv/docker-compose.yaml

@@ -33,6 +33,8 @@ services:
       - 3447:3447
       - 3448:3448
       - 3449:3449
+      - 3449:3449/udp
+      - 3450:3450
       - 6006:6006
       - 6060:6060
       - 6061:6061
@@ -67,11 +69,6 @@ services:
       - PENPOT_LDAP_ATTRS_FULLNAME=cn
       - PENPOT_LDAP_ATTRS_PHOTO=jpegPhoto
 
-    networks:
-      default:
-        aliases:
-          - main
-
   minio:
     image: "minio/minio:RELEASE.2025-04-03T14-56-28Z"
     command: minio server /mnt/data --console-address ":9001"
@@ -83,6 +80,10 @@ services:
       - MINIO_ROOT_USER=minioadmin
       - MINIO_ROOT_PASSWORD=minioadmin
 
+    ports:
+      - 9000:9000
+      - 9001:9001
+
     networks:
       default:
         aliases:

docker/devenv/files/Caddyfile

@@ -1,4 +1,12 @@
+{
+    auto_https off
+}
+
 localhost:3449 {
-    tls internal
-    reverse_proxy localhost:4449
-}
+   reverse_proxy localhost:4449
+   tls /home/selfsigned.crt /home/selfsigned.key
+}
+
+http://localhost:3450 {
+   reverse_proxy localhost:4449
+}

docker/devenv/files/init.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
 
 set -e
-nginx;
-caddy run -c /home/Caddyfile;
+nginx
+caddy start -c /home/Caddyfile
+tail -f /dev/null;

docker/devenv/files/nginx.conf

@@ -223,16 +223,19 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
+            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+                add_header Cache-Control "public, max-age=604800" always; # 7 days
+            }
+
+            location ~* \.(js|css|wasm)$ {
+                add_header Cache-Control "no-store" always;
             }
 
             location ~ ^/[^/]+/(.*)$ {
                 return 301 " /404";
             }
 
-            add_header Cache-Control "no-store";
-            # This header is what we need to use on prod
-            # add_header Cache-Control "public, must-revalidate, max-age=0";
+            add_header Cache-Control "no-store" always;
             try_files $uri /index.html$is_args$args /index.html =404;
         }
     }

docker/devenv/files/selfsigned.crt

@@ -0,0 +1,22 @@
+-----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-----

docker/devenv/files/selfsigned.key

@@ -0,0 +1,28 @@
+-----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-----

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>Ways to start with Penpot</p>
+      <p>Access your account settings and manage personal access tokens</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/account-teams/teams">
       <h2>Teams →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Create and manage your teams</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/account-teams/comments/">
       <h2>Comments →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Give and receive feedback right over your designs</p>
     </a>
   </li>
 </ul>

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>Ways to start with Penpot</p>
+      <p>Store elements and styles to easily reuse them</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/design-systems/libraries">
       <h2>Libraries →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Organize and manage your stored elements with Libraries</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/components">
       <h2>Components →</h2>
-      <p>Speed your design workflow</p>
+      <p>Speed your design workflow with reusable components</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/variants">
       <h2>Variants →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Group components into a single, customizable one</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/design-tokens">
       <h2>Design Tokens →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Synchronize visual elements across your designs</p>
     </a>
   </li>
 </ul>

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, graphics, 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, 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>

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>Workspace basics</p>
+      <p>Get to know the Workspace, where designs are created</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/designing/layers">
       <h2>Layers →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Objects available in Penpot and how to get the most of them</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/designing/color-stroke/">
       <h2>Color & Strokes→</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Styling options available for each layer</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/designing/text-typo">
       <h2>Text & Typography→</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Styling text content & using custom fonts</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/designing/flexible-layouts">
       <h2>Flexible layouts →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Create designs that adapt automatically</p>
     </a>
   </li>
 </ul>

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>Ways to start with Penpot</p>
+      <p>How to export and import your Penpot files</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/export-import/exporting-layers/">
       <h2>Exporting layers →</h2>
-      <p>Exporting layers</p>
+      <p>How to export elements from your design into different file formats</p>
     </a>
   </li>
 </ul>

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>Info of interest about Penpot</p>
+      <p>Take a tour of Penpot's main areas</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>Info of interest about Penpot</p>
+      <p>Useful resources to better understand Penpot</p>
     </a>
   </li>
 </ul>

docs/user-guide/index.njk

@@ -22,49 +22,49 @@ eleventyNavigation:
   <li>
     <a href="/user-guide/designing/layers/">
       <h2>Layers</h2>
-      <p>Ways to start with Penpot</p>
+      <p>Objects available in Penpot and how to get the most of them</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>Ways to start with Penpot</p>
+      <p>Speed your design workflow with reusable components</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/variants/">
       <h2>Variants</h2>
-      <p>Penpot's main areas and features</p>
+      <p>Group components into a single, customizable one</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/design-systems/design-tokens/">
       <h2>Design Tokens</h2>
-      <p>Penpot's main areas and features</p>
+      <p>Synchronize visual elements across your designs</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/dev-tools/#inspect-design">
       <h2>Inspect design</h2>
-      <p>Ways to start with Penpot</p>
+      <p>Get production-ready code</p>
     </a>
   </li>
       <li>
     <a href="/user-guide/prototyping-testing/prototyping/">
       <h2>Prototyping</h2>
-      <p>Ways to start with Penpot</p>
+      <p>Build interactive prototypes to mimic your product behaviour</p>
     </a>
   </li>
       <li>
     <a href="/user-guide/design-systems/libraries/">
       <h2>Libraries</h2>
-      <p>Ways to start with Penpot</p>
+      <p>Organize and manage your stored elements with Libraries</p>
     </a>
   </li>
 </ul>

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>Ways to start with Penpot</p>
+      <p>Build interactive prototypes to mimic your product behaviour</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/prototyping-testing/testing-view-mode">
       <h2>Testing: View mode →</h2>
-      <p>Info of interest about Penpot</p>
+      <p>Test your designs and play the interactions</p>
     </a>
   </li>
 </ul>

exporter/package.json

@@ -21,6 +21,7 @@
     "raw-body": "^3.0.1",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
+    "undici": "^7.16.0",
     "xml-js": "^1.6.11",
     "xregexp": "^5.1.2"
   },

exporter/src/app/browser.cljs

@@ -100,7 +100,7 @@
 
 (def browser-pool-factory
   (letfn [(create []
-            (p/let [opts    #js {:args #js ["--font-render-hinting=none"]}
+            (p/let [opts    #js {:args #js ["--allow-insecure-localhost" "--font-render-hinting=none"]}
                     browser (.launch pw/chromium opts)
                     id      (swap! pool-browser-id inc)]
               (l/info :origin "factory" :action "create" :browser-id id)

exporter/src/app/handlers/export_shapes.cljs

@@ -74,7 +74,7 @@
          (p/fmap (fn [resource]
                    (assoc exchange :response/body resource)))
          (p/merr (fn [cause]
-                   (l/error :hint "unexpected error on export multiple"
+                   (l/error :hint "unexpected error on single export"
                             :cause cause)
                    (p/rejected cause))))))
 
@@ -94,7 +94,7 @@
                           (redis/pub! topic data))))
 
         on-error    (fn [cause]
-                      (l/error :hint "unexpected error on multiple exportation" :cause cause)
+                      (l/error :hint "unexpected error on multiple export" :cause cause)
                       (if wait
                         (p/rejected cause)
                         (redis/pub! topic {:type :export-update
@@ -107,12 +107,12 @@
                                     :on-progress on-progress)
 
         append      (fn [{:keys [filename path] :as resource}]
-                      (rsc/add-to-zip! zip path (str/replace filename sanitize-file-regex "_")))
+                      (rsc/add-to-zip zip path (str/replace filename sanitize-file-regex "_")))
 
         proc        (->> exports
                          (map (fn [export] (rd/render export append)))
                          (p/all)
-                         (p/fnly (fn [_] (.finalize zip)))
+                         (p/mcat (fn [_] (rsc/close-zip zip)))
                          (p/fmap (constantly resource))
                          (p/mcat (partial rsc/upload-resource auth-token))
                          (p/fmap (fn [resource]

exporter/src/app/handlers/resources.cljs

@@ -11,6 +11,7 @@
    ["node:fs" :as fs]
    ["node:fs/promises" :as fsp]
    ["node:path" :as path]
+   ["undici" :as http]
    [app.common.exceptions :as ex]
    [app.common.transit :as t]
    [app.common.uri :as u]
@@ -53,30 +54,40 @@
     (.pipe zip out)
     zip))
 
-(defn add-to-zip!
+(defn add-to-zip
   [zip path name]
   (.file ^js zip path #js {:name name}))
 
-(defn close-zip!
+(defn close-zip
   [zip]
-  (.finalize ^js zip))
+  (p/create (fn [resolve]
+              (.on ^js zip "close" resolve)
+              (.finalize ^js zip))))
 
 (defn upload-resource
   [auth-token resource]
   (->> (fsp/readFile (:path resource))
        (p/fmap (fn [buffer]
+                 (js/console.log buffer)
                  (new js/Blob #js [buffer] #js {:type (:mtype resource)})))
        (p/mcat (fn [blob]
-                 (let [fdata (new js/FormData)
-                       uri   (-> (cf/get :public-uri)
-                                 (u/ensure-path-slash)
-                                 (u/join "api/management/methods/upload-tempfile")
-                                 (str))]
+                 (let [fdata  (new http/FormData)
+                       agent  (new http/Agent #js {:connect #js {:rejectUnauthorized false}})
+                       headers #js {"X-Shared-Key" cf/management-key
+                                    "Authorization" (str "Bearer " auth-token)}
+
+                       request #js {:headers headers
+                                    :method "POST"
+                                    :body fdata
+                                    :dispatcher agent}
+                       uri     (-> (cf/get :public-uri)
+                                   (u/ensure-path-slash)
+                                   (u/join "api/management/methods/upload-tempfile")
+                                   (str))]
+
                    (.append fdata "content" blob (:filename resource))
-                   (js/fetch uri #js {:headers #js {"X-Shared-Key" cf/management-key
-                                                    "Authorization" (str "Bearer " auth-token)}
-                                      :method "POST"
-                                      :body fdata}))))
+                   (http/fetch uri request))))
+
        (p/mcat (fn [response]
                  (if (not= (.-status response) 200)
                    (ex/raise :type :internal

exporter/src/app/util/shell.cljs

@@ -75,7 +75,8 @@
   [path]
   (->> (.stat fs/promises path)
        (p/fmap (fn [data]
-                 {:created-at (inst-ms (.-ctime ^js data))
+                 {:path path
+                  :created-at (inst-ms (.-ctime ^js data))
                   :size (.-size data)}))
        (p/merr (fn [_cause]
                  (p/resolved nil)))))

exporter/yarn.lock

@@ -582,6 +582,7 @@ __metadata:
     raw-body: "npm:^3.0.1"
     source-map-support: "npm:^0.5.21"
     svgo: "penpot/svgo#v3.1"
+    undici: "npm:^7.16.0"
     ws: "npm:^8.18.3"
     xml-js: "npm:^1.6.11"
     xregexp: "npm:^5.1.2"
@@ -1513,6 +1514,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^7.16.0":
+  version: 7.16.0
+  resolution: "undici@npm:7.16.0"
+  checksum: 10c0/efd867792e9f233facf9efa0a087e2d9c3e4415c0b234061b9b40307ca4fa01d945fee4d43c7b564e1b80e0d519bcc682f9f6e0de13c717146c00a80e2f1fb0f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^4.0.0":
   version: 4.0.0
   resolution: "unique-filename@npm:4.0.0"

frontend/deps.edn

@@ -20,8 +20,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.25"
-   :git/sha "27e5a1a"
+  {:git/tag "v2.24"
+   :git/sha "17a0c94"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.5.0"}
@@ -42,7 +42,7 @@
   :dev
   {:extra-paths ["dev"]
    :extra-deps
-   {thheller/shadow-cljs {:mvn/version "3.2.2"}
+   {thheller/shadow-cljs {:mvn/version "3.2.0"}
     com.bhauman/rebel-readline {:mvn/version "RELEASE"}
     org.clojure/tools.namespace {:mvn/version "RELEASE"}
     criterium/criterium {:mvn/version "RELEASE"}
@@ -50,5 +50,8 @@
 
   :shadow-cljs
   {:main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :jvm-opts ["--sun-misc-unsafe-memory-access=allow" "-Dpenpot.wasm.profile-marks=true"]}
+   :jvm-opts ["--sun-misc-unsafe-memory-access=allow"
+              "-Dpenpot.wasm.profile-marks=true"
+              "-XX:+UnlockExperimentalVMOptions"
+              "-XX:CompileCommand=blackhole,criterium.blackhole.Blackhole::consume"]}
   }}

frontend/package.json

@@ -106,7 +106,7 @@
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
     "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "portal:./text-editor",
     "@tokens-studio/sd-transforms": "1.2.11",
     "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",

frontend/playwright.config.js

@@ -22,9 +22,9 @@ export default defineConfig({
   workers: 1,
   /* Timeout for expects (longer in CI) */
 
-  timeout: 80000,
+  timeout: 60000,
   expect: {
-    timeout: process.env.CI ? 40000 : 5000,
+    timeout: process.env.CI ? 30000 : 5000,
   },
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

frontend/playwright/ui/pages/BasePage.js

@@ -73,7 +73,7 @@ export class BasePage {
   }
 
   static async mockConfigFlags(page, flags) {
-    const url = "**/js/config.js";
+    const url = "**/js/config.js?ts=*";
     return await page.route(url, (route) =>
       route.fulfill({
         status: 200,

frontend/playwright/ui/specs/tokens.spec.js

@@ -303,7 +303,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
     await nameField.pressSequentially(".changed");
 
-    await tokensUpdateCreateModal.getByRole("button", { name: "Save" }).click();
+    await tokensUpdateCreateModal.getByRole("button", {name: "Save"}).click();
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
@@ -1070,7 +1070,6 @@ test.describe("Tokens: Apply token", () => {
 
     // Fill in values for all fields and verify they persist when switching tabs
     await fontSizeField.fill("16");
-    await expect(saveButton).toBeEnabled();
 
     const fontWeightField = tokensUpdateCreateModal.getByLabel(/Font Weight/i);
     const letterSpacingField =
@@ -1239,12 +1238,8 @@ test.describe("Tokens: Apply token", () => {
       // Fill in the shadow values
       const offsetXInput = firstShadowFields.getByLabel("X");
       const offsetYInput = firstShadowFields.getByLabel("Y");
-      const blurInput = firstShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const spreadInput = firstShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
+      const blurInput = firstShadowFields.getByLabel("Blur");
+      const spreadInput = firstShadowFields.getByLabel("Spread");
 
       await offsetXInput.fill("2");
       await offsetYInput.fill("2");
@@ -1265,10 +1260,9 @@ test.describe("Tokens: Apply token", () => {
       await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
 
       // Verify that a color value was set
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
+      const colorInput = firstShadowFields.getByLabel("Color");
+      const firstColorValue = await colorInput.inputValue();
+      await expect(firstColorValue).toMatch(/^rgb(.*)$/);
 
       // Wait for validation to complete
       await expect(
@@ -1286,15 +1280,11 @@ test.describe("Tokens: Apply token", () => {
       const firstShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-0",
       );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const colorInput = firstShadowFields.getByLabel("Color");
       const firstColorValue = await colorInput.inputValue();
 
       // User adds a second shadow
-      const addButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Add Shadow",
-      });
+      const addButton = firstShadowFields.getByTestId("shadow-add-button-0");
       await addButton.click();
 
       const secondShadowFields = tokensUpdateCreateModal.getByTestId(
@@ -1303,7 +1293,8 @@ test.describe("Tokens: Apply token", () => {
       await expect(secondShadowFields).toBeVisible();
 
       // User adds a third shadow
-      await addButton.click();
+      const addButton2 = secondShadowFields.getByTestId("shadow-add-button-1");
+      await addButton2.click();
 
       const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-2",
@@ -1313,15 +1304,9 @@ test.describe("Tokens: Apply token", () => {
       // User adds values for the third shadow
       const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
       const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
-      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const thirdBlurInput = thirdShadowFields.getByLabel("Blur");
+      const thirdSpreadInput = thirdShadowFields.getByLabel("Spread");
+      const thirdColorInput = thirdShadowFields.getByLabel("Color");
 
       await thirdOffsetXInput.fill("10");
       await thirdOffsetYInput.fill("10");
@@ -1330,13 +1315,15 @@ test.describe("Tokens: Apply token", () => {
       await thirdColorInput.fill("#FF0000");
 
       // User removes the 2nd shadow
-      const removeButton2 = secondShadowFields.getByRole("button", {
-        name: "Remove Shadow",
-      });
+      const removeButton2 = secondShadowFields.getByTestId(
+        "shadow-remove-button-1",
+      );
       await removeButton2.click();
 
-      // Verify that we have only two shadow fields
-      await expect(thirdShadowFields).not.toBeVisible();
+      // Verify second shadow is removed
+      await expect(
+        secondShadowFields.getByTestId("shadow-add-button-3"),
+      ).not.toBeVisible();
 
       // Verify that the first shadow kept its values
       const firstOffsetXValue = await firstShadowFields
@@ -1346,13 +1333,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const firstBlurValue = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const firstSpreadValue = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const firstColorValueAfter = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(firstOffsetXValue).toBe("2");
@@ -1361,7 +1348,7 @@ test.describe("Tokens: Apply token", () => {
       await expect(firstSpreadValue).toBe("0");
       await expect(firstColorValueAfter).toBe(firstColorValue);
 
-      // Verify that the second kept its values (after shadow 3)
+      // Verify that the third shadow (now second) kept its values
       // After removing index 1, the third shadow becomes the second shadow at index 1
       const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-1",
@@ -1375,13 +1362,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const secondBlurValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const secondSpreadValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const secondColorValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(secondOffsetXValue).toBe("10");
@@ -1398,9 +1385,7 @@ test.describe("Tokens: Apply token", () => {
       const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-1",
       );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const colorInput = firstShadowFields.getByLabel("Color");
       const firstColorValue = await colorInput.inputValue();
 
       // Switch to reference tab
@@ -1428,13 +1413,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const restoredFirstBlur = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const restoredFirstSpread = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const restoredFirstColor = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(restoredFirstOffsetX).toBe("2");
@@ -1451,13 +1436,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const restoredSecondBlur = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const restoredSecondSpread = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const restoredSecondColor = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(restoredSecondOffsetX).toBe("10");

frontend/resources/templates/index.mustache

@@ -25,14 +25,14 @@
     <link rel="icon" href="images/favicon.png" />
     {{# manifest}}
     <script>window.penpotWorkerURI="{{& worker_main}}"</script>
-    <script src="{{& config}}"></script>
-    <script src="{{& polyfills}}"></script>
+    <script defer src="{{& config}}"></script>
+    <script defer src="{{& polyfills}}"></script>
     {{/manifest}}
 
-    <script type="module">
-      globalThis.penpotTranslations = JSON.parse({{& translations}});
-      globalThis.penpotVersion = "%version%";
-      globalThis.penpotBuildDate = "%buildDate%";
+    <script>
+      window.penpotTranslations = JSON.parse({{& translations}});
+      window.penpotVersion = "%version%";
+      window.penpotBuildDate = "%buildDate%";
     </script>
     <!--cookie-consent-->
   </head>
@@ -44,11 +44,9 @@
     <section id="modal"></section>
 
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& main}}";
-      init();
-    </script>
+    <script defer src="js/libs.js?ts={{& ts}}"></script>
+    <script defer src="{{& shared}}"></script>
+    <script defer src="{{& main}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/rasterizer.mustache

@@ -19,11 +19,9 @@
   </head>
   <body>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& rasterizer}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& rasterizer}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/render.mustache

@@ -18,11 +18,9 @@
   <body>
     <div id="app"></div>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& render}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& render}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/scripts/_helpers.js

@@ -180,8 +180,8 @@ export async function watch(baseDir, predicate, callback) {
   });
 }
 
-async function readManifestFile() {
-  const manifestPath = "resources/public/js/manifest.json";
+async function readManifestFile(resource) {
+  const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
   return JSON.parse(content);
 }
@@ -189,34 +189,34 @@ async function readManifestFile() {
 async function readShadowManifest() {
   const ts = Date.now();
   try {
-    const content = await readManifestFile();
+    const content = await readManifestFile("js/manifest.json");
 
     const index = {
       ts: ts,
-      config: "./js/config.js",
-      polyfills: "./js/polyfills.js",
-      worker_main: "./js/worker/main.js",
-      libs: "./js/libs.js",
+      config: "js/config.js?ts=" + ts,
+      polyfills: "js/polyfills.js?ts=" + ts,
     };
 
     for (let item of content) {
-      index[item.name] = "./js/" + item["output-name"] + "";
+      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) {
-    const index = {
+    return {
       ts: ts,
-      config: "./js/config.js",
-      polyfills: "./js/polyfills.js",
-      main: "./js/main.js",
-      shared: "./js/shared.js",
-      worker_main: "./js/worker/main.js",
-      rasterizer: "./js/rasterizer.js",
-      libs: "./js/libs.js",
+      config: "js/config.js?ts=" + ts,
+      polyfills: "js/polyfills.js?ts=" + ts,
+      main: "js/main.js?ts=" + ts,
+      shared: "js/shared.js?ts=" + ts,
+      worker_main: "js/worker/main.js?ts=" + ts,
+      rasterizer: "js/rasterizer.js?ts=" + ts,
     };
-
-    return index;
   }
 }
 

frontend/scripts/build

@@ -20,35 +20,32 @@ echo $PATH
 set -ex
 
 corepack enable;
-corepack install || exit 1;
+corepack install;
 yarn install || exit 1;
 
-rm -rf resources/public;
 rm -rf target/dist;
+rm -rf resources/public;
 
 mkdir -p resources/public;
-mkdir -p target/dist;
 
-yarn run build:app:main $EXTRA_PARAMS || exit 1
-
-if [ "$INCLUDE_WASM" = "yes" ];  then
-    yarn run build:wasm || exit 1;
-fi
+pushd ../render-wasm;
+./build
+popd
 
+yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS;
 yarn run build:app:libs || exit 1;
 yarn run build:app:assets || exit 1;
 
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/index.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/render.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/rasterizer.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/index.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/rasterizer.html;
+sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
 
-if [ "$INCLUDE_WASM" = "yes" ];  then
-    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./resources/public/js/render_wasm.js;
-fi
+mkdir -p target/dist;
+rsync -avr resources/public/ target/dist/
 
-rsync -avr resources/public/ target/dist/;
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/index.html;
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/render.html;
+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_STORYBOOK" = "yes" ];  then
     # build storybook

frontend/scripts/build-libs.js

@@ -31,9 +31,9 @@ const rebuildNotify = {
 const config = {
   entryPoints: ["target/index.js"],
   bundle: true,
-  format: "esm",
+  format: "iife",
   banner: {
-    js: '"use strict";\nvar global = globalThis;',
+    js: '"use strict"; var global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
   plugins: [fixReactVirtualized, rebuildNotify],

frontend/shadow-cljs.edn

@@ -6,12 +6,13 @@
 
  :builds
  {:main
-  {:target :esm
+  {:target :browser
    :output-dir "resources/public/js/"
    :asset-path "/js"
    :devtools {:watch-dir "resources/public"
               :reload-strategy :full}
    :build-options {:manifest-name "manifest.json"}
+   :module-loader true
    :modules
    {:shared
     {:entries []}
@@ -19,7 +20,7 @@
     :main
     {:entries [app.main app.plugins.api]
      :depends-on #{:shared}
-     :exports {init app.main/init}}
+     :init-fn app.main/init}
 
     :util-highlight
     {:entries [app.util.code-highlight]
@@ -49,12 +50,12 @@
     :render
     {:entries [app.render]
      :depends-on #{:shared}
-     :exports {init app.render/init}}
+     :init-fn app.render/init}
 
     :rasterizer
     {:entries [app.rasterizer]
      :depends-on #{:shared}
-     :exports {init app.rasterizer/init}}}
+     :init-fn app.rasterizer/init}}
 
    :js-options
    {:entry-keys ["module" "browser" "main"]
@@ -74,14 +75,15 @@
     :compiler-options
     {:fn-invoke-direct true
      :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
+     :output-wrapper true
+     :rename-prefix-namespace "PENPOT"
      :source-map true
      :elide-asserts true
      :anon-fn-naming-policy :off
-     :cross-chunk-method-motion false
      :source-map-detail-level :all}}}
 
   :worker
-  {:target :esm
+  {:target :browser
    :output-dir "resources/public/js/worker/"
    :asset-path "/js/worker"
    :devtools {:browser-inject :main
@@ -92,6 +94,7 @@
    {:main
     {:entries [app.worker]
      :web-worker true
+     :prepend-js "importScripts('./render.js');"
      :depends-on #{}}}
 
    :js-options

frontend/src/app/config.cljs

@@ -127,7 +127,7 @@
       public-uri))
 
 (def worker-uri
-  (obj/get global "penpotWorkerURI" "/js/worker.js"))
+  (obj/get global "penpotWorkerURI" "/js/worker/main.js"))
 
 (defn external-feature-flag
   [flag value]
@@ -189,7 +189,11 @@
         (true? thumbnail?) (u/join (dm/str id "/thumbnail"))
         (false? thumbnail?) (u/join (dm/str id)))))))
 
-(defn resolve-static-asset
-  [path]
-  (let [uri (u/join public-uri path)]
-    (assoc uri :query (dm/str "version=" (:full version)))))
+(defn resolve-href
+  [resource]
+  (let [version (get version :full)
+        href    (-> public-uri
+                    (u/ensure-path-slash)
+                    (u/join resource)
+                    (get :path))]
+    (str href "?version=" version)))

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

@@ -67,7 +67,7 @@
   []
   (let [uagent (new ua/UAParser)]
     (merge
-     {:app-version (:full cf/version)
+     {:version (:full cf/version)
       :locale @i18n/locale}
      (let [browser (.getBrowser uagent)]
        {:browser (obj/get browser "name")

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.schema :as sm]
+   [app.common.spec :as us]
    [app.common.types.profile :refer [schema:profile]]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -483,7 +484,7 @@
 
 (defn delete-access-token
   [{:keys [id] :as params}]
-  (assert (uuid? id))
+  (us/assert! ::us/uuid id)
   (ptk/reify ::delete-access-token
     ptk/WatchEvent
     (watch [_ _ _]

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

@@ -255,14 +255,19 @@
 
 (defn- parse-sd-token-font-family-value
   [value]
-  (let [missing-references (seq (some cto/find-token-value-references value))]
+  (let [value (-> (js->clj value) (flatten))
+        valid-font-family (or (string? value) (every? string? value))
+        missing-references (seq (some cto/find-token-value-references value))]
     (cond
+      (not valid-font-family)
+      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-font-family value)]}
+
       missing-references
       {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
        :references missing-references}
 
       :else
-      {:value (-> (js->clj value) (flatten))})))
+      {:value value})))
 
 (defn parse-atomic-typography-value [token-type token-value]
   (case token-type
@@ -389,42 +394,35 @@
 (defn- parse-sd-token-shadow-value
   "Parses shadow value and validates it."
   [value]
-  (let [missing-references
-        (when (string? value)
-          (seq (cto/find-token-value-references value)))]
-    (cond
-      missing-references
-      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
-       :references missing-references}
-
-      (string? value)
-      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-shadow value)]}
+  (cond
+    ;; Reference value (string)
+    (string? value) {:value value}
 
     ;; Empty value
-      (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
+    (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
 
     ;; Invalid value
-      (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
+    (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
 
     ;; Array of shadows
-      :else
-      (let [converted (js->clj value :keywordize-keys true)
+    :else
+    (let [converted (js->clj value :keywordize-keys true)
           ;; Parse each shadow with its index
-            parsed-shadows (map-indexed
-                            (fn [idx shadow-map]
-                              (parse-single-shadow shadow-map idx))
-                            converted)
+          parsed-shadows (map-indexed
+                          (fn [idx shadow-map]
+                            (parse-single-shadow shadow-map idx))
+                          converted)
 
           ;; Collect all errors from all shadows
-            all-errors (mapcat :errors parsed-shadows)
+          all-errors (mapcat :errors parsed-shadows)
 
           ;; Collect all values from shadows that have values
-            all-values (into [] (keep :value parsed-shadows))]
+          all-values (into [] (keep :value parsed-shadows))]
 
-        (if (seq all-errors)
-          {:errors all-errors
-           :value all-values}
-          {:value all-values})))))
+      (if (seq all-errors)
+        {:errors all-errors
+         :value all-values}
+        {:value all-values}))))
 
 (defn collect-shadow-errors [token shadow-index]
   (group-by :shadow-key

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

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

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

@@ -20,7 +20,9 @@
    [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]
@@ -551,7 +553,6 @@
                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
@@ -566,6 +567,43 @@
                   (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

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

@@ -706,58 +706,53 @@
                                         (= 1 (count tree-root)))]
 
               (cond
-                ;; Paste next to selected frame, if selected is itself or of the same size as the copied
-                (and (selected-frame? state)
-                     (or (any-same-frame-from-selected? state (keys pobjects))
-                         (and only-one-root-shape?
-                              (frame-same-size? pobjects (first tree-root)))))
-                (let [selected-frame-obj (get page-objects (first page-selected))
-                      parent-id          (:parent-id base)
-                      paste-x            (+ (:width selected-frame-obj) (:x selected-frame-obj) 50)
-                      paste-y            (:y selected-frame-obj)
-                      delta              (gpt/subtract (gpt/point paste-x paste-y) orig-pos)]
-
-                  [parent-id delta index])
-
-                ;; Paste inside selected frame otherwise
                 (selected-frame? state)
-                (let [selected-frame-obj (get page-objects (first page-selected))
-                      origin-frame-id (:frame-id first-selected-obj)
-                      origin-frame-object (get page-objects origin-frame-id)
 
-                      margin-x (-> (- (:width origin-frame-object) (+ (:x wrapper) (:width wrapper)))
-                                   (min (- (:width frame-object) (:width wrapper))))
+                (if (or (any-same-frame-from-selected? state (keys pobjects))
+                        (and only-one-root-shape?
+                             (frame-same-size? pobjects (first tree-root))))
+                  ;; Paste next to selected frame, if selected is itself or of the same size as the copied
+                  (let [selected-frame-obj (get page-objects (first page-selected))
+                        parent-id          (:parent-id base)
+                        paste-x            (+ (:width selected-frame-obj) (:x selected-frame-obj) 50)
+                        paste-y            (:y selected-frame-obj)
+                        delta              (gpt/subtract (gpt/point paste-x paste-y) orig-pos)]
 
-                      margin-y  (-> (- (:height origin-frame-object) (+ (:y wrapper) (:height wrapper)))
-                                    (min (- (:height frame-object) (:height wrapper))))
+                    [parent-id delta index])
 
-                      ;; Pasted objects mustn't exceed the selected frame x limit
-                      paste-x (if (> (+ (:width wrapper) (:x1 wrapper)) (:width frame-object))
-                                (+ (- (:x frame-object) (:x orig-pos)) (- (:width frame-object) (:width wrapper) margin-x))
-                                (:x frame-object))
+                  ;; Paste inside selected frame otherwise
+                  (let [selected-frame-obj (get page-objects (first page-selected))
+                        origin-frame-id (:frame-id first-selected-obj)
+                        origin-frame-object (get page-objects origin-frame-id)
 
-                      ;; Pasted objects mustn't exceed the selected frame y limit
-                      paste-y (if (> (+ (:height wrapper) (:y1 wrapper)) (:height frame-object))
-                                (+ (- (:y frame-object) (:y orig-pos)) (- (:height frame-object) (:height wrapper) margin-y))
-                                (:y frame-object))
+                        margin-x (-> (- (:width origin-frame-object) (+ (:x wrapper) (:width wrapper)))
+                                     (min (- (:width frame-object) (:width wrapper))))
 
-                      delta (if (= origin-frame-id uuid/zero)
-                              ;; When the origin isn't in a frame the result is pasted in the center.
-                              (gpt/subtract (gsh/shape->center frame-object) (grc/rect->center wrapper))
-                              ;; When pasting from one frame to another frame the object
-                              ;; position must be limited to container boundaries. If
-                              ;; the pasted object doesn't fit we try to:
-                              ;;
-                              ;; - Align it to the limits on the x and y axis
-                              ;; - Respect the distance of the object to the right
-                              ;;   and bottom in the original frame
-                              (gpt/point paste-x paste-y))
+                        margin-y  (-> (- (:height origin-frame-object) (+ (:y wrapper) (:height wrapper)))
+                                      (min (- (:height frame-object) (:height wrapper))))
 
-                      target-index
-                      (if (and (ctl/flex-layout? selected-frame-obj) (ctl/reverse? selected-frame-obj))
-                        (dec 0) ;; Before the first index 0
-                        (count (:shapes selected-frame-obj)))]
-                  [frame-id delta target-index])
+                        ;; Pasted objects mustn't exceed the selected frame x limit
+                        paste-x (if (> (+ (:width wrapper) (:x1 wrapper)) (:width frame-object))
+                                  (+ (- (:x frame-object) (:x orig-pos)) (- (:width frame-object) (:width wrapper) margin-x))
+                                  (:x frame-object))
+
+                        ;; Pasted objects mustn't exceed the selected frame y limit
+                        paste-y (if (> (+ (:height wrapper) (:y1 wrapper)) (:height frame-object))
+                                  (+ (- (:y frame-object) (:y orig-pos)) (- (:height frame-object) (:height wrapper) margin-y))
+                                  (:y frame-object))
+
+                        delta (if (= origin-frame-id uuid/zero)
+                                ;; When the origin isn't in a frame the result is pasted in the center.
+                                (gpt/subtract (gsh/shape->center frame-object) (grc/rect->center wrapper))
+                                ;; When pasting from one frame to another frame the object
+                                ;; position must be limited to container boundaries. If
+                                ;; the pasted object doesn't fit we try to:
+                                ;;
+                                ;; - Align it to the limits on the x and y axis
+                                ;; - Respect the distance of the object to the right
+                                ;;   and bottom in the original frame
+                                (gpt/point paste-x paste-y))]
+                    [frame-id delta (dec (count (:shapes selected-frame-obj)))]))
 
                 (empty? page-selected)
                 (let [frame-id (ctst/top-nested-frame page-objects position)

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

@@ -119,6 +119,21 @@
       (let [page (dsh/lookup-page state)]
         (rx/of (update-flow (:id page) flow-id #(assoc % :name name)))))))
 
+(defn start-rename-flow
+  [id]
+  (dm/assert! (uuid? id))
+  (ptk/reify ::start-rename-flow
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :flow-for-rename] id))))
+
+(defn end-rename-flow
+  []
+  (ptk/reify ::end-rename-flow
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-local dissoc :flow-for-rename))))
+
 ;; --- Interactions
 
 (defn- connected-frame?

frontend/src/app/main/data/workspace/tokens/errors.cljs

@@ -88,6 +88,10 @@
    {:error/code :error.style-dictionary/invalid-token-value-font-weight
     :error/fn #(tr "workspace.tokens.invalid-font-weight-token-value" %)}
 
+   :error.style-dictionary/invalid-token-value-font-family
+   {:error/code :error.style-dictionary/invalid-token-value-font-family
+    :error/fn #(tr "workspace.tokens.invalid-font-family-token-value" %)}
+
    :error.style-dictionary/invalid-token-value-typography
    {:error/code :error.style-dictionary/invalid-token-value-typography
     :error/fn #(tr "workspace.tokens.invalid-token-value-typography" %)}
@@ -108,10 +112,6 @@
    {:error/code :error.style-dictionary/invalid-token-value-shadow-spread
     :error/fn #(tr "workspace.tokens.shadow-spread-range")}
 
-   :error.style-dictionary/invalid-token-value-shadow
-   {:error/code :error.style-dictionary/invalid-token-value-shadow
-    :error/fn #(tr "workspace.tokens.invalid-token-value-shadow" %)}
-
    :error/unknown
    {:error/code :error/unknown
     :error/fn #(tr "labels.unknown-error")}})

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

@@ -128,14 +128,16 @@
             related-components (cfv/find-variant-components data objects variant-id)
 
             props              (-> related-components last :variant-properties)
-            prop-name          (-> props (nth pos) :name)
+            valid-pos?         (> (count props) pos)
+            prop-name          (when valid-pos? (-> props (nth pos) :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))
+            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)))
             undo-id (js/Symbol)]
-        (when (not= prop-name new-name)
+        (when (and valid-pos? (not= prop-name new-name))
           (rx/of
            (dwu/start-undo-transaction undo-id)
            (dch/commit-changes changes)

frontend/src/app/main/ui.cljs

@@ -31,28 +31,27 @@
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
-   [app.util.modules :as mod]
    [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
 (def auth-page
-  (mf/lazy #(mod/load 'app.main.ui.auth/auth-page*)))
+  (mf/lazy-component app.main.ui.auth/auth))
 
-(def verify-token-page*
-  (mf/lazy #(mod/load 'app.main.ui.auth.verify-token/verify-token-page*)))
+(def verify-token-page
+  (mf/lazy-component app.main.ui.auth.verify-token/verify-token))
 
 (def viewer-page*
-  (mf/lazy #(mod/load 'app.main.ui.viewer/viewer-page*)))
+  (mf/lazy-component app.main.ui.viewer/viewer*))
 
 (def dashboard-page*
-  (mf/lazy #(mod/load 'app.main.ui.dashboard/dashboard-page*)))
+  (mf/lazy-component app.main.ui.dashboard/dashboard*))
 
 (def settings-page*
-  (mf/lazy #(mod/load 'app.main.ui.settings/settings-page*)))
+  (mf/lazy-component app.main.ui.settings/settings*))
 
 (def workspace-page*
-  (mf/lazy #(mod/load 'app.main.ui.workspace/workspace-page*)))
+  (mf/lazy-component app.main.ui.workspace/workspace*))
 
 (mf/defc workspace-legacy-redirect*
   {::mf/props :obj
@@ -190,7 +189,7 @@
        [:? [:& auth-page {:route route}]]
 
        :auth-verify-token
-       [:? [:& verify-token-page* {:route route}]]
+       [:? [:& verify-token-page {:route route}]]
 
        (:settings-profile
         :settings-password

frontend/src/app/main/ui/auth.cljs

@@ -19,7 +19,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(mf/defc auth*
+(mf/defc auth
+  {::mf/props :obj}
   [{:keys [route]}]
   (let [section (dm/get-in route [:data :name])
         is-register (or
@@ -68,9 +69,3 @@
 
       (when (= section :auth-register)
         [:& terms-register])]]))
-
-
-(mf/defc auth-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> auth* props])

frontend/src/app/main/ui/auth/verify_token.cljs

@@ -61,9 +61,9 @@
    (rt/nav :auth-login)
    (ntf/warn (tr "errors.unexpected-token"))))
 
-(mf/defc verify-token*
-  [{:keys [route]}]
-  (let [token     (get-in route [:query-params :token])
+(mf/defc verify-token
+  [{:keys [route] :as props}]
+  (let [token (get-in route [:query-params :token])
         bad-token (mf/use-state false)]
 
     (mf/with-effect []
@@ -99,8 +99,3 @@
       [:> static/invalid-token {}]
       [:> loader*  {:title (tr "labels.loading")
                     :overlay true}])))
-
-(mf/defc verify-token-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> verify-token* props])

frontend/src/app/main/ui/components/code_block.cljs

@@ -8,28 +8,24 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
-   [app.util.modules :as modules]
    [cuerdas.core :as str]
    [promesa.core :as p]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [shadow.lazy :as lazy]))
 
 (def highlight-fn
-  (delay (modules/load-fn 'app.util.code-highlight/highlight!)))
+  (lazy/loadable app.util.code-highlight/highlight!))
 
 (mf/defc code-block
   {::mf/wrap-props false}
   [{:keys [code type]}]
   (let [block-ref (mf/use-ref)
-        code      (str/trim code)]
+        code (str/trim code)]
 
     (mf/with-effect [code type]
       (when-let [node (mf/ref-val block-ref)]
-        (->> @highlight-fn
-             (p/fmap (fn [f] (f)))
-             (p/fnly (fn [f cause]
-                       (if cause
-                         (js/console.error cause)
-                         (f node)))))))
+        (p/let [highlight-fn (lazy/load highlight-fn)]
+          (highlight-fn node))))
 
     [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]))
 

frontend/src/app/main/ui/components/context_menu_a11y.cljs

@@ -14,6 +14,7 @@
    [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]
@@ -53,14 +54,13 @@
 (def ^:private valid-option?
   (sm/lazy-validator schema:option))
 
-(mf/defc context-menu*
-  [{:keys [show on-close options selectable selected
+(mf/defc context-menu-inner*
+  [{:keys [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,14 +80,15 @@
         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}])
-           (on-close)))
+           (swap! state* assoc :levels [{:parent nil :options options}])
+           (when (fn? on-close)
+             (on-close))))
 
         props
         (mf/spread-props props {:on-close on-local-close})
@@ -216,11 +217,22 @@
       (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 (and show (some? levels))
+    (when (some? levels)
       [:> dropdown-content* props
        (let [level   (peek levels)
              options (:options level)
@@ -229,7 +241,7 @@
          [:div {:class (stl/css-case
                         :is-selectable selectable
                         :context-menu true
-                        :is-open show
+                        :is-open true
                         :fixed fixed)
                 :style {:top (+ top offset-y)
                         :left (+ left offset-x)}
@@ -241,7 +253,7 @@
                 :role "menu"
                 :ref check-menu-offscreen}
 
-           (when-let [parent (:parent level)]
+           (when parent
              [:*
               [:li {:id "go-back-sub-option"
                     :class (stl/css :context-menu-item)
@@ -256,7 +268,7 @@
 
               [:li {:class (stl/css :separator)}]])
 
-           (for [[index option] (d/enumerate (:options level))]
+           (for [[index option] (d/enumerate options)]
              (let [name        (:name option)
                    id          (:id option)
                    sub-options (:options option)
@@ -297,3 +309,12 @@
                            :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]))

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -9,7 +9,6 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
@@ -47,7 +46,7 @@
                      :disabled disabled)}
 
      (if (some? icon)
-       [:> icon* {:icon-id icon :class icon-class :aria-hidden true}]
+       [:span {:class icon-class} icon]
        [:span {:class (stl/css :title-name)} value])
 
      [:input {:id id

frontend/src/app/main/ui/dashboard.cljs

@@ -247,6 +247,7 @@
           (swap! storage/session dissoc :template))))))
 
 (mf/defc dashboard*
+  {::mf/props :obj}
   [{:keys [profile project-id team-id search-term plugin-url template section]}]
   (let [team            (mf/deref refs/team)
         projects        (mf/deref refs/projects)
@@ -312,8 +313,3 @@
         :section section
         :search-term search-term
         :team team}]]]))
-
-(mf/defc dashboard-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> dashboard* props])

frontend/src/app/main/ui/dashboard/subscription.cljs

@@ -151,14 +151,16 @@
 
 (mf/defc menu-team-icon*
   [{:keys [subscription-type]}]
-  [: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)])
+  [: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"}]])
 
 (mf/defc main-menu-power-up*
   [{:keys [close-sub-menu]}]

frontend/src/app/main/ui/dashboard/subscription.scss

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

frontend/src/app/main/ui/delete_shared.cljs

@@ -106,14 +106,14 @@
        (when (not= 0 count-libraries)
          (if (pos? (count references))
            [:*
-            [: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? 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]])]
             (when (and (string? hint) (not= hint ""))
               [:> context-notification* {:level :info
                                          :appearance :ghost}

frontend/src/app/main/ui/delete_shared.scss

@@ -4,7 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "refactor/basic-rules.scss" as *;
+@use "ds/typography.scss" as t;
 
 .modal-overlay {
   @extend .modal-overlay-base;
@@ -15,14 +16,19 @@
 
 .modal-container {
   @extend .modal-container-base;
+  display: grid;
+  gap: var(--sp-xxl);
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
-.modal-header {
-  margin-bottom: deprecated.$s-24;
+.list-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  max-height: 100%;
 }
 
 .modal-title {
-  @include deprecated.headlineMediumTypography;
+  @include t.use-typography("headline-medium");
   color: var(--modal-title-foreground-color);
 }
 
@@ -31,13 +37,16 @@
 }
 
 .modal-content {
-  @include deprecated.bodySmallTypography;
-  margin-bottom: deprecated.$s-24;
+  @include t.use-typography("body-small");
+  display: grid;
+  gap: var(--sp-s);
 }
 
 .element-list {
-  @include deprecated.bodyLargeTypography;
+  @include t.use-typography("body-large");
   color: var(--modal-text-foreground-color);
+  overflow-y: auto;
+  margin-block: 0;
 }
 
 .action-buttons {
@@ -55,10 +64,14 @@
   }
 }
 
+.modal-scd-msg {
+  margin-block: 0;
+}
+
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.bodyLargeTypography;
+  @include t.use-typography("body-large");
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
 }

frontend/src/app/main/ui/ds.cljs

@@ -9,7 +9,6 @@
    [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
@@ -63,7 +62,6 @@
     :RawSvg raw-svg*
     :Select select*
     :Switch switch*
-    :Checkbox checkbox*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*

frontend/src/app/main/ui/ds/buttons/_buttons.scss

@@ -11,18 +11,12 @@
 %base-button {
   --button-bg-color: initial;
   --button-fg-color: initial;
-
   --button-hover-bg-color: initial;
   --button-hover-fg-color: initial;
-
   --button-active-bg-color: initial;
-  --button-active-fg-color: initial;
-
   --button-disabled-bg-color: initial;
   --button-disabled-fg-color: initial;
-
   --button-border-color: var(--button-bg-color);
-
   --button-focus-inner-ring-color: initial;
   --button-focus-outer-ring-color: initial;
 
@@ -44,10 +38,8 @@
     --button-fg-color: var(--button-hover-fg-color);
   }
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     --button-bg-color: var(--button-active-bg-color);
-    --button-fg-color: var(--button-active-fg-color);
   }
 
   &:focus-visible {
@@ -71,7 +63,6 @@
   --button-hover-fg-color: var(--color-background-secondary);
 
   --button-active-bg-color: var(--color-accent-tertiary);
-  --button-active-fg-color: var(--color-background-secondary);
 
   --button-disabled-bg-color: var(--color-accent-primary-muted);
   --button-disabled-fg-color: var(--color-background-secondary);
@@ -81,8 +72,7 @@
   --button-focus-inner-ring-color: var(--color-background-secondary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }
@@ -95,7 +85,6 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
-  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-foreground-secondary);
@@ -114,7 +103,6 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
-  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-accent-primary-muted);
@@ -133,7 +121,6 @@
   --button-hover-fg-color: var(--color-foreground-primary);
 
   --button-active-bg-color: var(--color-accent-error);
-  --button-active-fg-color: var(--color-foreground-primary);
 
   --button-disabled-bg-color: var(--color-background-error);
   --button-disabled-fg-color: var(--color-accent-error);
@@ -143,8 +130,7 @@
   --button-focus-inner-ring-color: var(--color-background-primary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }

frontend/src/app/main/ui/ds/controls/checkbox.cljs

@@ -1,45 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.ds.controls.checkbox
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:checkbox
-  [:map
-   [:id {:optional true} :string]
-   [:label {:optional true} :string]
-   [:checked {:optional true} :boolean]
-   [:on-change {:optional true} fn?]
-   [:disabled {:optional true} :boolean]])
-
-(mf/defc checkbox*
-  {::mf/schema schema:checkbox}
-  [{:keys [id class label checked on-change disabled] :rest props}]
-  (let [props
-        (mf/spread-props props {:type "checkbox"
-                                :class (stl/css :checkbox-input)
-                                :id id
-                                :checked checked
-                                :on-change on-change
-                                :disabled disabled})]
-
-    [:div {:class [class (stl/css :checkbox)]}
-     [:label {:for id
-              :class (stl/css :checkbox-label)}
-      [:div {:class (stl/css-case :checkbox-box true
-                                  :checked checked
-                                  :disabled disabled)}
-       (when checked
-         [:> icon* {:icon-id i/tick
-                    :size "s"}])]
-
-      [:div {:class (stl/css :checkbox-text)} label]
-
-      [:> :input props]]]))

frontend/src/app/main/ui/ds/controls/checkbox.mdx

@@ -1,40 +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 */ }
-
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as Checkbox from "./checkbox.stories";
-
-<Meta title="Controls/Checkbox" />
-
-# Checkbox
-
-The `checkbox*` component is a toggle control. It allows users to switch between boolean states (`false` or `true`).
-
-<Canvas of={Checkbox.Default} />
-
-<Canvas of={Checkbox.Checked} />
-
-## Anatomy
-
-The checkbox component consists of three main parts:
-
-- **Label** (optional): the text that describes what the checkbox controls. Clicking on this text also works for toggling.
-- **Box**: the box which shows the current state. Contains a check if the state is `true`.
-- **Native element**: the native HTML element which holds the state. It remains hidden to the user.
-
-## Usage Guidelines
-
-### When to Use
-
-- For boolean settings that take effect immediately.
-- In preference panels and configuration screens.
-
-### When Not to Use
-
-- For actions that require confirmation (use buttons instead).
-- For multiple choice selections (use radio buttons or select).
-- For temporary states that need explicit "Apply" action.
-- For ternary states.

frontend/src/app/main/ui/ds/controls/checkbox.scss

@@ -1,86 +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/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/typography.scss" as *;
-
-.checkbox {
-  --input-checkbox-border-color: var(--color-foreground-secondary);
-  --input-checkbox-border-color-focus: var(--color-accent-primary);
-  --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
-  --input-checkbox-foreground-color: var(--color-foreground-primary);
-  --input-checkbox-background-color: var(--color-background-quaternary);
-
-  --input-checkbox-border-color-checked: var(--color-background-quaternary);
-  --input-checkbox-foreground-color-checked: var(--color-background-primary);
-  --input-checkbox-background-color-checked: var(--color-accent-primary);
-
-  --input-checkbox-foreground-color-disabled: var(--color-background-primary);
-  --input-checkbox-background-color-disabled: var(--color-foreground-secondary);
-
-  --input-checkbox-text-color: var(--color-foreground-secondary);
-}
-
-.checkbox-label {
-  display: grid;
-  grid-template-columns: var(--sp-l) 1fr 0;
-  align-items: center;
-
-  &:hover {
-    .checkbox-box {
-      border-color: var(--input-checkbox-border-color-hover);
-    }
-  }
-
-  &:focus,
-  &:focus-within {
-    .checkbox-box {
-      border-color: var(--input-checkbox-border-color-focus);
-    }
-  }
-}
-
-.checkbox-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: $sz-16;
-  block-size: $sz-16;
-  border-radius: $br-4;
-  border: $b-1 solid var(--input-checkbox-border-color);
-  color: var(--input-checkbox-foreground-color);
-  background-color: var(--input-checkbox-background-color);
-
-  &.disabled {
-    border: 0;
-  }
-
-  &.checked {
-    --input-checkbox-border-color: var(--input-checkbox-border-color-checked);
-    --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-checked);
-    --input-checkbox-background-color: var(--input-checkbox-background-color-checked);
-
-    &.disabled {
-      --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-disabled);
-      --input-checkbox-background-color: var(--input-checkbox-background-color-disabled);
-    }
-  }
-}
-
-.checkbox-text {
-  @include use-typography("body-small");
-  padding-inline-start: var(--sp-s);
-  color: var(--input-checkbox-text-color);
-}
-
-.checkbox-input {
-  &:focus {
-    outline: 0;
-    inline-size: 0;
-    block-size: 0;
-  }
-}

frontend/src/app/main/ui/ds/controls/checkbox.stories.jsx

@@ -1,76 +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
-
-import * as React from "react";
-import Components from "@target/components";
-
-const { Checkbox } = Components;
-
-export default {
-  title: "Controls/Checkbox",
-  component: Checkbox,
-  argTypes: {
-    label: {
-      control: { type: "text" },
-      description: "Label text displayed next to the checkbox",
-    },
-    checked: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is disabled",
-    },
-  },
-  args: {
-    checked: false,
-    disabled: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ["id", "on-change"],
-    },
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const Default = {
-  args: {
-    label: "Toggle something",
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const Checked = {
-  args: {
-    label: "Toggle something",
-    checked: true,
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const WithoutLabel = {
-  args: {
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const WithLongLabel = {
-  args: {
-    label:
-      "This is a very long label that demonstrates how the checkbox component handles text wrapping and layout when the label content is extensive",
-    disabled: false,
-  },
-  render: ({ ...args }) => (
-    <div style={{ maxWidth: "300px" }}>
-      <Checkbox {...args} />
-    </div>
-  ),
-};

frontend/src/app/main/ui/ds/controls/input.cljs

@@ -26,19 +26,14 @@
    [:max-length {:optional true} :int]
    [:variant {:optional true} [:maybe [:enum "seamless" "dense" "comfortable"]]]
    [:hint-message {:optional true} [:maybe :string]]
-   [:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]
-   [:hint-formated {:optional true} :boolean]])
+   [:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]])
 
 (mf/defc input*
   {::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [id class label is-optional type max-length variant hint-message hint-type hint-formated] :rest props} ref]
+  [{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref]
   (let [id (or id (mf/use-id))
         variant (d/nilv variant "dense")
-        hint-class (if (and (not= "error" hint-type)
-                            hint-formated)
-                     (stl/css :hint-formated)
-                     "")
         is-optional (d/nilv is-optional false)
         type (d/nilv type "text")
         max-length (d/nilv max-length max-input-length)
@@ -61,7 +56,6 @@
      [:> input-field* props]
      (when has-hint
        [:> hint-message* {:id id
-                          :class hint-class
                           :message hint-message
                           :type hint-type}])]))
 

frontend/src/app/main/ui/ds/controls/input.scss

@@ -12,7 +12,3 @@
   gap: var(--sp-xs);
   inline-size: 100%;
 }
-
-.hint-formated {
-  white-space: pre;
-}

frontend/src/app/main/ui/ds/controls/select.cljs

@@ -118,7 +118,6 @@
         (mf/use-fn
          (mf/deps disabled)
          (fn [event]
-           (dom/prevent-default event)
            (dom/stop-propagation event)
            (when-not disabled
              (swap! is-open* not))))

frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs

@@ -53,15 +53,10 @@
                                                 "true")
                                 :aria-describedby (when has-hint
                                                     (str id "-hint"))
+                                :aria-labelledby tooltip-id
                                 :type (d/nilv type "text")
                                 :id id
                                 :max-length (d/nilv max-length max-input-length)})
-
-        props (if (and aria-label (not (some? icon)))
-                (mf/spread-props props
-                                 {:aria-label aria-label})
-                (mf/spread-props props
-                                 {:aria-labelledby tooltip-id}))
         inside-class (stl/css-case :input-wrapper true
                                    :has-hint has-hint
                                    :hint-type-hint (= hint-type "hint")

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -300,7 +300,6 @@
   "A collection of all icons"
   (collect-icons))
 
-(def ^:private ^:const icon-size-l 32)
 (def ^:private ^:const icon-size-m 16)
 (def ^:private ^:const icon-size-s 12)
 
@@ -309,7 +308,7 @@
    [:class {:optional true} [:maybe :string]]
    [:icon-id [:and :string [:fn #(contains? icon-list %)]]]
    [:size  {:optional true}
-    [:maybe [:enum "s" "m" "l"]]]])
+    [:maybe [:enum "s" "m"]]]])
 
 (mf/defc icon*
   {::mf/schema schema:icon}
@@ -318,14 +317,10 @@
                                  {:class [class (stl/css :icon)]
                                   :width icon-size-m
                                   :height icon-size-m})
-
-        size-px (cond (= size "l") icon-size-l
-                      (= size "s") icon-size-s
-                      :else        icon-size-m)
-
-        offset  (if (or (= size "s") (= size "m"))
-                  (/ (- icon-size-m size-px) 2)
-                  0)]
+        size-px (if (= size "s")
+                  icon-size-s
+                  icon-size-m)
+        offset  (/ (- icon-size-m size-px) 2)]
 
     [:> :svg props
      [:use {:href (dm/str "#icon-" icon-id)

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]]
+   [:content [:or fn? :string map?]]
    [:placement {:optional true}
     [:maybe [:enum "top" "bottom" "left" "right" "top-right" "bottom-right" "bottom-left" "top-left"]]]])
 

frontend/src/app/main/ui/ds/utilities/swatch.scss

@@ -15,7 +15,7 @@
 }
 
 .swatch {
-  --border-color: var(--color-accent-primary-muted);
+  --border-color: var(--color-background-quaternary);
   --border-radius: #{$br-4};
   --border-color-active: var(--color-foreground-primary);
   --border-color-active-inset: var(--color-background-primary);

frontend/src/app/main/ui/exports/assets.cljs

@@ -223,24 +223,30 @@
         circ              (* 2 Math/PI 12)
         pct               (- circ (* circ (/ progress total)))
 
-        pwidth (if error?
-                 280
-                 (/ (* progress 280) total))
-        color  (cond
-                 error?         clr/new-danger
-                 healthy?       (if is-default-theme?
-                                  clr/new-primary
-                                  clr/new-primary-light)
-                 (not healthy?) clr/new-warning)
+        pwidth
+        (if error?
+          280
+          (/ (* progress 280) total))
 
-        background-clr (if is-default-theme?
-                         clr/background-quaternary
-                         clr/background-quaternary-light)
-        title  (cond
-                 error?          (tr "workspace.options.exporting-object-error")
-                 complete?       (tr "workspace.options.exporting-complete")
-                 healthy?        (tr "workspace.options.exporting-object")
-                 (not healthy?)  (tr "workspace.options.exporting-object-slow"))
+        color
+        (cond
+          error?         clr/new-danger
+          healthy?       (if is-default-theme?
+                           clr/new-primary
+                           clr/new-primary-light)
+          (not healthy?) clr/new-warning)
+
+        background-clr
+        (if is-default-theme?
+          clr/background-quaternary
+          clr/background-quaternary-light)
+
+        title
+        (cond
+          error?          (tr "workspace.options.exporting-object-error")
+          complete?       (tr "workspace.options.exporting-complete")
+          healthy?        (tr "workspace.options.exporting-object")
+          (not healthy?)  (tr "workspace.options.exporting-object-slow"))
 
         retry-last-export
         (mf/use-fn #(st/emit! (de/retry-last-export)))
@@ -284,7 +290,7 @@
                      :on-click retry-last-export}
             (tr "workspace.options.retry")]
 
-           [:p {:class (stl/css :progress)}
+           [:span {:class (stl/css :progress)}
             (dm/str progress " / " total)])]
 
         [:button {:class (stl/css :progress-close-button)

frontend/src/app/main/ui/forms.cljs

@@ -34,9 +34,10 @@
            (let [value (-> event dom/get-target dom/get-input-value)]
              (fm/on-input-change form input-name value true))))
 
+
         props
         (mf/spread-props props {:on-change on-change
-                                :value value})
+                                :default-value value})
 
         props
         (if (and error touched?)

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)

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")

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -16,8 +16,8 @@
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.inspect.attributes :refer [attributes]]
-   [app.main.ui.inspect.code :refer [code]]
+   [app.main.ui.inspect.attributes :refer [attributes*]]
+   [app.main.ui.inspect.code :refer [code*]]
    [app.main.ui.inspect.selection-feedback :refer [resolve-shapes]]
    [app.main.ui.inspect.styles :refer [styles-tab*]]
    [app.util.dom :as dom]
@@ -122,8 +122,7 @@
      (fn []
        (if (seq shapes)
          (st/emit! (ptk/event ::ev/event {::ev/name "inspect-mode-click-element"}))
-         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))
-       (reset! color-space* "hex")))
+         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))))
 
     [:aside {:class (stl/css-case :settings-bar-right true
                                   :viewer-code (= from :viewer))}
@@ -189,41 +188,41 @@
                                :libraries libraries
                                :file-id file-id}]
               :computed
-              [:& attributes {:color-space color-space
-                              :page-id page-id
-                              :objects objects
-                              :file-id file-id
-                              :frame frame
-                              :shapes shapes
-                              :from from
-                              :libraries libraries
-                              :share-id share-id}]
+              [:> attributes* {:color-space color-space
+                               :page-id page-id
+                               :objects objects
+                               :file-id file-id
+                               :frame frame
+                               :shapes shapes
+                               :from from
+                               :libraries libraries
+                               :share-id share-id}]
 
               :code
-              [:& code {:frame frame
-                        :shapes shapes
-                        :on-expand handle-expand
-                        :from from}])]
+              [:> code* {:frame frame
+                         :shapes shapes
+                         :on-expand handle-expand
+                         :from from}])]
            [:> tab-switcher* {:tabs tabs
                               :selected (name @section)
                               :on-change handle-change-tab
                               :class (stl/css :viewer-tab-switcher)}
             (case @section
               :info
-              [:& attributes {:page-id page-id
-                              :objects objects
-                              :file-id file-id
-                              :frame frame
-                              :shapes shapes
-                              :from from
-                              :libraries libraries
-                              :share-id share-id}]
+              [:> attributes* {:page-id page-id
+                               :objects objects
+                               :file-id file-id
+                               :frame frame
+                               :shapes shapes
+                               :from from
+                               :libraries libraries
+                               :share-id share-id}]
 
               :code
-              [:& code {:frame frame
-                        :shapes shapes
-                        :on-expand handle-expand
-                        :from from}])])]]
+              [:> code* {:frame frame
+                         :shapes shapes
+                         :on-expand handle-expand
+                         :from from}])])]]
        [:div {:class (stl/css :empty)}
         [:div {:class (stl/css :code-info)}
          [:span {:class (stl/css :placeholder-icon)}

frontend/src/app/main/ui/inspect/styles.cljs

@@ -133,7 +133,7 @@
            (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
     [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
      ;;  TOKENS PANEL
-     (when (or active-themes active-sets)
+     (when (or (seq active-themes) (seq active-sets))
        [:li
         [:> style-box* {:panel :token}
          [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]])

frontend/src/app/main/ui/inspect/styles/style_box.scss

@@ -6,6 +6,15 @@
 
 @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);
@@ -13,12 +22,9 @@
   --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(--lowEmphasis-background);
+  background-color: var(--low-emphasis-background);
 
   border-block-end: 2px solid var(--box-border-color);
 }

frontend/src/app/main/ui/releases.cljs

@@ -30,6 +30,7 @@
    [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]
@@ -102,4 +103,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.11")))
+  (rc/render-release-notes (assoc params :version "2.12")))

frontend/src/app/main/ui/releases/v2_12.cljs

@@ -0,0 +1,162 @@
+;; 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"]]]]]])))
+

frontend/src/app/main/ui/releases/v2_12.scss

@@ -0,0 +1,102 @@
+// 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;
+}

frontend/src/app/main/ui/settings.cljs

@@ -78,9 +78,3 @@
 
           :settings-notifications
           [:& notifications-page* {:profile profile}])]]]]))
-
-(mf/defc settings-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> settings* props])
-

frontend/src/app/main/ui/settings/subscription.cljs

@@ -77,7 +77,7 @@
      [:button {:class (stl/css :cta-button :bottom-link)
                :on-click cta-link-trial} cta-text-trial])])
 
-(defn schema:seats-form [min-editors]
+(defn- make-management-form-schema [min-editors]
   [:map {:title "SeatsForm"}
    [:min-members [::sm/number {:min min-editors
                                :max 9999}]]
@@ -87,7 +87,6 @@
   {::mf/register modal/components
    ::mf/register-as :management-dialog}
   [{:keys [subscription-type current-subscription editors subscribe-to-trial]}]
-
   (let [unlimited-modal-step*
         (mf/use-state 1)
 
@@ -112,9 +111,12 @@
           {:min-members min-editors
            :redirect-to-payment-details false})
 
+        schema
+        (mf/with-memo [min-editors]
+          (make-management-form-schema min-editors))
+
         form
-        (fm/use-form :schema (schema:seats-form min-editors)
-                     :initial initial)
+        (fm/use-form :schema schema :initial initial)
 
         submit-in-progress
         (mf/use-ref false)
@@ -334,11 +336,15 @@
         [:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]]
 
        [:div {:class (stl/css :modal-end)}
-        [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
+        [:div {:class (stl/css :modal-title)}
+         (tr "subscription.settings.sucess.dialog.title" subscription-name)]
         (when (not= subscription-name "professional")
-          [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.thanks" subscription-name)])
-        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.description")]
-        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.sucess.dialog.footer")]
+          [:p {:class (stl/css :modal-text-large)}
+           (tr "subscription.settings.success.dialog.thanks" subscription-name)])
+        [:p {:class (stl/css :modal-text-large)}
+         (tr "subscription.settings.success.dialog.description")]
+        [:p {:class (stl/css :modal-text-large)}
+         (tr "subscription.settings.sucess.dialog.footer")]
 
         [:div {:class (stl/css :success-action-buttons)}
          [:input
@@ -418,7 +424,11 @@
     (mf/with-effect []
       (dom/set-html-title (tr "subscription.labels")))
 
-    (mf/with-effect [authenticated? show-subscription-success-modal? show-trial-subscription-modal? success-modal-is-trial? subscription]
+    (mf/with-effect [authenticated?
+                     show-subscription-success-modal?
+                     show-trial-subscription-modal?
+                     success-modal-is-trial?
+                     subscription]
       (when ^boolean authenticated?
         (cond
           ^boolean show-trial-subscription-modal?

frontend/src/app/main/ui/viewer.cljs

@@ -624,6 +624,7 @@
 ;; --- Component: Viewer
 
 (mf/defc viewer*
+  {::mf/props :obj}
   [{:keys [file-id share-id page-id] :as props}]
   (mf/with-effect [file-id page-id share-id]
     (let [params {:file-id file-id
@@ -642,8 +643,3 @@
     [:> loader*  {:title (tr "labels.loading")
                   :overlay true}]))
 
-
-(mf/defc viewer-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> viewer* props])

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

@@ -27,7 +27,7 @@
    [app.main.ui.workspace.coordinates :as coordinates]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
-   [app.main.ui.workspace.palette :refer [palette]]
+   [app.main.ui.workspace.palette :refer [palette*]]
    [app.main.ui.workspace.plugins]
    [app.main.ui.workspace.sidebar :refer [sidebar*]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -84,8 +84,8 @@
         node-ref (use-resize-observer on-resize)]
     [:*
      (when (not ^boolean hide-ui?)
-       [:& palette {:layout layout
-                    :on-change-palette-size on-resize-palette}])
+       [:> palette* {:layout layout
+                     :on-change-size on-resize-palette}])
 
      [:section
       {:key (dm/str "workspace-" page-id)
@@ -165,7 +165,7 @@
                    (dsh/lookup-page state file-id page-id))))
              st/state))
 
-(mf/defc workspace-inner*
+(mf/defc workspace-page*
   {::mf/private true}
   [{:keys [page-id file-id file layout wglobal]}]
   (let [page-ref (mf/with-memo [file-id page-id]
@@ -252,16 +252,10 @@
                             :touch-action "none"}}
           [:> context-menu*]
           (if (and file-loaded? page-id)
-            [:> workspace-inner*
+            [:> workspace-page*
              {:page-id page-id
               :file-id file-id
               :file file
               :wglobal wglobal
               :layout layout}]
             [:> workspace-loader*])]]]]]]))
-
-(mf/defc workspace-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> workspace* props])
-

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

@@ -418,11 +418,11 @@
           [:& radio-buttons {:selected color-style
                              :on-change toggle-token-color
                              :name "color-style"}
-           [:& radio-button {:icon i/swatches
+           [:& radio-button {:icon deprecated-icon/swatches
                              :value :direct-color
                              :title (tr "labels.color")
                              :id "opt-color"}]
-           [:& radio-button {:icon i/tokens
+           [:& radio-button {:icon deprecated-icon/tokens
                              :value :token-color
                              :title (tr "workspace.colorpicker.color-tokens")
                              :id "opt-token-color"}]])]

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

@@ -156,7 +156,7 @@
                        (let [{:keys [modal title]} (get dwta/token-properties :color)
                              window-size (dom/get-window-size)
                              left-sidebar (dom/get-element "left-sidebar-aside")
-                             x-size (dom/get-data left-sidebar "left-sidebar-width")
+                             x-size (dom/get-data left-sidebar "width")
                              modal-height 392
                              x (- (int x-size) 30)
                              y (- (/ (:height window-size) 2) (/ modal-height 2))]

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

@@ -33,12 +33,13 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def viewport
+(def ^:private ref:viewport
   (l/derived :vport refs/workspace-local))
 
-(defn calculate-palette-padding [rulers?]
+(defn- calculate-palette-style
+  [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
+        left-sidebar-size      (-> (dom/get-data left-sidebar "width")
                                    (d/parse-integer))
         rulers-width           (if rulers? 22 0)
         min-left-sidebar-width left-sidebar-default-width
@@ -48,36 +49,46 @@
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
          "paddingRight" "322px"}))
 
-(mf/defc palette
-  [{:keys [layout on-change-palette-size]}]
-  (let [color-palette?       (:colorpalette layout)
-        text-palette?        (:textpalette layout)
-        hide-palettes?       (:hide-palettes layout)
-        workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
-        container            (mf/use-ref nil)
-        state*               (mf/use-state {:show-menu false})
-        state                (deref state*)
-        show-menu?           (:show-menu state)
-        selected             (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
-        selected-text*       (mf/use-state :file)
-        selected-text        (deref selected-text*)
-        on-select            (mf/use-fn #(reset! selected %))
-        rulers?              (mf/deref refs/rulers?)
-        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
+(mf/defc palette*
+  [{:keys [layout on-change-size]}]
+  (let [color-palette? (:colorpalette layout)
+        text-palette?  (:textpalette layout)
+        hide-palettes? (:hide-palettes layout)
 
-        vport (mf/deref viewport)
-        vport-width (:width vport)
+        read-only?     (mf/use-ctx ctx/workspace-read-only?)
+        container      (mf/use-ref nil)
+
+        state*         (mf/use-state #(-> {:show-menu false}))
+        state          (deref state*)
+        show-menu?     (:show-menu state)
+
+        selected       (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
+
+        selected-text* (mf/use-state :file)
+        selected-text  (deref selected-text*)
+
+        on-select      (mf/use-fn #(reset! selected %))
+
+        rulers?        (mf/deref refs/rulers?)
+        vport          (mf/deref ref:viewport)
+        vport-width    (get vport :width)
+
+        {:keys [on-pointer-down
+                on-lost-pointer-capture
+                on-pointer-move
+                parent-ref
+                size]}
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size)
 
         on-resize
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
              (swap! state* assoc :width width))))
 
         on-close-menu
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (swap! state* assoc :show-menu false)))
 
@@ -100,7 +111,7 @@
              (reset! selected-text* (:id lib)))))
 
         toggle-palettes
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (r/set-resize-type! :top)
            (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -131,7 +142,9 @@
                                              (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
              (dom/blur! node))))
 
-        any-palette? (or color-palette? text-palette?)
+        any-palette?
+        (or color-palette? text-palette?)
+
         size-classname
         (cond
           (<= size 64) (stl/css :small-palette)
@@ -142,16 +155,16 @@
       (let [key1 (events/listen js/window "resize" on-resize)]
         #(events/unlistenByKey key1)))
 
-    (mf/use-layout-effect
-     #(let [dom     (mf/ref-val parent-ref)
+    (mf/with-layout-effect []
+      (let [dom     (mf/ref-val parent-ref)
             width (obj/get dom "clientWidth")]
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
            :id "palette-wrapper"
-           :style  (calculate-palette-padding rulers?)
+           :style  (calculate-palette-style rulers?)
            :data-testid "palette"}
-     (when-not workspace-read-only?
+     (when-not ^boolean read-only?
        [:div {:ref parent-ref
               :class (dm/str size-classname " " (stl/css-case :palettes true
                                                               :wide any-palette?