WIP

.circleci/config.yml

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

.github/workflows/build-nitrate-module.yml

@@ -1,21 +0,0 @@
-name: _NITRATE MODULE
-
-on:
-  schedule:
-    - cron: '36 5-20 * * 1-5'
-
-jobs:
-  build-bundle:
-    uses: ./.github/workflows/build-bundle.yml
-    secrets: inherit
-    with:
-      gh_ref: "nitrate-module"
-      build_wasm: "yes"
-      build_storybook: "yes"
-
-  build-docker:
-    needs: build-bundle
-    uses: ./.github/workflows/build-docker.yml
-    secrets: inherit
-    with:
-      gh_ref: "nitrate-module"

.github/workflows/build-tag.yml

@@ -21,22 +21,6 @@ jobs:
     with:
       gh_ref: ${{ github.ref_name }}
 
-  notify:
-    name: Notifications
-    runs-on: ubuntu-24.04
-    needs: build-docker
-
-    steps:
-      - name: Notify Mattermost
-        uses: mattermost/action-mattermost-notify@master
-        with:
-          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
-          MATTERMOST_CHANNEL: bot-alerts-cicd
-          TEXT: |
-            🐳 *[PENPOT] Docker image available.*
-            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-            @infra
-
   publish-final-tag:
     if: ${{ !contains(github.ref_name, '-RC') && !contains(github.ref_name, '-alpha') && !contains(github.ref_name, '-beta')  && contains(github.ref_name, '.') }}
     needs: build-docker

.github/workflows/tests.yml

@@ -8,6 +8,8 @@ on:
   pull_request:
     types:
       - opened
+      - edited
+      - reopened
       - synchronize
   push:
     branches:
@@ -15,12 +17,12 @@ on:
       - staging
 
 concurrency:
-  group: ${{ github.event.pull_request.number || github.ref }}
+  group: ${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
   lint:
-    name: "Linter"
+    name: "Code Linter"
     runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
@@ -30,7 +32,10 @@ jobs:
 
       - name: Check clojure code format
         run: |
-          ./scripts/lint
+          corepack enable;
+          corepack install;
+          yarn install
+          yarn run fmt:clj:check
 
   test-common:
     name: "Common Tests"
@@ -49,7 +54,10 @@ jobs:
       - name: Run tests on NODE
         working-directory: ./common
         run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run test;
 
   test-frontend:
     name: "Frontend Tests"
@@ -63,36 +71,25 @@ jobs:
       - name: Unit Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run test;
 
       - name: Component Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test-components
+            yarn run playwright install chromium --with-deps;
+            yarn run build:storybook
 
-  test-render-wasm:
-    name: "Render WASM Tests"
-    runs-on: ubuntu-24.04
-    container: penpotapp/devenv:latest
+            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"
 
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Format
-        working-directory: ./render-wasm
+      - name: Check SCSS Format
+        working-directory: ./frontend
         run: |
-          cargo fmt --check
-
-      - name: Lint
-        working-directory: ./render-wasm
-        run: |
-          ./lint
-
-      - name: Test
-        working-directory: ./render-wasm
-        run: |
-          ./test
+          yarn run lint:scss;
 
   test-backend:
     name: "Backend Tests"
@@ -145,7 +142,11 @@ jobs:
       - name: Run tests
         working-directory: ./library
         run: |
-          ./scripts/test
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run build:bundle;
+          yarn run test;
 
   build-integration:
     name: "Build Integration Bundle"
@@ -159,7 +160,17 @@ jobs:
       - name: Build Bundle
         working-directory: ./frontend
         run: |
-          ./scripts/build 0.0.0
+          corepack enable;
+          corepack install;
+          yarn install
+          yarn run build:app:assets
+          yarn run build:app
+          yarn run build:app:libs
+
+      - name: Build WASM
+        working-directory: "./render-wasm"
+        run: |
+          ./build release
 
       - name: Store Bundle Cache
         uses: actions/cache@v4
@@ -167,7 +178,6 @@ jobs:
           key: "integration-bundle-${{ github.sha }}"
           path: frontend/resources/public
 
-
   test-integration-1:
     name: "Integration Tests 1/4"
     runs-on: ubuntu-24.04
@@ -187,7 +197,11 @@ jobs:
       - name: Run Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test-e2e --shard="1/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard="1/4";
 
       - name: Upload test result
         uses: actions/upload-artifact@v4
@@ -217,7 +231,11 @@ jobs:
       - name: Run Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test-e2e --shard="2/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "2/4";
 
       - name: Upload test result
         uses: actions/upload-artifact@v4
@@ -247,7 +265,11 @@ jobs:
       - name: Run Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test-e2e --shard="3/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "3/4";
 
       - name: Upload test result
         uses: actions/upload-artifact@v4
@@ -259,7 +281,7 @@ jobs:
           retention-days: 3
 
   test-integration-4:
-    name: "Integration Tests 4/4"
+    name: "Integration Tests 3/4"
     runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
     needs: build-integration
@@ -277,7 +299,11 @@ jobs:
       - name: Run Tests
         working-directory: ./frontend
         run: |
-          ./scripts/test-e2e --shard="4/4";
+          corepack enable;
+          corepack install;
+          yarn install;
+          yarn run playwright install chromium --with-deps;
+          yarn run test:e2e -x --workers=2 --reporter=list --shard "4/4";
 
       - name: Upload test result
         uses: actions/upload-artifact@v4

.gitignore

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

CHANGES.md

@@ -1,26 +1,5 @@
 # CHANGELOG
 
-## 2.13.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
-- Fix mask issues with component swap (by @dfelinto) [Github #7675](https://github.com/penpot/penpot/issues/7675)
-
-### :sparkles: New features & Enhancements
-
-- Make i18n translation files load on-demand [Taiga #11474](https://tree.taiga.io/project/penpot/us/11474)
-
-### :bug: Bugs fixed
-
-- Fix problem when drag+duplicate a full grid [Taiga #12565](https://tree.taiga.io/project/penpot/issue/12565)
-- Fix problem when pasting elements in reverse flex layout [Taiga #12460](https://tree.taiga.io/project/penpot/issue/12460)
-- Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
-
-
 ## 2.12.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -82,7 +61,6 @@ example. It's still usable as before, we just removed the example.
 ### :heart: Community contributions (Thank you!)
 
 - Ensure consistent snap behavior across all zoom levels [Github #7774](https://github.com/penpot/penpot/pull/7774) by [@Tokytome](https://github.com/Tokytome)
-- Fix crash in token grid view due to tooltip validation (by @dfelinto) [Github #7887](https://github.com/penpot/penpot/pull/7887)
 
 ### :sparkles: New features & Enhancements
 
@@ -109,11 +87,6 @@ example. It's still usable as before, we just removed the example.
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
-- Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
-- Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
-- Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
-- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
-- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
 
 ## 2.11.1
 

backend/resources/app/email/feedback/en.txt

@@ -1,8 +1,7 @@
 From: {{profile.fullname}} <{{profile.email}}> / {{profile.id}}
 Subject: {{feedback-subject}}
 Type: {{feedback-type}}
-
-{% if feedback-error-href %}
+{%- if feedback-error-href %}
 HREF: {{feedback-error-href}}
 {% endif -%}
 

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)

backend/src/app/loggers/audit/archive_task.clj

@@ -57,7 +57,7 @@
                                   :uid uuid/zero})
         body    (t/encode {:events events})
         headers {"content-type" "application/transit+json"
-                 "origin" (str (cf/get :public-uri))
+                 "origin" (cf/get :public-uri)
                  "cookie" (u/map->query-string {:auth-token token})}
         params  {:uri uri
                  :timeout 12000

backend/src/app/util/template.clj

@@ -9,7 +9,7 @@
    [app.common.exceptions :as ex]
    [selmer.parser :as sp]))
 
-;; (sp/cache-off!)
+(sp/cache-off!)
 
 (defn render
   [path context]

backend/test/backend_tests/storage_test.clj

@@ -318,35 +318,3 @@
     ;; check that we have all no objects
     (let [rows (th/db-exec! ["select * from storage_object where deleted_at is null"])]
       (t/is (= 0 (count rows))))))
-
-(t/deftest tempfile-bucket-test
-  (let [storage (-> (:app.storage/storage th/*system*)
-                    (configure-storage-backend))
-        content1 (sto/content "content1")
-        now      (ct/now)
-
-        object1  (sto/put-object! storage {::sto/content content1
-                                           ::sto/touched-at (ct/plus now {:minutes 1})
-                                           :bucket "tempfile"
-                                           :content-type "text/plain"})]
-
-
-    (binding [ct/*clock* (clock/fixed now)]
-      (let [res (th/run-task! :storage-gc-touched {})]
-        (t/is (= 0 (:freeze res)))
-        (t/is (= 0 (:delete res)))))
-
-
-    (binding [ct/*clock* (clock/fixed (ct/plus now {:minutes 1}))]
-      (let [res (th/run-task! :storage-gc-touched {})]
-        (t/is (= 0 (:freeze res)))
-        (t/is (= 1 (:delete res)))))
-
-
-    (binding [ct/*clock* (clock/fixed (ct/plus now {:hours 1}))]
-      (let [res (th/run-task! :storage-gc-deleted {})]
-        (t/is (= 0 (:deleted res)))))
-
-    (binding [ct/*clock* (clock/fixed (ct/plus now {:hours 2}))]
-      (let [res (th/run-task! :storage-gc-deleted {})]
-        (t/is (= 0 (:deleted res)))))))

common/deps.edn

@@ -17,7 +17,7 @@
   org.slf4j/slf4j-api {:mvn/version "2.0.17"}
   pl.tkowalcz.tjahzi/log4j2-appender {:mvn/version "0.9.40"}
 
-  selmer/selmer {:mvn/version "1.12.69"}
+  selmer/selmer {:mvn/version "1.12.62"}
   criterium/criterium {:mvn/version "0.4.6"}
 
   metosin/jsonista {:mvn/version "0.3.13"}
@@ -48,8 +48,12 @@
   com.sun.mail/jakarta.mail {:mvn/version "2.0.2"}
   org.la4j/la4j {:mvn/version "0.6.0"}
 
+  ;; exception printing
+  fipp/fipp {:mvn/version "0.6.29"}
+
   me.flowthing/pp {:mvn/version "2024-11-13.77"}
 
+
   io.aviso/pretty {:mvn/version "1.4.4"}
   environ/environ {:mvn/version "1.2.0"}}
  :paths ["src" "vendor" "target/classes"]

common/scripts/test

@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-yarn run test;

common/src/app/common/data/macros.cljc

@@ -9,10 +9,10 @@
   (:refer-clojure :exclude [get-in select-keys str with-open max])
   #?(:cljs (:require-macros [app.common.data.macros]))
   (:require
-   #?(:clj [cljs.analyzer.api :as aapi])
    #?(:clj [clojure.core :as c]
       :cljs [cljs.core :as c])
    [app.common.data :as d]
+   [cljs.analyzer.api :as aapi]
    [cuerdas.core :as str]))
 
 (defmacro select-keys
@@ -44,43 +44,42 @@
   [& params]
   `(str/concat ~@params))
 
-#?(:clj
-   (defmacro export
-     "A helper macro that allows reexport a var in a current namespace."
-     [v]
-     (if (boolean (:ns &env))
+(defmacro export
+  "A helper macro that allows reexport a var in a current namespace."
+  [v]
+  (if (boolean (:ns &env))
 
-       ;; Code for ClojureScript
-       (let [mdata    (aapi/resolve &env v)
-             arglists (second (get-in mdata [:meta :arglists]))
-             sym      (symbol (c/name v))
-             andsym   (symbol "&")
-             procarg  #(if (= % andsym) % (gensym "param"))]
-         (if (pos? (count arglists))
-           `(def
-              ~(with-meta sym (:meta mdata))
-              (fn ~@(for [args arglists]
-                      (let [args (map procarg args)]
-                        (if (some #(= andsym %) args)
-                          (let [[sargs dargs] (split-with #(not= andsym %) args)]
-                            `([~@sargs ~@dargs] (apply ~v ~@sargs ~@(rest dargs))))
-                          `([~@args] (~v ~@args)))))))
-           `(def ~(with-meta sym (:meta mdata)) ~v)))
+    ;; Code for ClojureScript
+    (let [mdata    (aapi/resolve &env v)
+          arglists (second (get-in mdata [:meta :arglists]))
+          sym      (symbol (c/name v))
+          andsym   (symbol "&")
+          procarg  #(if (= % andsym) % (gensym "param"))]
+      (if (pos? (count arglists))
+        `(def
+           ~(with-meta sym (:meta mdata))
+           (fn ~@(for [args arglists]
+                   (let [args (map procarg args)]
+                     (if (some #(= andsym %) args)
+                       (let [[sargs dargs] (split-with #(not= andsym %) args)]
+                         `([~@sargs ~@dargs] (apply ~v ~@sargs ~@(rest dargs))))
+                       `([~@args] (~v ~@args)))))))
+        `(def ~(with-meta sym (:meta mdata)) ~v)))
 
-       ;; Code for Clojure
-       (let [vr (resolve v)
-             m  (meta vr)
-             n  (:name m)
-             n  (with-meta n
-                  (cond-> {}
-                    (:dynamic m) (assoc :dynamic true)
-                    (:protocol m) (assoc :protocol (:protocol m))))]
-         `(let [m# (meta ~vr)]
-            (def ~n (deref ~vr))
-            (alter-meta! (var ~n) merge (dissoc m# :name))
-            ;; (when (:macro m#)
-            ;;   (.setMacro (var ~n)))
-            ~vr)))))
+    ;; Code for Clojure
+    (let [vr (resolve v)
+          m  (meta vr)
+          n  (:name m)
+          n  (with-meta n
+               (cond-> {}
+                 (:dynamic m) (assoc :dynamic true)
+                 (:protocol m) (assoc :protocol (:protocol m))))]
+      `(let [m# (meta ~vr)]
+         (def ~n (deref ~vr))
+         (alter-meta! (var ~n) merge (dissoc m# :name))
+         ;; (when (:macro m#)
+         ;;   (.setMacro (var ~n)))
+         ~vr))))
 
 (defmacro fmt
   "String interpolation helper. Can only be used with strings known at

common/src/app/common/exceptions.cljc

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

common/src/app/common/logging.cljc

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

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

@@ -12,15 +12,13 @@
    [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]
@@ -28,7 +26,6 @@
    [app.common.types.library :as ctl]
    [app.common.types.page :as ctp]
    [app.common.types.pages-list :as ctpl]
-   [app.common.types.path.segment :as segment]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
@@ -38,7 +35,8 @@
    [app.common.types.typography :as cty]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
-   [clojure.set :as set]))
+   [clojure.set :as set]
+   [clojure.spec.alpha :as s]))
 
 ;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
 (log/set-level! :warn)
@@ -475,10 +473,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync file with library"
@@ -512,10 +510,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync local components with library"
@@ -1878,44 +1876,6 @@
                    roperations'
                    uoperations')))))))
 
-(defn- set-path-new-values
-  [current-shape prev-shape transform]
-  (let [new-content   (segment/transform-content
-                       (:content current-shape)
-                       (gmt/transform-in (gpt/point 0 0) transform))
-        new-points    (-> (segment/content->selrect new-content)
-                          (grc/rect->points))
-        points-center (gco/points->center new-points)
-        new-selrect   (gsh/calculate-selrect new-points points-center)
-        shape         (assoc current-shape
-                             :content new-content
-                             :points new-points
-                             :selrect new-selrect)
-
-        prev-center   (segment/content-center (:content prev-shape))
-        delta         (gpt/subtract points-center (first new-points))
-        new-pos       (gpt/subtract prev-center delta)]
-    (gsh/absolute-move shape new-pos)))
-
-(defn- switch-path-change-value
-  [prev-shape           ;; The shape before the switch
-   current-shape        ;; The shape after the switch (a clean copy)
-   ref-shape            ;; The referenced shape on the main component
-                        ;; before the switch
-   attr]
-  (let [old-width (-> ref-shape :selrect :width)
-        new-width (-> prev-shape :selrect :width)
-
-        old-height (-> ref-shape :selrect :height)
-        new-height (-> prev-shape :selrect :height)
-
-        transform (-> (gpt/point (/ new-width old-width)
-                                 (/ new-height old-height))
-                      (gmt/scale-matrix))
-
-        shape     (set-path-new-values current-shape prev-shape transform)]
-    (get shape attr)))
-
 
 (defn- switch-text-change-value
   [prev-content         ;; The :content of the text before the switch
@@ -2067,10 +2027,6 @@
                (= :content attr)
                (touched attr-group))
 
-              path-change?
-              (and (= :path (:type current-shape))
-                   (contains? #{:points :selrect :content} attr))
-
               ;; position-data is a special case because can be affected by :geometry-group and :content-group
               ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
               ;; so it's calculated again
@@ -2099,12 +2055,6 @@
                                             (:content origin-ref-shape)
                                             touched)
 
-                  path-change?
-                  (switch-path-change-value previous-shape
-                                            current-shape
-                                            origin-ref-shape
-                                            attr)
-
                   :else
                   (get previous-shape attr)))
 
@@ -2491,13 +2441,11 @@
                (ctk/get-swap-slot))
           (constantly false))
 
-        ;; In the cases where the swapped shape was the first element of the masked group it would make the group to loose the
-        ;; mask property as part of the sanitization check on generate-delete-shapes, passing "ignore-mask" to prevent this
         [all-parents changes]
         (-> changes
             (cls/generate-delete-shapes
              file page objects (d/ordered-set (:id shape))
-             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true}))
+             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]
@@ -2867,15 +2815,13 @@
         ids-map        (into {} (map #(vector % (uuid/next))) all-ids)
 
 
-        ;; If there is an alt-duplication we change to root
-        ;; For variants so the copy is made as a child of root
+        ;; If there is an alt-duplication of a variant, change its parent to root
+        ;; so the copy is made as a child of root
         ;; This is because inside a variant-container can't be a copy
-        ;; For other shape this way the layout won't be changed when duplicated
-        ;; and if you move outside the layout will not change
         shapes  (map (fn [shape]
-                       (cond-> shape
-                         alt-duplication?
-                         (assoc :parent-id uuid/zero :frame-id uuid/zero)))
+                       (if (and alt-duplication? (ctk/is-variant? shape))
+                         (assoc shape :parent-id uuid/zero :frame-id nil)
+                         shape))
                      shapes)
 
 

common/src/app/common/logic/shapes.cljc

@@ -123,10 +123,8 @@
                         ;; ignore-children-fn is used to ignore some descendants
                         ;; on the deletion process. It should receive a shape and
                         ;; return a boolean
-                        ignore-children-fn
-                        ignore-mask]
-                 :or {ignore-children-fn (constantly false)
-                      ignore-mask false}}]
+                        ignore-children-fn]
+                 :or {ignore-children-fn (constantly false)}}]
    (let [objects (pcb/get-objects changes)
          data    (pcb/get-library-data changes)
          page-id (pcb/get-page-id changes)
@@ -164,20 +162,18 @@
          lookup  (d/getf objects)
 
          groups-to-unmask
-         (when-not ignore-mask
-           (reduce (fn [group-ids id]
-                    ;; When the shape to delete is the mask of a masked group,
-                    ;; the mask condition must be removed, and it must be
-                    ;; converted to a normal group.
-                     (let [obj    (lookup id)
-                           parent (lookup (:parent-id obj))]
-                       (if (and (:masked-group parent)
-                                (= id (first (:shapes parent))))
-                         (conj group-ids (:id parent))
-                         group-ids)))
-                   #{}
-                   ids-to-delete)
-           [])
+         (reduce (fn [group-ids id]
+                  ;; When the shape to delete is the mask of a masked group,
+                  ;; the mask condition must be removed, and it must be
+                  ;; converted to a normal group.
+                   (let [obj    (lookup id)
+                         parent (lookup (:parent-id obj))]
+                     (if (and (:masked-group parent)
+                              (= id (first (:shapes parent))))
+                       (conj group-ids (:id parent))
+                       group-ids)))
+                 #{}
+                 ids-to-delete)
 
          interacting-shapes
          (filter (fn [shape]

common/src/app/common/schema.cljc

@@ -8,8 +8,6 @@
   (:refer-clojure :exclude [deref merge parse-uuid parse-long parse-double parse-boolean type keys])
   #?(:cljs (:require-macros [app.common.schema :refer [ignoring]]))
   (:require
-   #?(:clj [malli.dev.pretty :as mdp])
-   #?(:clj [malli.dev.virhe :as v])
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.pprint :as pp]
@@ -21,6 +19,8 @@
    [clojure.core :as c]
    [cuerdas.core :as str]
    [malli.core :as m]
+   [malli.dev.pretty :as mdp]
+   [malli.dev.virhe :as v]
    [malli.error :as me]
    [malli.generator :as mg]
    [malli.registry :as mr]
@@ -245,30 +245,27 @@
                                      :level (d/nilv level 8)
                                      :length (d/nilv length 12)})))))
 
-#?(:clj
-   (defmethod v/-format ::schemaless-explain
-     [_ explanation printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]}))
+(defmethod v/-format ::schemaless-explain
+  [_ explanation printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]})
 
-#?(:clj
-   (defmethod v/-format ::explain
-     [_ {:keys [schema] :as explanation} printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
-             (v/-block "Schema" (v/-visit schema printer) printer)]}))
+(defmethod v/-format ::explain
+  [_ {:keys [schema] :as explanation} printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
+          (v/-block "Schema" (v/-visit schema printer) printer)]})
 
-#?(:clj
-   (defn pretty-explain
-     "A helper that allows print a console-friendly output for the explain;
-  should not be used for other purposes"
-     [explain & {:keys [variant message]
-                 :or {variant ::explain
-                      message "Validation Error"}}]
-     (let [explain (fn [] (me/with-error-messages explain))]
-       ((mdp/prettifier variant message explain default-options)))))
+(defn pretty-explain
+  "A helper that allows print a console-friendly output for the
+  explain; should not be used for other purposes"
+  [explain & {:keys [variant message]
+              :or {variant ::explain
+                   message "Validation Error"}}]
+  (let [explain (fn [] (me/with-error-messages explain))]
+    ((mdp/prettifier variant message explain default-options))))
 
 (defmacro ignoring
   [expr]
@@ -284,20 +281,7 @@
 (defn check-fn
   "Create a predefined check function"
   [s & {:keys [hint type code]}]
-  (let [s          #?(:clj
-                      (schema s)
-                      :cljs
-                      (try
-                        (schema s)
-                        (catch :default cause
-                          (let [data (ex-data cause)]
-                            (if (= :malli.core/invalid-schema (:type data))
-                              (throw (ex-info
-                                      (str "Invalid schema\n"
-                                           (pp/pprint-str (:data data)))
-                                      {}))
-                              (throw cause))))))
-
+  (let [s          (schema s)
         validator* (delay (m/validator s))
         explainer* (delay (m/explainer s))
         hint       (or ^boolean hint "check error")
@@ -315,13 +299,6 @@
                                   ::explain explain}))))
         value))))
 
-(defn coercer
-  [schema & {:as opts}]
-  (let [decode-fn (lazy-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.
@@ -865,6 +842,38 @@
                                     choices))]
                {:pred pred}))})
 
+;; (register!
+;;  {:type ::inst
+;;   :pred tm/instant?
+;;   :type-properties
+;;   {:title "inst"
+;;    :description "Satisfies Inst protocol"
+;;    :error/message "should be an instant"
+;;    :gen/gen (->> (sg/small-int :min 0 :max 100000)
+;;                  (sg/fmap (fn [v] (tm/parse-inst v))))
+
+;;    :decode/string tm/parse-inst
+;;    :encode/string tm/format-inst
+;;    :decode/json tm/parse-inst
+;;    :encode/json tm/format-inst
+;;    ::oapi/type "string"
+;;    ::oapi/format "iso"}})
+
+;; (register!
+;;  {:type ::timestamp
+;;   :pred tm/instant?
+;;   :type-properties
+;;   {:title "inst"
+;;    :description "Satisfies Inst protocol, the same as ::inst but encodes to epoch"
+;;    :error/message "should be an instant"
+;;    :gen/gen (->> (sg/small-int)
+;;                  (sg/fmap (fn [v] (tm/parse-inst v))))
+;;    :decode/string tm/parse-inst
+;;    :encode/string inst-ms
+;;    :decode/json tm/parse-inst
+;;    :encode/json inst-ms
+;;    ::oapi/type "string"
+;;    ::oapi/format "number"}})
 
 #?(:clj
    (register!
@@ -942,7 +951,7 @@
   :pred #(and (string? %) (not (str/blank? %)))
   :property-pred
   (fn [{:keys [min max] :as props}]
-    (if (or min max)
+    (if (seq props)
       (fn [value]
         (let [size (count value)]
           (cond
@@ -1016,9 +1025,6 @@
 (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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

common/src/app/common/types/tokens_lib.cljc

@@ -1575,10 +1575,10 @@ Will return a value that matches this schema:
                          (if (map? shadow)
                            (let [legacy-shadow-type (get "type" shadow)]
                              (-> shadow
-                                 (set/rename-keys {"x" :offset-x
-                                                   "offsetX" :offset-x
-                                                   "y" :offset-y
-                                                   "offsetY" :offset-y
+                                 (set/rename-keys {"x" :offsetX
+                                                   "offsetX" :offsetX
+                                                   "y" :offsetY
+                                                   "offsetY" :offsetY
                                                    "blur" :blur
                                                    "spread" :spread
                                                    "color" :color
@@ -1589,7 +1589,7 @@ Will return a value that matches this schema:
                                                    (= "false" %) false
                                                    (= legacy-shadow-type "innerShadow") true
                                                    :else false))
-                                 (select-keys [:offset-x :offset-y :blur :spread :color :inset])))
+                                 (select-keys [:offsetX :offsetY :blur :spread :color :inset])))
                            shadow))]
     (cond
       ;; Reference value - keep as string
@@ -1860,8 +1860,8 @@ Will return a value that matches this schema:
     (mapv (fn [shadow]
             (if (map? shadow)
               (-> shadow
-                  (set/rename-keys {:offset-x "offsetX"
-                                    :offset-y "offsetY"
+                  (set/rename-keys {:offsetX "offsetX"
+                                    :offsetY "offsetY"
                                     :blur "blur"
                                     :spread "spread"
                                     :color "color"

common/src/app/common/version.cljc

@@ -14,8 +14,7 @@
 (defn parse
   [data]
   (cond
-    (or (str/starts-with? data "%")
-        (= data "develop"))
+    (str/starts-with? data "%")
     {:full "develop"
      :branch "develop"
      :base "0.0.0"

common/test/common_tests/types/tokens_lib_test.cljc

@@ -1897,15 +1897,15 @@
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-single")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "2px", :blur "4px", :spread "0", :color "#000", :inset false}]
+           (t/is (= [{:offsetX "0", :offsetY "2px", :blur "4px", :spread "0", :color "#000", :inset false}]
                     (:value token)))))
 
        (t/testing "multiple shadow token"
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-multiple")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "2px", :blur "4px", :spread "0", :color "#000", :inset true}
-                     {:offset-x "0", :offset-y "8px", :blur "16px", :spread "0", :color "#000", :inset true}]
+           (t/is (= [{:offsetX "0", :offsetY "2px", :blur "4px", :spread "0", :color "#000", :inset true}
+                     {:offsetX "0", :offsetY "8px", :blur "16px", :spread "0", :color "#000", :inset true}]
                     (:value token)))))
 
        (t/testing "shadow token with reference"
@@ -1918,7 +1918,7 @@
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-with-type")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "4px", :blur "8px", :spread "0", :color "rgba(0,0,0,0.2)", :inset false}]
+           (t/is (= [{:offsetX "0", :offsetY "4px", :blur "8px", :spread "0", :color "rgba(0,0,0,0.2)", :inset false}]
                     (:value token)))))
 
        (t/testing "shadow token with description"
@@ -1937,14 +1937,14 @@
                                      (ctob/make-token
                                       {:name "shadow.single"
                                        :type :shadow
-                                       :value [{:offset-x "0" :offset-y "2px" :blur "4px" :spread "0" :color "#0000001A"}]
+                                       :value [{:offsetX "0" :offsetY "2px" :blur "4px" :spread "0" :color "#0000001A"}]
                                        :description "A single shadow"})
                                      "shadow.multiple"
                                      (ctob/make-token
                                       {:name "shadow.multiple"
                                        :type :shadow
-                                       :value [{:offset-x "0" :offset-y "2px" :blur "4px" :spread "0" :color "#0000001A"}
-                                               {:offset-x "0" :offset-y "8px" :blur "16px" :spread "0" :color "#0000001A"}]})
+                                       :value [{:offsetX "0" :offsetY "2px" :blur "4px" :spread "0" :color "#0000001A"}
+                                               {:offsetX "0" :offsetY "8px" :blur "16px" :spread "0" :color "#0000001A"}]})
                                      "shadow.ref"
                                      (ctob/make-token
                                       {:name "shadow.ref"
@@ -1991,7 +1991,7 @@
                                        (ctob/make-token
                                         {:name "shadow.test"
                                          :type :shadow
-                                         :value [{:offset-x "1" :offset-y "1" :blur "1" :spread "1" :color "red" :inset true}]
+                                         :value [{:offsetX "1" :offsetY "1" :blur "1" :spread "1" :color "red" :inset true}]
                                          :description "Round trip test"})
                                        "shadow.ref"
                                        (ctob/make-token

docker/devenv/Dockerfile

@@ -25,6 +25,48 @@ RUN set -ex; \
         binutils \
         build-essential autoconf libtool pkg-config
 
+
+################################################################################
+## IMAGE MAGICK
+################################################################################
+
+FROM base AS build-imagemagick
+
+ENV IMAGEMAGICK_VERSION=7.1.1-47 \
+    DEBIAN_FRONTEND=noninteractive
+
+RUN set -ex; \
+    apt-get -qq update; \
+    apt-get -qq upgrade; \
+    apt-get -qqy --no-install-recommends install \
+        libltdl-dev \
+        libpng-dev \
+        libjpeg-dev \
+        libtiff-dev \
+        libwebp-dev \
+        libopenexr-dev \
+        libfftw3-dev \
+        libzip-dev \
+        liblcms2-dev \
+        liblzma-dev \
+        libzstd-dev \
+        libheif-dev \
+        librsvg2-dev \
+    ; \
+    rm -rf /var/lib/apt/lists/*
+
+RUN set -eux; \
+    curl -LfsSo /tmp/magick.tar.gz https://github.com/ImageMagick/ImageMagick/archive/refs/tags/${IMAGEMAGICK_VERSION}.tar.gz; \
+    mkdir -p /tmp/magick; \
+    cd /tmp/magick; \
+    tar -xf /tmp/magick.tar.gz --strip-components=1; \
+    ./configure  --prefix=/opt/imagick; \
+    make -j 2; \
+    make install; \
+    rm -rf /opt/imagick/lib/libMagick++*; \
+    rm -rf /opt/imagick/include; \
+    rm -rf /opt/imagick/share;
+
 ################################################################################
 ## NODE SETUP
 ################################################################################
@@ -59,45 +101,13 @@ 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
 ################################################################################
 
 FROM base AS setup-jvm
 
-ENV CLOJURE_VERSION=1.12.3.1577
+ENV CLOJURE_VERSION=1.12.2.1565
 
 RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
@@ -375,7 +385,7 @@ ENV LANG='C.UTF-8' \
     RUSTUP_HOME="/opt/rustup" \
     PATH="/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
 
-COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
+COPY --from=build-imagemagick /opt/imagick /opt/imagick
 COPY --from=setup-jvm /opt/jdk /opt/jdk
 COPY --from=setup-jvm /opt/clojure /opt/clojure
 COPY --from=setup-node /opt/node /opt/node
@@ -383,7 +393,6 @@ COPY --from=setup-utils /opt/utils /opt/utils
 COPY --from=setup-rust /opt/cargo /opt/cargo
 COPY --from=setup-rust /opt/rustup /opt/rustup
 COPY --from=setup-rust /opt/emsdk /opt/emsdk
-COPY --from=setup-caddy /usr/bin/caddy /usr/bin/caddy
 
 COPY files/nginx.conf /etc/nginx/nginx.conf
 COPY files/nginx-mime.types /etc/nginx/mime.types
@@ -394,9 +403,6 @@ COPY files/vimrc          /root/.vimrc
 COPY files/tmux.conf      /root/.tmux.conf
 COPY files/sudoers        /etc/sudoers
 
-COPY files/Caddyfile           /home/
-COPY files/selfsigned.crt      /home/
-COPY files/selfsigned.key      /home/
 COPY files/start-tmux.sh       /home/start-tmux.sh
 COPY files/start-tmux-back.sh  /home/start-tmux-back.sh
 COPY files/entrypoint.sh       /home/entrypoint.sh

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,11 +67,6 @@ services:
       - PENPOT_LDAP_ATTRS_FULLNAME=cn
       - PENPOT_LDAP_ATTRS_PHOTO=jpegPhoto
 
-    networks:
-      default:
-        aliases:
-          - main
-
   minio:
     image: "minio/minio:RELEASE.2025-04-03T14-56-28Z"
     command: minio server /mnt/data --console-address ":9001"
@@ -85,6 +78,10 @@ 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 65;
     types_hash_max_size 2048;
     server_tokens off;
 
@@ -38,11 +38,11 @@ http {
 
     gzip_vary on;
     gzip_proxied any;
-    gzip_comp_level 6;
+    gzip_comp_level 3;
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
 
-    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml application/wasm;
+    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml;
 
     map $http_upgrade $connection_upgrade {
         default upgrade;
@@ -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,26 @@ 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/config.js$ {
+                add_header Cache-Control "no-store, no-cache, max-age=0" always;
             }
 
-            location ~* \.(js|css|wasm)$ {
-                add_header Cache-Control "no-store" always;
+            location ~* \.(js|css|jpg|svg|png|mjs|map)$ {
+                # We set no cache only on devenv
+                add_header Cache-Control "no-store, no-cache, max-age=0" always;
+                # add_header Cache-Control "max-age=604800" always; # 7 days
+            }
+
+            location ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
             }
 
             location ~ ^/[^/]+/(.*)$ {
                 return 301 " /404";
             }
 
-            add_header Cache-Control "no-store" always;
+            add_header Last-Modified $date_gmt;
+            add_header Cache-Control "no-store, no-cache, max-age=0" always;
+            if_modified_since off;
             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-----

docker/images/Dockerfile.frontend

@@ -7,10 +7,8 @@ RUN set -ex; \
     useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot; \
     mkdir -p /opt/data/assets; \
     chown -R penpot:penpot /opt/data; \
-    mkdir -p /etc/nginx/overrides/main.d/; \
     mkdir -p /etc/nginx/overrides/http.d/; \
     mkdir -p /etc/nginx/overrides/server.d/; \
-    mkdir -p /etc/nginx/overrides/assets.d/; \
     mkdir -p /etc/nginx/overrides/location.d/;
 
 ARG BUNDLE_PATH="./bundle-frontend/"

docker/images/files/nginx.conf.template

@@ -42,11 +42,11 @@ http {
     gzip_vary on;
     gzip_proxied any;
     gzip_static on;
-    gzip_comp_level 6;
+    gzip_comp_level 4;
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
 
-    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml application/wasm;
+    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml;
 
     proxy_buffer_size 16k;
     proxy_busy_buffers_size 24k; # essentially, proxy_buffer_size + 2 small buffers of 4k
@@ -110,8 +110,6 @@ http {
             recursive_error_pages on;
             proxy_intercept_errors on;
             error_page 301 302 307 = @handle_redirect;
-
-            include /etc/nginx/overrides/assets.d/*.conf;
         }
 
         location /internal/assets {
@@ -144,15 +142,24 @@ http {
         location / {
             include /etc/nginx/overrides/location.d/*.conf;
 
-            location ~* \.(js|css|jpg|png|svg|ttf|woff|woff2|wasm)$ {
-                add_header Cache-Control "public, max-age=604800" always; # 7 days
+            location ~ ^/js/config.js$ {
+                add_header Cache-Control "no-store, no-cache, max-age=0" always;
+            }
+
+            location ~* \.(js|css|jpg|svg|png|mjs|map)$ {
+                add_header Cache-Control "max-age=604800" always; # 7 days
+            }
+
+            location ~ ^/(/|css|fonts|images|js|wasm|mjs|map) {
             }
 
             location ~ ^/[^/]+/(.*)$ {
                 return 301 " /404";
             }
 
+            add_header Last-Modified $date_gmt;
             add_header Cache-Control "no-store, no-cache, max-age=0" always;
+            if_modified_since off;
             try_files $uri /index.html$is_args$args /index.html =404;
         }
     }

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/design-systems/variants.njk

@@ -107,25 +107,6 @@ desc: Streamline your design workflow with Penpot's Components guide! Learn to c
   <li>Select the variant copy, press right-click, and select the menu option <strong>Restore variant</strong> (will show if the main component still exists).</li>
 </ul>
 
-<h3 id="component-variants-toggle">Toggle for boolean variants</h3>
-<p>When a variant property represents a boolean state, Penpot can display it as a toggle instead of a dropdown. This offers a quicker and more visual way to switch between two opposite values when working with copies.</p>
-<p>The toggle appears in place of the property values dropdown, <strong>only when a copy is selected</strong>.</p>
-<figure>
-  <img src="/img/variants/07-variants-boolean.webp" alt="Boolean variant option" />
-</figure>
-<h4>Accepted value pairs</h4>
-<p>For Penpot to recognize the property as a boolean and display the toggle, the property must be defined with exactly two opposing values. These can be any of the following pairs:</p>
-<ul>
-  <li><code>true</code> / <code>false</code></li>
-  <li><code>on</code> / <code>off</code></li>
-  <li><code>yes</code> / <code>no</code></li>
-</ul>
-<p>The order of the values does not matter. Penpot automatically maps them to ON and OFF states:</p>
-<ul>
-  <li><strong>ON state:</strong> <code>true</code>, <code>yes</code>, <code>on</code></li>
-  <li><strong>OFF state:</strong> <code>false</code>, <code>no</code>, <code>off</code></li>
-</ul>
-
 <h3 id="component-use-variants">Use variants</h3>
 <p>Once you have created your variants, you can place a copy of a component with variants into your design and then switch between its different versions.</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/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/scripts/wait-and-start.sh

@@ -7,5 +7,4 @@ bb -i '(babashka.wait/wait-for-port "localhost" 9630)';
 bb -i '(babashka.wait/wait-for-path "target/app.js")';
 sleep 2;
 
-export NODE_TLS_REJECT_UNAUTHORIZED=0
 exec node 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

frontend/.storybook/preview.js

@@ -1,10 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 
-
-import Components from "@target/components";
-import translations from "@public/translation.en.js";
-Components.setDefaultTranslations(translations);
-
 import '../resources/public/css/ds.css';
 
 export const decorators = [

frontend/deps.edn

@@ -20,8 +20,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.25"
-   :git/sha "27e5a1a"
+  {:git/tag "v2.24"
+   :git/sha "17a0c94"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.5.0"}
@@ -42,7 +42,7 @@
   :dev
   {:extra-paths ["dev"]
    :extra-deps
-   {thheller/shadow-cljs {:mvn/version "3.2.2"}
+   {thheller/shadow-cljs {:mvn/version "3.2.0"}
     com.bhauman/rebel-readline {:mvn/version "RELEASE"}
     org.clojure/tools.namespace {:mvn/version "RELEASE"}
     criterium/criterium {:mvn/version "RELEASE"}

frontend/package.json

@@ -27,7 +27,6 @@
     "build:storybook:cljs": "clojure -M:dev:shadow-cljs compile storybook",
     "build:app:libs": "node ./scripts/build-libs.js",
     "build:app:main": "clojure -M:dev:shadow-cljs release main worker",
-    "build:app:worker": "clojure -M:dev:shadow-cljs release worker",
     "build:app": "yarn run clear:shadow-cache && yarn run build:app:main && yarn run build:app:libs",
     "e2e:server": "node ./scripts/e2e-server.js",
     "fmt:clj": "cljfmt fix --parallel=true src/ test/",

frontend/playwright.config.js

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

frontend/playwright/data/workspace/get-file-inspect-tab.json

@@ -5947,8 +5947,8 @@
                                 "~:spread": "10",
                                 "~:color": "rgb(160, 73, 73)",
                                 "~:inset": true,
-                                "~:offset-x": "10",
-                                "~:offset-y": "10"
+                                "~:offsetX": "10",
+                                "~:offsetY": "10"
                               }
                             ],
                             "~:description": "",

frontend/playwright/ui/pages/BasePage.js

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

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -42,7 +42,7 @@ export class WasmWorkspacePage extends WorkspacePage {
   }
 
   async waitForFirstRenderWithoutUI() {
-    await this.waitForFirstRender();
+    await waitForFirstRender();
     await this.hideUI();
   }
 

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

@@ -258,22 +258,6 @@ test("Renders a file with nested frames with inherited blur", async ({
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with nested clipping frames", async ({ page }) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile(
-    "render-wasm/get-file-frame-nested-clipping.json",
-  );
-
-  await workspace.goToWorkspace({
-    id: "44471494-966a-8178-8006-c5bd93f0fe72",
-    pageId: "44471494-966a-8178-8006-c5bd93f0fe73",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
 test("Renders a clipped frame with a large blur drop shadow", async ({
   page,
 }) => {

frontend/playwright/ui/specs/subscriptions-dashboard.spec.js

@@ -9,399 +9,403 @@ test.beforeEach(async ({ page }) => {
   ]);
 });
 
-test("Team with unlimited subscription has specific icon in menu", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
+test.describe("Subscriptions: dashboard", () => {
+  test("Team with unlimited subscription has specific icon in menu", async ({
     page,
-    "get-profile",
-    "subscription/get-profile-unlimited-subscription.json",
-  );
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
 
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
 
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
 
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
 
-  await DashboardPage.mockRPC(
+    await DashboardPage.mockRPC(
+      page,
+      "get-projects?team-id=*",
+      "dashboard/get-projects-second-team.json",
+    );
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await dashboardPage.goToSecondTeamDashboard();
+    await expect(page.getByTestId("subscription-icon")).toBeVisible();
+  });
+
+  test("The Unlimited subscription has its name in the sidebar dropdown", async ({
     page,
-    "get-projects?team-id=*",
-    "dashboard/get-projects-second-team.json",
-  );
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-  await dashboardPage.goToSecondTeamDashboard();
-  await expect(page.getByTestId("subscription-icon")).toBeVisible();
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage-one-editor.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await dashboardPage.goToDashboard();
+
+    await expect(page.getByTestId("subscription-name")).toHaveText(
+      "Unlimited plan (trial)",
+    );
+  });
+
+  test("When the subscription status is unpaid, the sidebar dropdown displays the name Professional for the Unlimited subscription", async ({
+    page,
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-unpaid-subscription.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await dashboardPage.goToDashboard();
+
+    await expect(page.getByTestId("subscription-name")).toHaveText(
+      "Professional plan",
+    );
+  });
+
+  test("When the subscription status is canceled, the sidebar dropdown displays the name Professional for the Enterprise subscription", async ({
+    page,
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-enterprise-canceled-subscription.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await dashboardPage.goToDashboard();
+
+    await expect(page.getByTestId("subscription-name")).toHaveText(
+      "Professional plan",
+    );
+  });
 });
 
-test("The Unlimited subscription has its name in the sidebar dropdown", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
+test.describe("Subscriptions: team members and invitations", () => {
+  test("Team settings has susbscription name and no manage subscription link when is member", async ({
     page,
-    "get-profile",
-    "subscription/get-profile-unlimited-subscription.json",
-  );
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "logged-in-user/get-profile-logged-in.json",
+    );
 
-  await DashboardPage.mockRPC(
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-member.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-projects?team-id=*",
+      "dashboard/get-projects-second-team.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-members?team-id=*",
+      "subscription/get-team-members-subscription-member.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-stats?team-id=*",
+      "dashboard/get-team-stats.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+
+    await dashboardPage.goToSecondTeamSettingsSection();
+    await expect(page.getByText("Unlimited (trial)")).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Manage your subscription" }),
+    ).not.toBeVisible();
+  });
+
+  test("Team settings has susbscription name and manage subscription link when is owner", async ({
     page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage-one-editor.json",
-  );
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
 
-  await DashboardPage.mockRPC(
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-projects?team-id=*",
+      "dashboard/get-projects-second-team.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-members?team-id=*",
+      "subscription/get-team-members-subscription-owner.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-stats?team-id=*",
+      "dashboard/get-team-stats.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+
+    await dashboardPage.goToSecondTeamSettingsSection();
+
+    await expect(page.getByText("Unlimited (trial)")).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Manage your subscription" }),
+    ).toBeVisible();
+  });
+
+  test("Members tab has warning message when user has more seats than editors.", async ({
     page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
 
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-projects?team-id=*",
+      "dashboard/get-projects-second-team.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-members?team-id=*",
+      "subscription/get-team-members-subscription-eight-member.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+
+    await dashboardPage.goToSecondTeamMembersSection();
+
+    const ctas = page.getByTestId("cta");
+    await expect(ctas).toHaveCount(2);
+    await expect(
+      page.getByText("Inviting people while on the unlimited plan"),
+    ).toBeVisible();
+  });
+
+  test("Invitations tab has warning message when user has more seats than editors.", async ({
     page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
+  }) => {
+    await DashboardPage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
 
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-  await dashboardPage.goToDashboard();
+    await DashboardPage.mockRPC(
+      page,
+      "get-subscription-usage",
+      "subscription/get-subscription-usage.json",
+    );
 
-  await expect(page.getByTestId("subscription-name")).toHaveText(
-    "Unlimited plan (trial)",
-  );
-});
-
-test("The sidebar dropdown displays the correct subscription name when status is Unpaid", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "subscription/get-profile-unlimited-unpaid-subscription.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-  await dashboardPage.goToDashboard();
-
-  await expect(page.getByTestId("subscription-name")).toHaveText(
-    "Professional plan",
-  );
-});
-
-test("The sidebar dropdown displays the correct subscription name when status is cancelled", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "subscription/get-profile-enterprise-canceled-subscription.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-  await dashboardPage.goToDashboard();
-
-  await expect(page.getByTestId("subscription-name")).toHaveText(
-    "Professional plan",
-  );
-});
-
-test("Team settings has susbscription name and no manage subscription link when is member", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-member.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-projects?team-id=*",
-    "dashboard/get-projects-second-team.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-members?team-id=*",
-    "subscription/get-team-members-subscription-member.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-stats?team-id=*",
-    "dashboard/get-team-stats.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-
-  await dashboardPage.goToSecondTeamSettingsSection();
-  await expect(page.getByText("Unlimited (trial)")).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Manage your subscription" }),
-  ).not.toBeVisible();
-});
-
-test("Team settings has susbscription name and manage subscription link when is owner", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "subscription/get-profile-unlimited-subscription.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-projects?team-id=*",
-    "dashboard/get-projects-second-team.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-members?team-id=*",
-    "subscription/get-team-members-subscription-owner.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-stats?team-id=*",
-    "dashboard/get-team-stats.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-
-  await dashboardPage.goToSecondTeamSettingsSection();
-
-  await expect(page.getByText("Unlimited (trial)")).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Manage your subscription" }),
-  ).toBeVisible();
-});
-
-test("Members tab has warning message when user has more seats than editors", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "subscription/get-profile-unlimited-subscription.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-projects?team-id=*",
-    "dashboard/get-projects-second-team.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-members?team-id=*",
-    "subscription/get-team-members-subscription-eight-member.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-
-  await dashboardPage.goToSecondTeamMembersSection();
-
-  const ctas = page.getByTestId("cta");
-  await expect(ctas).toHaveCount(2);
-  await expect(
-    page.getByText("Inviting people while on the unlimited plan"),
-  ).toBeVisible();
-});
-
-test("Invitations tab has warning message when user has more seats than editors", async ({
-  page,
-}) => {
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "subscription/get-profile-unlimited-subscription.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-subscription-usage",
-    "subscription/get-subscription-usage.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-info",
-    "subscription/get-team-info-subscriptions.json",
-  );
-
-  const dashboardPage = new DashboardPage(page);
-  await dashboardPage.setupDashboardFull();
-  await DashboardPage.mockRPC(
-    page,
-    "get-teams",
-    "subscription/get-teams-unlimited-subscription-owner.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-projects?team-id=*",
-    "dashboard/get-projects-second-team.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-members?team-id=*",
-    "subscription/get-team-members-subscription-eight-member.json",
-  );
-
-  await DashboardPage.mockRPC(
-    page,
-    "get-team-invitations?team-id=*",
-    "subscription/get-team-invitations.json",
-  );
-
-  await dashboardPage.mockRPC(
-    "push-audit-events",
-    "workspace/audit-event-empty.json",
-  );
-
-  await dashboardPage.goToSecondTeamInvitationsSection();
-
-  const ctas = page.getByTestId("cta");
-  await expect(ctas).toHaveCount(2);
-  await expect(
-    page.getByText("Inviting people while on the unlimited plan"),
-  ).toBeVisible();
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-info",
+      "subscription/get-team-info-subscriptions.json",
+    );
+
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await DashboardPage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-subscription-owner.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-projects?team-id=*",
+      "dashboard/get-projects-second-team.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-members?team-id=*",
+      "subscription/get-team-members-subscription-eight-member.json",
+    );
+
+    await DashboardPage.mockRPC(
+      page,
+      "get-team-invitations?team-id=*",
+      "subscription/get-team-invitations.json",
+    );
+
+    await dashboardPage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+
+    await dashboardPage.goToSecondTeamInvitationsSection();
+
+    const ctas = page.getByTestId("cta");
+    await expect(ctas).toHaveCount(2);
+    await expect(
+      page.getByText("Inviting people while on the unlimited plan"),
+    ).toBeVisible();
+  });
 });

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

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

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -746,6 +746,20 @@
   }
 }
 
+.empty-icon {
+  @include flexCenter;
+  height: $s-48;
+  width: $s-48;
+  border-radius: $br-circle;
+  background-color: var(--empty-message-background-color);
+  svg {
+    @extend .button-icon;
+    height: $s-28;
+    width: $s-28;
+    stroke: var(--empty-message-foreground-color);
+  }
+}
+
 .attr-title {
   div {
     margin-left: 0;

frontend/resources/templates/index.mustache

@@ -17,25 +17,23 @@
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
-    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}
 
     <link rel="icon" href="images/favicon.png" />
-
-    <script type="module">
-      globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotBuildDate = "{{& build_date}}";
-      globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
-    </script>
-
     {{# manifest}}
-    <script src="{{& config}}"></script>
-    <script src="{{& polyfills}}"></script>
-    <script type="importmap">{{& importmap }}</script>
+    <script>window.penpotWorkerURI="{{& worker_main}}"</script>
+    <script defer src="{{& config}}"></script>
+    <script defer src="{{& polyfills}}"></script>
     {{/manifest}}
 
+    <script>
+      window.penpotTranslations = JSON.parse({{& translations}});
+      window.penpotVersion = "%version%";
+      window.penpotBuildDate = "%buildDate%";
+    </script>
     <!--cookie-consent-->
   </head>
   <body>
@@ -46,11 +44,9 @@
     <section id="modal"></section>
 
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& app_main}}";
-      init();
-    </script>
+    <script defer src="js/libs.js?ts={{& ts}}"></script>
+    <script defer src="{{& shared}}"></script>
+    <script defer src="{{& main}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/preview-head.mustache

@@ -1,4 +1,4 @@
-<link href="./css/ds.css?version={{& version}}" rel="stylesheet" type="text/css" />
+<link href="./css/ds.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
 
 <style>
   body {
@@ -9,3 +9,7 @@
     height: 100%;
   }
 </style>
+
+<script>
+  window.penpotTranslations = JSON.parse({{& translations}});
+</script>

frontend/resources/templates/rasterizer.mustache

@@ -6,24 +6,22 @@
     <link rel="icon" href="images/favicon.png" />
 
     <script>
-      globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotBuildDate = "{{& build_date}}";
-      globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
+      window.penpotVersion = "%version%";
+      window.penpotBuildDate = "%buildDate%";
     </script>
 
     {{# manifest}}
+    <script>window.penpotWorkerURI="{{& worker_main}}"</script>
     <script src="{{& config}}"></script>
     <script src="{{& polyfills}}"></script>
-    <script type="importmap">{{& importmap }}</script>
     {{/manifest}}
+
   </head>
   <body>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& rasterizer_main}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& rasterizer}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/render.mustache

@@ -7,24 +7,20 @@
     <link rel="icon" href="images/favicon.png" />
 
     <script>
-      globalThis.penpotVersion = "{{& version}}";
-      globalThis.penpotBuildDate = "{{& build_date}}";
+      window.penpotVersion = "%version%";
     </script>
 
     {{# manifest}}
     <script src="{{& config}}"></script>
     <script src="{{& polyfills}}"></script>
-    <script type="importmap">{{& importmap }}</script>
     {{/manifest}}
   </head>
   <body>
     <div id="app"></div>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& render_main}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& render}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/scripts/_helpers.js

@@ -28,8 +28,6 @@ export function startWorker() {
 }
 
 export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -49,7 +47,8 @@ async function findFiles(basePath, predicate, options = {}) {
 function syncDirs(originPath, destPath) {
   const command = `rsync -ar --delete ${originPath} ${destPath}`;
 
-  return new Promise((resolve, reject) => {proc.exec(command, (cause, stdout) => {
+  return new Promise((resolve, reject) => {
+    proc.exec(command, (cause, stdout) => {
       if (cause) {
         reject(cause);
       } else {
@@ -181,41 +180,40 @@ 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);
 }
 
 async function readShadowManifest() {
-  const index = {
-    app_main: "./js/main.js",
-    render_main: "./js/render.js",
-    rasterizer_main: "./js/rasterizer.js",
+  const ts = Date.now();
+  try {
+    const content = await readManifestFile();
 
-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
+    const index = {
+      ts: ts,
+      config: "js/config.js?ts=" + ts,
+      polyfills: "js/polyfills.js?ts=" + ts,
+      worker_main: "js/worker/main.js?ts=" + ts,
+    };
 
-    importmap: JSON.stringify({
-      "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
-      }
-    })
-  };
+    for (let item of content) {
+      index[item.name] = "js/" + item["output-name"];
+    }
 
-  return index;
+    return index;
+  } catch (cause) {
+    return {
+      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,
+    };
+  }
 }
 
 async function renderTemplate(path, context = {}, partials = {}) {
@@ -255,7 +253,7 @@ const markedOptions = {
 
 marked.use(markedOptions);
 
-export async function compileTranslations() {
+async function readTranslations() {
   const langs = [
     "ar",
     "ca",
@@ -292,10 +290,9 @@ export async function compileTranslations() {
     ["uk", "ukr_UA"],
     "ha",
   ];
+  const result = {};
 
   for (let lang of langs) {
-    const result = {};
-
     let filename = `${lang}.po`;
     if (l.isArray(lang)) {
       filename = `${lang[1]}.po`;
@@ -314,6 +311,11 @@ export async function compileTranslations() {
     for (let key of Object.keys(trdata)) {
       if (key === "") continue;
       const comments = trdata[key].comments || {};
+
+      if (l.isNil(result[key])) {
+        result[key] = {};
+      }
+
       const isMarkdown = l.includes(comments.flag, "markdown");
 
       const msgs = trdata[key].msgstr;
@@ -323,9 +325,9 @@ export async function compileTranslations() {
           message = marked.parseInline(message);
         }
 
-        result[key] = message;
+        result[key][lang] = message;
       } else {
-        result[key] = msgs.map((item) => {
+        result[key][lang] = msgs.map((item) => {
           if (isMarkdown) {
             return marked.parseInline(item);
           } else {
@@ -334,12 +336,22 @@ export async function compileTranslations() {
         });
       }
     }
-
-    const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
-    const outputDir = "resources/public/js/";
-    const outputFile = ph.join(outputDir, "translation." + lang + ".js");
-    await fs.writeFile(outputFile, esm);
   }
+
+  return result;
+}
+
+function filterTranslations(translations, langs = [], keyFilter) {
+  const filteredEntries = Object.entries(translations)
+    .filter(([translationKey, _]) => keyFilter(translationKey))
+    .map(([translationKey, value]) => {
+      const langEntries = Object.entries(value).filter(([lang, _]) =>
+        langs.includes(lang),
+      );
+      return [translationKey, Object.fromEntries(langEntries)];
+    });
+
+  return Object.fromEntries(filteredEntries);
 }
 
 async function generateSvgSprite(files, prefix) {
@@ -391,6 +403,14 @@ async function generateTemplates() {
   const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
+  let translations = await readTranslations();
+  const storybookTranslations = JSON.stringify(
+    filterTranslations(translations, ["en"], (key) =>
+      key.startsWith("labels."),
+    ),
+  );
+  translations = JSON.stringify(translations);
+
   const manifest = await readShadowManifest();
   let content;
 
@@ -412,16 +432,13 @@ async function generateTemplates() {
     "../public/images/sprites/assets.svg": assetsSprite,
   };
 
-  const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
-  };
-
   content = await renderTemplate(
     "resources/templates/index.mustache",
-    context,
+    {
+      manifest: manifest,
+      translations: JSON.stringify(translations),
+      isDebug,
+    },
     partials,
   );
 
@@ -429,30 +446,41 @@ async function generateTemplates() {
 
   content = await renderTemplate(
     "resources/templates/challenge.mustache",
-    context,
+    {},
     partials,
   );
   await fs.writeFile("./resources/public/challenge.html", content);
 
   content = await renderTemplate(
     "resources/templates/preview-body.mustache",
-    context,
+    {
+      manifest: manifest,
+    },
     partials,
   );
   await fs.writeFile("./.storybook/preview-body.html", content);
 
   content = await renderTemplate(
     "resources/templates/preview-head.mustache",
-    context,
+    {
+      manifest: manifest,
+      translations: JSON.stringify(storybookTranslations),
+    },
     partials,
   );
   await fs.writeFile("./.storybook/preview-head.html", content);
 
-  content = await renderTemplate("resources/templates/render.mustache", context);
+  content = await renderTemplate("resources/templates/render.mustache", {
+    manifest: manifest,
+    translations: JSON.stringify(translations),
+  });
 
   await fs.writeFile("./resources/public/render.html", content);
 
-  content = await renderTemplate("resources/templates/rasterizer.mustache", context);
+  content = await renderTemplate("resources/templates/rasterizer.mustache", {
+    manifest: manifest,
+    translations: JSON.stringify(translations),
+  });
 
   await fs.writeFile("./resources/public/rasterizer.html", content);
 }

frontend/scripts/build

@@ -26,10 +26,7 @@ yarn install || exit 1;
 rm -rf resources/public;
 rm -rf target/dist;
 
-mkdir -p resources/public;
-mkdir -p target/dist;
-
-yarn run build:app:main $EXTRA_PARAMS || exit 1
+yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1
 
 if [ "$INCLUDE_WASM" = "yes" ];  then
     yarn run build:wasm || exit 1;
@@ -38,7 +35,18 @@ fi
 yarn run build:app:libs || exit 1;
 yarn run build:app:assets || exit 1;
 
-rsync -avr resources/public/ target/dist/;
+mkdir -p target/dist;
+rsync -avr resources/public/ target/dist/
+
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/index.html;
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/render.html;
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/rasterizer.html;
+sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/index.html;
+sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/rasterizer.html;
+
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./target/dist/js/render_wasm.js;
+fi
 
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then
     # build storybook

frontend/scripts/build-app-assets.js

@@ -4,6 +4,5 @@ await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();
 await h.compileSvgSprites();
-await h.compileTranslations();
 await h.compileTemplates();
 await h.compilePolyfills();

frontend/scripts/build-libs.js

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

frontend/scripts/build-storybook-assets.js

@@ -1,11 +1,7 @@
-import fs from "node:fs/promises";
 import * as h from "./_helpers.js";
 
-await fs.mkdir("resources/public/js", {recursive: true});
-
 await h.compileStorybookStyles();
 await h.copyAssets();
 await h.compileSvgSprites();
-await h.compileTranslations();
 await h.compileTemplates();
 await h.compilePolyfills();

frontend/scripts/repl

@@ -1,19 +1,6 @@
 #!/usr/bin/env bash
 
-export JAVA_OPTS="\
-       -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
-       -Djdk.attach.allowAttachSelf \
-       -Dlog4j2.configurationFile=log4j2-devenv-repl.xml \
-       -Djdk.tracePinnedThreads=full \
-       -XX:+EnableDynamicAgentLoading \
-       -XX:-OmitStackTraceInFastThrow                    \
-       -XX:+UnlockDiagnosticVMOptions \
-       -XX:+DebugNonSafepoints \
-       --sun-misc-unsafe-memory-access=allow \
-       --enable-preview \
-       --enable-native-access=ALL-UNNAMED";
-
-export OPTIONS="-A:dev"
+export OPTIONS="-A:dev -J-XX:-OmitStackTraceInFastThrow";
 
 set -ex
-exec clojure $OPTIONS -M -e "$OPTIONS_EVAL" -m rebel-readline.main
+exec clojure $OPTIONS -M -m rebel-readline.main

frontend/scripts/test

@@ -1,9 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-
-yarn run lint:scss;
-yarn run test;

frontend/scripts/test-components

@@ -1,13 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-
-yarn run playwright install chromium --with-deps;
-yarn run build:storybook
-
-exec npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-    "npx http-server storybook-static --port 6006 --silent" \
-    "npx wait-on tcp:6006 && yarn test:storybook"

frontend/scripts/test-e2e

@@ -1,8 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-corepack enable;
-corepack install;
-yarn install;
-yarn run playwright install chromium --with-deps;
-yarn run test:e2e -x --workers=2 --reporter=list "$@";

frontend/scripts/watch.js

@@ -52,7 +52,6 @@ await fs.mkdir("./resources/public/css/", { recursive: true });
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();
-await h.compileTranslations();
 await h.compileSvgSprites();
 await h.compileTemplates();
 await h.compilePolyfills();
@@ -82,7 +81,7 @@ h.watch("resources/templates", null, async function (path) {
 log.info("watch: translations (~)");
 h.watch("translations", null, async function (path) {
   log.info("changed:", path);
-  await h.compileTranslations();
+  await h.compileTemplates();
 });
 
 log.info("watch: assets (~)");

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

@@ -86,6 +86,7 @@
 (def default-theme  "default")
 (def default-language "en")
 
+(def translations         (obj/get global "penpotTranslations"))
 (def themes               (obj/get global "penpotThemes"))
 
 (def build-date           (parse-build-date global))
@@ -126,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]
@@ -188,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.cljs

@@ -92,7 +92,7 @@
 (defn ^:export init
   []
   (mw/init!)
-  (i18n/init)
+  (i18n/init! cf/translations)
   (cur/init-styles)
   (thr/init!)
   (init-ui)
@@ -114,4 +114,11 @@
   []
   (reinit))
 
+;; Reload the UI when the language changes
+(add-watch
+ i18n/locale "locale"
+ (fn [_ _ old-value current-value]
+   (when (not= old-value current-value)
+     (reinit))))
+
 (set! (.-stackTraceLimit js/Error) 50)

frontend/src/app/main/constants.cljs

@@ -148,17 +148,17 @@
     :width 768
     :height 1024}
    {:name "Google Pixel 7 Pro"
-    :width 412
-    :height 892}
+    :width 1440
+    :height 3120}
    {:name "Google Pixel 6a/6"
-    :width 412
-    :height 915}
+    :width 1080
+    :height 2400}
    {:name "Google Pixel 4a/5"
     :width 393
     :height 851}
    {:name "Samsung Galaxy S22"
-    :width 360
-    :height 780}
+    :width 1080
+    :height 2340}
    {:name "Samsung Galaxy S20+"
     :width 384
     :height 854}

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

@@ -67,8 +67,8 @@
   []
   (let [uagent (new ua/UAParser)]
     (merge
-     {:version (:full cf/version)
-      :locale i18n/*current-locale*}
+     {:app-version (:full cf/version)
+      :locale @i18n/locale}
      (let [browser (.getBrowser uagent)]
        {:browser (obj/get browser "name")
         :browser-version (obj/get browser "version")})
@@ -98,9 +98,7 @@
 (def context
   (atom (d/without-nils (collect-context))))
 
-(add-watch i18n/state "events"
-           (fn [_ _ _ v]
-             (swap! context assoc :locale (get v :locale))))
+(add-watch i18n/locale ::events #(swap! context assoc :locale %4))
 
 ;; --- EVENT TRANSLATION
 

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.schema :as sm]
+   [app.common.spec :as us]
    [app.common.types.profile :refer [schema:profile]]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -53,16 +54,11 @@
           (assoc :profile-id id)
           (assoc :profile profile)))
 
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [profile (:profile state)]
-        (->> (rx/from (i18n/set-locale (:lang profile)))
-             (rx/ignore))))
-
     ptk/EffectEvent
     (effect [_ state _]
       (let [profile (:profile state)]
         (swap! storage/user assoc :profile profile)
+        (i18n/set-locale! (:lang profile))
         (plugins.register/init)))))
 
 (def profile-fetched?
@@ -488,7 +484,7 @@
 
 (defn delete-access-token
   [{:keys [id] :as params}]
-  (assert (uuid? id))
+  (us/assert! ::us/uuid id)
   (ptk/reify ::delete-access-token
     ptk/WatchEvent
     (watch [_ _ _]

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

@@ -59,15 +59,9 @@
   "Parses `value` of a color `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the value is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (let [missing-references (seq (cto/find-token-value-references value))]
-    (if-let [tc (tinycolor/valid-color value)]
-      {:value value :unit (tinycolor/color-format tc)}
-      (cond
-        missing-references
-        {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
-         :references missing-references}
-        :else
-        {:errors [(wte/error-with-value :error.token/invalid-color value)]}))))
+  (if-let [tc (tinycolor/valid-color value)]
+    {:value value :unit (tinycolor/color-format tc)}
+    {:errors [(wte/error-with-value :error.token/invalid-color value)]}))
 
 (defn- numeric-string? [s]
   (and (string? s)
@@ -126,7 +120,7 @@
   If the `value` is not parseable and/or has missing references returns a map with `:errors`.
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
-  (let [missing-references? (seq (seq (cto/find-token-value-references value)))
+  (let [missing-references? (seq (cto/find-token-value-references value))
         parsed-value (cft/parse-token-value value)
         out-of-scope (not (<= 0 (:value parsed-value) 1))
         references (seq (cto/find-token-value-references value))]
@@ -374,8 +368,8 @@
   (let [add-keyed-errors (fn [shadow-result k errors]
                            (update shadow-result :errors concat
                                    (map #(assoc % :shadow-key k :shadow-index shadow-index) errors)))
-        parsers {:offset-x parse-sd-token-general-value
-                 :offset-y parse-sd-token-general-value
+        parsers {:offsetX parse-sd-token-general-value
+                 :offsetY parse-sd-token-general-value
                  :blur parse-sd-token-shadow-blur
                  :spread parse-sd-token-shadow-spread
                  :color parse-sd-token-color-value
@@ -395,42 +389,35 @@
 (defn- parse-sd-token-shadow-value
   "Parses shadow value and validates it."
   [value]
-  (let [missing-references
-        (when (string? value)
-          (seq (cto/find-token-value-references value)))]
-    (cond
-      missing-references
-      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
-       :references missing-references}
-
-      (string? value)
-      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-shadow value)]}
+  (cond
+    ;; Reference value (string)
+    (string? value) {:value value}
 
     ;; Empty value
-      (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
+    (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
 
     ;; Invalid value
-      (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
+    (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
 
     ;; Array of shadows
-      :else
-      (let [converted (js->clj value :keywordize-keys true)
+    :else
+    (let [converted (js->clj value :keywordize-keys true)
           ;; Parse each shadow with its index
-            parsed-shadows (map-indexed
-                            (fn [idx shadow-map]
-                              (parse-single-shadow shadow-map idx))
-                            converted)
+          parsed-shadows (map-indexed
+                          (fn [idx shadow-map]
+                            (parse-single-shadow shadow-map idx))
+                          converted)
 
           ;; Collect all errors from all shadows
-            all-errors (mapcat :errors parsed-shadows)
+          all-errors (mapcat :errors parsed-shadows)
 
           ;; Collect all values from shadows that have values
-            all-values (into [] (keep :value parsed-shadows))]
+          all-values (into [] (keep :value parsed-shadows))]
 
-        (if (seq all-errors)
-          {:errors all-errors
-           :value all-values}
-          {:value all-values})))))
+      (if (seq all-errors)
+        {:errors all-errors
+         :value all-values}
+        {:value all-values}))))
 
 (defn collect-shadow-errors [token shadow-index]
   (group-by :shadow-key

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

@@ -351,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/clipboard.cljs

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

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

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

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

@@ -153,11 +153,11 @@
 (defn value->shadow
   "Transform a token shadow value into penpot shadow data structure"
   [value]
-  (mapv (fn [{:keys [offset-x offset-y blur spread color inset]}]
+  (mapv (fn [{:keys [offsetX offsetY blur spread color inset]}]
           {:id (random-uuid)
            :hidden false
-           :offset-x offset-x
-           :offset-y offset-y
+           :offset-x offsetX
+           :offset-y offsetY
            :blur blur
            :color (value->color color)
            :spread spread

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

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

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

@@ -16,8 +16,8 @@
    :letter-spacing "Letter Spacing"
    :text-case "Text Case"
    :text-decoration "Text Decoration"
-   :offset-x "X"
-   :offset-y "Y"
+   :offsetX "X"
+   :offsetY "Y"
    :blur "Blur"
    :spread "Spread"
    :color "Color"

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

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

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

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

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

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

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

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

@@ -14,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]))