Merge pull request #8012 from penpot/azazeln28-refactor-minor-changes

♻️ Minor naming changes and event handling

.github/workflows/build-staging-render.yml

@@ -0,0 +1,14 @@
+name: _STAGING RENDER
+
+on:
+  schedule:
+    - cron: '36 5-20 * * 1-5'
+
+jobs:
+  build-bundle:
+    uses: ./.github/workflows/build-bundle.yml
+    secrets: inherit
+    with:
+      gh_ref: "staging-render"
+      build_wasm: "yes"
+      build_storybook: "yes"

.github/workflows/build-tag.yml

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

.github/workflows/tests.yml

@@ -1,4 +1,4 @@
-name: "CI: Tests"
+name: "CI"
 
 defaults:
   run:
@@ -8,133 +8,147 @@ on:
   pull_request:
     types:
       - opened
-      - edited
-      - reopened
       - synchronize
   push:
     branches:
       - develop
       - staging
 
+concurrency:
+  group: ${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  # lint:
-  #   name: "Code Linter"
-  #   runs-on: ubuntu-24.04
-  #   container: penpotapp/devenv:latest
+  lint:
+    name: "Linter"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
 
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v4
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  #     - name: Check clojure code format
-  #       run: |
-  #         corepack enable;
-  #         corepack install;
-  #         yarn install
-  #         yarn run fmt:clj:check
+      - name: Check clojure code format
+        run: |
+          ./scripts/lint
 
-  # test-common:
-  #   name: "Common Tests"
-  #   runs-on: ubuntu-24.04
-  #   container: penpotapp/devenv:latest
+  test-common:
+    name: "Common Tests"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
 
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v4
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  #     - name: Run tests on JVM
-  #       working-directory: ./common
-  #       run: |
-  #         clojure -M:dev:test
+      - name: Run tests on JVM
+        working-directory: ./common
+        run: |
+          clojure -M:dev:test
 
-  #     - name: Run tests on NODE
-  #       working-directory: ./common
-  #       run: |
-  #         corepack enable;
-  #         corepack install;
-  #         yarn install;
-  #         yarn run test;
+      - name: Run tests on NODE
+        working-directory: ./common
+        run: |
+          ./scripts/test
 
-  # test-frontend:
-  #   name: "Frontend Tests"
-  #   runs-on: ubuntu-24.04
-  #   container: penpotapp/devenv:latest
+  test-frontend:
+    name: "Frontend Tests"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
 
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v4
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  #     - name: Unit Tests
-  #       working-directory: ./frontend
-  #       run: |
-  #         corepack enable;
-  #         corepack install;
-  #         yarn install;
-  #         yarn run test;
+      - name: Unit Tests
+        working-directory: ./frontend
+        run: |
+          ./scripts/test
 
-  #     - name: Component Tests
-  #       working-directory: ./frontend
-  #       run: |
-  #           yarn run playwright install chromium --with-deps;
-  #           yarn run build:storybook
+      - name: Component Tests
+        working-directory: ./frontend
+        run: |
+          ./scripts/test-components
 
-  #           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-render-wasm:
+    name: "Render WASM Tests"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
 
-  #     - name: Check SCSS Format
-  #       working-directory: ./frontend
-  #       run: |
-  #         yarn run lint:scss;
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  # test-backend:
-  #   name: "Backend Tests"
-  #   runs-on: ubuntu-24.04
-  #   container: penpotapp/devenv:latest
+      - name: Format
+        working-directory: ./render-wasm
+        run: |
+          cargo fmt --check
 
-  #   services:
-  #     postgres:
-  #       image: postgres:17
-  #       # Provide the password for postgres
-  #       env:
-  #         POSTGRES_USER: penpot_test
-  #         POSTGRES_PASSWORD: penpot_test
-  #         POSTGRES_DB: penpot_test
+      - name: Lint
+        working-directory: ./render-wasm
+        run: |
+          ./lint
 
-  #       # Set health checks to wait until postgres has started
-  #       options: >-
-  #         --health-cmd pg_isready
-  #         --health-interval 10s
-  #         --health-timeout 5s
-  #         --health-retries 5
+      - name: Test
+        working-directory: ./render-wasm
+        run: |
+          ./test
 
-  #     redis:
-  #       image: valkey/valkey:9
+  test-backend:
+    name: "Backend Tests"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
 
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v4
+    services:
+      postgres:
+        image: postgres:17
+        # Provide the password for postgres
+        env:
+          POSTGRES_USER: penpot_test
+          POSTGRES_PASSWORD: penpot_test
+          POSTGRES_DB: penpot_test
 
-  # test-library:
-  #   name: "Library Tests"
-  #   runs-on: ubuntu-24.04
-  #   container: penpotapp/devenv:latest
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
 
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v4
+      redis:
+        image: valkey/valkey:9
 
-  #     - name: Run tests
-  #       working-directory: ./library
-  #       run: |
-  #         corepack enable;
-  #         corepack install;
-  #         yarn install;
-  #         yarn run build:bundle;
-  #         yarn run test;
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-  test-integration:
-    name: "Integration Tests"
+      - name: Run tests
+        working-directory: ./backend
+        env:
+          PENPOT_TEST_DATABASE_URI: "postgresql://postgres/penpot_test"
+          PENPOT_TEST_DATABASE_USERNAME: penpot_test
+          PENPOT_TEST_DATABASE_PASSWORD: penpot_test
+          PENPOT_TEST_REDIS_URI: "redis://redis/1"
+
+        run: |
+          clojure -M:dev:test --reporter kaocha.report/documentation
+
+  test-library:
+    name: "Library Tests"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Run tests
+        working-directory: ./library
+        run: |
+          ./scripts/test
+
+  build-integration:
+    name: "Build Integration Bundle"
     runs-on: ubuntu-24.04
     container: penpotapp/devenv:latest
 
@@ -157,17 +171,128 @@ jobs:
         run: |
           ./build release
 
+      - name: Store Bundle Cache
+        uses: actions/cache@v4
+        with:
+          key: "integration-bundle-${{ github.sha }}"
+          path: frontend/resources/public
+
+  test-integration-1:
+    name: "Integration Tests 1/4"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
+    needs: build-integration
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore Cache
+        uses: actions/cache/restore@v4
+        with:
+          key: "integration-bundle-${{ github.sha }}"
+          path: frontend/resources/public
+
       - name: Run Tests
         working-directory: ./frontend
         run: |
-          yarn run playwright install chromium --with-deps
-          yarn run test:e2e -x --workers=1 --reporter=line
+          ./scripts/test-e2e --shard="1/4";
 
       - name: Upload test result
         uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: integration-tests-result
+          name: integration-tests-result-1
+          path: frontend/test-results/
+          overwrite: true
+          retention-days: 3
+
+  test-integration-2:
+    name: "Integration Tests 2/4"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
+    needs: build-integration
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore Cache
+        uses: actions/cache/restore@v4
+        with:
+          key: "integration-bundle-${{ github.sha }}"
+          path: frontend/resources/public
+
+      - name: Run Tests
+        working-directory: ./frontend
+        run: |
+          ./scripts/test-e2e --shard="2/4";
+
+      - name: Upload test result
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: integration-tests-result-2
+          path: frontend/test-results/
+          overwrite: true
+          retention-days: 3
+
+  test-integration-3:
+    name: "Integration Tests 3/4"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
+    needs: build-integration
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore Cache
+        uses: actions/cache/restore@v4
+        with:
+          key: "integration-bundle-${{ github.sha }}"
+          path: frontend/resources/public
+
+      - name: Run Tests
+        working-directory: ./frontend
+        run: |
+          ./scripts/test-e2e --shard="3/4";
+
+      - name: Upload test result
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: integration-tests-result-3
+          path: frontend/test-results/
+          overwrite: true
+          retention-days: 3
+
+  test-integration-4:
+    name: "Integration Tests 4/4"
+    runs-on: ubuntu-24.04
+    container: penpotapp/devenv:latest
+    needs: build-integration
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore Cache
+        uses: actions/cache/restore@v4
+        with:
+          key: "integration-bundle-${{ github.sha }}"
+          path: frontend/resources/public
+
+      - name: Run Tests
+        working-directory: ./frontend
+        run: |
+          ./scripts/test-e2e --shard="4/4";
+
+      - name: Upload test result
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: integration-tests-result-4
           path: frontend/test-results/
           overwrite: true
           retention-days: 3

.gitignore

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

CHANGES.md

@@ -1,6 +1,12 @@
 # CHANGELOG
 
-## 2.12.0 (Unreleased)
+## 2.12.1
+
+### :bug: Bugs fixed
+
+- Fix setting a portion of text as bold or underline messes things up [Github #7980](https://github.com/penpot/penpot/issues/7980)
+
+## 2.12.0
 
 ### :boom: Breaking changes & Deprecations
 
@@ -61,6 +67,8 @@ 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)
+- Enable Hindi translations on the application
 
 ### :sparkles: New features & Enhancements
 
@@ -71,6 +79,7 @@ example. It's still usable as before, we just removed the example.
 - Add new shape validation mechanism for shapes [Github #7696](https://github.com/penpot/penpot/pull/7696)
 - Apply color tokens from sidebar [Taiga #11353](https://tree.taiga.io/project/penpot/us/11353)
 - Display tokens in the inspect tab [Taiga #9313](https://tree.taiga.io/project/penpot/us/9313)
+- Refactor clipboard behavior to assess some minor inconsistencies and make pasting binary data faster. [Taiga #12571](https://tree.taiga.io/project/penpot/task/12571)
 
 ### :bug: Bugs fixed
 
@@ -85,6 +94,15 @@ example. It's still usable as before, we just removed the example.
 - Fix shortcut conflict in text editor (increase/decrease font size vs word selection)
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
+- Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
+- Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
+- Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
+- Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
+- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
+- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
+- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
+- Fix horizontal scroll on layer panel [Taiga #12843](https://tree.taiga.io/project/penpot/issue/12843)
+- Fix unicode handling on email template abbreviation filter [Github #7966](https://github.com/penpot/penpot/pull/7966)
 
 ## 2.11.1
 

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

@@ -1,7 +1,8 @@
 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/resources/app/email/invite-to-team/en.html

@@ -240,4 +240,4 @@
   </div>
 </body>
 
-</html>
+</html>

backend/resources/app/onboarding.edn

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

backend/scripts/_env

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

backend/src/app/binfile/v3.clj

@@ -821,9 +821,10 @@
         entries (keep (match-storage-entry-fn) entries)]
 
     (doseq [{:keys [id entry]} entries]
-      (let [object  (->> (read-entry input entry)
-                         (decode-storage-object)
-                         (validate-storage-object))
+      (let [object  (-> (read-entry input entry)
+                        (decode-storage-object)
+                        (update :bucket d/nilv sto/default-bucket)
+                        (validate-storage-object))
 
             ext     (cmedia/mtype->extension (:content-type object))
             path    (str "objects/" id ext)

backend/src/app/email.clj

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

backend/src/app/loggers/audit.clj

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

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" (cf/get :public-uri)
+                 "origin" (str (cf/get :public-uri))
                  "cookie" (u/map->query-string {:auth-token token})}
         params  {:uri uri
                  :timeout 12000

backend/src/app/rpc/commands/auth.clj

@@ -307,7 +307,8 @@
                                             :content-type (:mtype input)})]
       (:id sobject))
     (catch Throwable cause
-      (l/err :hint "unable to import profile picture"
+      (l/wrn :hint "unable to import profile picture"
+             :uri uri
              :cause cause)
       nil)))
 

backend/src/app/rpc/rlimit.clj

@@ -104,28 +104,29 @@
 (def ^:private schema:limit
   [:and
    [:map
-    [::name :any]
+    [::name :keyword]
     [::strategy schema:strategy]
     [::key :string]
-    [::opts :string]]
-   [:or
-    [:map
-     [::capacity ::sm/int]
-     [::rate ::sm/int]
-     [::internal ::ct/duration]
-     [::params [::sm/vec :any]]]
-    [:map
-     [::nreq ::sm/int]
-     [::unit [:enum :days :hours :minutes :seconds :weeks]]]]])
+    [::opts :string]
+    [::capacity {:optional true} ::sm/int]
+    [::rate {:optional true} ::sm/int]
+    [::interval {:optional true} ::ct/duration]
+    [::params {:optional true} [::sm/vec :any]]
+    [::permits {:optional true} ::sm/int]
+    [::unit {:optional true} [:enum :days :hours :minutes :seconds :weeks]]]
+   [:fn (fn [attrs]
+          (let [contains-fn (partial contains? attrs)]
+            (or (every? contains-fn [::capacity ::rate ::interval])
+                (every? contains-fn [::permits ::unit]))))]])
 
 (def ^:private schema:limits
   [:map-of :keyword [::sm/vec schema:limit]])
 
 (def ^:private valid-limit-tuple?
-  (sm/lazy-validator schema:limit-tuple))
+  (sm/validator schema:limit-tuple))
 
 (def ^:private valid-rlimit-instance?
-  (sm/lazy-validator ::rpc/rlimit))
+  (sm/validator ::rpc/rlimit))
 
 (defmethod parse-limit :window
   [[name strategy opts :as vlimit]]
@@ -134,16 +135,16 @@
   (merge
    {::name name
     ::strategy strategy}
-   (if-let [[_ nreq unit] (re-find window-opts-re opts)]
-     (let [nreq (parse-long nreq)]
-       {::nreq nreq
+   (if-let [[_ permits unit] (re-find window-opts-re opts)]
+     (let [permits (parse-long permits)]
+       {::permits permits
         ::unit (case unit
                  "d" :days
                  "h" :hours
                  "m" :minutes
                  "s" :seconds
                  "w" :weeks)
-        ::key  (str "ratelimit.window." (d/name name))
+        ::key  (str "penpot.rlimit." (cf/get :tenant) ".window." (d/name name))
         ::opts opts})
      (ex/raise :type :validation
                :code :invalid-window-limit-opts
@@ -164,15 +165,15 @@
        ::interval interval
        ::opts     opts
        ::params   [(->seconds interval) rate capacity]
-       ::key      (str "ratelimit.bucket." (d/name name))})
+       ::key      (str "penpot.rlimit." (cf/get :tenant) ".bucket." (d/name name))})
     (ex/raise :type :validation
               :code :invalid-bucket-limit-opts
               :hint (str/ffmt "looks like '%' does not have a valid format" opts))))
 
 (defmethod process-limit :bucket
-  [rconn user-id now {:keys [::key ::params ::service ::capacity ::interval ::rate] :as limit}]
+  [rconn profile-id now {:keys [::key ::params ::service ::capacity ::interval ::rate] :as limit}]
   (let [script    (-> bucket-rate-limit-script
-                      (assoc ::rscript/keys [(str key "." service "." user-id)])
+                      (assoc ::rscript/keys [(str key "." service "." profile-id)])
                       (assoc ::rscript/vals (conj params (->seconds now))))
         result    (rds/eval rconn script)
         allowed?  (boolean (nth result 0))
@@ -192,18 +193,18 @@
         (assoc ::lresult/remaining remaining))))
 
 (defmethod process-limit :window
-  [rconn user-id now {:keys [::nreq ::unit ::key ::service] :as limit}]
+  [rconn profile-id now {:keys [::permits ::unit ::key ::service] :as limit}]
   (let [ts        (ct/truncate now unit)
         ttl       (ct/diff now (ct/plus ts {unit 1}))
         script    (-> window-rate-limit-script
-                      (assoc ::rscript/keys [(str key "." service "." user-id "." (ct/format-inst ts))])
-                      (assoc ::rscript/vals [nreq (->seconds ttl)]))
+                      (assoc ::rscript/keys [(str key "." service "." profile-id "." (ct/format-inst ts))])
+                      (assoc ::rscript/vals [permits (->seconds ttl)]))
         result    (rds/eval rconn script)
         allowed?  (boolean (nth result 0))
         remaining (nth result 1)]
     (l/trace :hint "limit processed"
              :service service
-             :limit (name (::name limit))
+             :name (name (::name limit))
              :strategy (name (::strategy limit))
              :opts (::opts limit)
              :allowed allowed?
@@ -214,8 +215,8 @@
         (assoc ::lresult/reset (ct/plus ts {unit 1})))))
 
 (defn- process-limits
-  [rconn user-id limits now]
-  (let [results   (into [] (map (partial process-limit rconn user-id now)) limits)
+  [rconn profile-id limits now]
+  (let [results   (into [] (map (partial process-limit rconn profile-id now)) limits)
         remaining (->> results
                        (d/index-by ::name ::lresult/remaining)
                        (uri/map->query-string))
@@ -227,7 +228,7 @@
 
     (when rejected
       (l/warn :hint "rejected rate limit"
-              :user-id (str user-id)
+              :profile-id (str profile-id)
               :limit-service (-> rejected ::service name)
               :limit-name (-> rejected ::name name)
               :limit-strategy (-> rejected ::strategy name)))
@@ -371,12 +372,9 @@
 (defn- on-refresh-error
   [_ cause]
   (when-not (instance? java.util.concurrent.RejectedExecutionException cause)
-    (if-let [explain (-> cause ex-data ex/explain)]
-      (l/warn ::l/raw (str "unable to refresh config, invalid format:\n" explain)
-              ::l/sync? true)
-      (l/warn :hint "unexpected exception on loading config"
-              :cause cause
-              ::l/sync? true))))
+    (l/warn :hint "unexpected exception on loading config"
+            :cause cause
+            ::l/sync? true)))
 
 (defn- get-config-path
   []

backend/src/app/rpc/rlimit/bucket.lua

@@ -25,9 +25,9 @@ local allowed = filled >= requested
 local newTokens = filled
 if allowed then
   newTokens = filled - requested
+  redis.call("hset", tokensKey, "tokens", newTokens, "timestamp", timestamp)
 end
 
-redis.call("hset", tokensKey, "tokens", newTokens, "timestamp", timestamp)
 redis.call("expire", tokensKey, ttl)
 
 return { allowed, newTokens }

backend/src/app/storage.clj

@@ -35,6 +35,9 @@
       :assets-s3 :s3
       nil)))
 
+(def default-bucket
+  "file-media-object")
+
 (def valid-buckets
   #{"file-media-object"
     "team-font-variant"

backend/src/app/storage/gc_touched.clj

@@ -25,7 +25,7 @@
    [app.common.time :as ct]
    [app.config :as cf]
    [app.db :as db]
-   [app.storage :as-alias sto]
+   [app.storage :as sto]
    [app.storage.impl :as impl]
    [integrant.core :as ig]))
 
@@ -130,7 +130,7 @@
   [{:keys [metadata]}]
   (or (some-> metadata :bucket)
       (some-> metadata :reference d/name)
-      "file-media-object"))
+      sto/default-bucket))
 
 (defn- process-objects!
   [conn has-refs? bucket objects]

backend/src/app/util/template.clj

@@ -7,9 +7,17 @@
 (ns app.util.template
   (:require
    [app.common.exceptions :as ex]
+   [cuerdas.core :as str]
+   [selmer.filters :as sf]
    [selmer.parser :as sp]))
 
-(sp/cache-off!)
+;; (sp/cache-off!)
+
+(sf/add-filter! :abbreviate
+                (fn [s n]
+                  (let [n (parse-long n)]
+                    (str/abbreviate s n))))
+
 
 (defn render
   [path context]

backend/src/app/worker/dispatcher.clj

@@ -137,33 +137,34 @@ RETURNING task.id, task.queue")
                 ::wait)))
 
           (run-batch []
-            (let [rconn (rds/connect cfg)]
-              (try
-                (-> cfg
-                    (assoc ::rds/conn rconn)
-                    (db/tx-run! run-batch'))
+            (try
+              (let [rconn (rds/connect cfg)]
+                (try
+                  (-> cfg
+                      (assoc ::rds/conn rconn)
+                      (db/tx-run! run-batch'))
+                  (finally
+                    (.close ^AutoCloseable rconn))))
 
-                (catch InterruptedException cause
-                  (throw cause))
-                (catch Exception cause
-                  (cond
-                    (rds/exception? cause)
-                    (do
-                      (l/wrn :hint "redis exception (will retry in an instant)" :cause cause)
-                      (px/sleep timeout))
+              (catch InterruptedException cause
+                (throw cause))
 
-                    (db/sql-exception? cause)
-                    (do
-                      (l/wrn :hint "database exception (will retry in an instant)" :cause cause)
-                      (px/sleep timeout))
+              (catch Exception cause
+                (cond
+                  (rds/exception? cause)
+                  (do
+                    (l/wrn :hint "redis exception (will retry in an instant)" :cause cause)
+                    (px/sleep timeout))
 
-                    :else
-                    (do
-                      (l/err :hint "unhandled exception (will retry in an instant)" :cause cause)
-                      (px/sleep timeout))))
+                  (db/sql-exception? cause)
+                  (do
+                    (l/wrn :hint "database exception (will retry in an instant)" :cause cause)
+                    (px/sleep timeout))
 
-                (finally
-                  (.close ^AutoCloseable rconn)))))
+                  :else
+                  (do
+                    (l/err :hint "unhandled exception (will retry in an instant)" :cause cause)
+                    (px/sleep timeout))))))
 
           (dispatcher []
             (l/inf :hint "started")
@@ -176,7 +177,7 @@ RETURNING task.id, task.queue")
               (catch InterruptedException _
                 (l/trc :hint "interrupted"))
               (catch Throwable cause
-                (l/err :hint " unexpected exception" :cause cause))
+                (l/err :hint "unexpected exception" :cause cause))
               (finally
                 (l/inf :hint "terminated"))))]
 

backend/test/backend_tests/storage_test.clj

@@ -318,3 +318,35 @@
     ;; 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.62"}
+  selmer/selmer {:mvn/version "1.12.69"}
   criterium/criterium {:mvn/version "0.4.6"}
 
   metosin/jsonista {:mvn/version "0.3.13"}
@@ -30,7 +30,7 @@
   integrant/integrant {:mvn/version "1.0.0"}
 
   funcool/tubax {:mvn/version "2021.05.20-0"}
-  funcool/cuerdas {:mvn/version "2025.06.16-414"}
+  funcool/cuerdas {:mvn/version "2026.415"}
   funcool/promesa
   {:git/sha "46048fc0d4bf5466a2a4121f5d52aefa6337f2e8"
    :git/url "https://github.com/funcool/promesa"}
@@ -48,12 +48,8 @@
   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

@@ -0,0 +1,7 @@
+#!/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,42 +44,43 @@
   [& params]
   `(str/concat ~@params))
 
-(defmacro export
-  "A helper macro that allows reexport a var in a current namespace."
-  [v]
-  (if (boolean (:ns &env))
+#?(:clj
+   (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/files/shapes_builder.cljc

@@ -82,6 +82,113 @@
 (declare create-svg-children)
 (declare parse-svg-element)
 
+(defn- process-gradient-stops
+  "Processes gradient stops to extract stop-color and stop-opacity from style attributes
+   and convert them to direct attributes. This ensures stops with style='stop-color:#...;stop-opacity:1'
+   are properly converted to stop-color and stop-opacity attributes."
+  [stops]
+  (mapv (fn [stop]
+          (let [stop-attrs (:attrs stop)
+                stop-style (get stop-attrs :style)
+                ;; Parse style if it's a string using csvg/parse-style utility
+                parsed-style (when (and (string? stop-style) (seq stop-style))
+                               (csvg/parse-style stop-style))
+                ;; Extract stop-color and stop-opacity from style
+                style-stop-color (when parsed-style (:stop-color parsed-style))
+                style-stop-opacity (when parsed-style (:stop-opacity parsed-style))
+                ;; Merge: use direct attributes first, then style values as fallback
+                final-attrs (cond-> stop-attrs
+                              (and style-stop-color (not (contains? stop-attrs :stop-color)))
+                              (assoc :stop-color style-stop-color)
+
+                              (and style-stop-opacity (not (contains? stop-attrs :stop-opacity)))
+                              (assoc :stop-opacity style-stop-opacity)
+
+                              ;; Remove style attribute if we've extracted its values
+                              (or style-stop-color style-stop-opacity)
+                              (dissoc :style))]
+            (assoc stop :attrs final-attrs)))
+        stops))
+
+(defn- resolve-gradient-href
+  "Resolves xlink:href references in gradients by merging the referenced gradient's
+   stops and attributes with the referencing gradient. This ensures gradients that
+   reference other gradients (like linearGradient3550 referencing linearGradient3536)
+   inherit the stops from the base gradient.
+   
+   According to SVG spec, when a gradient has xlink:href:
+   - It inherits all attributes from the referenced gradient
+   - It inherits all stops from the referenced gradient
+   - The referencing gradient's attributes override the base ones
+   - If the referencing gradient has stops, they replace the base stops
+   
+   Returns the defs map with all gradient href references resolved."
+  [defs]
+  (letfn [(resolve-gradient [gradient-id gradient-node defs visited]
+            (if (contains? visited gradient-id)
+              (do
+                #?(:cljs (js/console.warn "[resolve-gradient] Circular reference detected for" gradient-id)
+                   :clj nil)
+                gradient-node)  ;; Avoid circular references
+              (let [attrs (:attrs gradient-node)
+                    href-id (or (:href attrs) (:xlink:href attrs))
+                    href-id (when (and (string? href-id) (pos? (count href-id)))
+                              (subs href-id 1))  ;; Remove leading #
+
+                    base-gradient (when (and href-id (contains? defs href-id))
+                                    (get defs href-id))
+
+                    resolved-base (when base-gradient (resolve-gradient href-id base-gradient defs (conj visited gradient-id)))]
+
+                (if resolved-base
+                  ;; Merge: base gradient attributes + referencing gradient attributes
+                  ;; Use referencing gradient's stops if present, otherwise use base stops
+                  (let [base-attrs (:attrs resolved-base)
+                        ref-attrs (:attrs gradient-node)
+
+                        ;; Start with base attributes (without id), then merge with ref attributes
+                        ;; This ensures ref attributes override base ones
+                        base-attrs-clean (dissoc base-attrs :id)
+                        ref-attrs-clean (dissoc ref-attrs :href :xlink:href :id)
+
+                        ;; Special handling for gradientTransform: if both have it, combine them
+                        base-transform (get base-attrs :gradientTransform)
+                        ref-transform (get ref-attrs :gradientTransform)
+                        combined-transform (cond
+                                             (and base-transform ref-transform)
+                                             (str base-transform " " ref-transform)  ;; Apply base first, then ref
+                                             :else (or ref-transform base-transform))
+
+                        ;; Merge attributes: base first, then ref (ref overrides)
+                        merged-attrs (-> (d/deep-merge base-attrs-clean ref-attrs-clean)
+                                         (cond-> combined-transform
+                                           (assoc :gradientTransform combined-transform)))
+
+                        ;; If referencing gradient has content (stops), use it; otherwise use base content
+                        final-content (if (seq (:content gradient-node))
+                                        (:content gradient-node)
+                                        (:content resolved-base))
+
+                        ;; Process stops to extract stop-color and stop-opacity from style attributes
+                        processed-content (process-gradient-stops final-content)
+
+                        result {:tag (:tag gradient-node)
+                                :attrs (assoc merged-attrs :id gradient-id)
+                                :content processed-content}]
+                    result)
+                  ;; Process stops even for gradients without references to extract style attributes
+                  (let [processed-content (process-gradient-stops (:content gradient-node))]
+                    (assoc gradient-node :content processed-content))))))]
+    (let [gradient-tags #{:linearGradient :radialGradient}
+          result (reduce-kv
+                  (fn [acc id node]
+                    (if (contains? gradient-tags (:tag node))
+                      (assoc acc id (resolve-gradient id node defs #{}))
+                      (assoc acc id node)))
+                  {}
+                  defs)]
+      result)))
+
 (defn create-svg-shapes
   ([svg-data pos objects frame-id parent-id selected center?]
    (create-svg-shapes (uuid/next) svg-data pos objects frame-id parent-id selected center?))
@@ -112,6 +219,9 @@
              (csvg/fix-percents)
              (csvg/extract-defs))
 
+         ;; Resolve gradient href references in all defs before processing shapes
+         def-nodes (resolve-gradient-href def-nodes)
+
          ;; In penpot groups have the size of their children. To
          ;; respect the imported svg size and empty space let's create
          ;; a transparent shape as background to respect the imported
@@ -142,12 +252,23 @@
          (reduce (partial create-svg-children objects selected frame-id root-id svg-data)
                  [unames []]
                  (d/enumerate (->> (:content svg-data)
-                                   (mapv #(csvg/inherit-attributes root-attrs %)))))]
+                                   (mapv #(csvg/inherit-attributes root-attrs %)))))
 
-     [root-shape children])))
+         ;; Collect all defs from children and merge into root shape
+         all-defs-from-children (reduce (fn [acc child]
+                                          (if-let [child-defs (:svg-defs child)]
+                                            (merge acc child-defs)
+                                            acc))
+                                        {}
+                                        children)
+
+         ;; Merge defs from svg-data and children into root shape
+         root-shape-with-defs (assoc root-shape :svg-defs (merge def-nodes all-defs-from-children))]
+
+     [root-shape-with-defs children])))
 
 (defn create-raw-svg
-  [name frame-id {:keys [x y width height offset-x offset-y]} {:keys [attrs] :as data}]
+  [name frame-id {:keys [x y width height offset-x offset-y defs] :as svg-data} {:keys [attrs] :as data}]
   (let [props (csvg/attrs->props attrs)
         vbox  (grc/make-rect offset-x offset-y width height)]
     (cts/setup-shape
@@ -160,10 +281,11 @@
       :y y
       :content data
       :svg-attrs props
-      :svg-viewbox vbox})))
+      :svg-viewbox vbox
+      :svg-defs defs})))
 
 (defn create-svg-root
-  [id frame-id parent-id {:keys [name x y width height offset-x offset-y attrs]}]
+  [id frame-id parent-id {:keys [name x y width height offset-x offset-y attrs defs] :as svg-data}]
   (let [props (-> (dissoc attrs :viewBox :view-box :xmlns)
                   (d/without-keys csvg/inheritable-props)
                   (csvg/attrs->props))]
@@ -177,7 +299,8 @@
       :height height
       :x (+ x offset-x)
       :y (+ y offset-y)
-      :svg-attrs props})))
+      :svg-attrs props
+      :svg-defs defs})))
 
 (defn create-svg-children
   [objects selected frame-id parent-id svg-data [unames children] [_index svg-element]]
@@ -198,7 +321,7 @@
 
 
 (defn create-group
-  [name frame-id {:keys [x y width height offset-x offset-y] :as svg-data} {:keys [attrs]}]
+  [name frame-id {:keys [x y width height offset-x offset-y defs] :as svg-data} {:keys [attrs]}]
   (let [transform (csvg/parse-transform (:transform attrs))
         attrs     (-> attrs
                       (d/without-keys csvg/inheritable-props)
@@ -214,7 +337,8 @@
       :height height
       :svg-transform transform
       :svg-attrs attrs
-      :svg-viewbox vbox})))
+      :svg-viewbox vbox
+      :svg-defs defs})))
 
 (defn create-path-shape [name frame-id svg-data {:keys [attrs] :as data}]
   (when (and (contains? attrs :d) (seq (:d attrs)))
@@ -523,6 +647,21 @@
                  :else (dm/str tag))]
     (dm/str "svg-" suffix)))
 
+(defn- filter-valid-def-references
+  "Filters out false positive references that are not valid def IDs.
+   Filters out:
+   - Colors in style attributes (hex colors like #f9dd67)
+   - Style fragments that contain CSS keywords (like stop-opacity)
+   - References that don't exist in defs"
+  [ref-ids defs]
+  (let [is-style-fragment? (fn [ref-id]
+                             (or (clr/hex-color-string? (str "#" ref-id))
+                                 (str/includes? ref-id ";")  ;; Contains CSS separator
+                                 (str/includes? ref-id "stop-opacity")  ;; CSS keyword
+                                 (str/includes? ref-id "stop-color")))]  ;; CSS keyword
+    (->> ref-ids
+         (remove is-style-fragment?)  ;; Filter style fragments and hex colors
+         (filter #(contains? defs %)))))  ;; Only existing defs
 
 (defn parse-svg-element
   [frame-id svg-data {:keys [tag attrs hidden] :as element} unames]
@@ -534,7 +673,11 @@
   (let [name         (or (:id attrs) (tag->name tag))
         att-refs     (csvg/find-attr-references attrs)
         defs         (get svg-data :defs)
-        references   (csvg/find-def-references defs att-refs)
+        valid-refs   (filter-valid-def-references att-refs defs)
+        all-refs     (csvg/find-def-references defs valid-refs)
+        ;; Filter the final result to ensure all references are valid defs
+        ;; This prevents false positives from style attributes in gradient stops
+        references   (filter-valid-def-references all-refs defs)
 
         href-id      (or (:href attrs) (:xlink:href attrs) " ")
         href-id      (if (and (string? href-id)

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

@@ -12,8 +12,11 @@
    [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
    [app.common.files.variant :as cfv]
+   [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
+   [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.common :as gco]
    [app.common.logging :as log]
    [app.common.logic.shapes :as cls]
    [app.common.logic.variant-properties :as clvp]
@@ -26,6 +29,7 @@
    [app.common.types.library :as ctl]
    [app.common.types.page :as ctp]
    [app.common.types.pages-list :as ctpl]
+   [app.common.types.path.segment :as segment]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
@@ -1876,6 +1880,44 @@
                    roperations'
                    uoperations')))))))
 
+(defn- set-path-new-values
+  [current-shape prev-shape transform]
+  (let [new-content   (segment/transform-content
+                       (:content current-shape)
+                       (gmt/transform-in (gpt/point 0 0) transform))
+        new-points    (-> (segment/content->selrect new-content)
+                          (grc/rect->points))
+        points-center (gco/points->center new-points)
+        new-selrect   (gsh/calculate-selrect new-points points-center)
+        shape         (assoc current-shape
+                             :content new-content
+                             :points new-points
+                             :selrect new-selrect)
+
+        prev-center   (segment/content-center (:content prev-shape))
+        delta         (gpt/subtract points-center (first new-points))
+        new-pos       (gpt/subtract prev-center delta)]
+    (gsh/absolute-move shape new-pos)))
+
+(defn- switch-path-change-value
+  [prev-shape           ;; The shape before the switch
+   current-shape        ;; The shape after the switch (a clean copy)
+   ref-shape            ;; The referenced shape on the main component
+                        ;; before the switch
+   attr]
+  (let [old-width (-> ref-shape :selrect :width)
+        new-width (-> prev-shape :selrect :width)
+
+        old-height (-> ref-shape :selrect :height)
+        new-height (-> prev-shape :selrect :height)
+
+        transform (-> (gpt/point (/ new-width old-width)
+                                 (/ new-height old-height))
+                      (gmt/scale-matrix))
+
+        shape     (set-path-new-values current-shape prev-shape transform)]
+    (get shape attr)))
+
 
 (defn- switch-text-change-value
   [prev-content         ;; The :content of the text before the switch
@@ -2027,6 +2069,10 @@
                (= :content attr)
                (touched attr-group))
 
+              path-change?
+              (and (= :path (:type current-shape))
+                   (contains? #{:points :selrect :content} attr))
+
               ;; position-data is a special case because can be affected by :geometry-group and :content-group
               ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
               ;; so it's calculated again
@@ -2055,6 +2101,12 @@
                                             (:content origin-ref-shape)
                                             touched)
 
+                  path-change?
+                  (switch-path-change-value previous-shape
+                                            current-shape
+                                            origin-ref-shape
+                                            attr)
+
                   :else
                   (get previous-shape attr)))
 

common/src/app/common/schema.cljc

@@ -281,7 +281,20 @@
 (defn check-fn
   "Create a predefined check function"
   [s & {:keys [hint type code]}]
-  (let [s          (schema s)
+  (let [s          #?(:clj
+                      (schema s)
+                      :cljs
+                      (try
+                        (schema s)
+                        (catch :default cause
+                          (let [data (ex-data cause)]
+                            (if (= :malli.core/invalid-schema (:type data))
+                              (throw (ex-info
+                                      (str "Invalid schema\n"
+                                           (pp/pprint-str (:data data)))
+                                      {}))
+                              (throw cause))))))
+
         validator* (delay (m/validator s))
         explainer* (delay (m/explainer s))
         hint       (or ^boolean hint "check error")
@@ -842,38 +855,6 @@
                                     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!
@@ -951,7 +932,7 @@
   :pred #(and (string? %) (not (str/blank? %)))
   :property-pred
   (fn [{:keys [min max] :as props}]
-    (if (seq props)
+    (if (or min max)
       (fn [value]
         (let [size (count value)]
           (cond

common/src/app/common/svg.cljc

@@ -546,9 +546,19 @@
            filter-values)))
 
 (defn extract-ids [val]
-  (when (some? val)
+  ;; Extract referenced ids from string values like "url(#myId)".
+  ;; Non-string values (maps, numbers, nil, etc.) return an empty seq
+  ;; to avoid re-seq type errors when attributes carry nested structures.
+  (cond
+    (string? val)
     (->> (re-seq xml-id-regex val)
-         (mapv second))))
+         (mapv second))
+
+    (sequential? val)
+    (mapcat extract-ids val)
+
+    :else
+    []))
 
 (defn fix-dot-number
   "Fixes decimal numbers starting in dot but without leading 0"

common/src/app/common/types/file.cljc

@@ -362,24 +362,24 @@
         component           (ctkl/get-component component-file (:component-id top-instance) true)
         remote-shape        (get-ref-shape component-file component shape)
         component-container (get-component-container component-file component)
-        [remote-shape component-container]
+        [remote-shape component-container component-file]
         (if (some? remote-shape)
-          [remote-shape component-container]
+          [remote-shape component-container component-file]
           ;; If not found, try the case of this being a fostered or swapped children
-          (let [head-instance       (ctn/get-head-shape (:objects container) shape)
-                component-file      (get-in libraries [(:component-file head-instance) :data])
-                head-component      (ctkl/get-component component-file (:component-id head-instance) true)
-                remote-shape'       (get-ref-shape component-file head-component shape)
-                component-container (get-component-container component-file component)]
-            [remote-shape' component-container]))]
+          (let [head-instance        (ctn/get-head-shape (:objects container) shape)
+                component-file       (get-in libraries [(:component-file head-instance) :data])
+                head-component       (ctkl/get-component component-file (:component-id head-instance) true)
+                remote-shape'        (get-ref-shape component-file head-component shape)
+                component-container' (get-component-container component-file head-component)]
+            [remote-shape' component-container' component-file]))]
 
     (if (nil? remote-shape)
       nil
       (if (nil? (:shape-ref remote-shape))
         (cond-> remote-shape
           (and remote-shape with-context?)
-          (with-meta {:file {:id (:id file-data)
-                             :data file-data}
+          (with-meta {:file {:id (:id component-file)
+                             :data component-file}
                       :container component-container}))
         (find-remote-shape component-container libraries remote-shape :with-context? with-context?)))))
 

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

@@ -234,16 +234,15 @@
   "Calculate the boolean content from shape and objects. Returns a
   packed PathData instance"
   [shape objects]
-  (let [content (if (fn? wasm:calc-bool-content)
-                  (wasm:calc-bool-content (get shape :bool-type)
-                                          (get shape :shapes))
-                  (calc-bool-content* shape objects))]
+  (let [content (calc-bool-content* shape objects)]
     (impl/path-data content)))
 
 (defn update-bool-shape
   "Calculates the selrect+points for the boolean shape"
   [shape objects]
-  (let [content (calc-bool-content shape objects)
+  (let [content (if (fn? wasm:calc-bool-content)
+                  (wasm:calc-bool-content shape objects)
+                  (calc-bool-content shape objects))
         shape   (assoc shape :content content)]
     (update-geometry shape)))
 
@@ -267,3 +266,4 @@
    (-> (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,6 +565,9 @@
 (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

@@ -1410,8 +1410,8 @@ Will return a value that matches this schema:
     ;; NOTE: we can't assign statically at eval time the value of a
     ;; function that is declared but not defined; so we need to pass
     ;; an anonymous function and delegate the resolution to runtime
-    {:encode/json #(export-dtcg-json %)
-     :decode/json #(read-multi-set-dtcg %)
+    {:encode/json #(some-> % export-dtcg-json)
+     :decode/json #(some-> % read-multi-set-dtcg)
      ;; FIXME: add better, more reallistic generator
      :gen/gen (->> (sg/small-int)
                    (sg/fmap (fn [_]
@@ -1679,7 +1679,7 @@ Will return a value that matches this schema:
        ["id" {:optional true} :string]
        ["name" :string]
        ["description" :string]
-       ["isSource" :boolean]
+       ["isSource" {:optional true} :boolean]
        ["selectedTokenSets"
         [:map-of :string [:enum "enabled" "disabled"]]]]]]
     ["$metadata" {:optional true}

docker/devenv/Dockerfile

@@ -101,13 +101,45 @@ 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.2.1565
+ENV CLOJURE_VERSION=1.12.3.1577
 
 RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
@@ -393,6 +425,7 @@ 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
@@ -403,6 +436,9 @@ 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,6 +33,8 @@ services:
       - 3447:3447
       - 3448:3448
       - 3449:3449
+      - 3449:3449/udp
+      - 3450:3450
       - 6006:6006
       - 6060:6060
       - 6061:6061
@@ -115,6 +117,11 @@ services:
     volumes:
       - "valkey_data:/data"
 
+    networks:
+      default:
+        aliases:
+          - redis
+
   mailer:
     image: sj26/mailcatcher:latest
     restart: always
@@ -123,6 +130,12 @@ services:
     ports:
       - "1080:1080"
 
+    networks:
+      default:
+        aliases:
+          - mailer
+
+
   # https://github.com/rroemhild/docker-test-openldap
   ldap:
     image: rroemhild/test-openldap:2.1
@@ -136,3 +149,9 @@ services:
       nofile:
         soft: 1024
         hard: 1024
+
+    networks:
+      default:
+        aliases:
+          - ldap
+

docker/devenv/files/Caddyfile

@@ -0,0 +1,12 @@
+{
+    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,4 +2,5 @@
 
 set -e
 nginx
-tail -f /dev/null
+caddy start -c /home/Caddyfile
+tail -f /dev/null;

docker/devenv/files/nginx.conf

@@ -12,7 +12,7 @@ http {
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
-    keepalive_timeout 65;
+    keepalive_timeout 100;
     types_hash_max_size 2048;
     server_tokens off;
 
@@ -55,7 +55,7 @@ http {
     proxy_cache_key "$host$request_uri";
 
     server {
-        listen 3449 default_server;
+        listen 4449 default_server;
         server_name _;
 
         client_max_body_size 300M;
@@ -223,26 +223,19 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~ ^/js/config.js$ {
-                add_header Cache-Control "no-store, no-cache, max-age=0" always;
+            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+                add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 
-            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 ~* \.(js|css|wasm)$ {
+                add_header Cache-Control "no-store" always;
             }
 
             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;
+            add_header Cache-Control "no-store" always;
             try_files $uri /index.html$is_args$args /index.html =404;
         }
     }

docker/devenv/files/selfsigned.crt

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

docker/devenv/files/selfsigned.key

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

docker/devenv/files/start-tmux.sh

@@ -23,30 +23,25 @@ tmux -2 new-session -d -s penpot
 tmux rename-window -t penpot:0 'frontend watch'
 tmux select-window -t penpot:0
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch' enter
+tmux send-keys -t penpot './scripts/watch app' enter
 
-tmux new-window -t penpot:1 -n 'frontend shadow'
+tmux new-window -t penpot:1 -n 'frontend storybook'
 tmux select-window -t penpot:1
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch:app' enter
+tmux send-keys -t penpot './scripts/watch storybook' enter
 
-tmux new-window -t penpot:2 -n 'frontend storybook'
+tmux new-window -t penpot:2 -n 'exporter'
 tmux select-window -t penpot:2
-tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch:storybook' enter
-
-tmux new-window -t penpot:3 -n 'exporter'
-tmux select-window -t penpot:3
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot 'rm -f target/app.js*' enter C-l
-tmux send-keys -t penpot 'yarn run watch' enter
+tmux send-keys -t penpot './scripts/watch' enter
 
 tmux split-window -v
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot './scripts/wait-and-start.sh' enter
 
-tmux new-window -t penpot:4 -n 'backend'
-tmux select-window -t penpot:4
+tmux new-window -t penpot:3 -n 'backend'
+tmux select-window -t penpot:3
 tmux send-keys -t penpot 'cd penpot/backend' enter C-l
 tmux send-keys -t penpot './scripts/start-dev' enter
 

docs/technical-guide/configuration.md

@@ -314,7 +314,7 @@ If you're using the official <code class="language-bash">docker-compose.yml</cod
 
 ## Email configuration
 
-By default, <code class="language-bash">smpt</code> flag is disabled, the email will be
+By default, <code class="language-bash">smtp</code> flag is disabled, the email will be
 printed to the console, which means that the emails will be shown in the stdout.
 
 Note that if you plan to invite members to a team, it is recommended that you enable SMTP

docs/technical-guide/developer/abstraction-levels.md

@@ -1,5 +1,6 @@
 ---
 title: 3.07. Abstraction levels
+desc: "Penpot Technical Guide: organize data and logic in clear abstraction layers—ADTs, file ops, event-sourced changes, business rules, and data events."
 ---
 
 # Code organization in abstraction levels

docs/technical-guide/developer/backend.md

@@ -1,5 +1,6 @@
 ---
 title: 3.06. Backend Guide
+desc: "Penpot Technical Guide: Backend basics - REPL setup, loading fixtures, database migrations, and clj-kondo linting to speed development workflows."
 ---
 
 # Backend guide #

docs/technical-guide/getting-started/elestio.md

@@ -1,5 +1,6 @@
 ---
 title: 1.2 Install with Elestio
+desc: "Step-by-step guide to deploy a self-hosted Penpot on Elestio: 3-minute setup, managed DNS/SMTP/SSL/backups, Docker Compose config, updates & support."
 ---
 
 # Install with Elestio

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

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

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

@@ -1,6 +1,7 @@
 ---
 title: Design Tokens
 order: 5
+desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG format, with sets, themes, aliases, equations and JSON import/export.
 ---
 
 <h1 id="design-tokens">Design Tokens</h1>

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

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

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

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

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

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

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

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

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

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

docs/user-guide/index.njk

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

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

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

exporter/package.json

@@ -21,6 +21,7 @@
     "raw-body": "^3.0.1",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
+    "undici": "^7.16.0",
     "xml-js": "^1.6.11",
     "xregexp": "^5.1.2"
   },
@@ -29,8 +30,8 @@
   },
   "scripts": {
     "clear:shadow-cache": "rm -rf .shadow-cljs && rm -rf target",
-    "watch:app": "clojure -M:dev:shadow-cljs watch main",
-    "watch": "yarn run clear:shadow-cache && yarn run watch:app",
+    "watch:app": "yarn run clear:shadow-cache && clojure -M:dev:shadow-cljs watch main",
+    "watch": "yarn run watch:app",
     "build:app": "clojure -M:dev:shadow-cljs release main",
     "build": "yarn run clear:shadow-cache && yarn run build:app",
     "fmt:clj:check": "cljfmt check --parallel=false src/",

exporter/scripts/build

@@ -18,4 +18,15 @@ 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/watch

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+TARGET=${1:-app};
+
+set -ex
+
+exec yarn run watch:$TARGET

exporter/src/app/browser.cljs

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

exporter/src/app/handlers/export_shapes.cljs

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

exporter/src/app/handlers/resources.cljs

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

exporter/src/app/util/shell.cljs

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

exporter/yarn.lock

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

frontend/deps.edn

@@ -50,5 +50,8 @@
 
   :shadow-cljs
   {:main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :jvm-opts ["--sun-misc-unsafe-memory-access=allow" "-Dpenpot.wasm.profile-marks=true"]}
+   :jvm-opts ["--sun-misc-unsafe-memory-access=allow"
+              "-Dpenpot.wasm.profile-marks=true"
+              "-XX:+UnlockExperimentalVMOptions"
+              "-XX:CompileCommand=blackhole,criterium.blackhole.Blackhole::consume"]}
   }}

frontend/package.json

@@ -27,12 +27,13 @@
     "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/",
     "fmt:clj:check": "cljfmt check --parallel=false src/ test/",
-    "fmt:js": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -w",
-    "fmt:js:check": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js",
+    "fmt:js": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -c text-editor/**/*.js -w",
+    "fmt:js:check": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js text-editor/**/*.js",
     "lint:clj": "clj-kondo --parallel --lint src/",
     "lint:scss": "yarn run prettier -c resources/styles -c src/**/*.scss",
     "lint:scss:fix": "yarn run prettier -c resources/styles -c src/**/*.scss -w",
@@ -46,10 +47,9 @@
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
-    "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
-    "watch": "yarn run watch:app:assets",
-    "watch:storybook": "yarn run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
-    "watch:storybook:assets": "node ./scripts/watch-storybook.js"
+    "watch": "exit 0",
+    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {
     "@playwright/test": "1.52.0",
@@ -105,7 +105,7 @@
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
     "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "portal:./text-editor",
     "@tokens-studio/sd-transforms": "1.2.11",
     "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",

frontend/playwright/data/text-editor/get-file-blank.json

@@ -0,0 +1,58 @@
+{
+  "~:features": {
+    "~#set": [
+      "layout/grid",
+      "styles/v2",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true,
+    "~:can-read": true,
+    "~:is-logged": true
+  },
+  "~:has-media-trimmed": false,
+  "~:comment-thread-seqn": 0,
+  "~:name": "New File 1",
+  "~:revn": 11,
+  "~:modified-at": "~m1713873823633",
+  "~:id": "~uc7ce0794-0992-8105-8004-38f280443849",
+  "~:is-shared": false,
+  "~:version": 46,
+  "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
+  "~:created-at": "~m1713536343369",
+  "~:data": {
+    "~:pages": [
+      "~u66697432-c33d-8055-8006-2c62cc084cad"
+    ],
+    "~:pages-index": {
+      "~u66697432-c33d-8055-8006-2c62cc084cad": {
+        "~#penpot/pointer": [
+          "~ude58c8f6-c5c2-8196-8004-3df9e2e52d88",
+          {
+            "~:created-at": "~m1713873823636"
+          }
+        ]
+      }
+    },
+    "~:id": "~uc7ce0794-0992-8105-8004-38f280443849",
+    "~:options": {
+      "~:components-v2": true
+    },
+    "~:recent-colors": [
+      {
+        "~:color": "#0000ff",
+        "~:opacity": 1,
+        "~:id": null,
+        "~:file-id": null,
+        "~:image": null
+      }
+    ]
+  }
+}

frontend/playwright/data/text-editor/get-file-lorem-ipsum.json

@@ -0,0 +1,345 @@
+{
+  "~:features": {
+    "~#set": [
+      "fdata/path-data",
+      "plugins/runtime",
+      "design-tokens/v1",
+      "layout/grid",
+      "styles/v2",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type",
+      "text-editor/v2"
+    ]
+  },
+  "~:team-id": "~u9e6e22b2-db76-81d6-8006-75d7cdbb8bad",
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true,
+    "~:can-read": true,
+    "~:is-logged": true
+  },
+  "~:has-media-trimmed": false,
+  "~:comment-thread-seqn": 0,
+  "~:name": "Bug 11552",
+  "~:revn": 3,
+  "~:modified-at": "~m1753957736516",
+  "~:vern": 0,
+  "~:id": "~u238a17e0-75ff-8075-8006-934586ea2230",
+  "~:is-shared": false,
+  "~:migrations": {
+    "~#ordered-set": [
+      "legacy-2",
+      "legacy-3",
+      "legacy-5",
+      "legacy-6",
+      "legacy-7",
+      "legacy-8",
+      "legacy-9",
+      "legacy-10",
+      "legacy-11",
+      "legacy-12",
+      "legacy-13",
+      "legacy-14",
+      "legacy-16",
+      "legacy-17",
+      "legacy-18",
+      "legacy-19",
+      "legacy-25",
+      "legacy-26",
+      "legacy-27",
+      "legacy-28",
+      "legacy-29",
+      "legacy-31",
+      "legacy-32",
+      "legacy-33",
+      "legacy-34",
+      "legacy-36",
+      "legacy-37",
+      "legacy-38",
+      "legacy-39",
+      "legacy-40",
+      "legacy-41",
+      "legacy-42",
+      "legacy-43",
+      "legacy-44",
+      "legacy-45",
+      "legacy-46",
+      "legacy-47",
+      "legacy-48",
+      "legacy-49",
+      "legacy-50",
+      "legacy-51",
+      "legacy-52",
+      "legacy-53",
+      "legacy-54",
+      "legacy-55",
+      "legacy-56",
+      "legacy-57",
+      "legacy-59",
+      "legacy-62",
+      "legacy-65",
+      "legacy-66",
+      "legacy-67",
+      "0001-remove-tokens-from-groups",
+      "0002-normalize-bool-content-v2",
+      "0002-clean-shape-interactions",
+      "0003-fix-root-shape",
+      "0003-convert-path-content-v2",
+      "0004-clean-shadow-color",
+      "0005-deprecate-image-type",
+      "0006-fix-old-texts-fills",
+      "0007-clear-invalid-strokes-and-fills-v2",
+      "0008-fix-library-colors-v4",
+      "0009-clean-library-colors",
+      "0009-add-partial-text-touched-flags"
+    ]
+  },
+  "~:version": 67,
+  "~:project-id": "~u9e6e22b2-db76-81d6-8006-75d7cdc30669",
+  "~:created-at": "~m1753957644225",
+  "~:data": {
+    "~:pages": ["~u238a17e0-75ff-8075-8006-934586ea2231"],
+    "~:pages-index": {
+      "~u238a17e0-75ff-8075-8006-934586ea2231": {
+        "~:objects": {
+          "~u00000000-0000-0000-0000-000000000000": {
+            "~#shape": {
+              "~:y": 0,
+              "~:hide-fill-on-export": false,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:name": "Root Frame",
+              "~:width": 0.01,
+              "~:type": "~:frame",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 0.0,
+                    "~:y": 0.0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0.0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0.01
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.0,
+                    "~:y": 0.01
+                  }
+                }
+              ],
+              "~:r2": 0,
+              "~:proportion-lock": false,
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:r3": 0,
+              "~:r1": 0,
+              "~:id": "~u00000000-0000-0000-0000-000000000000",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:strokes": [],
+              "~:x": 0,
+              "~:proportion": 1.0,
+              "~:r4": 0,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 0,
+                  "~:width": 0.01,
+                  "~:height": 0.01,
+                  "~:x1": 0,
+                  "~:y1": 0,
+                  "~:x2": 0.01,
+                  "~:y2": 0.01
+                }
+              },
+              "~:fills": [
+                {
+                  "~:fill-color": "#FFFFFF",
+                  "~:fill-opacity": 1
+                }
+              ],
+              "~:flip-x": null,
+              "~:height": 0.01,
+              "~:flip-y": null,
+              "~:shapes": ["~ucc6f0580-449c-8019-8006-9345db077fa0"]
+            }
+          },
+          "~ucc6f0580-449c-8019-8006-9345db077fa0": {
+            "~#shape": {
+              "~:y": 438,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:grow-type": "~:auto-width",
+              "~:content": {
+                "~:type": "root",
+                "~:key": "1s4am1jl24s",
+                "~:children": [
+                  {
+                    "~:type": "paragraph-set",
+                    "~:children": [
+                      {
+                        "~:line-height": "1.2",
+                        "~:font-style": "normal",
+                        "~:children": [
+                          {
+                            "~:line-height": "1.2",
+                            "~:font-style": "normal",
+                            "~:typography-ref-id": null,
+                            "~:text-transform": "none",
+                            "~:font-id": "sourcesanspro",
+                            "~:key": "13p0zwl2yhc",
+                            "~:font-size": "14",
+                            "~:font-weight": "400",
+                            "~:typography-ref-file": null,
+                            "~:font-variant-id": "regular",
+                            "~:text-decoration": "none",
+                            "~:letter-spacing": "0",
+                            "~:fills": [
+                              {
+                                "~:fill-color": "#000000",
+                                "~:fill-opacity": 1
+                              }
+                            ],
+                            "~:font-family": "sourcesanspro",
+                            "~:text": "Lorem ipsum"
+                          }
+                        ],
+                        "~:typography-ref-id": null,
+                        "~:text-transform": "none",
+                        "~:text-align": "left",
+                        "~:font-id": "sourcesanspro",
+                        "~:key": "20hf3kmyoub",
+                        "~:font-size": "14",
+                        "~:font-weight": "400",
+                        "~:typography-ref-file": null,
+                        "~:text-direction": "ltr",
+                        "~:type": "paragraph",
+                        "~:font-variant-id": "regular",
+                        "~:text-decoration": "none",
+                        "~:letter-spacing": "0",
+                        "~:fills": [
+                          {
+                            "~:fill-color": "#000000",
+                            "~:fill-opacity": 1
+                          }
+                        ],
+                        "~:font-family": "sourcesanspro"
+                      }
+                    ]
+                  }
+                ],
+                "~:vertical-align": "top"
+              },
+              "~:hide-in-viewer": false,
+              "~:name": "Lorem ipsum",
+              "~:width": 77,
+              "~:type": "~:text",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 404,
+                    "~:y": 438
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 481,
+                    "~:y": 438
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 481,
+                    "~:y": 455
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 404,
+                    "~:y": 455
+                  }
+                }
+              ],
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:id": "~ucc6f0580-449c-8019-8006-9345db077fa0",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:x": 404,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 404,
+                  "~:y": 438,
+                  "~:width": 77,
+                  "~:height": 17,
+                  "~:x1": 404,
+                  "~:y1": 438,
+                  "~:x2": 481,
+                  "~:y2": 455
+                }
+              },
+              "~:flip-x": null,
+              "~:height": 17,
+              "~:flip-y": null
+            }
+          }
+        },
+        "~:id": "~u238a17e0-75ff-8075-8006-934586ea2231",
+        "~:name": "Page 1"
+      }
+    },
+    "~:id": "~u238a17e0-75ff-8075-8006-934586ea2230",
+    "~:options": {
+      "~:components-v2": true,
+      "~:base-font-size": "16px"
+    }
+  }
+}

frontend/playwright/data/text-editor/update-file-11552.json

@@ -1,5 +1 @@
-{
-    "~:revn": 2,
-    "~:lagged": []
-
-}
+w

frontend/playwright/data/text-editor/update-file.json

@@ -0,0 +1,4 @@
+{
+  "~:revn": 2,
+  "~:lagged": []
+}

frontend/playwright/data/workspace/update-file-empty.json

@@ -0,0 +1,9 @@
+[
+  {
+    "~:id": "~u088df3d4-d383-80f6-8004-527e50ea4f1f",
+    "~:revn": 21,
+    "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
+    "~:session-id": "~u1dc6d4fa-7bd3-803a-8004-527dd9df2c62",
+    "~:changes": []
+  }
+]

frontend/playwright/helpers/Clipboard.js

@@ -0,0 +1,36 @@
+export class Clipboard {
+  static Permission = {
+    ONLY_READ: ["clipboard-read"],
+    ONLY_WRITE: ["clipboard-write"],
+    ALL: ["clipboard-read", "clipboard-write"],
+  };
+
+  static enable(context, permissions) {
+    return context.grantPermissions(permissions);
+  }
+
+  static writeText(page, text) {
+    return page.evaluate((text) => navigator.clipboard.writeText(text), text);
+  }
+
+  static readText(page) {
+    return page.evaluate(() => navigator.clipboard.readText());
+  }
+
+  constructor(page, context) {
+    this.page = page;
+    this.context = context;
+  }
+
+  enable(permissions) {
+    return Clipboard.enable(this.context, permissions);
+  }
+
+  writeText(text) {
+    return Clipboard.writeText(this.page, text);
+  }
+
+  readText() {
+    return Clipboard.readText(this.page);
+  }
+}

frontend/playwright/helpers/Transit.js

@@ -0,0 +1,28 @@
+export class Transit {
+  static parse(value) {
+    if (typeof value !== "string") return value;
+
+    if (value.startsWith("~")) return value.slice(2);
+
+    return value;
+  }
+
+  static get(object, ...path) {
+    let aux = object;
+    for (const name of path) {
+      if (typeof name !== "string") {
+        if (!(name in aux)) {
+          return undefined;
+        }
+        aux = aux[name];
+      } else {
+        const transitName = `~:${name}`;
+        if (!(transitName in aux)) {
+          return undefined;
+        }
+        aux = aux[transitName];
+      }
+    }
+    return this.parse(aux);
+  }
+}

frontend/playwright/ui/pages/BasePage.js

@@ -1,4 +1,27 @@
 export class BasePage {
+  /**
+   * Mocks multiple RPC calls in a single call.
+   *
+   * @param {Page} page
+   * @param {object<string, string>} paths
+   * @param {*} options
+   * @returns {Promise<void>}
+   */
+  static async mockRPCs(page, paths, options) {
+    for (const [path, jsonFilename] of Object.entries(paths)) {
+      await this.mockRPC(page, path, jsonFilename, options);
+    }
+  }
+
+  /**
+   * Mocks an RPC call using a file.
+   *
+   * @param {Page} page
+   * @param {string} path
+   * @param {string} jsonFilename
+   * @param {*} options
+   * @returns {Promise<void>}
+   */
   static async mockRPC(page, path, jsonFilename, options) {
     if (!page) {
       throw new TypeError("Invalid page argument. Must be a Playwright page.");
@@ -93,6 +116,10 @@ export class BasePage {
     return this.#page;
   }
 
+  async mockRPCs(paths, options) {
+    return BasePage.mockRPCs(this.page, paths, options);
+  }
+
   async mockRPC(path, jsonFilename, options) {
     return BasePage.mockRPC(this.page, path, jsonFilename, options);
   }

frontend/playwright/ui/pages/WasmWorkspacePage.js

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

frontend/playwright/ui/pages/WorkspacePage.js

@@ -1,7 +1,146 @@
 import { expect } from "@playwright/test";
+import { readFile } from "node:fs/promises";
 import { BaseWebSocketPage } from "./BaseWebSocketPage";
+import { Transit } from "../../helpers/Transit";
 
 export class WorkspacePage extends BaseWebSocketPage {
+  static TextEditor = class TextEditor {
+    constructor(workspacePage) {
+      this.workspacePage = workspacePage;
+
+      // locators.
+      this.fontSize = this.workspacePage.rightSidebar.getByRole("textbox", {
+        name: "Font Size",
+      });
+      this.lineHeight = this.workspacePage.rightSidebar.getByRole("textbox", {
+        name: "Line Height",
+      });
+      this.letterSpacing = this.workspacePage.rightSidebar.getByRole(
+        "textbox",
+        {
+          name: "Letter Spacing",
+        },
+      );
+    }
+
+    get page() {
+      return this.workspacePage.page;
+    }
+
+    async waitForStyle(locator, styleName) {
+      return locator.evaluate(
+        (element, styleName) => element.style.getPropertyValue(styleName),
+        styleName,
+      );
+    }
+
+    async waitForEditor() {
+      return this.page.waitForSelector('[data-itype="editor"]');
+    }
+
+    async waitForRoot() {
+      return this.page.waitForSelector('[data-itype="root"]');
+    }
+
+    async waitForParagraph(nth) {
+      if (!nth) {
+        return this.page.waitForSelector('[data-itype="paragraph"]');
+      }
+      return this.page.waitForSelector(
+        `[data-itype="paragraph"]:nth-child(${nth})`,
+      );
+    }
+
+    async waitForParagraphStyle(nth, styleName) {
+      const paragraph = await this.waitForParagraph(nth);
+      return this.waitForStyle(paragraph, styleName);
+    }
+
+    async waitForTextSpan(nth = 0) {
+      if (!nth) {
+        return this.page.waitForSelector('[data-itype="inline"]');
+      }
+      return this.page.waitForSelector(
+        `[data-itype="inline"]:nth-child(${nth})`,
+      );
+    }
+
+    async waitForTextSpanContent(nth = 0) {
+      const textSpan = await this.waitForTextSpan(nth);
+      const textContent = await textSpan.textContent();
+      return textContent;
+    }
+
+    async waitForTextSpanStyle(nth, styleName) {
+      const textSpan = await this.waitForTextSpan(nth);
+      return this.waitForStyle(textSpan, styleName);
+    }
+
+    async startEditing() {
+      await this.page.keyboard.press("Enter");
+      return this.waitForEditor();
+    }
+
+    stopEditing() {
+      return this.page.keyboard.press("Escape");
+    }
+
+    async moveToLeft(amount = 0) {
+      for (let i = 0; i < amount; i++) {
+        await this.page.keyboard.press("ArrowLeft");
+      }
+    }
+
+    async moveToRight(amount = 0) {
+      for (let i = 0; i < amount; i++) {
+        await this.page.keyboard.press("ArrowRight");
+      }
+    }
+
+    async moveFromStart(offset = 0) {
+      await this.page.keyboard.press("ArrowLeft");
+      await this.moveToRight(offset);
+    }
+
+    async moveFromEnd(offset = 0) {
+      await this.page.keyboard.press("ArrowRight");
+      await this.moveToLeft(offset);
+    }
+
+    async selectFromStart(length, offset = 0) {
+      await this.moveFromStart(offset);
+      await this.page.keyboard.down("Shift");
+      await this.moveToRight(length);
+      await this.page.keyboard.up("Shift");
+    }
+
+    async selectFromEnd(length, offset = 0) {
+      await this.moveFromEnd(offset);
+      await this.page.keyboard.down("Shift");
+      await this.moveToLeft(length);
+      await this.page.keyboard.up("Shift");
+    }
+
+    async changeNumericInput(locator, newValue) {
+      await expect(locator).toBeVisible();
+      await locator.focus();
+      await locator.fill(`${newValue}`);
+      await locator.blur();
+    }
+
+    changeFontSize(newValue) {
+      return this.changeNumericInput(this.fontSize, newValue);
+    }
+
+    changeLineHeight(newValue) {
+      return this.changeNumericInput(this.lineHeight, newValue);
+    }
+
+    changeLetterSpacing(newValue) {
+      return this.changeNumericInput(this.letterSpacing, newValue);
+    }
+  };
+
   /**
    * This should be called on `test.beforeEach`.
    *
@@ -11,50 +150,21 @@ export class WorkspacePage extends BaseWebSocketPage {
   static async init(page) {
     await BaseWebSocketPage.initWebSockets(page);
 
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-profile",
-      "logged-in-user/get-profile-logged-in.json",
-    );
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-team-users?file-id=*",
-      "logged-in-user/get-team-users-single-user.json",
-    );
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-comment-threads?file-id=*",
-      "workspace/get-comment-threads-empty.json",
-    );
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-project?id=*",
-      "workspace/get-project-default.json",
-    );
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-team?id=*",
-      "workspace/get-team-default.json",
-    );
-    await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams.json");
-
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-team-members?team-id=*",
-      "logged-in-user/get-team-members-your-penpot.json",
-    );
-
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-profiles-for-file-comments?file-id=*",
-      "workspace/get-profile-for-file-comments.json",
-    );
-
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "update-profile-props",
-      "workspace/update-profile-empty.json",
-    );
+    await BaseWebSocketPage.mockRPCs(page, {
+      "get-profile": "logged-in-user/get-profile-logged-in.json",
+      "get-team-users?file-id=*":
+        "logged-in-user/get-team-users-single-user.json",
+      "get-comment-threads?file-id=*":
+        "workspace/get-comment-threads-empty.json",
+      "get-project?id=*": "workspace/get-project-default.json",
+      "get-team?id=*": "workspace/get-team-default.json",
+      "get-teams": "get-teams.json",
+      "get-team-members?team-id=*":
+        "logged-in-user/get-team-members-your-penpot.json",
+      "get-profiles-for-file-comments?file-id=*":
+        "workspace/get-profile-for-file-comments.json",
+      "update-profile-props": "workspace/update-profile-empty.json",
+    });
   }
 
   static anyTeamId = "c7ce0794-0992-8105-8004-38e630f7920a";
@@ -62,9 +172,20 @@ export class WorkspacePage extends BaseWebSocketPage {
   static anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
   static anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
 
+  /**
+   * WebSocket mock
+   *
+   * @type {MockWebSocketHelper}
+   */
   #ws = null;
 
-  constructor(page) {
+  /**
+   * Constructor
+   *
+   * @param {Page} page
+   * @param {} [options]
+   */
+  constructor(page, options) {
     super(page);
     this.pageName = page.getByTestId("page-name");
 
@@ -112,11 +233,14 @@ export class WorkspacePage extends BaseWebSocketPage {
       "tokens-context-menu-for-set",
     );
     this.contextMenuForShape = page.getByTestId("context-menu");
+    if (options?.textEditor) {
+      this.textEditor = new WorkspacePage.TextEditor(this);
+    }
   }
 
   async goToWorkspace({
-    fileId = WorkspacePage.anyFileId,
-    pageId = WorkspacePage.anyPageId,
+    fileId = this.fileId ?? WorkspacePage.anyFileId,
+    pageId = this.pageId ?? WorkspacePage.anyPageId,
   } = {}) {
     await this.page.goto(
       `/#/workspace?team-id=${WorkspacePage.anyTeamId}&file-id=${fileId}&page-id=${pageId}`,
@@ -141,48 +265,59 @@ export class WorkspacePage extends BaseWebSocketPage {
   }
 
   async setupEmptyFile() {
-    await this.mockRPC(
-      "get-profile",
-      "logged-in-user/get-profile-logged-in.json",
-    );
-    await this.mockRPC(
-      "get-team-users?file-id=*",
-      "logged-in-user/get-team-users-single-user.json",
-    );
-    await this.mockRPC(
-      "get-comment-threads?file-id=*",
-      "workspace/get-comment-threads-empty.json",
-    );
-    await this.mockRPC(
-      "get-project?id=*",
-      "workspace/get-project-default.json",
-    );
-    await this.mockRPC("get-team?id=*", "workspace/get-team-default.json");
-    await this.mockRPC(
-      "get-profiles-for-file-comments?file-id=*",
-      "workspace/get-profile-for-file-comments.json",
-    );
-    await this.mockRPC(/get\-file\?/, "workspace/get-file-blank.json");
-    await this.mockRPC(
-      "get-file-object-thumbnails?file-id=*",
-      "workspace/get-file-object-thumbnails-blank.json",
-    );
-    await this.mockRPC(
-      "get-font-variants?team-id=*",
-      "workspace/get-font-variants-empty.json",
-    );
-    await this.mockRPC(
-      "get-file-fragment?file-id=*",
-      "workspace/get-file-fragment-blank.json",
-    );
-    await this.mockRPC(
-      "get-file-libraries?file-id=*",
-      "workspace/get-file-libraries-empty.json",
-    );
+    await this.mockRPCs({
+      "get-profile": "logged-in-user/get-profile-logged-in.json",
+      "get-team-users?file-id=*":
+        "logged-in-user/get-team-users-single-user.json ",
+      "get-comment-threads?file-id=*":
+        "workspace/get-comment-threads-empty.json",
+      "get-project?id=*": "workspace/get-project-default.json",
+      "get-team?id=*": "workspace/get-team-default.json",
+      "get-profiles-for-file-comments?file-id=*":
+        "workspace/get-profile-for-file-comments.json",
+      "get-file-object-thumbnails?file-id=*":
+        "workspace/get-file-object-thumbnails-blank.json",
+      "get-font-variants?team-id=*": "workspace/get-font-variants-empty.json",
+      "get-file-fragment?file-id=*": "workspace/get-file-fragment-blank.json",
+      "get-file-libraries?file-id=*": "workspace/get-file-libraries-empty.json",
+    });
+
+    if (this.textEditor) {
+      await this.mockRPC("update-file?id=*", "text-editor/update-file.json");
+    }
+
+    // by default we mock the blank file.
+    await this.mockGetFile("workspace/get-file-blank.json");
   }
 
-  async mockGetFile(jsonFile) {
-    await this.mockRPC(/get\-file\?/, jsonFile);
+  async mockGetFile(jsonFilename, options) {
+    const page = this.page;
+    const jsonPath = `playwright/data/${jsonFilename}`;
+    const body = await readFile(jsonPath, "utf-8");
+    const payload = JSON.parse(body);
+
+    const fileId = Transit.get(payload, "id");
+    const pageId = Transit.get(payload, "data", "pages", 0);
+    const teamId = Transit.get(payload, "team-id");
+
+    this.fileId = fileId ?? this.anyFileId;
+    this.pageId = pageId ?? this.anyPageId;
+    this.teamId = teamId ?? this.anyTeamId;
+
+    const path = /get\-file\?/;
+    const url = typeof path === "string" ? `**/api/main/methods/${path}` : path;
+    const interceptConfig = {
+      status: 200,
+      contentType: "application/transit+json",
+      ...options,
+    };
+    return page.route(url, (route) =>
+      route.fulfill({
+        ...interceptConfig,
+        body,
+      }),
+    );
+    // await this.mockRPC(/get\-file\?/, jsonFile);
   }
 
   async mockGetAsset(regex, asset) {
@@ -190,22 +325,15 @@ export class WorkspacePage extends BaseWebSocketPage {
   }
 
   async setupFileWithComments() {
-    await this.mockRPC(
-      "get-comment-threads?file-id=*",
-      "workspace/get-comment-threads-unread.json",
-    );
-    await this.mockRPC(
-      "get-file-fragment?file-id=*&fragment-id=*",
-      "viewer/get-file-fragment-single-board.json",
-    );
-    await this.mockRPC(
-      "get-comments?thread-id=*",
-      "workspace/get-thread-comments.json",
-    );
-    await this.mockRPC(
-      "update-comment-thread-status",
-      "workspace/update-comment-thread-status.json",
-    );
+    await this.mockRPCs({
+      "get-comment-threads?file-id=*":
+        "workspace/get-comment-threads-unread.json",
+      "get-file-fragment?file-id=*&fragment-id=*":
+        "viewer/get-file-fragment-single-board.json",
+      "get-comments?thread-id=*": "workspace/get-thread-comments.json",
+      "update-comment-thread-status":
+        "workspace/update-comment-thread-status.json",
+    });
   }
 
   async clickWithDragViewportAt(x, y, width, height) {
@@ -223,6 +351,67 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.page.mouse.up();
   }
 
+  /**
+   * Clicks and moves from the coordinates x1,y1 to x2,y2
+   *
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   */
+  async clickAndMove(x1, y1, x2, y2) {
+    await this.page.waitForTimeout(100);
+    await this.viewport.hover({ position: { x: x1, y: y1 } });
+    await this.page.mouse.down();
+    await this.viewport.hover({ position: { x: x2, y: y2 } });
+    await this.page.mouse.up();
+  }
+
+  /**
+   * Creates a new Text Shape in the specified coordinates
+   * with an initial text.
+   *
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {string} initialText
+   * @param {*} [options]
+   */
+  async createTextShape(x1, y1, x2, y2, initialText, options) {
+    const timeToWait = options?.timeToWait ?? 100;
+    await this.page.keyboard.press("T");
+    await this.page.waitForTimeout(timeToWait);
+    await this.clickAndMove(x1, y1, x2, y2);
+    await this.page.waitForTimeout(timeToWait);
+    if (initialText) {
+      await this.page.keyboard.type(initialText);
+    }
+  }
+
+  /**
+   * Copies the selected element into the clipboard.
+   *
+   * @returns {Promise<void>}
+   */
+  async copy() {
+    return this.page.keyboard.press("Control+C");
+  }
+
+  /**
+   * Pastes something from the clipboard.
+   *
+   * @param {"keyboard"|"context-menu"} [kind="keyboard"]
+   * @returns {Promise<void>}
+   */
+  async paste(kind = "keyboard") {
+    if (kind === "context-menu") {
+      await this.viewport.click({ button: "right" });
+      return this.page.getByText("PasteCtrlV").click();
+    }
+    return this.page.keyboard.press("Control+V");
+  }
+
   async panOnViewportAt(x, y, width, height) {
     await this.page.waitForTimeout(100);
     await this.viewport.hover({ position: { x, y } });
@@ -250,10 +439,15 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.page.waitForTimeout(500);
   }
 
+  async doubleClickLeafLayer(name, clickOptions = {}) {
+    await this.clickLeafLayer(name, clickOptions);
+    await this.clickLeafLayer(name, clickOptions);
+  }
+
   async clickToggableLayer(name, clickOptions = {}) {
     const layer = this.layers
-          .getByTestId("layer-row")
-          .filter({ hasText: name });
+      .getByTestId("layer-row")
+      .filter({ hasText: name });
     const button = layer.getByRole("button");
 
     await button.waitFor();

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

@@ -258,6 +258,22 @@ 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/render-wasm-specs/texts.spec.js

@@ -360,7 +360,7 @@ test("Renders a file with texts with paragraphs and breaking lines", async ({
     id: "a5f238bd-dd8a-8164-8007-1bc3481eaf05",
     pageId: "a5f238bd-dd8a-8164-8007-1bc3481eaf06",
   });
-  await workspace.waitForFirstRender();
+  await workspace.waitForFirstRenderWithoutUI();
   await expect(workspace.canvas).toHaveScreenshot();
 });
 

frontend/playwright/ui/specs/inspect-tab.spec.js

@@ -18,6 +18,10 @@ const setupFile = async (workspacePage) => {
     fileId: "7b2da435-6186-815a-8007-0daa95d2f26d",
     pageId: "ce79274b-11ab-8088-8007-0487ad43f789",
   });
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-empty.json",
+  );
 };
 
 const shapeToLayerName = {

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

@@ -51,7 +51,7 @@ test.skip("BUG 12164 - Crash when trying to fetch a missing font", async ({
     pageId: "2b7f0188-51a1-8193-8006-e05bad87b74d",
   });
 
-  await workspacePage.page.waitForTimeout(1000)
+  await workspacePage.page.waitForTimeout(1000);
   await workspacePage.waitForFirstRender();
 
   await expect(

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

@@ -9,403 +9,399 @@ test.beforeEach(async ({ page }) => {
   ]);
 });
 
-test.describe("Subscriptions: dashboard", () => {
-  test("Team with unlimited subscription has specific icon in menu", async ({
+test("Team with unlimited subscription has specific icon in menu", async ({
+  page,
+}) => {
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
+    "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(
-      "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 ({
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
+    "get-subscription-usage",
+    "subscription/get-subscription-usage.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 ({
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-unpaid-subscription.json",
-    );
+    "get-team-info",
+    "subscription/get-team-info-subscriptions.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 ({
+  const dashboardPage = new DashboardPage(page);
+  await dashboardPage.setupDashboardFull();
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-enterprise-canceled-subscription.json",
-    );
+    "get-teams",
+    "subscription/get-teams-unlimited-subscription-owner.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",
-    );
-  });
+  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.describe("Subscriptions: team members and invitations", () => {
-  test("Team settings has susbscription name and no manage subscription link when is member", async ({
+test("The Unlimited subscription has its name in the sidebar dropdown", async ({
+  page,
+}) => {
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "logged-in-user/get-profile-logged-in.json",
-    );
+    "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-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 ({
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
+    "get-subscription-usage",
+    "subscription/get-subscription-usage-one-editor.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 ({
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
+    "get-team-info",
+    "subscription/get-team-info-subscriptions.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 ({
+  const dashboardPage = new DashboardPage(page);
+  await dashboardPage.setupDashboardFull();
+  await DashboardPage.mockRPC(
     page,
-  }) => {
-    await DashboardPage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
+    "get-teams",
+    "subscription/get-teams-unlimited-subscription-owner.json",
+  );
 
-    await DashboardPage.mockRPC(
-      page,
-      "get-subscription-usage",
-      "subscription/get-subscription-usage.json",
-    );
+  await dashboardPage.mockRPC(
+    "push-audit-events",
+    "workspace/audit-event-empty.json",
+  );
+  await dashboardPage.goToDashboard();
 
-    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 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();
 });

frontend/playwright/ui/specs/text-editor-v2.spec.js

@@ -1,12 +1,323 @@
 import { test, expect } from "@playwright/test";
+import { Clipboard } from "../../helpers/Clipboard";
 import { WorkspacePage } from "../pages/WorkspacePage";
 
-test.beforeEach(async ({ page }) => {
+const timeToWait = 100;
+
+test.beforeEach(async ({ page, context }) => {
+  await Clipboard.enable(context, Clipboard.Permission.ONLY_WRITE);
+
   await WorkspacePage.init(page);
   await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
 });
 
-test.skip("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
+test.afterEach(async ({ context }) => {
+  context.clearPermissions();
+});
+
+test("Create a new text shape", async ({ page }) => {
+  const initialText = "Lorem ipsum";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.goToWorkspace();
+  await workspace.createTextShape(190, 150, 300, 200, initialText);
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe(initialText);
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Create a new text shape from pasting text", async ({ page, context }) => {
+  const textToPaste = "Lorem ipsum";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
+  await workspace.goToWorkspace();
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.clickAt(190, 150);
+  await workspace.paste("keyboard");
+
+  await page.waitForTimeout(timeToWait);
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe(textToPaste);
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Create a new text shape from pasting text using context menu", async ({
+  page,
+  context,
+}) => {
+  const textToPaste = "Lorem ipsum";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.goToWorkspace();
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.clickAt(190, 150);
+  await workspace.paste("context-menu");
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe(textToPaste);
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update an already created text shape by appending text", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.moveFromEnd(0);
+  await page.keyboard.type(" dolor sit amet");
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lorem ipsum dolor sit amet");
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update an already created text shape by prepending text", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.moveFromStart(0);
+  await page.keyboard.type("Dolor sit amet ");
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Dolor sit amet Lorem ipsum");
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update an already created text shape by inserting text in between", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.moveFromStart(5);
+  await page.keyboard.type(" dolor sit amet");
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lorem dolor sit amet ipsum");
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update a new text shape appending text by pasting text", async ({
+  page,
+  context,
+}) => {
+  const textToPaste = " dolor sit amet";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.moveFromEnd();
+  await workspace.paste("keyboard");
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lorem ipsum dolor sit amet");
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update a new text shape prepending text by pasting text", async ({
+  page,
+  context,
+}) => {
+  const textToPaste = "Dolor sit amet ";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.moveFromStart();
+  await workspace.paste("keyboard");
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Dolor sit amet Lorem ipsum");
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update a new text shape replacing (starting) text with pasted text", async ({
+  page,
+}) => {
+  const textToPaste = "Dolor sit amet";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromStart(5);
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.paste("keyboard");
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Dolor sit amet ipsum");
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update a new text shape replacing (ending) text with pasted text", async ({
+  page,
+}) => {
+  const textToPaste = "dolor sit amet";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromEnd(5);
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.paste("keyboard");
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lorem dolor sit amet");
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update a new text shape replacing (in between) text with pasted text", async ({
+  page,
+}) => {
+  const textToPaste = "dolor sit amet";
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromStart(5, 3);
+
+  await Clipboard.writeText(page, textToPaste);
+
+  await workspace.paste("keyboard");
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lordolor sit ametsum");
+
+  await workspace.textEditor.stopEditing();
+});
+
+test("Update text font size selecting a part of it (starting)", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromStart(5);
+  await workspace.textEditor.changeFontSize(36);
+
+  const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
+  expect(textContent1).toBe("Lorem");
+  const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
+  expect(textContent2).toBe(" ipsum");
+  await workspace.textEditor.stopEditing();
+});
+
+test.skip("Update text line height selecting a part of it (starting)", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromStart(5);
+  await workspace.textEditor.changeLineHeight(1.4);
+
+  const lineHeight = await workspace.textEditor.waitForParagraphStyle(
+    1,
+    "line-height",
+  );
+  expect(lineHeight).toBe("1.4");
+
+  const textContent = await workspace.textEditor.waitForTextSpanContent();
+  expect(textContent).toBe("Lorem ipsum");
+
+  await workspace.textEditor.stopEditing();
+});
+
+test.skip("Update text letter spacing selecting a part of it (starting)", async ({
+  page,
+}) => {
+  const workspace = new WorkspacePage(page, {
+    textEditor: true,
+  });
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
+  await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
+  await workspace.goToWorkspace();
+  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.textEditor.startEditing();
+  await workspace.textEditor.selectFromStart(5);
+  await workspace.textEditor.changeLetterSpacing(10);
+
+  const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
+  expect(textContent1).toBe("Lorem");
+  const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
+  expect(textContent2).toBe(" ipsum");
+  await workspace.textEditor.stopEditing();
+});
+
+test("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
   const workspace = new WorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("text-editor/get-file-11552.json");
@@ -14,21 +325,16 @@ test.skip("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
     "update-file?id=*",
     "text-editor/update-file-11552.json",
   );
-
-  await workspace.goToWorkspace({
-    fileId: "238a17e0-75ff-8075-8006-934586ea2230",
-    pageId: "238a17e0-75ff-8075-8006-934586ea2231",
-  });
-  await workspace.clickLeafLayer("Lorem ipsum");
-  await workspace.clickLeafLayer("Lorem ipsum");
+  await workspace.goToWorkspace();
+  await workspace.doubleClickLeafLayer("Lorem ipsum");
 
   const fontSizeInput = workspace.rightSidebar.getByRole("textbox", {
     name: "Font Size",
   });
   await expect(fontSizeInput).toBeVisible();
 
-  await workspace.page.keyboard.press("Enter");
-  await workspace.page.keyboard.press("ArrowRight");
+  await page.keyboard.press("Enter");
+  await page.keyboard.press("ArrowRight");
 
   await fontSizeInput.fill("36");
 

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("Empty field"),
+      tokensUpdateCreateModal.getByText("Token value cannot be empty"),
     ).toBeVisible();
     await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
     await expect(valueField).toHaveValue(/^#[A-Fa-f\d]+$/);

frontend/scripts/_helpers.js

@@ -73,7 +73,7 @@ export function isJsFile(path) {
 export async function compileSass(worker, path, options) {
   path = ph.resolve(path);
 
-  log.info("compile:", path);
+  // log.info("compile:", path);
   return worker.exec("compileSass", [path, options]);
 }
 
@@ -180,8 +180,8 @@ export async function watch(baseDir, predicate, callback) {
   });
 }
 
-async function readManifestFile() {
-  const manifestPath = "resources/public/js/manifest.json";
+async function readManifestFile(resource) {
+  const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
   return JSON.parse(content);
 }
@@ -189,19 +189,23 @@ async function readManifestFile() {
 async function readShadowManifest() {
   const ts = Date.now();
   try {
-    const content = await readManifestFile();
+    const content = await readManifestFile("js/manifest.json");
 
     const index = {
       ts: ts,
       config: "js/config.js?ts=" + ts,
       polyfills: "js/polyfills.js?ts=" + ts,
-      worker_main: "js/worker/main.js?ts=" + ts,
     };
 
     for (let item of content) {
       index[item.name] = "js/" + item["output-name"];
     }
 
+    const content2 = await readManifestFile("js/worker/manifest.json");
+    for (let item of content2) {
+      index["worker_" + item.name] = "js/worker/" + item["output-name"];
+    }
+
     return index;
   } catch (cause) {
     return {
@@ -274,6 +278,7 @@ async function readTranslations() {
     "id",
     "ru",
     "tr",
+    "hi",
     "zh_CN",
     "zh_Hant",
     "hr",

frontend/scripts/build

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

frontend/scripts/test

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

frontend/scripts/test-components

@@ -0,0 +1,13 @@
+#!/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

@@ -0,0 +1,8 @@
+#!/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

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+TARGET=${1:-app};
+
+set -ex
+
+exec yarn run watch:$TARGET

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

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

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

@@ -195,7 +195,9 @@
   (ptk/reify ::login-from-token
     ptk/WatchEvent
     (watch [_ _ _]
-      (->> (rx/of (logged-in (with-meta profile {::ev/source "login-with-token"})))
+      (->> (dp/on-fetch-profile-success profile)
+           (rx/map (fn [profile]
+                     (logged-in (with-meta profile {::ev/source "login-with-token"}))))
            ;; NOTE: we need this to be asynchronous because the effect
            ;; should be called before proceed with the login process
            (rx/observe-on :async)))))

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

@@ -76,7 +76,7 @@
   (map :page-id))
 
 (defn- apply-changes-localy
-  [{:keys [file-id redo-changes] :as commit} pending]
+  [{:keys [file-id redo-changes ignore-wasm?] :as commit} pending]
   (ptk/reify ::apply-changes-localy
     ptk/UpdateEvent
     (update [_ state]
@@ -103,7 +103,7 @@
                     pids (into #{} xf:map-page-id redo-changes)]
                 (reduce #(ctst/update-object-indices %1 %2) fdata pids)))]
 
-        (if (features/active-feature? state "render-wasm/v1")
+        (if (and (not ignore-wasm?) (features/active-feature? state "render-wasm/v1"))
           ;; Update the wasm model
           (let [shape-changes (volatile! {})
 
@@ -122,7 +122,7 @@
 (defn commit
   "Create a commit event instance"
   [{:keys [commit-id redo-changes undo-changes origin save-undo? features
-           file-id file-revn file-vern undo-group tags stack-undo? source]}]
+           file-id file-revn file-vern undo-group tags stack-undo? source ignore-wasm?]}]
 
   (assert (cpc/check-changes redo-changes)
           "expect valid vector of changes for redo-changes")
@@ -147,7 +147,8 @@
                    :save-undo? save-undo?
                    :undo-group undo-group
                    :tags tags
-                   :stack-undo? stack-undo?}]
+                   :stack-undo? stack-undo?
+                   :ignore-wasm? ignore-wasm?}]
 
     (ptk/reify ::commit
       cljs.core/IDeref

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

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