✨ Make automatic workflows not dependent on yarn

All they only needed for build process.

.circleci/config.yml

@@ -1,305 +0,0 @@
-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: "yes"
+      build_wasm: "no"
       build_storybook: "yes"
 
   build-docker:
@@ -23,7 +23,6 @@ jobs:
 
   notify:
     name: Notifications
-    runs-on: ubuntu-24.04
     needs: build-docker
 
     steps:

.github/workflows/tests.yml

@@ -159,17 +159,7 @@ jobs:
       - name: Build Bundle
         working-directory: ./frontend
         run: |
-          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
+          ./scripts/build 0.0.0
 
       - name: Store Bundle Cache
         uses: actions/cache@v4
@@ -177,6 +167,7 @@ jobs:
           key: "integration-bundle-${{ github.sha }}"
           path: frontend/resources/public
 
+
   test-integration-1:
     name: "Integration Tests 1/4"
     runs-on: ubuntu-24.04

.gitignore

@@ -80,4 +80,4 @@ node_modules
 /playwright/.cache/
 /render-wasm/target/
 /**/.yarn/*
-/.pnpm-store
+/.pnpm-store

CHANGES.md

@@ -1,5 +1,18 @@
 # 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
+
+
 ## 2.12.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -61,7 +74,6 @@ example. It's still usable as before, we just removed the example.
 ### :heart: Community contributions (Thank you!)
 
 - Ensure consistent snap behavior across all zoom levels [Github #7774](https://github.com/penpot/penpot/pull/7774) by [@Tokytome](https://github.com/Tokytome)
-- Fix crash in token grid view due to tooltip validation (by @dfelinto) [Github #7887](https://github.com/penpot/penpot/pull/7887)
 
 ### :sparkles: New features & Enhancements
 
@@ -88,12 +100,6 @@ example. It's still usable as before, we just removed the example.
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
-- Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
-- Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
-- Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
-- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
-- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
-- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
 
 ## 2.11.1
 

backend/resources/app/onboarding.edn

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

backend/scripts/_env

@@ -3,7 +3,6 @@
 export PENPOT_MANAGEMENT_API_KEY=super-secret-management-api-key
 export PENPOT_SECRET_KEY=super-secret-devenv-key
 export PENPOT_HOST=devenv
-export PENPOT_PUBLIC_URI=https://localhost:3449
 
 export PENPOT_FLAGS="\
        $PENPOT_FLAGS \

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,6 +79,18 @@
          (remove #(contains? reserved-props (key %))))
         props))
 
+(defn event-from-rpc-params
+  "Create a base event skeleton with pre-filled some important
+  data that can be extracted from RPC params object"
+  [params]
+  (let [context {:external-session-id (::rpc/external-session-id params)
+                 :external-event-origin (::rpc/external-event-origin params)
+                 :triggered-by (::rpc/handler-name params)}]
+    {::type "action"
+     ::profile-id (::rpc/profile-id params)
+     ::ip-addr (::rpc/ip-addr params)
+     ::context (d/without-nils context)}))
+
 (defn get-external-session-id
   [request]
   (when-let [session-id (yreq/get-header request "x-external-session-id")]
@@ -87,24 +99,13 @@
                   (str/blank? session-id))
       session-id)))
 
-(defn- get-client-event-origin
+(defn- get-external-event-origin
   [request]
   (when-let [origin (yreq/get-header request "x-event-origin")]
-    (when-not (or (= origin "null")
+    (when-not (or (> (count origin) 256)
+                  (= origin "null")
                   (str/blank? origin))
-      (str/prune origin 200))))
-
-(defn get-client-user-agent
-  [request]
-  (when-let [user-agent (yreq/get-header request "user-agent")]
-    (str/prune user-agent 500)))
-
-(defn- get-client-version
-  [request]
-  (when-let [origin (yreq/get-header request "x-frontend-version")]
-    (when-not (or (= origin "null")
-                  (str/blank? origin))
-      (str/prune origin 100))))
+      origin)))
 
 ;; --- SPECS
 
@@ -133,33 +134,6 @@
 (def ^:private check-event
   (sm/check-fn schema:event))
 
-(defn- prepare-context-from-request
-  [request]
-  (let [client-event-origin (get-client-event-origin request)
-        client-version      (get-client-version request)
-        client-user-agent   (get-client-user-agent request)
-        session-id          (get-external-session-id request)
-        token-id       (::actoken/id request)]
-    (d/without-nils
-     {:external-session-id session-id
-      :access-token-id (some-> token-id str)
-      :client-event-origin client-event-origin
-      :client-user-agent client-user-agent
-      :client-version client-version
-      :version (:full cf/version)})))
-
-(defn event-from-rpc-params
-  "Create a base event skeleton with pre-filled some important
-  data that can be extracted from RPC params object"
-  [params]
-  (let [context (some-> params meta ::http/request prepare-context-from-request)
-        event   {::type "action"
-                 ::profile-id (or (::rpc/profile-id params) uuid/zero)
-                 ::ip-addr (::rpc/ip-addr params)}]
-    (cond-> event
-      (some? context)
-      (assoc ::context context))))
-
 (defn prepare-event
   [cfg mdata params result]
   (let [resultm      (meta result)
@@ -174,10 +148,18 @@
                                  (merge (::props resultm))
                                  (dissoc :profile-id)
                                  (dissoc :type)))
+
                          (clean-props))
 
-        context      (merge (::context resultm)
-                            (prepare-context-from-request request))
+        token-id     (::actoken/id request)
+        context      (-> (::context resultm)
+                         (assoc :external-session-id
+                                (get-external-session-id request))
+                         (assoc :external-event-origin
+                                (get-external-event-origin request))
+                         (assoc :access-token-id (some-> token-id str))
+                         (d/without-nils))
+
         ip-addr      (inet/parse-request request)]
 
     {::type (or (::type resultm)

common/deps.edn

@@ -29,7 +29,6 @@
   java-http-clj/java-http-clj {:mvn/version "0.4.3"}
   integrant/integrant {:mvn/version "1.0.0"}
 
-  funcool/tubax {:mvn/version "2021.05.20-0"}
   funcool/cuerdas {:mvn/version "2025.06.16-414"}
   funcool/promesa
   {:git/sha "46048fc0d4bf5466a2a4121f5d52aefa6337f2e8"

common/src/app/common/exceptions.cljc

@@ -14,8 +14,7 @@
    [app.common.schema :as sm]
    [clojure.core :as c]
    [clojure.spec.alpha :as s]
-   [cuerdas.core :as str]
-   [expound.alpha :as expound])
+   [cuerdas.core :as str])
   #?(:clj
      (:import
       clojure.lang.IPersistentMap)))
@@ -110,13 +109,6 @@
          (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,8 +43,6 @@
   "
   #?(: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,16 +12,12 @@
    [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]
@@ -29,7 +25,6 @@
    [app.common.types.library :as ctl]
    [app.common.types.page :as ctp]
    [app.common.types.pages-list :as ctpl]
-   [app.common.types.path.segment :as segment]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
@@ -39,8 +34,7 @@
    [app.common.types.typography :as cty]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
-   [clojure.set :as set]
-   [clojure.spec.alpha :as s]))
+   [clojure.set :as set]))
 
 ;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
 (log/set-level! :warn)
@@ -477,10 +471,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]
-  (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)
+  (assert (contains? #{:colors :components :typographies} asset-type))
+  (assert (or (nil? asset-id) (uuid? asset-id)))
+  (assert (uuid? file-id))
+  (assert (uuid? library-id))
 
   (container-log :info asset-id
                  :msg "Sync file with library"
@@ -514,10 +508,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]
-  (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)
+  (assert (contains? #{:colors :components :typographies} asset-type))
+  (assert (or (nil? asset-id) (uuid? asset-id)))
+  (assert (uuid? file-id))
+  (assert (uuid? library-id))
 
   (container-log :info asset-id
                  :msg "Sync local components with library"
@@ -1880,44 +1874,6 @@
                    roperations'
                    uoperations')))))))
 
-(defn- set-path-new-values
-  [current-shape prev-shape transform]
-  (let [new-content   (segment/transform-content
-                       (:content current-shape)
-                       (gmt/transform-in (gpt/point 0 0) transform))
-        new-points    (-> (segment/content->selrect new-content)
-                          (grc/rect->points))
-        points-center (gco/points->center new-points)
-        new-selrect   (gsh/calculate-selrect new-points points-center)
-        shape         (assoc current-shape
-                             :content new-content
-                             :points new-points
-                             :selrect new-selrect)
-
-        prev-center   (segment/content-center (:content prev-shape))
-        delta         (gpt/subtract points-center (first new-points))
-        new-pos       (gpt/subtract prev-center delta)]
-    (gsh/absolute-move shape new-pos)))
-
-(defn- switch-path-change-value
-  [prev-shape           ;; The shape before the switch
-   current-shape        ;; The shape after the switch (a clean copy)
-   ref-shape            ;; The referenced shape on the main component
-                        ;; before the switch
-   attr]
-  (let [old-width (-> ref-shape :selrect :width)
-        new-width (-> prev-shape :selrect :width)
-
-        old-height (-> ref-shape :selrect :height)
-        new-height (-> prev-shape :selrect :height)
-
-        transform (-> (gpt/point (/ new-width old-width)
-                                 (/ new-height old-height))
-                      (gmt/scale-matrix))
-
-        shape     (set-path-new-values current-shape prev-shape transform)]
-    (get shape attr)))
-
 
 (defn- switch-text-change-value
   [prev-content         ;; The :content of the text before the switch
@@ -2069,10 +2025,6 @@
                (= :content attr)
                (touched attr-group))
 
-              path-change?
-              (and (= :path (:type current-shape))
-                   (contains? #{:points :selrect :content} attr))
-
               ;; position-data is a special case because can be affected by :geometry-group and :content-group
               ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
               ;; so it's calculated again
@@ -2101,12 +2053,6 @@
                                             (:content origin-ref-shape)
                                             touched)
 
-                  path-change?
-                  (switch-path-change-value previous-shape
-                                            current-shape
-                                            origin-ref-shape
-                                            attr)
-
                   :else
                   (get previous-shape attr)))
 

common/src/app/common/schema.cljc

@@ -8,6 +8,8 @@
   (: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]
@@ -19,8 +21,6 @@
    [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,27 +245,30 @@
                                      :level (d/nilv level 8)
                                      :length (d/nilv length 12)})))))
 
-(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 ::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 ::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
+   (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)]}))
 
-(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))))
+#?(: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)))))
 
 (defmacro ignoring
   [expr]
@@ -281,20 +284,7 @@
 (defn check-fn
   "Create a predefined check function"
   [s & {:keys [hint type code]}]
-  (let [s          #?(:clj
-                      (schema s)
-                      :cljs
-                      (try
-                        (schema s)
-                        (catch :default cause
-                          (let [data (ex-data cause)]
-                            (if (= :malli.core/invalid-schema (:type data))
-                              (throw (ex-info
-                                      (str "Invalid schema\n"
-                                           (pp/pprint-str (:data data)))
-                                      {}))
-                              (throw cause))))))
-
+  (let [s          (schema s)
         validator* (delay (m/validator s))
         explainer* (delay (m/explainer s))
         hint       (or ^boolean hint "check error")
@@ -312,6 +302,13 @@
                                   ::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.
@@ -1006,6 +1003,9 @@
 (def valid-safe-number?
   (lazy-validator ::safe-number))
 
+(def valid-safe-int?
+  (lazy-validator ::safe-int))
+
 (def valid-text?
   (validator ::text))
 

common/src/app/common/types/path.cljc

@@ -267,4 +267,3 @@
    (-> (stp/convert-to-path shape objects)
        (update :content impl/path-data))))
 
-(dm/export impl/decode-segments)

common/src/app/common/types/path/impl.cljc

@@ -565,9 +565,6 @@
 (def check-content
   (sm/check-fn schema:content))
 
-(def decode-segments
-  (sm/lazy-decoder schema:segments sm/json-transformer))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; CONSTRUCTORS & PREDICATES
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

docker/devenv/Dockerfile

@@ -25,48 +25,6 @@ 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
 ################################################################################
@@ -101,38 +59,6 @@ RUN set -eux; \
     corepack enable; \
     rm -rf /tmp/nodejs.tar.gz;
 
-
-################################################################################
-## CADDYSERVER SETUP
-################################################################################
-
-FROM base AS setup-caddy
-
-ENV CADDY_VERSION=2.10.2
-
-RUN set -eux; \
-    ARCH="$(dpkg --print-architecture)"; \
-    case "${ARCH}" in \
-       aarch64|arm64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_arm64.tar.gz"; \
-         ;; \
-       amd64|x86_64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_amd64.tar.gz"; \
-         ;; \
-       *) \
-         echo "Unsupported arch: ${ARCH}"; \
-         exit 1; \
-         ;; \
-    esac; \
-    curl -LfsSo /tmp/caddy.tar.gz ${BINARY_URL}; \
-    mkdir -p /tmp/caddy; \
-    cd /tmp/caddy; \
-    tar -xf /tmp/caddy.tar.gz; \
-    chown -R root /tmp/caddy; \
-    mv /tmp/caddy/caddy /usr/bin/; \
-    rm -rf /tmp/caddy.tar.gz; \
-    rm -rf /tmp/caddy;
-
 ################################################################################
 ## JVM SETUP
 ################################################################################
@@ -417,7 +343,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=build-imagemagick /opt/imagick /opt/imagick
+COPY --from=penpotapp/imagemagick:7.1.2-0 /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
@@ -425,7 +351,6 @@ COPY --from=setup-utils /opt/utils /opt/utils
 COPY --from=setup-rust /opt/cargo /opt/cargo
 COPY --from=setup-rust /opt/rustup /opt/rustup
 COPY --from=setup-rust /opt/emsdk /opt/emsdk
-COPY --from=setup-caddy /usr/bin/caddy /usr/bin/caddy
 
 COPY files/nginx.conf /etc/nginx/nginx.conf
 COPY files/nginx-mime.types /etc/nginx/mime.types
@@ -436,9 +361,6 @@ COPY files/vimrc          /root/.vimrc
 COPY files/tmux.conf      /root/.tmux.conf
 COPY files/sudoers        /etc/sudoers
 
-COPY files/Caddyfile           /home/
-COPY files/selfsigned.crt      /home/
-COPY files/selfsigned.key      /home/
 COPY files/start-tmux.sh       /home/start-tmux.sh
 COPY files/start-tmux-back.sh  /home/start-tmux-back.sh
 COPY files/entrypoint.sh       /home/entrypoint.sh

docker/devenv/docker-compose.yaml

@@ -33,8 +33,6 @@ services:
       - 3447:3447
       - 3448:3448
       - 3449:3449
-      - 3449:3449/udp
-      - 3450:3450
       - 6006:6006
       - 6060:6060
       - 6061:6061
@@ -69,6 +67,11 @@ 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"
@@ -80,10 +83,6 @@ services:
       - MINIO_ROOT_USER=minioadmin
       - MINIO_ROOT_PASSWORD=minioadmin
 
-    ports:
-      - 9000:9000
-      - 9001:9001
-
     networks:
       default:
         aliases:

docker/devenv/files/Caddyfile

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

docker/devenv/files/init.sh

@@ -2,5 +2,4 @@
 
 set -e
 nginx
-caddy start -c /home/Caddyfile
-tail -f /dev/null;
+tail -f /dev/null

docker/devenv/files/nginx.conf

@@ -12,7 +12,7 @@ http {
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
-    keepalive_timeout 100;
+    keepalive_timeout 0;
     types_hash_max_size 2048;
     server_tokens off;
 
@@ -55,7 +55,7 @@ http {
     proxy_cache_key "$host$request_uri";
 
     server {
-        listen 4449 default_server;
+        listen 3449 default_server;
         server_name _;
 
         client_max_body_size 300M;
@@ -223,19 +223,17 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
-                add_header Cache-Control "public, max-age=604800" always; # 7 days
-            }
-
-            location ~* \.(js|css|wasm)$ {
-                add_header Cache-Control "no-store" always;
+            location ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
             }
 
             location ~ ^/[^/]+/(.*)$ {
                 return 301 " /404";
             }
 
-            add_header Cache-Control "no-store" always;
+            add_header Cache-Control "no-store";
+            add_header Connection close always;
+            # This header is what we need to use on prod
+            # add_header Cache-Control "public, must-revalidate, max-age=0";
             try_files $uri /index.html$is_args$args /index.html =404;
         }
     }

docker/devenv/files/selfsigned.crt

@@ -1,22 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDuzCCAqOgAwIBAgIUa3THJQSn1+ErK65g1jDL0tjUkBYwDQYJKoZIhvcNAQEL
-BQAwXzELMAkGA1UEBhMCVVMxDjAMBgNVBAgMBUxvY2FsMQ4wDAYDVQQHDAVMb2Nh
-bDEOMAwGA1UECgwFTG9jYWwxDDAKBgNVBAsMA0RldjESMBAGA1UEAwwJbG9jYWxo
-b3N0MB4XDTI1MTIwMjA4MjUyM1oXDTI2MTIwMjA4MjUyM1owXzELMAkGA1UEBhMC
-VVMxDjAMBgNVBAgMBUxvY2FsMQ4wDAYDVQQHDAVMb2NhbDEOMAwGA1UECgwFTG9j
-YWwxDDAKBgNVBAsMA0RldjESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG
-9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyVIlfpIPE+QyL/q7IQOilEA7wEOZ6wbsh2Fr
-59H1gSLFvgoCxI6RVUkQ/MFRnw/r1ZbAqRpc2xAl5a9Ml14q20Zlj6dAHsWX6O2J
-EwNsD18dQmX3BncnjV3yCZM2iQcMFKuXG4KQNdIQNNvdIgtlrHYp0ohS9s3XC7cj
-KxNrm/pW9EAXfn9AYDd/qER090L2E4ipP9m/5l3MjinNc4l2kpH9rLOgb79H0RLt
-PK3/KP8ErZhAvzdmDBAdM5Z5K37b+TfB/kSVNUKL6qyw5CCjlShERLhBNprlnRfz
-tHNIQ1RHq3qJJN19ZnJrLqICuQ5ztvj7hBDiOSV0LnmyKgXr6wIDAQABo28wbTAd
-BgNVHQ4EFgQUPL8WGf6z/wB8TimJBx1zybsIeikwHwYDVR0jBBgwFoAUPL8WGf6z
-/wB8TimJBx1zybsIeikwDwYDVR0TAQH/BAUwAwEB/zAaBgNVHREEEzARgglsb2Nh
-bGhvc3SHBH8AAAEwDQYJKoZIhvcNAQELBQADggEBACMMVyR3kbNxnzuUc2lahKH4
-cPXVWOsvCvnDtjzm41XmKjUJTbtjn3p5d/ZmLbZ4zzIQULfWXO3XG/HevkvVo0g6
-6pJXTXc6C6ZhFG0rIYMcPPzmGmalDV5n+lUaCVx5XbFFxvRQ7893auwhRATdwGs+
-xiMyYbE2w9otKqyDItmJZJ5nW6vmXJ42YHxlXF18u9U88xqtOSMd5xZahbsmw7Gg
-A4/o4TPoAX5QfA306sL443WaczsF7bmsTf9qcYa/3xxQkP5Seyqx8ePWpS22qysE
-jG6XPpymxb6sb2mVaFBAzhEMb/eBvE9nRAopxmB7uV4TbqC51K/U3uo6jFX4Jbw=
------END CERTIFICATE-----

docker/devenv/files/selfsigned.key

@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDJUiV+kg8T5DIv
-+rshA6KUQDvAQ5nrBuyHYWvn0fWBIsW+CgLEjpFVSRD8wVGfD+vVlsCpGlzbECXl
-r0yXXirbRmWPp0AexZfo7YkTA2wPXx1CZfcGdyeNXfIJkzaJBwwUq5cbgpA10hA0
-290iC2WsdinSiFL2zdcLtyMrE2ub+lb0QBd+f0BgN3+oRHT3QvYTiKk/2b/mXcyO
-Kc1ziXaSkf2ss6Bvv0fREu08rf8o/wStmEC/N2YMEB0zlnkrftv5N8H+RJU1Qovq
-rLDkIKOVKEREuEE2muWdF/O0c0hDVEereokk3X1mcmsuogK5DnO2+PuEEOI5JXQu
-ebIqBevrAgMBAAECggEABqtE+LNn8nW9v98jcc2IBjc2g4D5yVJaZYWxqGVJJ7T6
-Lfhw7Qf4AoZAHM9en9FMM7Ahw7hO2SboynoLJHyHGOp1FNQqiJptFNdBkjKr0rqI
-4pk0HK+3zLQO/4gz50gne0vP3qZtlorV5Jpf8e/Et3jWm9XOQcTB2e6AKL4k827B
-dv4Tld+/7PoZVXjahfrUWuIZr5mzyF1eUkD8sPOpdr3HJxSueqsOMjbG8XMRqCQ+
-5eCWWSW5yPQlMr7M7cXM+a0k73Xn1sKl7fP3/9byji25zxGUaMu5RA1kw0Oqseid
-RXuRxGphGZgnx1aFxDAPg3FtmGch7/Cc6WfqboOL0QKBgQD4GZO1gGaE8cg4lvuo
-ZUX2YJu6UJuNOmuhfvG3ui4WO9PHy3btc2q+3kutSuBcyIjhi+qbXasBcX/QOOJF
-udyTZc5PopNkJojS4JdXAZCiu5sKI3lp4DIt9qNISlXGgrJgdxGUO+DzarBctXdn
-BSwXFw5hcjJjl7wsPGQl1tBTQwKBgQDPuz5MEM5ZeUe9CT5sQDq/ld0u4aL5AHmx
-aaA2gzDgd9l2R5wHX6wLzjoVWXOmeqaYzJopt2JN4iXrtbjWkyePgZeZMyWoyJ/v
-clW9bi8HM9f9EpPr7czSj9sLUnsjd9cuTD+JuXK//jRGbRpw7r7nWtLHImjj6d2v
-APZRq0v2OQKBgBcESG/OObSbubeGSlKVEqiIzem7ELNJeDLDVCl3XE8zvbILbj0Z
-OA39EYhCKg5xjEFgeaNwTS0VGoZ2wIc3dv81sq4wpvvjl035CBFKU+DFBt0p7Vml
-MwKQnxVV0B9agLHyWe8mnvf2LeZr72ffUvfRa8QelA4pRYvVDnV0OF+BAoGAW6rM
-+tQPuvwB5DFIEozlX9XKHP4E5MyI5vktceDCmMtKcx92gup9CVif2Pv4ROaqzZK8
-FNyPzL6W7UTrpASb2H/fXgNsAudFbGyP2V/d8Ne34D1qeRoe4GwKxRxIqoYftpZ/
-E096i66pcsqCeINiSsWRbb6JesmgwbEzAScOBkECgYEA6O/Dibc9PaqRpaiE6Qut
-S3W/Rr1Pd1jbN4rOVI2TFCgMJQmc6jOdq2fCntR9acsa8HPx+djOlXTUBPKBZ/Ae
-p8umRdXVWcNMnwWVWHt7tsEuR/gYkxQ5xjXeS1VDPnEre9+EaevMBuVs8HdRsKQO
-uzvNGeAFEfqwIqn7CFQ+ndU=
------END PRIVATE KEY-----

docs/user-guide/account-teams/index.njk

@@ -10,19 +10,19 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
   <li>
     <a href="/user-guide/account-teams/your-account">
       <h2>Your account →</h2>
-      <p>Access your account settings and manage personal access tokens</p>
+      <p>Ways to start with Penpot</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/account-teams/teams">
       <h2>Teams →</h2>
-      <p>Create and manage your teams</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/account-teams/comments/">
       <h2>Comments →</h2>
-      <p>Give and receive feedback right over your designs</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
 </ul>

docs/user-guide/design-systems/index.njk

@@ -10,31 +10,31 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
   <li>
     <a href="/user-guide/design-systems/assets">
       <h2>Assets →</h2>
-      <p>Store elements and styles to easily reuse them</p>
+      <p>Ways to start with Penpot</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/design-systems/libraries">
       <h2>Libraries →</h2>
-      <p>Organize and manage your stored elements with Libraries</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/components">
       <h2>Components →</h2>
-      <p>Speed your design workflow with reusable components</p>
+      <p>Speed your design workflow</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/variants">
       <h2>Variants →</h2>
-      <p>Group components into a single, customizable one</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
   <li>
     <a href="/user-guide/design-systems/design-tokens">
       <h2>Design Tokens →</h2>
-      <p>Synchronize visual elements across your designs</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
 </ul>

docs/user-guide/design-systems/libraries.njk

@@ -5,7 +5,7 @@ desc: Use Penpot's libraries for reusable design elements! Learn to create, mana
 ---
 <h1 id="libraries">Libraries</h1>
 
-<p class="main-paragraph">Libraries may include components, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
+<p class="main-paragraph">Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
 
 <h3 id="file-libraries">File libraries</h3>
 <p>Each file has its own file library which is where the assets that belong to this file are stored.</p>

docs/user-guide/designing/index.njk

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

docs/user-guide/export-import/index.njk

@@ -10,13 +10,13 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
   <li>
     <a href="/user-guide/export-import/export-import-files/">
       <h2>Export/Import Penpot files →</h2>
-      <p>How to export and import your Penpot files</p>
+      <p>Ways to start with Penpot</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/export-import/exporting-layers/">
       <h2>Exporting layers →</h2>
-      <p>How to export elements from your design into different file formats</p>
+      <p>Exporting layers</p>
     </a>
   </li>
 </ul>

docs/user-guide/first-steps/index.njk

@@ -16,7 +16,7 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
     <li>
     <a href="/user-guide/first-steps/the-interface">
       <h2>Interface tour →</h2>
-      <p>Take a tour of Penpot's main areas</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
   <li>
@@ -28,7 +28,7 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
   <li>
     <a href="/user-guide/first-steps/info">
       <h2>Tutorials & info →</h2>
-      <p>Useful resources to better understand Penpot</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
 </ul>

docs/user-guide/index.njk

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

docs/user-guide/prototyping-testing/index.njk

@@ -10,13 +10,13 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
   <li>
     <a href="/user-guide/prototyping-testing/prototyping">
       <h2>Prototyping →</h2>
-      <p>Build interactive prototypes to mimic your product behaviour</p>
+      <p>Ways to start with Penpot</p>
     </a>
   </li>
     <li>
     <a href="/user-guide/prototyping-testing/testing-view-mode">
       <h2>Testing: View mode →</h2>
-      <p>Test your designs and play the interactions</p>
+      <p>Info of interest about Penpot</p>
     </a>
   </li>
 </ul>

exporter/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "packageManager": "yarn@4.12.0+sha512.f45ab632439a67f8bc759bf32ead036a1f413287b9042726b7cc4818b7b49e14e9423ba49b18f9e06ea4941c1ad062385b1d8760a8d5091a1a31e5f6219afca8",
   "repository": {
     "type": "git",
     "url": "https://github.com/penpot/penpot"
@@ -16,12 +16,11 @@
     "date-fns": "^4.1.0",
     "generic-pool": "^3.9.0",
     "inflation": "^2.1.0",
-    "ioredis": "^5.8.1",
-    "playwright": "^1.55.1",
-    "raw-body": "^3.0.1",
+    "ioredis": "^5.8.2",
+    "playwright": "^1.57.0",
+    "raw-body": "^3.0.2",
     "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/scripts/build

@@ -18,15 +18,4 @@ cp ../.yarnrc.yml target/;
 cp yarn.lock target/;
 cp package.json target/;
 
-cat <<EOF | tee target/setup
-#/usr/bin/env bash
-set -e;
-corepack enable;
-corepack install;
-yarn install
-yarn run playwright install chromium;
-EOF
-
-chmod +x target/setup;
-
 sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/app.js;

exporter/src/app/browser.cljs

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

exporter/src/app/handlers/export_shapes.cljs

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

exporter/src/app/handlers/resources.cljs

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

exporter/src/app/util/shell.cljs

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

exporter/yarn.lock

@@ -243,7 +243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.1.2":
+"bytes@npm:~3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
   checksum: 10c0/76d1c43cbd602794ad8ad2ae94095cddeb1de78c5dddaa7005c51af10b0176c69971a6d88e805a90c2b6550d76636e43c40d8427a808b8645ede885de4a0358e
@@ -442,7 +442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:2.0.0, depd@npm:~2.0.0":
+"depd@npm:~2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
   checksum: 10c0/58bd06ec20e19529b06f7ad07ddab60e504d9e0faca4bd23079fac2d279c3594334d736508dc350e06e510aba5e22e4594483b3a6562ce7c17dd797f4cc4ad2c
@@ -577,12 +577,11 @@ __metadata:
     date-fns: "npm:^4.1.0"
     generic-pool: "npm:^3.9.0"
     inflation: "npm:^2.1.0"
-    ioredis: "npm:^5.8.1"
-    playwright: "npm:^1.55.1"
-    raw-body: "npm:^3.0.1"
+    ioredis: "npm:^5.8.2"
+    playwright: "npm:^1.57.0"
+    raw-body: "npm:^3.0.2"
     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"
@@ -683,16 +682,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:2.0.0":
-  version: 2.0.0
-  resolution: "http-errors@npm:2.0.0"
+"http-errors@npm:~2.0.1":
+  version: 2.0.1
+  resolution: "http-errors@npm:2.0.1"
   dependencies:
-    depd: "npm:2.0.0"
-    inherits: "npm:2.0.4"
-    setprototypeof: "npm:1.2.0"
-    statuses: "npm:2.0.1"
-    toidentifier: "npm:1.0.1"
-  checksum: 10c0/fc6f2715fe188d091274b5ffc8b3657bd85c63e969daa68ccb77afb05b071a4b62841acb7a21e417b5539014dff2ebf9550f0b14a9ff126f2734a7c1387f8e19
+    depd: "npm:~2.0.0"
+    inherits: "npm:~2.0.4"
+    setprototypeof: "npm:~1.2.0"
+    statuses: "npm:~2.0.2"
+    toidentifier: "npm:~1.0.1"
+  checksum: 10c0/fb38906cef4f5c83952d97661fe14dc156cb59fe54812a42cd448fa57b5c5dfcb38a40a916957737bd6b87aab257c0648d63eb5b6a9ca9f548e105b6072712d4
   languageName: node
   linkType: hard
 
@@ -716,15 +715,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.7.0":
-  version: 0.7.0
-  resolution: "iconv-lite@npm:0.7.0"
-  dependencies:
-    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
-  checksum: 10c0/2382400469071c55b6746c531eed5fa4d033e5db6690b7331fb2a5f59a30d7a9782932e92253db26df33c1cf46fa200a3fbe524a2a7c62037c762283f188ec2f
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -734,6 +724,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iconv-lite@npm:~0.7.0":
+  version: 0.7.0
+  resolution: "iconv-lite@npm:0.7.0"
+  dependencies:
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10c0/2382400469071c55b6746c531eed5fa4d033e5db6690b7331fb2a5f59a30d7a9782932e92253db26df33c1cf46fa200a3fbe524a2a7c62037c762283f188ec2f
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -755,16 +754,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.4, inherits@npm:~2.0.3":
+"inherits@npm:~2.0.3, inherits@npm:~2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 10c0/4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2
   languageName: node
   linkType: hard
 
-"ioredis@npm:^5.8.1":
-  version: 5.8.1
-  resolution: "ioredis@npm:5.8.1"
+"ioredis@npm:^5.8.2":
+  version: 5.8.2
+  resolution: "ioredis@npm:5.8.2"
   dependencies:
     "@ioredis/commands": "npm:1.4.0"
     cluster-key-slot: "npm:^1.1.0"
@@ -775,7 +774,7 @@ __metadata:
     redis-errors: "npm:^1.2.0"
     redis-parser: "npm:^3.0.0"
     standard-as-callback: "npm:^2.1.0"
-  checksum: 10c0/4ed66444017150da027bce940a24bf726994691e2a7b3aa11d52f8aeb37f258068cc171af4d9c61247acafc28eb086fa8a7c79420b8e8d2907d2f74f39584465
+  checksum: 10c0/305e385f811d49908899e32c2de69616cd059f909afd9e0a53e54f596b1a5835ee3449bfc6a3c49afbc5a2fd27990059e316cc78f449c94024957bd34c826d88
   languageName: node
   linkType: hard
 
@@ -1106,27 +1105,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.55.1":
-  version: 1.55.1
-  resolution: "playwright-core@npm:1.55.1"
+"playwright-core@npm:1.57.0":
+  version: 1.57.0
+  resolution: "playwright-core@npm:1.57.0"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/39837a8c1232ec27486eac8c3fcacc0b090acc64310f7f9004b06715370fc426f944e3610fe8c29f17cd3d68280ed72c75f660c02aa5b5cf0eb34bab0031308f
+  checksum: 10c0/798e35d83bf48419a8c73de20bb94d68be5dde68de23f95d80a0ebe401e3b83e29e3e84aea7894d67fa6c79d2d3d40cc5bcde3e166f657ce50987aaa2421b6a9
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.55.1":
-  version: 1.55.1
-  resolution: "playwright@npm:1.55.1"
+"playwright@npm:^1.57.0":
+  version: 1.57.0
+  resolution: "playwright@npm:1.57.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.55.1"
+    playwright-core: "npm:1.57.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/b84a97b0d764403df512f5bbb10c7343974e151a28202cc06f90883a13e8a45f4491a0597f0ae5fb03a026746cbc0d200f0f32195bfaa381aee5ca5770626771
+  checksum: 10c0/ab03c99a67b835bdea9059f516ad3b6e42c21025f9adaa161a4ef6bc7ca716dcba476d287140bb240d06126eb23f889a8933b8f5f1f1a56b80659d92d1358899
   languageName: node
   linkType: hard
 
@@ -1161,15 +1160,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raw-body@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "raw-body@npm:3.0.1"
+"raw-body@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "raw-body@npm:3.0.2"
   dependencies:
-    bytes: "npm:3.1.2"
-    http-errors: "npm:2.0.0"
-    iconv-lite: "npm:0.7.0"
-    unpipe: "npm:1.0.0"
-  checksum: 10c0/892f4fbd21ecab7e2fed0f045f7af9e16df7e8050879639d4e482784a2f4640aaaa33d916a0e98013f23acb82e09c2e3c57f84ab97104449f728d22f65a7d79a
+    bytes: "npm:~3.1.2"
+    http-errors: "npm:~2.0.1"
+    iconv-lite: "npm:~0.7.0"
+    unpipe: "npm:~1.0.0"
+  checksum: 10c0/d266678d08e1e7abea62c0ce5864344e980fa81c64f6b481e9842c5beaed2cdcf975f658a3ccd67ad35fc919c1f6664ccc106067801850286a6cbe101de89f29
   languageName: node
   linkType: hard
 
@@ -1270,7 +1269,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setprototypeof@npm:1.2.0":
+"setprototypeof@npm:~1.2.0":
   version: 1.2.0
   resolution: "setprototypeof@npm:1.2.0"
   checksum: 10c0/68733173026766fa0d9ecaeb07f0483f4c2dc70ca376b3b7c40b7cda909f94b0918f6c5ad5ce27a9160bdfb475efaa9d5e705a11d8eaae18f9835d20976028bc
@@ -1368,10 +1367,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:2.0.1":
-  version: 2.0.1
-  resolution: "statuses@npm:2.0.1"
-  checksum: 10c0/34378b207a1620a24804ce8b5d230fea0c279f00b18a7209646d5d47e419d1cc23e7cbf33a25a1e51ac38973dc2ac2e1e9c647a8e481ef365f77668d72becfd0
+"statuses@npm:~2.0.2":
+  version: 2.0.2
+  resolution: "statuses@npm:2.0.2"
+  checksum: 10c0/a9947d98ad60d01f6b26727570f3bcceb6c8fa789da64fe6889908fe2e294d57503b14bf2b5af7605c2d36647259e856635cd4c49eab41667658ec9d0080ec3f
   languageName: node
   linkType: hard
 
@@ -1500,7 +1499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toidentifier@npm:1.0.1":
+"toidentifier@npm:~1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
   checksum: 10c0/93937279934bd66cc3270016dd8d0afec14fb7c94a05c72dc57321f8bd1fa97e5bea6d1f7c89e728d077ca31ea125b78320a616a6c6cd0e6b9cb94cb864381c1
@@ -1514,13 +1513,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^7.16.0":
-  version: 7.16.0
-  resolution: "undici@npm:7.16.0"
-  checksum: 10c0/efd867792e9f233facf9efa0a087e2d9c3e4415c0b234061b9b40307ca4fa01d945fee4d43c7b564e1b80e0d519bcc682f9f6e0de13c717146c00a80e2f1fb0f
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^4.0.0":
   version: 4.0.0
   resolution: "unique-filename@npm:4.0.0"
@@ -1539,7 +1531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unpipe@npm:1.0.0":
+"unpipe@npm:~1.0.0":
   version: 1.0.0
   resolution: "unpipe@npm:1.0.0"
   checksum: 10c0/193400255bd48968e5c5383730344fbb4fa114cdedfab26e329e50dd2d81b134244bb8a72c6ac1b10ab0281a58b363d06405632c9d49ca9dfd5e90cbd7d0f32c

frontend/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch

@@ -1,18 +0,0 @@
-diff --git a/lib/zip-fs.js b/lib/zip-fs.js
-index 1444c0f00e5f1ad6c13521f90a7f3c6659d81116..90e38baef5365c2abbcb9337f7ab37f800e883a4 100644
---- a/lib/zip-fs.js
-+++ b/lib/zip-fs.js
-@@ -33,12 +33,7 @@ import { initShimAsyncCodec } from "./core/util/stream-codec-shim.js";
- import { terminateWorkers } from "./core/codec-pool.js";
- 
- let baseURL;
--try {
--	baseURL = import.meta.url;
--	// eslint-disable-next-line no-unused-vars
--} catch (_) {
--	// ignored
--}
-+
- configure({ baseURL });
- configureWebWorker(configure);
- 

frontend/.yarn/patches/@zip.js-zip.js-npm-2.8.11-b131c96df8.patch

@@ -0,0 +1,17 @@
+diff --git a/lib/zip-core-base.js b/lib/zip-core-base.js
+index 142155c8c3ab1a6caa7c370e8a2931a954556ca9..61b0fe6efb91312f437750e0002218f218afad8b 100644
+--- a/lib/zip-core-base.js
++++ b/lib/zip-core-base.js
+@@ -28,12 +28,6 @@
+ 
+ import { configure } from "./core/configuration.js";
+ 
+-try {
+-	configure({ baseURI: import.meta.url });
+-} catch {
+-	// ignored
+-}
+-
+ export * from "./zip-core-reader.js";
+ export * from "./zip-core-writer.js";
+ export {

frontend/deps.edn

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

frontend/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "packageManager": "yarn@4.12.0+sha512.f45ab632439a67f8bc759bf32ead036a1f413287b9042726b7cc4818b7b49e14e9423ba49b18f9e06ea4941c1ad062385b1d8760a8d5091a1a31e5f6219afca8",
   "browserslist": [
     "defaults"
   ],
@@ -14,10 +14,10 @@
     "url": "https://github.com/penpot/penpot"
   },
   "resolutions": {
-    "@zip.js/zip.js@npm:^2.7.44": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
     "@vitejs/plugin-react": "^4.2.0",
     "playwright": "1.52.0",
-    "playwright-core": "1.52.0"
+    "playwright-core": "1.52.0",
+    "@zip.js/zip.js@npm:^2.7.44": "patch:@zip.js/zip.js@npm%3A2.8.11#~/.yarn/patches/@zip.js-zip.js-npm-2.8.11-b131c96df8.patch"
   },
   "scripts": {
     "build:app:assets": "node ./scripts/build-app-assets.js",
@@ -53,83 +53,74 @@
     "watch:storybook:assets": "node ./scripts/watch-storybook.js"
   },
   "devDependencies": {
-    "@playwright/test": "1.52.0",
-    "@storybook/addon-docs": "10.0.4",
-    "@storybook/addon-themes": "10.0.4",
-    "@storybook/addon-vitest": "10.0.4",
-    "@storybook/react-vite": "10.0.4",
-    "@types/node": "^22.15.21",
+    "@penpot/draft-js": "portal:./packages/draft-js",
+    "@penpot/mousetrap": "portal:./packages/mousetrap",
+    "@penpot/plugins-runtime": "1.3.2",
+    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/text-editor": "portal:./text-editor",
+    "@playwright/test": "1.57.0",
+    "@storybook/addon-docs": "10.1.0",
+    "@storybook/addon-themes": "10.1.0",
+    "@storybook/addon-vitest": "10.1.0",
+    "@storybook/react-vite": "10.1.0",
+    "@tokens-studio/sd-transforms": "1.2.11",
+    "@types/node": "^22.19.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
-    "autoprefixer": "^10.4.21",
+    "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.8.11#~/.yarn/patches/@zip.js-zip.js-npm-2.8.11-b131c96df8.patch",
+    "autoprefixer": "^10.4.22",
+    "compression": "^1.8.1",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.25.9",
+    "date-fns": "^4.1.0",
+    "esbuild": "^0.25.12",
+    "eventsource-parser": "^3.0.6",
     "express": "^5.1.0",
     "fancy-log": "^2.0.0",
     "getopts": "^2.3.0",
     "gettext-parser": "^8.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-gzip": "^1.4.2",
-    "gulp-mustache": "^5.0.0",
-    "gulp-postcss": "^10.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-svg-sprite": "^2.0.3",
-    "jsdom": "^27.0.0",
-    "map-stream": "0.0.7",
-    "marked": "^15.0.12",
-    "mkdirp": "^3.0.1",
-    "mustache": "^4.2.0",
-    "nodemon": "^3.1.10",
-    "npm-run-all": "^4.1.5",
-    "p-limit": "^6.2.0",
-    "playwright": "1.56.1",
-    "postcss": "^8.5.4",
-    "postcss-clean": "^1.2.2",
-    "prettier": "3.5.3",
-    "pretty-time": "^1.1.0",
-    "prop-types": "^15.8.1",
-    "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
-    "sass-embedded": "^1.89.0",
-    "storybook": "10.0.4",
-    "svg-sprite": "^2.0.4",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.0",
-    "wasm-pack": "^0.13.1",
-    "watcher": "^2.3.1",
-    "workerpool": "^9.3.2"
-  },
-  "dependencies": {
-    "@penpot/draft-js": "portal:./vendor/draft-js",
-    "@penpot/hljs": "portal:./vendor/hljs",
-    "@penpot/mousetrap": "portal:./vendor/mousetrap",
-    "@penpot/plugins-runtime": "1.3.2",
-    "@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",
-    "compression": "^1.8.1",
-    "date-fns": "^4.1.0",
-    "eventsource-parser": "^3.0.6",
+    "highlight.js": "^11.10.0",
     "js-beautify": "^1.15.4",
+    "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "map-stream": "0.0.7",
+    "marked": "^17.0.1",
+    "mkdirp": "^3.0.1",
+    "mustache": "^4.2.0",
+    "nodemon": "^3.1.11",
+    "npm-run-all": "^4.1.5",
     "opentype.js": "^1.3.4",
+    "p-limit": "^7.2.0",
+    "playwright": "1.57.0",
+    "postcss": "^8.5.6",
+    "postcss-clean": "^1.2.2",
     "postcss-modules": "^6.0.1",
+    "prettier": "3.7.1",
+    "pretty-time": "^1.1.0",
+    "prop-types": "^15.8.1",
     "randomcolor": "^0.6.2",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-error-boundary": "^6.0.0",
     "react-virtualized": "^9.22.6",
+    "rimraf": "^6.1.2",
     "rxjs": "8.0.0-alpha.14",
-    "sax": "^1.4.1",
+    "sass": "^1.89.0",
+    "sass-embedded": "^1.89.0",
+    "sax": "^1.4.3",
     "source-map-support": "^0.5.21",
+    "storybook": "10.1.0",
     "style-dictionary": "5.0.0-rc.1",
+    "svg-sprite": "^2.0.4",
     "tdigest": "^0.1.2",
     "tinycolor2": "^1.6.0",
-    "ua-parser-js": "2.0.5",
+    "typescript": "^5.9.3",
+    "ua-parser-js": "2.0.6",
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "wasm-pack": "^0.13.1",
+    "watcher": "^2.3.1",
+    "workerpool": "^10.0.1",
     "xregexp": "^5.1.2"
   }
 }

frontend/packages/draft-js/index.js

@@ -16,7 +16,9 @@ export const {
   RichTextEditorUtil,
   SelectionState,
   convertFromRaw,
-  convertToRaw
+  convertToRaw,
+  EditorBlock,
+  Editor
 } = pkg;
 
 import DraftPasteProcessor from 'draft-js/lib/DraftPasteProcessor.js';

frontend/packages/draft-js/package.json

@@ -8,7 +8,8 @@
   "author": "Andrey Antukh",
   "license": "MPL-2.0",
   "dependencies": {
-    "draft-js": "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0"
+    "draft-js": "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0",
+    "immutable": "^5.1.4"
   },
   "peerDependencies": {
     "react": ">=0.17.0",

frontend/packages/draft-js/yarn.lock

@@ -173,12 +173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@penpot/draft-js-wrapper@workspace:.":
+"@penpot/draft-js@workspace:.":
   version: 0.0.0-use.local
-  resolution: "@penpot/draft-js-wrapper@workspace:."
+  resolution: "@penpot/draft-js@workspace:."
   dependencies:
     draft-js: "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0"
     esbuild: "npm:^0.24.0"
+    immutable: "npm:^5.1.4"
   peerDependencies:
     react: ">=0.17.0"
     react-dom: ">=0.17.0"
@@ -320,6 +321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "immutable@npm:5.1.4"
+  checksum: 10c0/f1c98382e4cde14a0b218be3b9b2f8441888da8df3b8c064aa756071da55fbed6ad696e5959982508456332419be9fdeaf29b2e58d0eadc45483cc16963c0446
+  languageName: node
+  linkType: hard
+
 "immutable@npm:~3.7.4":
   version: 3.7.6
   resolution: "immutable@npm:3.7.6"

frontend/patches/@zip.js__zip.js.patch

@@ -0,0 +1,17 @@
+diff --git a/lib/zip-core-base.js b/lib/zip-core-base.js
+index 142155c8c3ab1a6caa7c370e8a2931a954556ca9..61b0fe6efb91312f437750e0002218f218afad8b 100644
+--- a/lib/zip-core-base.js
++++ b/lib/zip-core-base.js
+@@ -28,12 +28,6 @@
+ 
+ import { configure } from "./core/configuration.js";
+ 
+-try {
+-	configure({ baseURI: import.meta.url });
+-} catch {
+-	// ignored
+-}
+-
+ export * from "./zip-core-reader.js";
+ export * from "./zip-core-writer.js";
+ export {

frontend/playwright.config.js

@@ -22,9 +22,9 @@ export default defineConfig({
   workers: 1,
   /* Timeout for expects (longer in CI) */
 
-  timeout: 60000,
+  timeout: 80000,
   expect: {
-    timeout: process.env.CI ? 30000 : 5000,
+    timeout: process.env.CI ? 40000 : 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?ts=*";
+    const url = "**/js/config.js";
     return await page.route(url, (route) =>
       route.fulfill({
         status: 200,

frontend/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+patchedDependencies:
+  '@zip.js/zip.js': patches/@zip.js__zip.js.patch
+
+
+shamefullyHoist: true
+recursiveInstall: true

frontend/resources/templates/index.mustache

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

frontend/resources/templates/rasterizer.mustache

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

frontend/resources/templates/render.mustache

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

frontend/scripts/_helpers.js

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

frontend/scripts/build

@@ -20,32 +20,35 @@ echo $PATH
 set -ex
 
 corepack enable;
-corepack install;
+corepack install || exit 1;
 yarn install || exit 1;
 
-rm -rf target/dist;
 rm -rf resources/public;
+rm -rf target/dist;
 
 mkdir -p resources/public;
+mkdir -p target/dist;
 
-pushd ../render-wasm;
-./build
-popd
+yarn run build:app:main $EXTRA_PARAMS || exit 1
+
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    yarn run build:wasm || exit 1;
+fi
 
-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 "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+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;
 
-mkdir -p target/dist;
-rsync -avr resources/public/ target/dist/
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./resources/public/js/render_wasm.js;
+fi
 
-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;
+rsync -avr resources/public/ target/dist/;
 
 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: "iife",
+  format: "esm",
   banner: {
-    js: '"use strict"; var global = globalThis;',
+    js: '"use strict";\nvar global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
   plugins: [fixReactVirtualized, rebuildNotify],

frontend/shadow-cljs.edn

@@ -6,13 +6,12 @@
 
  :builds
  {:main
-  {:target :browser
+  {:target :esm
    :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 []}
@@ -20,7 +19,7 @@
     :main
     {:entries [app.main app.plugins.api]
      :depends-on #{:shared}
-     :init-fn app.main/init}
+     :exports {init app.main/init}}
 
     :util-highlight
     {:entries [app.util.code-highlight]
@@ -50,12 +49,12 @@
     :render
     {:entries [app.render]
      :depends-on #{:shared}
-     :init-fn app.render/init}
+     :exports {init app.render/init}}
 
     :rasterizer
     {:entries [app.rasterizer]
      :depends-on #{:shared}
-     :init-fn app.rasterizer/init}}
+     :exports {init app.rasterizer/init}}}
 
    :js-options
    {:entry-keys ["module" "browser" "main"]
@@ -75,15 +74,14 @@
     :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 :browser
+  {:target :esm
    :output-dir "resources/public/js/worker/"
    :asset-path "/js/worker"
    :devtools {:browser-inject :main
@@ -94,7 +92,6 @@
    {: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/main.js"))
+  (obj/get global "penpotWorkerURI" "/js/worker.js"))
 
 (defn external-feature-flag
   [flag value]
@@ -189,11 +189,7 @@
         (true? thumbnail?) (u/join (dm/str id "/thumbnail"))
         (false? thumbnail?) (u/join (dm/str id)))))))
 
-(defn resolve-href
-  [resource]
-  (let [version (get version :full)
-        href    (-> public-uri
-                    (u/ensure-path-slash)
-                    (u/join resource)
-                    (get :path))]
-    (str href "?version=" version)))
+(defn resolve-static-asset
+  [path]
+  (let [uri (u/join public-uri path)]
+    (assoc uri :query (dm/str "version=" (:full version)))))

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

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

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

@@ -8,7 +8,6 @@
   (: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]
@@ -484,7 +483,7 @@
 
 (defn delete-access-token
   [{:keys [id] :as params}]
-  (us/assert! ::us/uuid id)
+  (assert (uuid? id))
   (ptk/reify ::delete-access-token
     ptk/WatchEvent
     (watch [_ _ _]

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

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

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

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

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

@@ -20,9 +20,7 @@
    [app.common.path-names :as cpn]
    [app.common.transit :as t]
    [app.common.types.component :as ctc]
-   [app.common.types.components-list :as ctkl]
    [app.common.types.shape :as cts]
-   [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
    [app.main.data.changes :as dch]
    [app.main.data.comments :as dcmt]
@@ -553,6 +551,7 @@
                component-id (:component-id shape)
                undo-id (js/Symbol)]
 
+
            (when valid?
              (if (ctc/is-variant-container? shape)
                ;; Rename the full variant when it is a variant container
@@ -567,43 +566,6 @@
                   (dwl/rename-component component-id clean-name))
                 (dwu/commit-undo-transaction undo-id))))))))))
 
-(defn rename-shape-or-variant
-  ([id name]
-   (rename-shape-or-variant nil nil id name))
-  ([file-id page-id id name]
-   (ptk/reify ::rename-shape-or-variant
-     ptk/WatchEvent
-     (watch [_ state _]
-       (let [file-id (d/nilv file-id (:current-file-id state))
-             page-id (d/nilv page-id (:current-page-id state))
-
-             file-data (dsh/lookup-file-data state file-id)
-             shape
-             (-> (dsh/lookup-page-objects state file-id page-id)
-                 (get id))
-
-             is-variant? (ctc/is-variant? shape)
-             variant-id (when is-variant? (:variant-id shape))
-             variant-name (when is-variant? (:variant-name shape))
-             component-id (:component-id shape)
-             component (ctkl/get-component file-data (:component-id shape))
-             variant-properties (:variant-properties component)]
-         (cond
-           (and variant-name (ctv/valid-properties-formula? name))
-           (rx/of (dwva/update-properties-names-and-values
-                   component-id variant-id variant-properties (ctv/properties-formula->map name))
-                  (dwva/remove-empty-properties variant-id)
-                  (dwva/update-error component-id))
-
-           variant-name
-           (rx/of (dwva/update-properties-names-and-values
-                   component-id variant-id variant-properties {})
-                  (dwva/remove-empty-properties variant-id)
-                  (dwva/update-error component-id name))
-
-           :else
-           (rx/of (end-rename-shape id name))))))))
-
 ;; --- Update Selected Shapes attrs
 
 (defn update-selected-shapes

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

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

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

@@ -128,16 +128,14 @@
             related-components (cfv/find-variant-components data objects variant-id)
 
             props              (-> related-components last :variant-properties)
-            valid-pos?         (> (count props) pos)
-            prop-name          (when valid-pos? (-> props (nth pos) :name))
+            prop-name          (-> props (nth pos) :name)
 
-            changes            (when valid-pos?
-                                 (-> (pcb/empty-changes it page-id)
-                                     (pcb/with-objects objects)
-                                     (pcb/with-library-data data)
-                                     (clvp/generate-update-property-name variant-id pos new-name)))
+            changes (-> (pcb/empty-changes it page-id)
+                        (pcb/with-objects objects)
+                        (pcb/with-library-data data)
+                        (clvp/generate-update-property-name variant-id pos new-name))
             undo-id (js/Symbol)]
-        (when (and valid-pos? (not= prop-name new-name))
+        (when (not= prop-name new-name)
           (rx/of
            (dwu/start-undo-transaction undo-id)
            (dch/commit-changes changes)

frontend/src/app/main/ui.cljs

@@ -31,27 +31,28 @@
    [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-component app.main.ui.auth/auth))
+  (mf/lazy #(mod/load 'app.main.ui.auth/auth-page*)))
 
-(def verify-token-page
-  (mf/lazy-component app.main.ui.auth.verify-token/verify-token))
+(def verify-token-page*
+  (mf/lazy #(mod/load 'app.main.ui.auth.verify-token/verify-token-page*)))
 
 (def viewer-page*
-  (mf/lazy-component app.main.ui.viewer/viewer*))
+  (mf/lazy #(mod/load 'app.main.ui.viewer/viewer-page*)))
 
 (def dashboard-page*
-  (mf/lazy-component app.main.ui.dashboard/dashboard*))
+  (mf/lazy #(mod/load 'app.main.ui.dashboard/dashboard-page*)))
 
 (def settings-page*
-  (mf/lazy-component app.main.ui.settings/settings*))
+  (mf/lazy #(mod/load 'app.main.ui.settings/settings-page*)))
 
 (def workspace-page*
-  (mf/lazy-component app.main.ui.workspace/workspace*))
+  (mf/lazy #(mod/load 'app.main.ui.workspace/workspace-page*)))
 
 (mf/defc workspace-legacy-redirect*
   {::mf/props :obj
@@ -189,7 +190,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,8 +19,7 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(mf/defc auth
-  {::mf/props :obj}
+(mf/defc auth*
   [{:keys [route]}]
   (let [section (dm/get-in route [:data :name])
         is-register (or
@@ -69,3 +68,9 @@
 
       (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] :as props}]
-  (let [token (get-in route [:query-params :token])
+(mf/defc verify-token*
+  [{:keys [route]}]
+  (let [token     (get-in route [:query-params :token])
         bad-token (mf/use-state false)]
 
     (mf/with-effect []
@@ -99,3 +99,8 @@
       [:> 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,24 +8,28 @@
   (: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]
-   [shadow.lazy :as lazy]))
+   [rumext.v2 :as mf]))
 
 (def highlight-fn
-  (lazy/loadable app.util.code-highlight/highlight!))
+  (delay (modules/load-fn '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)]
-        (p/let [highlight-fn (lazy/load highlight-fn)]
-          (highlight-fn node))))
+        (->> @highlight-fn
+             (p/fmap (fn [f] (f)))
+             (p/fnly (fn [f cause]
+                       (if cause
+                         (js/console.error cause)
+                         (f 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,7 +14,6 @@
    [app.main.ui.components.dropdown :refer [dropdown-content*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
-   [app.util.globals :as ug]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.timers :as tm]
@@ -54,13 +53,14 @@
 (def ^:private valid-option?
   (sm/lazy-validator schema:option))
 
-(mf/defc context-menu-inner*
-  [{:keys [on-close options selectable selected
+(mf/defc context-menu*
+  [{:keys [show on-close options selectable selected
            top left fixed min-width origin width]
     :as props}]
 
   (assert (every? valid-option? options) "expected valid options")
   (assert (fn? on-close) "missing `on-close` prop")
+  (assert (boolean? show) "missing `show` prop")
   (assert (vector? options) "missing `options` prop")
 
   (let [width          (d/nilv width "initial")
@@ -80,15 +80,14 @@
         offset-x       (get state :offset-x)
         offset-y       (get state :offset-y)
         levels         (get state :levels)
-        internal-id    (mf/use-id)
 
         on-local-close
         (mf/use-fn
          (mf/deps on-close)
          (fn []
-           (swap! state* assoc :levels [{:parent nil :options options}])
-           (when (fn? on-close)
-             (on-close))))
+           (swap! state* assoc :levels [{:parent nil
+                                         :options options}])
+           (on-close)))
 
         props
         (mf/spread-props props {:on-close on-local-close})
@@ -217,22 +216,11 @@
       (swap! state* assoc :levels [{:parent nil
                                     :options options}]))
 
-    (mf/with-effect [internal-id]
-      (ug/dispatch! (ug/event "penpot:context-menu:open" #js {:id internal-id})))
-
-    (mf/with-effect [internal-id on-local-close]
-      (letfn [(on-event [event]
-                (when-let [detail (unchecked-get event "detail")]
-                  (when (not= internal-id (unchecked-get detail "id"))
-                    (on-local-close event))))]
-        (ug/listen "penpot:context-menu:open" on-event)
-        (partial ug/unlisten "penpot:context-menu:open" on-event)))
-
     (mf/with-effect [ids]
       (tm/schedule-on-idle
        #(dom/focus! (dom/get-element (first ids)))))
 
-    (when (some? levels)
+    (when (and show (some? levels))
       [:> dropdown-content* props
        (let [level   (peek levels)
              options (:options level)
@@ -241,7 +229,7 @@
          [:div {:class (stl/css-case
                         :is-selectable selectable
                         :context-menu true
-                        :is-open true
+                        :is-open show
                         :fixed fixed)
                 :style {:top (+ top offset-y)
                         :left (+ left offset-x)}
@@ -253,7 +241,7 @@
                 :role "menu"
                 :ref check-menu-offscreen}
 
-           (when parent
+           (when-let [parent (:parent level)]
              [:*
               [:li {:id "go-back-sub-option"
                     :class (stl/css :context-menu-item)
@@ -268,7 +256,7 @@
 
               [:li {:class (stl/css :separator)}]])
 
-           (for [[index option] (d/enumerate options)]
+           (for [[index option] (d/enumerate (:options level))]
              (let [name        (:name option)
                    id          (:id option)
                    sub-options (:options option)
@@ -309,12 +297,3 @@
                            :data-testid id}
                        name
                        [:span {:class (stl/css :submenu-icon)} deprecated-icon/arrow]])]))))]])])))
-
-(mf/defc context-menu*
-  {::mf/private true}
-  [{:keys [show] :as props}]
-
-  (assert (boolean? show) "expected `show` prop to be a boolean")
-
-  (when ^boolean show
-    [:> context-menu-inner* props]))

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

@@ -247,7 +247,6 @@
           (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)
@@ -313,3 +312,8 @@
         :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,16 +151,14 @@
 
 (mf/defc menu-team-icon*
   [{:keys [subscription-type]}]
-  [:span {:class (stl/css :subscription-icon-wrapper)}
-   [:> icon* {:icon-id (case subscription-type
-                         "unlimited" i/character-u
-                         "enterprise" i/character-e)
-              :class (stl/css :subscription-icon)
-              :size "s"
-              :title (if (= subscription-type "unlimited")
-                       (tr "subscription.dashboard.power-up.unlimited-plan")
-                       (tr "subscription.dashboard.power-up.enterprise-plan"))
-              :data-testid "subscription-icon"}]])
+  [:span {:class (stl/css :subscription-icon)
+          :title (if (= subscription-type "unlimited")
+                   (tr "subscription.dashboard.power-up.unlimited-plan")
+                   (tr "subscription.dashboard.power-up.enterprise-plan"))
+          :data-testid "subscription-icon"}
+   (case subscription-type
+     "unlimited" i/character-u
+     "enterprise" i/character-e)])
 
 (mf/defc main-menu-power-up*
   [{:keys [close-sub-menu]}]

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

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

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

@@ -106,14 +106,14 @@
        (when (not= 0 count-libraries)
          (if (pos? (count references))
            [:*
-            (when (and (string? scd-msg) (not= scd-msg ""))
-              [:p {:class (stl/css :modal-scd-msg)} scd-msg])
-
-            [:ul {:class (stl/css :element-list)}
-             (for [[file-id file-name] references]
-               [:li {:class (stl/css :list-item)
-                     :key (dm/str file-id)}
-                [:span "- " file-name]])]
+            [:div
+             (when (and (string? scd-msg) (not= scd-msg ""))
+               [:h3 {:class (stl/css :modal-scd-msg)} scd-msg])
+             [:ul {:class (stl/css :element-list)}
+              (for [[file-id file-name] references]
+                [:li {:class (stl/css :list-item)
+                      :key (dm/str file-id)}
+                 [:span "- " file-name]])]]
             (when (and (string? hint) (not= hint ""))
               [:> context-notification* {:level :info
                                          :appearance :ghost}

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

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

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

@@ -173,7 +173,7 @@
    [:id {:optional true} :string]
    [:offset {:optional true} :int]
    [:delay {:optional true} :int]
-   [:content [:or fn? :string map?]]
+   [:content [:or fn? :string]]
    [:placement {:optional true}
     [:maybe [:enum "top" "bottom" "left" "right" "top-right" "bottom-right" "bottom-left" "top-left"]]]])
 

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

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

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/code.scss

@@ -14,6 +14,7 @@
   padding-bottom: deprecated.$s-16;
   overflow-y: auto;
   overflow-x: hidden;
+  scrollbar-gutter: stable;
   padding-inline: var(--sp-m);
 }
 

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

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

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

@@ -30,8 +30,8 @@
 
 .tool-windows {
   block-size: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--sp-s);
 }
 
@@ -124,7 +124,8 @@
 .inspect-tab-switcher-label {
   @include use-typography("body-medium");
   color: var(--color-foreground-primary);
-  flex: 0 1 40%;
+  flex: 0;
+  min-inline-size: fit-content;
 }
 
 .inspect-tab-switcher-controls {
@@ -150,6 +151,7 @@
 }
 
 .inspect-content {
+  flex: 1;
   overflow: hidden;
 }
 
@@ -157,5 +159,6 @@
   --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
 
+  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
   overflow: auto;
 }

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

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

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

@@ -1,11 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_utils.scss" as *;
-
-.styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
-}

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

@@ -6,15 +6,6 @@
 
 @use "ds/typography.scss" as *;
 
-// TODO: this must be a custom property in the design system
-:global(.light) {
-  --low-emphasis-background: #fafafa;
-}
-
-:global(.default) {
-  --low-emphasis-background: #121214;
-}
-
 .style-box {
   --title-gap: var(--sp-xs);
   --title-padding: var(--sp-s);
@@ -22,9 +13,12 @@
   --arrow-color: var(--color-foreground-secondary);
   --box-border-color: var(--color-background-primary);
 
+  // TODO: this must be a custom property in the design system
+  --lowEmphasis-background: #121214;
+
   padding-block: var(--sp-s);
   padding-inline: var(--sp-m);
-  background-color: var(--low-emphasis-background);
+  background-color: var(--lowEmphasis-background);
 
   border-block-end: 2px solid var(--box-border-color);
 }

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

@@ -30,7 +30,6 @@
    [app.main.ui.releases.v2-1]
    [app.main.ui.releases.v2-10]
    [app.main.ui.releases.v2-11]
-   [app.main.ui.releases.v2-12]
    [app.main.ui.releases.v2-2]
    [app.main.ui.releases.v2-3]
    [app.main.ui.releases.v2-4]
@@ -103,4 +102,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.12")))
+  (rc/render-release-notes (assoc params :version "2.11")))

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

@@ -1,162 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.releases.v2-12
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.data.macros :as dm]
-   [app.main.ui.releases.common :as c]
-   [rumext.v2 :as mf]))
-
-(defmethod c/render-release-notes "2.12"
-  [{:keys [slide klass next finish navigate version]}]
-  (mf/html
-   (case slide
-     :start
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-slide-0.jpg"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Penpot 2.12 is here!"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "What’s new in Penpot?"]
-
-          [:div {:class (stl/css :version-tag)}
-           (dm/str "Version " version)]]
-
-         [:div {:class (stl/css :features-block)}
-          [:span {:class (stl/css :feature-title)}
-           "Better tokens visibility and more!"]
-
-          [:p  {:class (stl/css :feature-content)}
-           "This release focuses on making your everyday workflow feel clearer, faster and more intuitive. Tokens are now easier to see and apply, appearing directly where you work and giving the designs better context during code inspection. Variants gain a more natural flow thanks to simple boolean toggles that remove friction when switching states. And PDF export becomes more flexible, letting you choose exactly which boards to share so your files match the story you want to tell."]
-
-          [:p  {:class (stl/css :feature-content)}
-           "Together, these enhancements bring greater control and fluidity to your entire design process."]
-
-          [:p  {:class (stl/css :feature-content)}
-           "Let’s dive in!"]]
-
-         [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
-
-     0
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-tokens-sidebar.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Better tokens visibility"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Better tokens visibility"]]
-
-         [:div {:class (stl/css :feature)}
-          [:p {:class (stl/css :feature-content)}
-           "Design systems should be both powerful and effortless to use. This release brings tokens closer to where you work, making them easier to apply and easier to understand."]
-
-          [:span {:class (stl/css :feature-title)}
-           "Apply color tokens right from the sidebar"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Your color tokens now appear directly in the properties sidebar, making it faster to apply or unapply tokens from the design tab. No more digging: now you can use tokens within your design flow."]
-
-          [:span {:class (stl/css :feature-title)}
-           "See token names in the Inspect panel"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Developers now get a clearer context during handoff. The Inspect panel shows the actual token used in your design, in a similar way to how styles are displayed. This small detail reduces ambiguity, aligns everyone on the same language, and strengthens collaboration across the team."]]
-
-         [:div {:class (stl/css :navigation)}
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
-
-     1
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-variants.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Simpler boolean variants"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Simpler boolean variants"]]
-         [:div {:class (stl/css :feature)}
-
-          [:p {:class (stl/css :feature-content)}
-           "Variants are central to building flexible, scalable components. With this release, boolean properties become far easier to work with."]
-
-          [:span {:class (stl/css :feature-title)}
-           "A simple toggle for boolean values"]
-
-          [:p {:class (stl/css :feature-content)}
-           "Binary states now use a clean toggle, to be able to switch visually,  instead of a dropdown. This makes adjusting component states more intuitive and speeds up working with multiple instances."]
-
-          [:p {:class (stl/css :feature-content)}
-           "It’s a subtle improvement, but it removes friction you feel hundreds of times a week, and makes component work flow more naturally."]]
-
-         [:div {:class (stl/css :navigation)}
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
-
-
-     2
-     [:div {:class (stl/css-case :modal-overlay true)}
-      [:div.animated {:class klass}
-       [:div {:class (stl/css :modal-container)}
-        [:img {:src "images/features/2.12-export-pdf.gif"
-               :class (stl/css :start-image)
-               :border "0"
-               :alt "Smarter PDF export"}]
-
-        [:div {:class (stl/css :modal-content)}
-         [:div {:class (stl/css :modal-header)}
-          [:h1 {:class (stl/css :modal-title)}
-           "Smarter PDF export"]]
-         [:div {:class (stl/css :feature)}
-
-          [:p {:class (stl/css :feature-content)}
-           "Exporting your work is now more precise and flexible."]
-
-          [:span {:class (stl/css :feature-title)}
-           "Select specific boards when exporting"]
-
-
-          [:p {:class (stl/css :feature-content)}
-           "You’re now in control of which boards make it into your PDF. Share just the final screens, just a flow, just the workshop materials. This streamlined export flow adapts to the way real teams work: share the story you want to tell, with exactly the boards you need."]]
-
-         [:div {:class (stl/css :navigation)}
-
-          [:& c/navigation-bullets
-           {:slide slide
-            :navigate navigate
-            :total 3}]
-
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-

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

@@ -1,102 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend .modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flexCenter;
-  @include deprecated.headlineSmallTypography;
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headlineLargeTypography;
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.bodyLargeTypography;
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.bodyMediumTypography;
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.bodyMediumTypography;
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend .button-primary;
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}

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

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

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

@@ -624,7 +624,6 @@
 ;; --- 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
@@ -643,3 +642,8 @@
     [:> 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-size on-resize-palette}])
+       [:& palette {:layout layout
+                    :on-change-palette-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-page*
+(mf/defc workspace-inner*
   {::mf/private true}
   [{:keys [page-id file-id file layout wglobal]}]
   (let [page-ref (mf/with-memo [file-id page-id]
@@ -252,10 +252,16 @@
                             :touch-action "none"}}
           [:> context-menu*]
           (if (and file-loaded? page-id)
-            [:> workspace-page*
+            [:> workspace-inner*
              {: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])
+