🐛 Fix importmap usage on firefox

All they only needed for build process.

.circleci/config.yml

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

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

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

.github/workflows/tests.yml

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

CHANGES.md

@@ -1,5 +1,28 @@
 # CHANGELOG
 
+## 2.13.0 (Unreleased)
+
+### :boom: Breaking changes & Deprecations
+
+### :rocket: Epics and highlights
+
+### :heart: Community contributions (Thank you!)
+
+- Fix mask issues with component swap (by @dfelinto) [Github #7675](https://github.com/penpot/penpot/issues/7675)
+
+### :sparkles: New features & Enhancements
+
+- Add new Box Shadow Tokens [Taiga #10201](https://tree.taiga.io/project/penpot/us/10201)
+- Make i18n translation files load on-demand [Taiga #11474](https://tree.taiga.io/project/penpot/us/11474)
+- Add deleted files to dashboard [Taiga #8149](https://tree.taiga.io/project/penpot/us/8149)
+
+### :bug: Bugs fixed
+
+- Fix problem when drag+duplicate a full grid [Taiga #12565](https://tree.taiga.io/project/penpot/issue/12565)
+- Fix problem when pasting elements in reverse flex layout [Taiga #12460](https://tree.taiga.io/project/penpot/issue/12460)
+- Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
+
+
 ## 2.12.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations

backend/src/app/binfile/common.clj

@@ -331,6 +331,81 @@
                                  (set/difference cfeat/backend-only-features))
                              #{}))))
 
+(defn check-file-exists
+  [cfg id & {:keys [include-deleted?]
+             :or {include-deleted? false}
+             :as options}]
+  (db/get-with-sql cfg [sql:get-minimal-file id]
+                   {:db/remove-deleted (not include-deleted?)}))
+
+(def ^:private sql:file-permissions
+  "select fpr.is_owner,
+          fpr.is_admin,
+          fpr.can_edit
+     from file_profile_rel as fpr
+    inner join file as f on (f.id = fpr.file_id)
+    where fpr.file_id = ?
+      and fpr.profile_id = ?
+   union all
+   select tpr.is_owner,
+          tpr.is_admin,
+          tpr.can_edit
+     from team_profile_rel as tpr
+    inner join project as p on (p.team_id = tpr.team_id)
+    inner join file as f on (p.id = f.project_id)
+    where f.id = ?
+      and tpr.profile_id = ?
+   union all
+   select ppr.is_owner,
+          ppr.is_admin,
+          ppr.can_edit
+     from project_profile_rel as ppr
+    inner join file as f on (f.project_id = ppr.project_id)
+    where f.id = ?
+      and ppr.profile_id = ?")
+
+(defn- get-file-permissions*
+  [conn profile-id file-id]
+  (when (and profile-id file-id)
+    (db/exec! conn [sql:file-permissions
+                    file-id profile-id
+                    file-id profile-id
+                    file-id profile-id])))
+
+(defn get-file-permissions
+  ([conn profile-id file-id]
+   (let [rows     (get-file-permissions* conn profile-id file-id)
+         is-owner (boolean (some :is-owner rows))
+         is-admin (boolean (some :is-admin rows))
+         can-edit (boolean (some :can-edit rows))]
+     (when (seq rows)
+       {:type :membership
+        :is-owner is-owner
+        :is-admin (or is-owner is-admin)
+        :can-edit (or is-owner is-admin can-edit)
+        :can-read true
+        :is-logged (some? profile-id)})))
+
+  ([conn profile-id file-id share-id]
+   (let [perms  (get-file-permissions conn profile-id file-id)
+         ldata  (some-> (db/get* conn :share-link {:id share-id :file-id file-id})
+                        (dissoc :flags)
+                        (update :pages db/decode-pgarray #{}))]
+
+     ;; NOTE: in a future when share-link becomes more powerful and
+     ;; will allow us specify which parts of the app is available, we
+     ;; will probably need to tweak this function in order to expose
+     ;; this flags to the frontend.
+     (cond
+       (some? perms) perms
+       (some? ldata) {:type :share-link
+                      :can-read true
+                      :pages (:pages ldata)
+                      :is-logged (some? profile-id)
+                      :who-comment (:who-comment ldata)
+                      :who-inspect (:who-inspect ldata)}))))
+
+
 (defn get-project
   [cfg project-id]
   (db/get cfg :project {:id project-id}))

backend/src/app/http/assets.clj

@@ -30,7 +30,7 @@
 
 (defn- get-file-media-object
   [pool id]
-  (db/get pool :file-media-object {:id id}))
+  (db/get pool :file-media-object {:id id} {::db/remove-deleted false}))
 
 (defn- serve-object-from-s3
   [{:keys [::sto/storage] :as cfg} obj]

backend/src/app/http/middleware.clj

@@ -309,7 +309,7 @@
       (fn [request]
         (let [key (yreq/get-header request "x-shared-key")]
           (if (= key shared-key)
-            (handler request)
+            (handler (assoc request ::http/auth-with-shared-key true))
             {::yres/status 403}))))
     (fn [_ _]
       {::yres/status 403})))

backend/src/app/rpc.clj

@@ -14,6 +14,7 @@
    [app.common.spec :as us]
    [app.common.time :as ct]
    [app.common.uri :as u]
+   [app.common.uuid :as uuid]
    [app.config :as cf]
    [app.db :as db]
    [app.http :as-alias http]
@@ -92,7 +93,11 @@
       (let [handler-name (:type path-params)
             etag         (yreq/get-header request "if-none-match")
             profile-id   (or (::session/profile-id request)
-                             (::actoken/profile-id request))
+                             (::actoken/profile-id request)
+                             (if (::http/auth-with-shared-key request)
+                               uuid/zero
+                               nil))
+
             ip-addr      (inet/parse-request request)
 
             data         (-> params

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

@@ -79,85 +79,14 @@
 
 ;; --- FILE PERMISSIONS
 
-
-(def ^:private sql:file-permissions
-  "select fpr.is_owner,
-          fpr.is_admin,
-          fpr.can_edit
-     from file_profile_rel as fpr
-    inner join file as f on (f.id = fpr.file_id)
-    where fpr.file_id = ?
-      and fpr.profile_id = ?
-      and f.deleted_at is null
-   union all
-   select tpr.is_owner,
-          tpr.is_admin,
-          tpr.can_edit
-     from team_profile_rel as tpr
-    inner join project as p on (p.team_id = tpr.team_id)
-    inner join file as f on (p.id = f.project_id)
-    where f.id = ?
-      and tpr.profile_id = ?
-      and f.deleted_at is null
-   union all
-   select ppr.is_owner,
-          ppr.is_admin,
-          ppr.can_edit
-     from project_profile_rel as ppr
-    inner join file as f on (f.project_id = ppr.project_id)
-    where f.id = ?
-      and ppr.profile_id = ?
-      and f.deleted_at is null")
-
-(defn get-file-permissions
-  [conn profile-id file-id]
-  (when (and profile-id file-id)
-    (db/exec! conn [sql:file-permissions
-                    file-id profile-id
-                    file-id profile-id
-                    file-id profile-id])))
-
-(defn get-permissions
-  ([conn profile-id file-id]
-   (let [rows     (get-file-permissions conn profile-id file-id)
-         is-owner (boolean (some :is-owner rows))
-         is-admin (boolean (some :is-admin rows))
-         can-edit (boolean (some :can-edit rows))]
-     (when (seq rows)
-       {:type :membership
-        :is-owner is-owner
-        :is-admin (or is-owner is-admin)
-        :can-edit (or is-owner is-admin can-edit)
-        :can-read true
-        :is-logged (some? profile-id)})))
-
-  ([conn profile-id file-id share-id]
-   (let [perms  (get-permissions conn profile-id file-id)
-         ldata  (some-> (db/get* conn :share-link {:id share-id :file-id file-id})
-                        (dissoc :flags)
-                        (update :pages db/decode-pgarray #{}))]
-
-     ;; NOTE: in a future when share-link becomes more powerful and
-     ;; will allow us specify which parts of the app is available, we
-     ;; will probably need to tweak this function in order to expose
-     ;; this flags to the frontend.
-     (cond
-       (some? perms) perms
-       (some? ldata) {:type :share-link
-                      :can-read true
-                      :pages (:pages ldata)
-                      :is-logged (some? profile-id)
-                      :who-comment (:who-comment ldata)
-                      :who-inspect (:who-inspect ldata)}))))
-
 (def has-edit-permissions?
-  (perms/make-edition-predicate-fn get-permissions))
+  (perms/make-edition-predicate-fn bfc/get-file-permissions))
 
 (def has-read-permissions?
-  (perms/make-read-predicate-fn get-permissions))
+  (perms/make-read-predicate-fn bfc/get-file-permissions))
 
 (def has-comment-permissions?
-  (perms/make-comment-predicate-fn get-permissions))
+  (perms/make-comment-predicate-fn bfc/get-file-permissions))
 
 (def check-edition-permissions!
   (perms/make-check-fn has-edit-permissions?))
@@ -170,7 +99,7 @@
 
 (defn check-comment-permissions!
   [conn profile-id file-id share-id]
-  (let [perms       (get-permissions conn profile-id file-id share-id)
+  (let [perms       (bfc/get-file-permissions conn profile-id file-id share-id)
         can-read    (has-read-permissions? perms)
         can-comment (has-comment-permissions? perms)]
     (when-not (or can-read can-comment)
@@ -222,7 +151,7 @@
 (defn- get-minimal-file-with-perms
   [cfg {:keys [:id ::rpc/profile-id]}]
   (let [mfile (get-minimal-file cfg id)
-        perms (get-permissions cfg profile-id id)]
+        perms (bfc/get-file-permissions cfg profile-id id)]
     (assoc mfile :permissions perms)))
 
 (defn get-file-etag
@@ -248,7 +177,7 @@
   ;; will be already prefetched and we just reuse them instead
   ;; of making an additional database queries.
   (let [perms (or (:permissions (::cond/object params))
-                  (get-permissions conn profile-id id))]
+                  (bfc/get-file-permissions conn profile-id id))]
     (check-read-permissions! perms)
 
     (let [team (teams/get-team conn
@@ -311,7 +240,7 @@
    ::sm/result schema:file-fragment}
   [cfg {:keys [::rpc/profile-id file-id fragment-id share-id]}]
   (db/run! cfg (fn [cfg]
-                 (let [perms (get-permissions cfg profile-id file-id share-id)]
+                 (let [perms (bfc/get-file-permissions cfg profile-id file-id share-id)]
                    (check-read-permissions! perms)
                    (-> (get-file-fragment cfg file-id fragment-id)
                        (rph/with-http-cache long-cache-duration))))))
@@ -456,8 +385,7 @@
               :code :params-validation
               :hint "page-id is required when object-id is provided"))
 
-  (let [perms (get-permissions conn profile-id file-id share-id)
-
+  (let [perms (bfc/get-file-permissions conn profile-id file-id share-id)
         file  (bfc/get-file cfg file-id :read-only? true)
 
         proj  (db/get conn :project {:id (:project-id file)})
@@ -688,11 +616,10 @@
   "Get libraries used by the specified file."
   {::doc/added "1.17"
    ::sm/params schema:get-file-libraries}
-  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id]}]
-  (dm/with-open [conn (db/open pool)]
-    (check-read-permissions! conn profile-id file-id)
-    (bfc/get-file-libraries conn file-id)))
-
+  [cfg {:keys [::rpc/profile-id file-id]}]
+  (bfc/check-file-exists cfg file-id)
+  (check-read-permissions! cfg profile-id file-id)
+  (bfc/get-file-libraries cfg file-id))
 
 ;; --- COMMAND QUERY: Files that use this File library
 
@@ -785,8 +712,7 @@
        FROM file AS f
       INNER JOIN project AS p ON (p.id = f.project_id)
        LEFT JOIN file_thumbnail AS ft on (ft.file_id = f.id
-                                          AND ft.revn = f.revn
-                                          AND ft.deleted_at is null)
+                                          AND ft.revn = f.revn)
       WHERE p.team_id = ?
         AND (p.deleted_at > ?::timestamptz OR
              f.deleted_at > ?::timestamptz)

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

@@ -199,15 +199,13 @@
   [cfg {:keys [::rpc/profile-id file-id strip-frames-with-thumbnails] :as params}]
   (db/run! cfg (fn [{:keys [::db/conn] :as cfg}]
                  (files/check-read-permissions! conn profile-id file-id)
-
                  (let [team (teams/get-team conn
                                             :profile-id profile-id
                                             :file-id file-id)
-
                        file (bfc/get-file cfg file-id
+                                          :include-deleted? true
                                           :realize? true
                                           :read-only? true)
-
                        strip-frames-with-thumbnails
                        (or (nil? strip-frames-with-thumbnails) ;; if not present, default to true
                            (true? strip-frames-with-thumbnails))]
@@ -333,12 +331,16 @@
 
 ;; --- MUTATION COMMAND: create-file-thumbnail
 
-(defn- create-file-thumbnail!
-  [{:keys [::db/conn ::sto/storage]} {:keys [file-id revn props media] :as params}]
+(defn- create-file-thumbnail
+  [{:keys [::db/conn ::sto/storage] :as cfg} {:keys [file-id revn props media] :as params}]
   (media/validate-media-type! media)
   (media/validate-media-size! media)
 
-  (let [props (db/tjson (or props {}))
+  (let [file  (bfc/get-file cfg file-id
+                            :include-deleted? true
+                            :load-data? false)
+
+        props (db/tjson (or props {}))
         path  (:path media)
         mtype (:mtype media)
         hash  (sto/calculate-hash path)
@@ -367,7 +369,7 @@
 
         (db/update! conn :file-thumbnail
                     {:media-id (:id media)
-                     :deleted-at nil
+                     :deleted-at (:deleted-at file)
                      :updated-at tnow
                      :props props}
                     {:file-id file-id
@@ -378,6 +380,7 @@
                    :revn revn
                    :created-at tnow
                    :updated-at tnow
+                   :deleted-at (:deleted-at file)
                    :props props
                    :media-id (:id media)}))
 
@@ -402,6 +405,8 @@
    ::rtry/when rtry/conflict-exception?
    ::sm/params schema:create-file-thumbnail}
 
+  ;; FIXME: do not run the thumbnail upload inside a transaction
+
   [cfg {:keys [::rpc/profile-id file-id] :as params}]
   (db/tx-run! cfg (fn [{:keys [::db/conn] :as cfg}]
                     ;; TODO For now we check read permissions instead of write,
@@ -409,6 +414,6 @@
                     ;; review this approach on the future.
                     (files/check-read-permissions! conn profile-id file-id)
                     (when-not (db/read-only? conn)
-                      (let [media (create-file-thumbnail! cfg params)]
+                      (let [media (create-file-thumbnail cfg params)]
                         {:uri (files/resolve-public-uri (:id media))
                          :id (:id media)})))))

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

@@ -6,6 +6,7 @@
 
 (ns app.rpc.commands.fonts
   (:require
+   [app.binfile.common :as bfc]
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
    [app.common.schema :as sm]
@@ -66,7 +67,7 @@
       (uuid? file-id)
       (let [file    (db/get-by-id conn :file file-id {:columns [:id :project-id]})
             project (db/get-by-id conn :project (:project-id file) {:columns [:id :team-id]})
-            perms   (files/get-permissions conn profile-id file-id share-id)]
+            perms   (bfc/get-file-permissions conn profile-id file-id share-id)]
         (files/check-read-permissions! perms)
         (db/query conn :team-font-variant
                   {:team-id (:team-id project)

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

@@ -13,7 +13,6 @@
    [app.config :as cf]
    [app.db :as db]
    [app.rpc :as-alias rpc]
-   [app.rpc.commands.files :as files]
    [app.rpc.commands.teams :as teams]
    [app.rpc.cond :as-alias cond]
    [app.rpc.doc :as-alias doc]
@@ -121,7 +120,7 @@
   [system {:keys [::rpc/profile-id file-id share-id] :as params}]
   (db/run! system
            (fn [{:keys [::db/conn] :as system}]
-             (let [perms  (files/get-permissions conn profile-id file-id share-id)
+             (let [perms  (bfc/get-file-permissions conn profile-id file-id share-id)
                    params (-> params
                               (assoc ::perms perms)
                               (assoc :profile-id profile-id))]

common/deps.edn

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

common/src/app/common/exceptions.cljc

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

common/src/app/common/flags.cljc

@@ -169,6 +169,7 @@
    :enable-component-thumbnails
    :enable-render-wasm-dpr
    :enable-token-color
+   :enable-token-shadow
    :enable-inspect-styles
    :enable-feature-fdata-objects-map])
 

common/src/app/common/logging.cljc

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

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

@@ -21,7 +21,6 @@
    [app.common.logic.shapes :as cls]
    [app.common.logic.variant-properties :as clvp]
    [app.common.path-names :as cpn]
-   [app.common.spec :as us]
    [app.common.types.component :as ctk]
    [app.common.types.components-list :as ctkl]
    [app.common.types.container :as ctn]
@@ -39,8 +38,7 @@
    [app.common.types.typography :as cty]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
-   [clojure.set :as set]
-   [clojure.spec.alpha :as s]))
+   [clojure.set :as set]))
 
 ;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
 (log/set-level! :warn)
@@ -477,10 +475,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (s/assert #{:colors :components :typographies} asset-type)
-  (s/assert (s/nilable ::us/uuid) asset-id)
-  (s/assert ::us/uuid file-id)
-  (s/assert ::us/uuid library-id)
+  (assert (contains? #{:colors :components :typographies} asset-type))
+  (assert (or (nil? asset-id) (uuid? asset-id)))
+  (assert (uuid? file-id))
+  (assert (uuid? library-id))
 
   (container-log :info asset-id
                  :msg "Sync file with library"
@@ -514,10 +512,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (s/assert #{:colors :components :typographies} asset-type)
-  (s/assert (s/nilable ::us/uuid) asset-id)
-  (s/assert ::us/uuid file-id)
-  (s/assert ::us/uuid library-id)
+  (assert (contains? #{:colors :components :typographies} asset-type))
+  (assert (or (nil? asset-id) (uuid? asset-id)))
+  (assert (uuid? file-id))
+  (assert (uuid? library-id))
 
   (container-log :info asset-id
                  :msg "Sync local components with library"
@@ -2493,11 +2491,13 @@
                (ctk/get-swap-slot))
           (constantly false))
 
+        ;; In the cases where the swapped shape was the first element of the masked group it would make the group to loose the
+        ;; mask property as part of the sanitization check on generate-delete-shapes, passing "ignore-mask" to prevent this
         [all-parents changes]
         (-> changes
             (cls/generate-delete-shapes
              file page objects (d/ordered-set (:id shape))
-             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn}))
+             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]
@@ -2867,13 +2867,15 @@
         ids-map        (into {} (map #(vector % (uuid/next))) all-ids)
 
 
-        ;; If there is an alt-duplication of a variant, change its parent to root
-        ;; so the copy is made as a child of root
+        ;; If there is an alt-duplication we change to root
+        ;; For variants so the copy is made as a child of root
         ;; This is because inside a variant-container can't be a copy
+        ;; For other shape this way the layout won't be changed when duplicated
+        ;; and if you move outside the layout will not change
         shapes  (map (fn [shape]
-                       (if (and alt-duplication? (ctk/is-variant? shape))
-                         (assoc shape :parent-id uuid/zero :frame-id nil)
-                         shape))
+                       (cond-> shape
+                         alt-duplication?
+                         (assoc :parent-id uuid/zero :frame-id uuid/zero)))
                      shapes)
 
 

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

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

common/src/app/common/path_names.cljc

@@ -132,3 +132,94 @@ Some naming conventions:
   (if-let [last-period (str/last-index-of s ".")]
     [(subs s 0 (inc last-period)) (subs s (inc last-period))]
     [s ""]))
+
+;; Tree building functions --------------------------------------------------
+
+"Build tree structure from flat list of paths"
+
+"`build-tree-root` is the main function to build the tree."
+
+"Receives a list of segments with 'name' properties representing paths,
+   and a separator string."
+"E.g segments = [{... :name 'one/two/three'} {... :name 'one/two/four'} {... :name 'one/five'}]"
+
+"Transforms into a tree structure like:
+   [{:name 'one'
+     :path 'one'
+     :depth 0
+     :leaf nil
+     :children-fn (fn [] [{:name 'two'
+                           :path 'one.two'
+                           :depth 1
+                           :leaf nil
+                           :children-fn (fn [] [{... :name 'three'} {... :name 'four'}])}
+                          {:name 'five'
+                           :path 'one.five'
+                           :depth 1
+                           :leaf {... :name 'five'}
+                           ...}])}]"
+
+(defn- sort-by-children
+  "Sorts segments so that those with children come first."
+  [segments separator]
+  (sort-by (fn [segment]
+             (let [path (split-path (:name segment) :separator separator)
+                   path-length (count path)]
+               (if (= path-length 1)
+                 1
+                 0)))
+           segments))
+
+(defn- group-by-first-segment
+  "Groups segments by their first path segment and update segment name."
+  [segments separator]
+  (reduce (fn [acc segment]
+            (let [[first-segment & remaining-segments] (split-path (:name segment) :separator separator)
+                  rest-path (when (seq remaining-segments) (join-path remaining-segments :separator separator :with-spaces? false))]
+              (update acc first-segment (fnil conj [])
+                      (if rest-path
+                        (assoc segment :name rest-path)
+                        segment))))
+          {}
+          segments))
+
+(defn- sort-and-group-segments
+  "Sorts elements and groups them by their first path segment."
+  [segments separator]
+  (let [sorted  (sort-by-children segments separator)
+        grouped (group-by-first-segment sorted separator)]
+    grouped))
+
+(defn- build-tree-node
+  "Builds a single tree node with lazy children."
+  [segment-name remaining-segments separator parent-path depth]
+  (let [current-path (if parent-path
+                       (str parent-path "." segment-name)
+                       segment-name)
+
+        is-leaf? (and (seq remaining-segments)
+                      (every? (fn [segment]
+                                (let [remaining-segment-name (first (split-path (:name segment) :separator separator))]
+                                  (= segment-name remaining-segment-name)))
+                              remaining-segments))
+
+        leaf-segment (when is-leaf? (first remaining-segments))
+        node {:name segment-name
+              :path current-path
+              :depth depth
+              :leaf leaf-segment
+              :children-fn (when-not is-leaf?
+                             (fn []
+                               (let [grouped-elements (sort-and-group-segments remaining-segments separator)]
+                                 (mapv (fn [[child-segment-name remaining-child-segments]]
+                                         (build-tree-node child-segment-name remaining-child-segments separator current-path (inc depth)))
+                                       grouped-elements))))}]
+    node))
+
+(defn build-tree-root
+  "Builds the root level of the tree."
+  [segments separator]
+  (let [grouped-elements (sort-and-group-segments segments separator)]
+    (mapv (fn [[segment-name remaining-segments]]
+            (build-tree-node segment-name remaining-segments separator nil 0))
+          grouped-elements)))

common/src/app/common/schema.cljc

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

common/src/app/common/time.cljc

@@ -340,7 +340,7 @@
      (dfn-diff t2 t1)))
 
 #?(:cljs
-   (defn set-default-locale!
+   (defn set-default-locale
      [locale]
      (when-let [locale (unchecked-get locales locale)]
        (dfn-set-default-options #js {:locale locale}))))

common/src/app/common/types/token.cljc

@@ -59,6 +59,7 @@
    :dimensions      "dimension"
    :font-family     "fontFamilies"
    :font-size       "fontSizes"
+   :font-weight     "fontWeights"
    :letter-spacing  "letterSpacing"
    :number          "number"
    :opacity         "opacity"
@@ -70,7 +71,6 @@
    :stroke-width    "borderWidth"
    :text-case       "textCase"
    :text-decoration "textDecoration"
-   :font-weight     "fontWeights"
    :typography      "typography"})
 
 (def dtcg-token-type->token-type

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

@@ -1545,7 +1545,7 @@ Will return a value that matches this schema:
   (and (not (contains? decoded-json "$metadata"))
        (not (contains? decoded-json "$themes"))))
 
-(defn- convert-dtcg-font-family
+(defn convert-dtcg-font-family
   "Convert font-family token value from DTCG format to internal format.
    - If value is a string, split it into a collection of font families
    - If value is already an array, keep it as is
@@ -1556,7 +1556,7 @@ Will return a value that matches this schema:
     (sequential? value) value
     :else value))
 
-(defn- convert-dtcg-typography-composite
+(defn convert-dtcg-typography-composite
   "Convert typography token value keys from DTCG format to internal format."
   [value]
   (if (map? value)
@@ -1568,17 +1568,17 @@ Will return a value that matches this schema:
     ;; Reference value
     value))
 
-(defn- convert-dtcg-shadow-composite
+(defn convert-dtcg-shadow-composite
   "Convert shadow token value from DTCG format to internal format."
   [value]
   (let [process-shadow (fn [shadow]
                          (if (map? shadow)
                            (let [legacy-shadow-type (get "type" shadow)]
                              (-> shadow
-                                 (set/rename-keys {"x" :offsetX
-                                                   "offsetX" :offsetX
-                                                   "y" :offsetY
-                                                   "offsetY" :offsetY
+                                 (set/rename-keys {"x" :offset-x
+                                                   "offsetX" :offset-x
+                                                   "y" :offset-y
+                                                   "offsetY" :offset-y
                                                    "blur" :blur
                                                    "spread" :spread
                                                    "color" :color
@@ -1589,7 +1589,7 @@ Will return a value that matches this schema:
                                                    (= "false" %) false
                                                    (= legacy-shadow-type "innerShadow") true
                                                    :else false))
-                                 (select-keys [:offsetX :offsetY :blur :spread :color :inset])))
+                                 (select-keys [:offset-x :offset-y :blur :spread :color :inset])))
                            shadow))]
     (cond
       ;; Reference value - keep as string
@@ -1860,8 +1860,8 @@ Will return a value that matches this schema:
     (mapv (fn [shadow]
             (if (map? shadow)
               (-> shadow
-                  (set/rename-keys {:offsetX "offsetX"
-                                    :offsetY "offsetY"
+                  (set/rename-keys {:offset-x "offsetX"
+                                    :offset-y "offsetY"
                                     :blur "blur"
                                     :spread "spread"
                                     :color "color"

common/src/app/common/version.cljc

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

common/test/common_tests/types/tokens_lib_test.cljc

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

docker/devenv/Dockerfile

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

docker/devenv/docker-compose.yaml

@@ -69,6 +69,11 @@ services:
       - PENPOT_LDAP_ATTRS_FULLNAME=cn
       - PENPOT_LDAP_ATTRS_PHOTO=jpegPhoto
 
+    networks:
+      default:
+        aliases:
+          - main
+
   minio:
     image: "minio/minio:RELEASE.2025-04-03T14-56-28Z"
     command: minio server /mnt/data --console-address ":9001"
@@ -80,10 +85,6 @@ services:
       - MINIO_ROOT_USER=minioadmin
       - MINIO_ROOT_PASSWORD=minioadmin
 
-    ports:
-      - 9000:9000
-      - 9001:9001
-
     networks:
       default:
         aliases:

docker/devenv/files/Caddyfile

@@ -10,3 +10,7 @@ localhost:3449 {
 http://localhost:3450 {
    reverse_proxy localhost:4449
 }
+
+http://penpot-devenv-main:3450 {
+    reverse_proxy localhost:4449
+}

docker/devenv/files/nginx.conf

@@ -38,11 +38,11 @@ http {
 
     gzip_vary on;
     gzip_proxied any;
-    gzip_comp_level 3;
+    gzip_comp_level 6;
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
 
-    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml;
+    gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json image/svg+xml application/wasm;
 
     map $http_upgrade $connection_upgrade {
         default upgrade;

docker/images/Dockerfile.frontend

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

docker/images/files/nginx.conf.template

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

exporter/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "packageManager": "yarn@4.12.0+sha512.f45ab632439a67f8bc759bf32ead036a1f413287b9042726b7cc4818b7b49e14e9423ba49b18f9e06ea4941c1ad062385b1d8760a8d5091a1a31e5f6219afca8",
   "repository": {
     "type": "git",
     "url": "https://github.com/penpot/penpot"
@@ -16,9 +16,9 @@
     "date-fns": "^4.1.0",
     "generic-pool": "^3.9.0",
     "inflation": "^2.1.0",
-    "ioredis": "^5.8.1",
-    "playwright": "^1.55.1",
-    "raw-body": "^3.0.1",
+    "ioredis": "^5.8.2",
+    "playwright": "^1.57.0",
+    "raw-body": "^3.0.2",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
     "undici": "^7.16.0",

exporter/yarn.lock

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

frontend/.storybook/preview.js

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

frontend/deps.edn

@@ -8,6 +8,11 @@
   metosin/reitit-core {:mvn/version "0.9.1"}
   funcool/okulary {:mvn/version "2022.04.11-16"}
 
+  funcool/tubax
+  {:git/tag "v2025.11.28"
+   :git/sha "2d9a986"
+   :git/url "https://github.com/funcool/tubax.git"}
+
   funcool/potok2
   {:git/tag "v2.2"
    :git/sha "0f7e15a"
@@ -20,8 +25,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.24"
-   :git/sha "17a0c94"
+  {:git/tag "v2.25"
+   :git/sha "27e5a1a"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.5.0"}
@@ -42,10 +47,10 @@
   :dev
   {:extra-paths ["dev"]
    :extra-deps
-   {thheller/shadow-cljs {:mvn/version "3.2.0"}
+   {thheller/shadow-cljs {:mvn/version "3.2.2"}
     com.bhauman/rebel-readline {:mvn/version "RELEASE"}
     org.clojure/tools.namespace {:mvn/version "RELEASE"}
-    criterium/criterium {:mvn/version "RELEASE"}
+    criterium/criterium {:mvn/version "0.4.6"}
     cider/cider-nrepl {:mvn/version "0.57.0"}}}
 
   :shadow-cljs

frontend/package.json

@@ -53,83 +53,74 @@
     "watch:storybook:assets": "node ./scripts/watch-storybook.js"
   },
   "devDependencies": {
+    "@penpot/draft-js": "portal:./packages/draft-js",
+    "@penpot/mousetrap": "portal:./packages/mousetrap",
+    "@penpot/plugins-runtime": "1.3.2",
+    "@penpot/svgo": "penpot/svgo#v3.2",
+    "@penpot/text-editor": "portal:./text-editor",
     "@playwright/test": "1.52.0",
     "@storybook/addon-docs": "10.0.4",
     "@storybook/addon-themes": "10.0.4",
     "@storybook/addon-vitest": "10.0.4",
     "@storybook/react-vite": "10.0.4",
+    "@tokens-studio/sd-transforms": "1.2.11",
     "@types/node": "^22.15.21",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
+    "@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",
     "autoprefixer": "^10.4.21",
+    "compression": "^1.8.1",
     "concurrently": "^9.2.1",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.25.9",
+    "eventsource-parser": "^3.0.6",
     "express": "^5.1.0",
     "fancy-log": "^2.0.0",
     "getopts": "^2.3.0",
     "gettext-parser": "^8.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-gzip": "^1.4.2",
-    "gulp-mustache": "^5.0.0",
-    "gulp-postcss": "^10.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-svg-sprite": "^2.0.3",
+    "highlight.js": "^11.10.0",
+    "js-beautify": "^1.15.4",
     "jsdom": "^27.0.0",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "map-stream": "0.0.7",
     "marked": "^15.0.12",
     "mkdirp": "^3.0.1",
     "mustache": "^4.2.0",
     "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
+    "opentype.js": "^1.3.4",
     "p-limit": "^6.2.0",
     "playwright": "1.56.1",
     "postcss": "^8.5.4",
     "postcss-clean": "^1.2.2",
+    "postcss-modules": "^6.0.1",
     "prettier": "3.5.3",
     "pretty-time": "^1.1.0",
     "prop-types": "^15.8.1",
-    "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
-    "sass-embedded": "^1.89.0",
-    "storybook": "10.0.4",
-    "svg-sprite": "^2.0.4",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.0",
-    "wasm-pack": "^0.13.1",
-    "watcher": "^2.3.1",
-    "workerpool": "^9.3.2"
-  },
-  "dependencies": {
-    "@penpot/draft-js": "portal:./vendor/draft-js",
-    "@penpot/hljs": "portal:./vendor/hljs",
-    "@penpot/mousetrap": "portal:./vendor/mousetrap",
-    "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.2",
-    "@penpot/text-editor": "portal:./text-editor",
-    "@tokens-studio/sd-transforms": "1.2.11",
-    "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
-    "compression": "^1.8.1",
-    "date-fns": "^4.1.0",
-    "eventsource-parser": "^3.0.6",
-    "js-beautify": "^1.15.4",
-    "lodash": "^4.17.21",
-    "lodash.debounce": "^4.0.8",
-    "opentype.js": "^1.3.4",
-    "postcss-modules": "^6.0.1",
     "randomcolor": "^0.6.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "^6.0.0",
     "react-virtualized": "^9.22.6",
+    "rimraf": "^6.0.1",
     "rxjs": "8.0.0-alpha.14",
+    "sass": "^1.89.0",
+    "sass-embedded": "^1.89.0",
     "sax": "^1.4.1",
     "source-map-support": "^0.5.21",
+    "storybook": "10.0.4",
     "style-dictionary": "5.0.0-rc.1",
+    "svg-sprite": "^2.0.4",
     "tdigest": "^0.1.2",
     "tinycolor2": "^1.6.0",
+    "typescript": "^5.9.2",
     "ua-parser-js": "2.0.5",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.0",
+    "wasm-pack": "^0.13.1",
+    "watcher": "^2.3.1",
+    "workerpool": "^9.3.2",
     "xregexp": "^5.1.2"
   }
 }

frontend/packages/draft-js/index.js

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

frontend/packages/draft-js/package.json

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

frontend/packages/draft-js/yarn.lock

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

frontend/playwright.config.js

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

frontend/playwright/data/dashboard/get-team-deleted-files-empty.json

@@ -0,0 +1 @@
+[]

frontend/playwright/data/dashboard/get-team-deleted-files.json

@@ -0,0 +1,47 @@
+[
+  {
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f41234",
+    "~:revn": 1,
+    "~:vern": 1,
+    "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
+    "~:created-at": "~m1705307400000",
+    "~:modified-at": "~m1732111500000",
+    "~:deleted-at": "~m1732111500000",
+    "~:name": "Deleted Design File 1",
+    "~:is-shared": false,
+    "~:will-be-deleted-at": "~m1732716300000",
+    "~:thumbnail-id": null,
+    "~:row-num": 1,
+    "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d"
+  },
+  {
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f41235",
+    "~:revn": 2,
+    "~:vern": 2,
+    "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
+    "~:created-at": "~m1704875700000",
+    "~:modified-at": "~m1732025400000",
+    "~:deleted-at": "~m1732025400000",
+    "~:name": "Deleted Design File 2",
+    "~:is-shared": true,
+    "~:will-be-deleted-at": "~m1732630200000",
+    "~:thumbnail-id": null,
+    "~:row-num": 2,
+    "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d"
+  },
+  {
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f41236",
+    "~:revn": 3,
+    "~:vern": 3,
+    "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920c",
+    "~:created-at": "~m1706792400000",
+    "~:modified-at": "~m1731939600000",
+    "~:deleted-at": "~m1731939600000",
+    "~:name": "Old Project Design",
+    "~:is-shared": false,
+    "~:will-be-deleted-at": "~m1732544400000",
+    "~:thumbnail-id": null,
+    "~:row-num": 3,
+    "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d"
+  }
+]

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

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

frontend/playwright/ui/pages/BasePage.js

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

frontend/playwright/ui/pages/DashboardPage.js

@@ -106,6 +106,13 @@ export class DashboardPage extends BaseWebSocketPage {
     );
   }
 
+  async setupDeletedFiles() {
+    await this.mockRPC(
+      "get-team-deleted-files?team-id=*",
+      "dashboard/get-team-deleted-files.json",
+    );
+  }
+
   async setupDrafts() {
     await this.mockRPC(
       "get-project-files?project-id=*",
@@ -160,6 +167,10 @@ export class DashboardPage extends BaseWebSocketPage {
     });
     await this.mockRPC("search-files", "dashboard/search-files.json");
     await this.mockRPC("get-teams", "logged-in-user/get-teams-complete.json");
+    await this.mockRPC(
+      "get-team-deleted-files?team-id=*",
+      "dashboard/get-team-deleted-files.json",
+    );
   }
 
   async setupAccessTokensEmpty() {
@@ -289,6 +300,13 @@ export class DashboardPage extends BaseWebSocketPage {
     await expect(this.mainHeading).toHaveText("Libraries");
   }
 
+  async goToDeleted() {
+    await this.page.goto(
+      `#/dashboard/deleted?team-id=${DashboardPage.anyTeamId}`,
+    );
+    await expect(this.mainHeading).toHaveText("Projects");
+  }
+
   async openProfileMenu() {
     await this.userAccount.click();
   }

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

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+import DashboardPage from "../pages/DashboardPage";
+
+test.beforeEach(async ({ page }) => {
+  await DashboardPage.init(page);
+  await DashboardPage.mockRPC(
+    page,
+    "get-profile",
+    "logged-in-user/get-profile-logged-in-no-onboarding.json",
+  );
+});
+
+test.describe("Dashboard Deleted Page", () => {
+  test("User can navigate to deleted page", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+
+    // Setup mock for deleted files API
+    await dashboardPage.setupDeletedFiles();
+
+    // Navigate directly to deleted page
+    await dashboardPage.goToDeleted();
+
+    // Check for the restore all and clear trash buttons
+    await expect(
+      page.getByRole("button", { name: "Restore All" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Clear trash" }),
+    ).toBeVisible();
+  });
+});

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

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

frontend/resources/templates/index.mustache

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

frontend/resources/templates/preview-head.mustache

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

frontend/resources/templates/rasterizer.mustache

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

frontend/resources/templates/render.mustache

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

frontend/scripts/_helpers.js

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

frontend/scripts/build

@@ -27,26 +27,20 @@ rm -rf target/dist;
 rm -rf resources/public;
 
 mkdir -p resources/public;
+mkdir -p target/dist;
 
 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;
+yarn run build:app:main $EXTRA_PARAMS;
+yarn run build:app:libs;
+yarn run build:app:assets;
 
 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/
 
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/index.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/render.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/rasterizer.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/index.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/rasterizer.html;
-
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then
     # build storybook
     yarn run build:storybook || exit 1;

frontend/scripts/build-app-assets.js

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

frontend/scripts/build-libs.js

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

frontend/scripts/build-storybook-assets.js

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

frontend/scripts/repl

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

frontend/scripts/watch.js

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

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

@@ -86,7 +86,6 @@
 (def default-theme  "default")
 (def default-language "en")
 
-(def translations         (obj/get global "penpotTranslations"))
 (def themes               (obj/get global "penpotThemes"))
 
 (def build-date           (parse-build-date global))

frontend/src/app/main.cljs

@@ -90,9 +90,12 @@
             (rx/map #(ws/initialize)))))))
 
 (defn ^:export init
-  []
+  [options]
+  (some-> (unchecked-get options "defaultTranslations")
+          (i18n/set-default-translations))
+
   (mw/init!)
-  (i18n/init! cf/translations)
+  (i18n/init)
   (cur/init-styles)
   (thr/init!)
   (init-ui)
@@ -114,11 +117,4 @@
   []
   (reinit))
 
-;; Reload the UI when the language changes
-(add-watch
- i18n/locale "locale"
- (fn [_ _ old-value current-value]
-   (when (not= old-value current-value)
-     (reinit))))
-
 (set! (.-stackTraceLimit js/Error) 50)

frontend/src/app/main/constants.cljs

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

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

@@ -386,3 +386,21 @@
         (rx/of ::dps/force-persist
                (rt/nav :viewer params options))))))
 
+(defn go-to-dashboard-deleted
+  [& {:keys [team-id] :as options}]
+  (ptk/reify ::go-to-dashboard-deleted
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [profile (get state :profile)
+            team-id (cond
+                      (= :default team-id)
+                      (:default-team-id profile)
+
+                      (uuid? team-id)
+                      team-id
+
+                      :else
+                      (:current-team-id state))
+            params  {:team-id team-id}]
+        (rx/of (modal/hide)
+               (rt/nav :dashboard-deleted params options))))))

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

@@ -21,6 +21,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.websocket :as dws]
    [app.main.repo :as rp]
+   [app.main.store :as st]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.sse :as sse]
    [beicon.v2.core :as rx]
@@ -76,7 +77,8 @@
     ptk/UpdateEvent
     (update [_ state]
       (reduce (fn [state {:keys [id] :as project}]
-                (update-in state [:projects id] merge project))
+                  ;; Replace completely instead of merge to ensure deleted-at is removed
+                (assoc-in state [:projects id] project))
               state
               projects))))
 
@@ -152,6 +154,34 @@
       (->> (rp/cmd! :get-builtin-templates)
            (rx/map builtin-templates-fetched)))))
 
+;; --- EVENT: deleted-files
+
+(defn- deleted-files-fetched
+  [files]
+  (ptk/reify ::deleted-files-fetched
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [now (ct/now)
+            filtered-files (filterv (fn [file]
+                                      (let [will-be-deleted-at (:will-be-deleted-at file)]
+                                        (or (nil? will-be-deleted-at)
+                                            (ct/is-after? will-be-deleted-at now))))
+                                    files)
+            files (d/index-by :id filtered-files)]
+        (-> state
+            (assoc :deleted-files files)
+            (update :files d/merge files))))))
+
+(defn fetch-deleted-files
+  ([] (fetch-deleted-files nil))
+  ([team-id]
+   (ptk/reify ::fetch-deleted-files
+     ptk/WatchEvent
+     (watch [_ state _]
+       (when-let [team-id (or team-id (:current-team-id state))]
+         (->> (rp/cmd! :get-team-deleted-files {:team-id team-id})
+              (rx/map deleted-files-fetched)))))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Data Selection
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -460,6 +490,7 @@
         (-> state
             (d/update-in-when [:files file-id] assoc :thumbnail-id thumbnail-id)
             (d/update-in-when [:recent-files file-id] assoc :thumbnail-id thumbnail-id)
+            (d/update-in-when [:deleted-files file-id] assoc :thumbnail-id thumbnail-id)
             (d/update-when :dashboard-search-result update-search-files))))))
 
 ;; --- EVENT: create-file
@@ -656,3 +687,156 @@
     :team-role-change       (handle-change-team-role msg)
     :team-membership-change (dcm/team-membership-change msg)
     nil))
+
+
+;; --- Delete files immediately
+
+(defn delete-files-immediately
+  [{:keys [team-id ids] :as params}]
+  (assert (uuid? team-id))
+  (assert (set? ids))
+  (assert (every? uuid? ids))
+
+  (ptk/reify ::delete-files-immediately
+    ev/Event
+    (-data [_]
+      {:team-id team-id
+       :num-files (count ids)})
+
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [{:keys [on-success on-error]
+             :or {on-success identity
+                  on-error rx/throw}} (meta params)]
+        (->> (rp/cmd! :permanently-delete-team-files {:team-id team-id :ids ids})
+             (rx/tap on-success)
+             (rx/catch on-error))))))
+
+;; --- Restore deleted files immediately
+
+(defn- initialize-restore-status
+  [files]
+  (ptk/reify ::init-restore-status
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [restore-state {:in-progress true
+                           :healthy? true
+                           :error false
+                           :progress 0
+                           :widget-visible true
+                           :detail-visible true
+                           :files files
+                           :last-update (ct/now)
+                           :cmd :restore-files}]
+        (assoc state :restore restore-state)))))
+
+(defn- update-restore-status
+  [{:keys [index total] :as data}]
+  (ptk/reify ::upd-restore-status
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [time-diff (ct/diff-ms (get-in state [:restore :last-update]) (ct/now))
+            healthy?  (< time-diff 6000)]
+        (update state :restore assoc
+                :progress index
+                :total total
+                :last-update (ct/now)
+                :healthy? healthy?)))))
+
+(defn- complete-restore-status
+  []
+  (ptk/reify ::comp-restore-status
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [total (get-in state [:restore :total])]
+        (update state :restore assoc
+                :in-progress false
+                :progress total  ; Ensure progress equals total on completion
+                :last-update (ct/now))))))
+
+(defn- error-restore-status
+  [error]
+  (ptk/reify ::err-restore-status
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :restore assoc
+              :in-progress false
+              :error error
+              :last-update (ct/now)
+              :healthy? false))))
+
+(defn toggle-restore-detail-visibility
+  []
+  (ptk/reify ::toggle-restore-detail
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:restore :detail-visible] not))))
+
+(defn retry-last-restore
+  []
+  (ptk/reify ::retry-restore
+    ptk/UpdateEvent
+    (update [_ state]
+      ;; Reset restore state for retry - actual retry will be handled by UI
+      (if (get state :restore)
+        (update state :restore assoc :error false :in-progress false)
+        state))))
+
+(defn clear-restore-state
+  []
+  (ptk/reify ::clear-restore
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :restore))))
+
+(defn- projects-restored
+  [team-id]
+  (ptk/reify ::projects-restored
+    ptk/WatchEvent
+    (watch [_ _ _]
+      ;; Refetch projects to get the updated state without deleted-at
+      (rx/of (fetch-projects team-id)))))
+
+(defn restore-files-immediately
+  [{:keys [team-id ids] :as params}]
+  (dm/assert! (uuid? team-id))
+  (dm/assert! (set? ids))
+  (dm/assert! (every? uuid? ids))
+
+  (ptk/reify ::restore-files-immediately
+    ev/Event
+    (-data [_]
+      {:team-id team-id
+       :num-files (count ids)})
+
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [{:keys [on-success on-error]
+             :or {on-success identity
+                  on-error rx/throw}} (meta params)
+            files (mapv #(hash-map :id %) ids)]
+
+        (rx/merge
+         (rx/of (initialize-restore-status files))
+
+         (->> (rp/cmd! ::sse/restore-deleted-team-files {:team-id team-id :ids ids})
+              (rx/tap (fn [event]
+                        (let [payload (sse/get-payload event)
+                              type    (sse/get-type event)]
+                          (when (and payload (= type "progress"))
+                            (let [{:keys [index total]} payload]
+                              (when (and index total)
+                                ;; Dispatch progress update
+                                (st/emit! (update-restore-status {:index index :total total}))))))))
+              (rx/filter sse/end-of-stream?)
+              (rx/map sse/get-payload)
+              (rx/tap on-success)
+              (rx/mapcat (fn [_]
+                           (rx/of (complete-restore-status)
+                                  (projects-restored team-id))))
+              (rx/catch (fn [error]
+                          (rx/concat
+                           (rx/of (error-restore-status (ex-message error)))
+                           (on-error error)))))
+
+         (rx/of (ptk/data-event ::restore-start {:total (count ids)})))))))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/app/main/refs.cljs

@@ -636,3 +636,6 @@
 
 (def persistence-state
   (l/derived (comp :status :persistence) st/state))
+
+(def restore
+  (l/derived :restore st/state))

frontend/src/app/main/repo.cljs

@@ -87,6 +87,9 @@
    {:stream? true
     :form-data? true}
 
+   ::sse/restore-deleted-team-files
+   {:stream? true}
+
    :export-binfile {:response-type :blob}
    :retrieve-list-of-builtin-templates {:query-params :all}})
 

frontend/src/app/main/ui.cljs

@@ -31,27 +31,28 @@
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
+   [app.util.modules :as mod]
    [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
 (def auth-page
-  (mf/lazy-component app.main.ui.auth/auth))
+  (mf/lazy #(mod/load 'app.main.ui.auth/auth-page*)))
 
-(def verify-token-page
-  (mf/lazy-component app.main.ui.auth.verify-token/verify-token))
+(def verify-token-page*
+  (mf/lazy #(mod/load 'app.main.ui.auth.verify-token/verify-token-page*)))
 
 (def viewer-page*
-  (mf/lazy-component app.main.ui.viewer/viewer*))
+  (mf/lazy #(mod/load 'app.main.ui.viewer/viewer-page*)))
 
 (def dashboard-page*
-  (mf/lazy-component app.main.ui.dashboard/dashboard*))
+  (mf/lazy #(mod/load 'app.main.ui.dashboard/dashboard-page*)))
 
 (def settings-page*
-  (mf/lazy-component app.main.ui.settings/settings*))
+  (mf/lazy #(mod/load 'app.main.ui.settings/settings-page*)))
 
 (def workspace-page*
-  (mf/lazy-component app.main.ui.workspace/workspace*))
+  (mf/lazy #(mod/load 'app.main.ui.workspace/workspace-page*)))
 
 (mf/defc workspace-legacy-redirect*
   {::mf/props :obj
@@ -189,7 +190,7 @@
        [:? [:& auth-page {:route route}]]
 
        :auth-verify-token
-       [:? [:& verify-token-page {:route route}]]
+       [:? [:& verify-token-page* {:route route}]]
 
        (:settings-profile
         :settings-password
@@ -223,7 +224,8 @@
         :dashboard-members
         :dashboard-invitations
         :dashboard-webhooks
-        :dashboard-settings)
+        :dashboard-settings
+        :dashboard-deleted)
        (let [params        (get params :query)
              team-id       (some-> params :team-id uuid/parse*)
              project-id    (some-> params :project-id uuid/parse*)

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,7 @@
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.dashboard.deleted :refer [deleted-section*]]
    [app.main.ui.dashboard.files :refer [files-section*]]
    [app.main.ui.dashboard.fonts :refer [fonts-page* font-providers-page*]]
    [app.main.ui.dashboard.import]
@@ -29,6 +30,7 @@
    [app.main.ui.dashboard.sidebar :refer [sidebar*]]
    [app.main.ui.dashboard.team :refer [team-settings-page* team-members-page* team-invitations-page* webhooks-page*]]
    [app.main.ui.dashboard.templates :refer [templates-section*]]
+   [app.main.ui.exports.assets :refer [progress-widget]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.modal :refer [modal-container*]]
    [app.main.ui.workspace.plugins]
@@ -84,6 +86,9 @@
     [:div {:class (stl/css :dashboard-content)
            :on-click clear-selected-fn
            :ref container}
+
+     [:& progress-widget {:operation :restore}]
+
      (case section
        :dashboard-recent
        (when (seq projects)
@@ -140,6 +145,11 @@
        :dashboard-settings
        [:> team-settings-page* {:team team :profile profile}]
 
+       :dashboard-deleted
+       [:> deleted-section* {:team team
+                             :projects projects
+                             :profile profile}]
+
        nil)]))
 
 (def ref:dashboard-initialized
@@ -247,7 +257,6 @@
           (swap! storage/session dissoc :template))))))
 
 (mf/defc dashboard*
-  {::mf/props :obj}
   [{:keys [profile project-id team-id search-term plugin-url template section]}]
   (let [team            (mf/deref refs/team)
         projects        (mf/deref refs/projects)
@@ -313,3 +322,8 @@
         :section section
         :search-term search-term
         :team team}]]]))
+
+(mf/defc dashboard-page*
+  {::mf/lazy-load true}
+  [props]
+  [:> dashboard* props])

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

@@ -0,0 +1,331 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.dashboard.deleted
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.geom.point :as gpt]
+   [app.main.data.common :as dcm]
+   [app.main.data.dashboard :as dd]
+   [app.main.data.modal :as modal]
+   [app.main.data.notifications :as ntf]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
+   [app.main.ui.dashboard.grid :refer [grid*]]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
+   [app.main.ui.hooks :as hooks]
+   [app.main.ui.icons :as deprecated-icon]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
+   [okulary.core :as l]
+   [rumext.v2 :as mf]))
+
+
+(def ^:private menu-icon
+  (deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
+
+(mf/defc header*
+  {::mf/props :obj
+   ::mf/private true}
+  []
+  [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"}
+   [:div#dashboard-deleted-title {:class (stl/css :dashboard-title)}
+    [:h1 (tr "dashboard.projects-title")]]])
+
+(mf/defc deleted-project-menu*
+  [{:keys [project files team-id show on-close top left]}]
+  (let [top  (d/nilv top 0)
+        left (d/nilv left 0)
+
+        file-ids
+        (mf/with-memo [files]
+          (into #{} d/xf:map-id files))
+
+        restore-fn
+        (fn [_]
+          (st/emit! (dd/restore-files-immediately
+                     (with-meta {:team-id team-id :ids file-ids}
+                       {:on-success #(st/emit! (ntf/success (tr "restore-modal.success-restore-immediately" (:name project)))
+                                               (dd/fetch-projects team-id)
+                                               (dd/fetch-deleted-files team-id))
+                        :on-error #(st/emit! (ntf/error (tr "restore-modal.error-restore-project" (:name project))))}))))
+
+        on-restore-project
+        (fn []
+          (st/emit!
+           (modal/show {:type :confirm
+                        :title (tr "restore-modal.restore-project.title")
+                        :message (tr "restore-modal.restore-project.description" (:name project))
+                        :accept-style :primary
+                        :accept-label (tr "labels.continue")
+                        :on-accept restore-fn})))
+
+        delete-fn
+        (fn [_]
+          (st/emit! (ntf/success (tr "delete-forever-modal.success-delete-immediately" (:name project)))
+                    (dd/delete-files-immediately
+                     {:team-id team-id
+                      :ids file-ids})
+                    (dd/fetch-projects team-id)
+                    (dd/fetch-deleted-files team-id)))
+
+        on-delete-project
+        (fn []
+          (st/emit!
+           (modal/show {:type :confirm
+                        :title (tr "delete-forever-modal.title")
+                        :message (tr "delete-forever-modal.delete-project.description" (:name project))
+                        :accept-label (tr "dashboard.deleted.delete-forever")
+                        :on-accept delete-fn})))
+        options
+        [{:name   (tr "dashboard.deleted.restore-project")
+          :id     "project-restore"
+          :handler on-restore-project}
+         {:name   (tr "dashboard.deleted.delete-project")
+          :id     "project-delete"
+          :handler on-delete-project}]]
+
+    [:> context-menu*
+     {:on-close on-close
+      :show show
+      :fixed (or (not= top 0) (not= left 0))
+      :min-width true
+      :top top
+      :left left
+      :options options}]))
+
+(mf/defc deleted-project-item*
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [project team files]}]
+  (let [project-files  (filterv #(= (:project-id %) (:id project)) files)
+
+        empty?         (empty? project-files)
+        selected-files (mf/deref refs/selected-files)
+
+        dstate         (mf/deref refs/dashboard-local)
+        edit-id        (:project-for-edit dstate)
+
+        local          (mf/use-state
+                        #(do {:menu-open false
+                              :menu-pos nil
+                              :edition (= (:id project) edit-id)}))
+
+        [rowref limit] (hooks/use-dynamic-grid-item-width)
+
+        on-menu-click
+        (mf/use-fn
+         (fn [event]
+           (dom/prevent-default event)
+
+           (let [client-position (dom/get-client-position event)
+                 position (if (and (nil? (:y client-position)) (nil? (:x client-position)))
+                            (let [target-element (dom/get-target event)
+                                  points         (dom/get-bounding-rect target-element)
+                                  y              (:top points)
+                                  x              (:left points)]
+                              (gpt/point x y))
+                            client-position)]
+             (swap! local assoc
+                    :menu-open true
+                    :menu-pos position))))
+
+        on-menu-close
+        (mf/use-fn #(swap! local assoc :menu-open false))
+
+        handle-menu-click
+        (mf/use-callback
+         (mf/deps on-menu-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (dom/stop-propagation event)
+             (on-menu-click event))))]
+
+    [:article {:class (stl/css-case :dashboard-project-row true)}
+     [:header {:class (stl/css :project)}
+      [:div {:class (stl/css :project-name-wrapper)}
+       [:h2  {:class (stl/css :project-name)
+              :title (:name project)}
+        (:name project)]
+
+       (when (:deleted-at project)
+         [:div {:class (stl/css :info-wrapper)}
+          [:div {:class (stl/css-case :project-actions true)}
+
+           [:button {:class (stl/css :options-btn)
+                     :on-click on-menu-click
+                     :title (tr "dashboard.options")
+                     :aria-label  (tr "dashboard.options")
+                     :data-testid "project-options"
+                     :on-key-down handle-menu-click}
+            menu-icon]]
+
+          (when (:menu-open @local)
+            [:> deleted-project-menu*
+             {:project project
+              :files project-files
+              :team-id (:id team)
+              :show (:menu-open @local)
+              :left (+ 24 (:x (:menu-pos @local)))
+              :top (:y (:menu-pos @local))
+              :on-close on-menu-close}])])]]
+
+     [:div {:class (stl/css :grid-container) :ref rowref}
+      (if ^boolean empty?
+        [:> empty-placeholder* {:title (tr "dashboard.empty-placeholder-files-title")
+                                :class (stl/css :placeholder-placement)
+                                :type 1
+                                :subtitle (tr "dashboard.empty-placeholder-files-subtitle")}]
+
+        [:> grid*
+         {:project project
+          :files project-files
+          :origin :deleted
+          :can-edit false
+          :can-restore true
+          :limit limit
+          :selected-files selected-files}])]]))
+
+(def ^:private ref:deleted-files
+  (l/derived :deleted-files st/state))
+
+(mf/defc deleted-section*
+  [{:keys [team projects]}]
+  (let [deleted-map
+        (mf/deref ref:deleted-files)
+
+        projects
+        (mf/with-memo [projects deleted-map]
+          (->> projects
+               (filter (fn [project]
+                         (or (:deleted-at project)
+                             (when deleted-map
+                               (some #(= (:id project) (:project-id %))
+                                     (vals deleted-map))))))
+               (filter (fn [project]
+                         (when deleted-map
+                           (some #(= (:id project) (:project-id %))
+                                 (vals deleted-map)))))
+               (sort-by :modified-at)
+               (reverse)))
+
+        team-id
+        (get team :id)
+
+        ;; Calculate deletion days based on team subscription
+        deletion-days
+        (let [subscription (get team :subscription)
+              sub-type     (get subscription :type)
+              sub-status   (get subscription :status)
+              canceled?    (contains? #{"canceled" "unpaid"} sub-status)]
+          (cond
+            (and (= "unlimited" sub-type) (not canceled?)) 30
+            (and (= "enterprise" sub-type) (not canceled?)) 90
+            :else 7))
+
+        on-clear
+        (mf/use-fn
+         (mf/deps team-id deleted-map)
+         (fn []
+           (when deleted-map
+             (let [file-ids (into #{} (keys deleted-map))]
+               (when (seq file-ids)
+                 (st/emit!
+                  (modal/show {:type :confirm
+                               :title (tr "delete-forever-modal.title")
+                               :message (tr "delete-forever-modal.delete-all.description" (count file-ids))
+                               :accept-label (tr "dashboard.deleted.delete-forever")
+                               :on-accept #(st/emit!
+                                            (dd/delete-files-immediately
+                                             {:team-id team-id
+                                              :ids file-ids})
+                                            (dd/fetch-projects team-id)
+                                            (dd/fetch-deleted-files team-id))})))))))
+
+        restore-fn
+        (fn [file-ids]
+          (st/emit! (dd/restore-files-immediately
+                     (with-meta {:team-id team-id :ids file-ids}
+                       {:on-success #(st/emit! (dd/fetch-projects team-id)
+                                               (dd/fetch-deleted-files team-id))
+                        :on-error #(st/emit! (ntf/error (tr "restore-modal.error-restore-files")))}))))
+
+        on-restore-all
+        (mf/use-fn
+         (mf/deps team-id deleted-map)
+         (fn []
+           (when deleted-map
+             (let [file-ids (into #{} (keys deleted-map))]
+               (when (seq file-ids)
+                 (st/emit!
+                  (modal/show {:type :confirm
+                               :title (tr "restore-modal.restore-all.title")
+                               :message (tr "restore-modal.restore-all.description" (count file-ids))
+                               :accept-label (tr "labels.continue")
+                               :accept-style :primary
+                               :on-accept #(restore-fn file-ids)})))))))
+
+        on-recent-click
+        (mf/use-fn
+         (mf/deps team-id)
+         (fn []
+           (st/emit! (dcm/go-to-dashboard-recent :team-id team-id))))]
+
+    (mf/with-effect [team-id]
+      (st/emit! (dd/fetch-projects team-id)
+                (dd/fetch-deleted-files team-id)
+                (dd/clear-selected-files)))
+
+    [:*
+     [:> header* {:team team}]
+     [:section {:class (stl/css :dashboard-container :no-bg)}
+      [:*
+       [:div {:class (stl/css :no-bg)}
+
+        [:div {:class (stl/css :nav-options)}
+         [:> button* {:variant "ghost"
+                      :data-testid "recent-tab"
+                      :type "button"
+                      :on-click on-recent-click}
+          (tr "dashboard.labels.recent")]
+         [:div {:class (stl/css :selected)
+                :data-testid "deleted-tab"}
+          (tr "dashboard.labels.deleted")]]
+
+        [:div {:class (stl/css :deleted-content)}
+         [:div {:class (stl/css :deleted-info)}
+          [:div
+           (tr "dashboard.deleted.info-text")
+           [:span {:class (stl/css :info-text-highlight)}
+            (tr "dashboard.deleted.info-days" deletion-days)]
+           (tr "dashboard.deleted.info-text2")]
+          [:div
+           (tr "dashboard.deleted.restore-text")]]
+         [:div {:class (stl/css :deleted-options)}
+          [:> button* {:variant "ghost"
+                       :type "button"
+                       :on-click on-restore-all}
+           (tr "dashboard.deleted.restore-all")]
+          [:> button* {:variant "destructive"
+                       :type "button"
+                       :icon "delete"
+                       :on-click on-clear}
+           (tr "dashboard.deleted.clear")]]]
+
+        (when (seq projects)
+          (for [{:keys [id] :as project} projects]
+            (let [files (when deleted-map
+                          (->> (vals deleted-map)
+                               (filterv #(= id (:project-id %)))
+                               (sort-by :modified-at #(compare %2 %1))))]
+              [:> deleted-project-item* {:project project
+                                         :team team
+                                         :files files
+                                         :key id}])))]]]]))

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

@@ -0,0 +1,125 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-dashboard";
+@use "../ds/typography.scss" as t;
+@use "../ds/_borders.scss" as *;
+@use "../ds/spacing.scss" as *;
+@use "../ds/_sizes.scss" as *;
+@use "../ds/z-index.scss" as *;
+
+.dashboard-container {
+  flex: 1 0 0;
+  width: 100%;
+  margin-inline-end: var(--sp-l);
+  border-top: $b-1 solid var(--panel-border-color);
+  overflow-y: auto;
+  padding-block-end: var(--sp-xxxl);
+}
+
+.deleted-content {
+  display: flex;
+  gap: var(--sp-l);
+  justify-content: space-between;
+  margin-inline-start: var(--sp-l);
+  margin-block-start: var(--sp-xxl);
+}
+
+.deleted-info {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-secondary);
+}
+
+.info-text-highlight {
+  color: var(--color-accent-primary);
+}
+
+.deleted-options {
+  display: flex;
+  gap: 5px;
+  flex-shrink: 0;
+}
+
+.nav-options {
+  display: flex;
+  gap: var(--sp-l);
+  justify-content: space-between;
+  border-bottom: $b-1 solid var(--panel-border-color);
+  padding-inline-start: var(--sp-l);
+  background: var(--color-background-default);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-panels);
+}
+
+.selected {
+  @include t.use-typography("headline-small");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground-primary);
+  border: $b-1 solid transparent;
+  border-bottom: $b-1 solid var(--color-foreground-primary);
+  padding: 0 var(--sp-m);
+}
+
+.project {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-s);
+  width: 99%;
+  max-height: $sz-40;
+  padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
+  margin-block-start: var(--sp-l);
+  border-radius: $br-4;
+}
+
+.project-name-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: var(--sp-xxxl);
+  margin-inline-start: var(--sp-s);
+}
+
+.project-name {
+  @include t.use-typography("body-large");
+  width: fit-content;
+  margin-inline-end: var(--sp-m);
+  line-height: 0.8;
+  color: var(--title-foreground-color-hover);
+  height: var(--sp-l);
+}
+
+.project-actions {
+  display: flex;
+  opacity: var(--actions-opacity);
+  margin-inline-start: var(--sp-xxxl);
+}
+
+.add-file-btn,
+.options-btn {
+  @extend .button-tertiary;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
+  margin: 0 var(--sp-s);
+  padding: var(--sp-s);
+}
+
+.info-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-s);
+}
+
+.add-icon,
+.menu-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}

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

@@ -55,7 +55,7 @@
           projects))
 
 (mf/defc file-menu*
-  [{:keys [files on-edit on-close top left navigate origin parent-id can-edit]}]
+  [{:keys [files on-edit on-close top left navigate origin parent-id can-edit can-restore]}]
 
   (assert (seq files) "missing `files` prop")
   (assert (fn? on-edit) "missing `on-edit` prop")
@@ -187,7 +187,46 @@
         on-export-binary-files
         (fn []
           (st/emit! (-> (fexp/open-export-dialog files)
-                        (with-meta {::ev/origin "dashboard"}))))]
+                        (with-meta {::ev/origin "dashboard"}))))
+
+        restore-fn
+        (fn [_]
+          (st/emit! (dd/restore-files-immediately
+                     (with-meta {:team-id (:id current-team)
+                                 :ids #{(:id file)}}
+                       {:on-success #(st/emit! (ntf/success (tr "restore-modal.success-restore-immediately" (:name file)))
+                                               (dd/fetch-projects (:id current-team))
+                                               (dd/fetch-deleted-files (:id current-team)))
+                        :on-error #(st/emit! (ntf/error (tr "restore-modal.error-restore-file" (:name file))))}))))
+
+        on-restore-immediately
+        (fn []
+          (st/emit!
+           (modal/show {:type :confirm
+                        :title (tr "restore-modal.restore-file.title")
+                        :message (tr "restore-modal.restore-file.description" (:name file))
+                        :accept-label (tr "labels.continue")
+                        :accept-style :primary
+                        :on-accept restore-fn})))
+
+
+        delete-fn
+        (fn [_]
+          (st/emit! (ntf/success (tr "delete-forever-modal.success-delete-immediately" (:name file)))
+                    (dd/delete-files-immediately
+                     {:team-id (:id current-team)
+                      :ids #{(:id file)}})
+                    (dd/fetch-projects (:id current-team))
+                    (dd/fetch-deleted-files (:id current-team))))
+
+        on-delete-immediately
+        (fn []
+          (st/emit!
+           (modal/show {:type :confirm
+                        :title (tr "delete-forever-modal.title")
+                        :message (tr "delete-forever-modal.delete-file.description" (:name file))
+                        :accept-label (tr "delete-forever-modal.title")
+                        :on-accept delete-fn})))]
 
     (mf/with-effect []
       (->> (rp/cmd! :get-all-projects)
@@ -227,76 +266,85 @@
                                        (:id sub-project))})})}]))
 
           options
-          (if multi?
-            [(when can-edit
-               {:name    (tr "dashboard.duplicate-multi" file-count)
-                :id      "duplicate-multi"
-                :handler on-duplicate})
+          (if can-restore
+            [(when can-restore
+               {:name    (tr "dashboard.restore-file")
+                :id      "restore-file"
+                :handler on-restore-immediately})
+             (when can-restore
+               {:name    (tr "dashboard.delete-file")
+                :id      "delete-file"
+                :handler on-delete-immediately})]
+            (if multi?
+              [(when can-edit
+                 {:name    (tr "dashboard.duplicate-multi" file-count)
+                  :id      "duplicate-multi"
+                  :handler on-duplicate})
 
-             (when (and (or (seq current-projects) (seq other-teams)) can-edit)
-               {:name    (tr "dashboard.move-to-multi" file-count)
-                :id      "file-move-multi"
-                :options    sub-options})
+               (when (and (or (seq current-projects) (seq other-teams)) can-edit)
+                 {:name    (tr "dashboard.move-to-multi" file-count)
+                  :id      "file-move-multi"
+                  :options    sub-options})
 
-             {:name    (tr "dashboard.export-binary-multi" file-count)
-              :id      "file-binary-export-multi"
-              :handler on-export-binary-files}
+               {:name    (tr "dashboard.export-binary-multi" file-count)
+                :id      "file-binary-export-multi"
+                :handler on-export-binary-files}
 
-             (when (and (:is-shared file) can-edit)
-               {:name    (tr "labels.unpublish-multi-files" file-count)
-                :id      "file-unpublish-multi"
-                :handler on-del-shared})
+               (when (and (:is-shared file) can-edit)
+                 {:name    (tr "labels.unpublish-multi-files" file-count)
+                  :id      "file-unpublish-multi"
+                  :handler on-del-shared})
 
-             (when (and (not is-lib-page?) can-edit)
-               {:name    :separator}
-               {:name    (tr "labels.delete-multi-files" file-count)
-                :id      "file-delete-multi"
-                :handler on-delete})]
+               (when (and (not is-lib-page?) can-edit)
+                 {:name    :separator}
+                 {:name    (tr "labels.delete-multi-files" file-count)
+                  :id      "file-delete-multi"
+                  :handler on-delete})]
 
-            [{:name    (tr "dashboard.open-in-new-tab")
-              :id      "file-open-new-tab"
-              :handler on-new-tab}
-             (when (and (not is-search-page?) can-edit)
-               {:name    (tr "labels.rename")
-                :id      "file-rename"
-                :handler on-edit})
+              [{:name    (tr "dashboard.open-in-new-tab")
+                :id      "file-open-new-tab"
+                :handler on-new-tab}
+               (when (and (not is-search-page?) can-edit)
+                 {:name    (tr "labels.rename")
+                  :id      "file-rename"
+                  :handler on-edit})
 
-             (when (and (not is-search-page?) can-edit)
-               {:name    (tr "dashboard.duplicate")
-                :id      "file-duplicate"
-                :handler on-duplicate})
+               (when (and (not is-search-page?) can-edit)
+                 {:name    (tr "dashboard.duplicate")
+                  :id      "file-duplicate"
+                  :handler on-duplicate})
 
-             (when (and (not is-lib-page?)
-                        (not is-search-page?)
-                        (or (seq current-projects) (seq other-teams))
-                        can-edit)
-               {:name    (tr "dashboard.move-to")
-                :id      "file-move-to"
-                :options sub-options})
+               (when (and (not is-lib-page?)
+                          (not is-search-page?)
+                          (or (seq current-projects) (seq other-teams))
+                          can-edit)
+                 {:name    (tr "dashboard.move-to")
+                  :id      "file-move-to"
+                  :options sub-options})
 
-             (when (and (not is-search-page?)
-                        can-edit)
-               (if (:is-shared file)
-                 {:name    (tr "dashboard.unpublish-shared")
-                  :id      "file-del-shared"
-                  :handler on-del-shared}
-                 {:name    (tr "dashboard.add-shared")
-                  :id      "file-add-shared"
-                  :handler on-add-shared}))
+               (when (and (not is-search-page?)
+                          can-edit)
+                 (if (:is-shared file)
+                   {:name    (tr "dashboard.unpublish-shared")
+                    :id      "file-del-shared"
+                    :handler on-del-shared}
+                   {:name    (tr "dashboard.add-shared")
+                    :id      "file-add-shared"
+                    :handler on-add-shared}))
 
-             {:name   :separator}
+               {:name   :separator}
 
-             {:name    (tr "dashboard.download-binary-file")
-              :id      "download-binary-file"
-              :handler on-export-binary-files}
+               {:name    (tr "dashboard.download-binary-file")
+                :id      "download-binary-file"
+                :handler on-export-binary-files}
 
-             (when (and (not is-lib-page?) (not is-search-page?) can-edit)
-               {:name   :separator})
+               (when (and (not is-lib-page?) (not is-search-page?) can-edit)
+                 {:name   :separator})
 
-             (when (and (not is-lib-page?) (not is-search-page?) can-edit)
-               {:name    (tr "labels.delete")
-                :id      "file-delete"
-                :handler on-delete})])]
+               (when (and (not is-lib-page?) (not is-search-page?) can-edit)
+                 {:name    (tr "labels.delete")
+                  :id      "file-delete"
+                  :handler on-delete})]))]
 
       [:> context-menu*
        {:on-close on-close

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

@@ -86,7 +86,7 @@
 (mf/defc grid-item-thumbnail*
   {::mf/props :obj
    ::mf/private true}
-  [{:keys [can-edit file]}]
+  [{:keys [can-edit file can-restore]}]
   (let [file-id      (get file :id)
         revn         (get file :revn)
         thumbnail-id (get file :thumbnail-id)
@@ -109,7 +109,8 @@
                                           :message (ex-message cause)))))]
           (partial rx/dispose! subscription))))
 
-    [:div {:class (stl/css :grid-item-th)
+    [:div {:class (stl/css-case :grid-item-th true
+                                :deleted-item can-restore)
            :style {:background-color bg-color}
            :ref container}
      (when visible?
@@ -131,13 +132,15 @@
 
 (mf/defc grid-item-library*
   {::mf/props :obj}
-  [{:keys [file]}]
+  [{:keys [file can-restore]}]
   (mf/with-effect [file]
     (when file
       (let [font-ids (map :font-id (get-in file [:library-summary :typographies :sample] []))]
         (run! fonts/ensure-loaded! font-ids))))
 
-  [:div {:class (stl/css :grid-item-th :library)}
+  [:div {:class (stl/css-case :grid-item-th true
+                              :library true
+                              :deleted-item can-restore)}
    (if (nil? file)
      [:> loader* {:class (stl/css :grid-loader)
                   :overlay true
@@ -250,7 +253,7 @@
     counter-el))
 
 (mf/defc grid-item*
-  [{:keys [file origin can-edit selected-files]}]
+  [{:keys [file origin can-edit selected-files can-restore]}]
   (let [file-id  (get file :id)
         state    (mf/deref refs/dashboard-local)
 
@@ -289,12 +292,13 @@
 
         on-navigate
         (mf/use-fn
-         (mf/deps file-id)
+         (mf/deps file-id can-restore)
          (fn [event]
-           (let [menu-icon (mf/ref-val menu-ref)
-                 target    (dom/get-target event)]
-             (when-not (dom/child? target menu-icon)
-               (st/emit! (dcm/go-to-workspace :file-id file-id))))))
+           (when-not can-restore
+             (let [menu-icon (mf/ref-val menu-ref)
+                   target    (dom/get-target event)]
+               (when-not (dom/child? target menu-icon)
+                 (st/emit! (dcm/go-to-workspace :file-id file-id)))))))
 
         on-drag-start
         (mf/use-fn
@@ -412,8 +416,8 @@
       [:div {:class (stl/css :overlay)}]
 
       (if ^boolean is-library-view?
-        [:> grid-item-library* {:file file}]
-        [:> grid-item-thumbnail* {:file file :can-edit can-edit}])
+        [:> grid-item-library* {:file file :can-restore can-restore}]
+        [:> grid-item-thumbnail* {:file file :can-edit can-edit :can-restore can-restore}])
 
       (when (and (:is-shared file) (not is-library-view?))
         [:div {:class (stl/css :item-badge)} deprecated-icon/library])
@@ -451,11 +455,12 @@
                             :on-edit on-edit
                             :on-close on-menu-close
                             :origin origin
-                            :parent-id (dm/str file-id "-action-menu")}]])]]]]]))
+                            :parent-id (dm/str file-id "-action-menu")
+                            :can-restore can-restore}]])]]]]]))
 
 (mf/defc grid*
   {::mf/props :obj}
-  [{:keys [files project origin limit create-fn can-edit selected-files]}]
+  [{:keys [files project origin limit create-fn can-edit selected-files can-restore]}]
   (let [dragging?  (mf/use-state false)
         project-id (get project :id)
         team-id    (get project :team-id)
@@ -535,7 +540,8 @@
               :key (dm/str (:id item))
               :origin origin
               :selected-files selected-files
-              :can-edit can-edit}])])
+              :can-edit can-edit
+              :can-restore can-restore}])])
 
        :else
        [:> empty-grid-placeholder*
@@ -548,7 +554,7 @@
          :on-finish-import on-finish-import}])]))
 
 (mf/defc line-grid-row
-  [{:keys [files selected-files dragging? limit can-edit] :as props}]
+  [{:keys [files selected-files dragging? limit can-edit can-restore] :as props}]
   (let [elements limit
         limit (if dragging? (dec limit) limit)]
     [:ul {:class (stl/css :grid-row :no-wrap)
@@ -563,10 +569,11 @@
          :file item
          :selected-files selected-files
          :can-edit can-edit
-         :key (dm/str (:id item))}])]))
+         :key (dm/str (:id item))
+         :can-restore can-restore}])]))
 
 (mf/defc line-grid
-  [{:keys [project team files limit create-fn can-edit] :as props}]
+  [{:keys [project team files limit create-fn can-edit can-restore] :as props}]
   (let [dragging?        (mf/use-state false)
         project-id       (:id project)
         team-id          (:id team)
@@ -664,7 +671,8 @@
                           :selected-files selected-files
                           :dragging? @dragging?
                           :can-edit can-edit
-                          :limit limit}]
+                          :limit limit
+                          :can-restore can-restore}]
 
        :else
        [:> empty-grid-placeholder*

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

@@ -375,3 +375,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
 .grid-loader {
   --icon-width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
 }
+
+.deleted-item {
+  opacity: 0.5;
+}

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

@@ -21,6 +21,7 @@
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.pin-button :refer [pin-button*]]
    [app.main.ui.dashboard.project-menu :refer [project-menu*]]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
@@ -342,7 +343,13 @@
          (fn []
            (reset! show-team-hero* false)
            (st/emit! (ptk/data-event ::ev/event {::ev/name "dont-show-team-up-hero"
-                                                 ::ev/origin "dashboard"}))))]
+                                                 ::ev/origin "dashboard"}))))
+
+        on-deleted-click
+        (mf/use-fn
+         (mf/deps team-id)
+         (fn []
+           (st/emit! (dcm/go-to-dashboard-deleted :team-id team-id))))]
 
     (mf/with-effect [show-team-hero?]
       (swap! storage/global assoc ::show-team-hero show-team-hero?))
@@ -376,6 +383,15 @@
                                                           (not is-defalt-team?)
                                                           show-team-hero?
                                                           can-invite))}
+          [:div {:class (stl/css :nav-options)}
+           [:div {:class (stl/css :selected)
+                  :data-testid "recent-tab"}
+            (tr "dashboard.labels.recent")]
+           [:> button* {:variant "ghost"
+                        :type "button"
+                        :data-testid "deleted-tab"
+                        :on-click on-deleted-click}
+            (tr "dashboard.labels.deleted")]]
           (for [{:keys [id] :as project} projects]
             ;; FIXME: refactor this, looks inneficient
             (let [files (when recent-map

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

@@ -4,16 +4,21 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "common/refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
+@use "../ds/typography.scss" as t;
+@use "../ds/_borders.scss" as *;
+@use "../ds/spacing.scss" as *;
+@use "../ds/_sizes.scss" as *;
+@use "../ds/z-index.scss" as *;
 
 .dashboard-container {
   flex: 1 0 0;
   width: 100%;
-  margin-right: deprecated.$s-16;
-  border-top: deprecated.$s-1 solid var(--panel-border-color);
+  margin-inline-end: var(--sp-l);
+  border-top: $b-1 solid var(--panel-border-color);
   overflow-y: auto;
-  padding-bottom: deprecated.$s-32;
+  padding-bottom: var(--sp-xxxl);
 }
 
 .dashboard-projects {
@@ -27,16 +32,16 @@
 
 .dashboard-shared {
   width: calc(100vw - deprecated.$s-320);
-  margin-right: deprecated.$s-52;
+  margin-inline-end: deprecated.$s-52;
 }
 
 .search {
-  margin-top: deprecated.$s-12;
+  margin-block-start: var(--sp-m);
 }
 
 .dashboard-project-row {
   --actions-opacity: 0;
-  margin-bottom: deprecated.$s-24;
+  margin-block-end: var(--sp-xxl);
   position: relative;
 
   &:hover,
@@ -60,12 +65,12 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
   width: 99%;
-  max-height: deprecated.$s-40;
-  padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-16;
-  margin-top: deprecated.$s-16;
-  border-radius: deprecated.$br-4;
+  max-height: $sz-40;
+  padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
+  margin-block-start: var(--sp-l);
+  border-radius: $br-4;
 }
 
 .project-name-wrapper {
@@ -73,30 +78,29 @@
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  min-height: deprecated.$s-32;
-  margin-left: deprecated.$s-8;
+  min-height: var(--sp-xxxl);
+  margin-inline-start: var(--sp-s);
 }
 
 .project-name {
-  @include deprecated.bodyLargeTypography;
-  @include deprecated.textEllipsis;
+  @include t.use-typography("body-large");
   width: fit-content;
-  margin-right: deprecated.$s-12;
+  margin-inline-end: var(--sp-m);
   line-height: 0.8;
   color: var(--title-foreground-color-hover);
   cursor: pointer;
-  height: deprecated.$s-16;
+  height: var(--sp-l);
 }
 
 .info-wrapper {
   display: flex;
   align-items: center;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .info,
 .recent-files-row-title-info {
-  @include deprecated.bodyMediumTypography;
+  @include t.use-typography("body-medium");
   color: var(--title-foreground-color);
   @media (max-width: 760px) {
     display: none;
@@ -106,16 +110,16 @@
 .project-actions {
   display: flex;
   opacity: var(--actions-opacity);
-  margin-left: deprecated.$s-32;
+  margin-inline-start: var(--sp-xxxl);
 }
 
 .add-file-btn,
 .options-btn {
   @extend .button-tertiary;
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
-  margin: 0 deprecated.$s-8;
-  padding: deprecated.$s-8;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
+  margin: 0 var(--sp-s);
+  padding: var(--sp-s);
 }
 
 .add-icon,
@@ -126,24 +130,24 @@
 
 .grid-container {
   width: 100%;
-  padding: 0 deprecated.$s-4;
+  padding: 0 var(--sp-xs);
 }
 
 .placeholder-placement {
-  margin: deprecated.$s-16 deprecated.$s-32;
+  margin: var(--sp-l) var(--sp-xxxl);
 }
 
 .show-more {
   --show-more-color: var(--button-secondary-foreground-color-rest);
   @include deprecated.buttonStyle;
-  @include deprecated.bodyMediumTypography;
+  @include t.use-typography("body-medium");
   position: absolute;
-  top: deprecated.$s-8;
+  top: var(--sp-s);
   right: deprecated.$s-52;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  column-gap: deprecated.$s-12;
+  column-gap: var(--sp-m);
   color: var(--show-more-color);
 
   &:hover {
@@ -152,8 +156,8 @@
 }
 
 .show-more-icon {
-  height: deprecated.$s-16;
-  width: deprecated.$s-16;
+  height: var(--sp-l);
+  width: var(--sp-l);
   fill: none;
   stroke: var(--show-more-color);
 }
@@ -164,13 +168,13 @@
   border-radius: deprecated.$br-8;
   border: none;
   display: flex;
-  margin: deprecated.$s-16;
-  padding: deprecated.$s-8;
+  margin: var(--sp-l);
+  padding: var(--sp-s);
   position: relative;
 
   img {
-    border-radius: deprecated.$br-4;
-    height: deprecated.$s-200;
+    border-radius: $br-4;
+    height: var(--sp-xl) 0;
     width: auto;
 
     @media (max-width: 1200px) {
@@ -185,18 +189,18 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
-  padding: deprecated.$s-20 deprecated.$s-20;
+  padding: var(--sp-xl) var(--sp-xl);
 }
 
 .title {
-  font-size: deprecated.$fs-24;
+  font-size: $sz-24;
   color: var(--color-foreground-primary);
   font-weight: deprecated.$fw400;
 }
 
 .info {
   flex: 1;
-  font-size: deprecated.$fs-16;
+  font-size: $sz-16;
   span {
     color: var(--color-foreground-secondary);
     display: block;
@@ -204,15 +208,15 @@
   a {
     color: var(--color-accent-primary);
   }
-  padding: deprecated.$s-8 0;
+  padding: var(--sp-s) 0;
 }
 
 .close {
   --close-icon-foreground-color: var(--icon-foreground);
   position: absolute;
-  top: deprecated.$s-20;
-  right: deprecated.$s-24;
-  width: deprecated.$s-24;
+  top: var(--sp-xl);
+  right: var(--sp-xxl);
+  width: var(--sp-xxl);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -227,7 +231,7 @@
 }
 
 .invite {
-  height: deprecated.$s-32;
+  height: var(--sp-xxxl);
   width: deprecated.$s-180;
 }
 
@@ -235,8 +239,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: deprecated.$s-200;
-  height: deprecated.$s-200;
+  width: var(--sp-xl) 0;
+  height: var(--sp-xl) 0;
   overflow: hidden;
   border-radius: deprecated.$br-4;
   @media (max-width: 1200px) {
@@ -244,3 +248,26 @@
     width: 0;
   }
 }
+
+.nav-options {
+  display: flex;
+  gap: var(--sp-l);
+  justify-content: space-between;
+  border-bottom: $b-1 solid var(--panel-border-color);
+  padding-inline-start: var(--sp-l);
+  background: var(--color-background-default);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-panels);
+}
+
+.selected {
+  @include t.use-typography("headline-small");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground-primary);
+  border: $b-1 solid transparent;
+  border-bottom: $b-1 solid var(--color-foreground-primary);
+  padding: 0 var(--sp-m);
+}

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

@@ -27,11 +27,11 @@
    [app.main.ui.dashboard.comments :refer [comments-icon* comments-section]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.project-menu :refer [project-menu*]]
-   [app.main.ui.dashboard.subscription :refer [subscription-sidebar*
+   [app.main.ui.dashboard.subscription :refer [dashboard-cta*
+                                               get-subscription-type
                                                menu-team-icon*
-                                               dashboard-cta*
                                                show-subscription-dashboard-banner?
-                                               get-subscription-type]]
+                                               subscription-sidebar*]]
    [app.main.ui.dashboard.team-form]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.icons :as deprecated-icon]

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

@@ -6,9 +6,9 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
@@ -32,6 +32,7 @@
    [app.main.ui.ds.product.avatar :refer [avatar*]]
    [app.main.ui.ds.product.cta :refer [cta*]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
+   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
    [app.main.ui.ds.product.input-with-meta :refer [input-with-meta*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.product.milestone :refer [milestone*]]
@@ -43,8 +44,6 @@
    [app.util.i18n :as i18n]
    [rumext.v2 :as mf]))
 
-(i18n/init! cf/translations)
-
 (def default
   "A export used for storybook"
   (mf/object
@@ -58,10 +57,12 @@
     :HintMessage hint-message*
     :InputWithMeta input-with-meta*
     :EmptyPlaceholder empty-placeholder*
+    :EmptyState empty-state*
     :Loader loader*
     :RawSvg raw-svg*
     :Select select*
     :Switch switch*
+    :Checkbox checkbox*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*
@@ -78,6 +79,11 @@
     :Milestone milestone*
     :MilestoneGroup milestone-group*
     :Date date*
+
+    :set-default-translations
+    (fn [data]
+      (i18n/set-translations "en" data))
+
     ;; meta / misc
     :meta
     {:icons (clj->js (sort icon-list))

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

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

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

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

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

@@ -0,0 +1,40 @@
+{ /* This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+  Copyright (c) KALEIDOS INC */ }
+
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import * as Checkbox from "./checkbox.stories";
+
+<Meta title="Controls/Checkbox" />
+
+# Checkbox
+
+The `checkbox*` component is a toggle control. It allows users to switch between boolean states (`false` or `true`).
+
+<Canvas of={Checkbox.Default} />
+
+<Canvas of={Checkbox.Checked} />
+
+## Anatomy
+
+The checkbox component consists of three main parts:
+
+- **Label** (optional): the text that describes what the checkbox controls. Clicking on this text also works for toggling.
+- **Box**: the box which shows the current state. Contains a check if the state is `true`.
+- **Native element**: the native HTML element which holds the state. It remains hidden to the user.
+
+## Usage Guidelines
+
+### When to Use
+
+- For boolean settings that take effect immediately.
+- In preference panels and configuration screens.
+
+### When Not to Use
+
+- For actions that require confirmation (use buttons instead).
+- For multiple choice selections (use radio buttons or select).
+- For temporary states that need explicit "Apply" action.
+- For ternary states.

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

@@ -0,0 +1,86 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
+
+.checkbox {
+  --input-checkbox-border-color: var(--color-foreground-secondary);
+  --input-checkbox-border-color-focus: var(--color-accent-primary);
+  --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
+  --input-checkbox-foreground-color: var(--color-foreground-primary);
+  --input-checkbox-background-color: var(--color-background-quaternary);
+
+  --input-checkbox-border-color-checked: var(--color-background-quaternary);
+  --input-checkbox-foreground-color-checked: var(--color-background-primary);
+  --input-checkbox-background-color-checked: var(--color-accent-primary);
+
+  --input-checkbox-foreground-color-disabled: var(--color-background-primary);
+  --input-checkbox-background-color-disabled: var(--color-foreground-secondary);
+
+  --input-checkbox-text-color: var(--color-foreground-secondary);
+}
+
+.checkbox-label {
+  display: grid;
+  grid-template-columns: var(--sp-l) 1fr 0;
+  align-items: center;
+
+  &:hover {
+    .checkbox-box {
+      border-color: var(--input-checkbox-border-color-hover);
+    }
+  }
+
+  &:focus,
+  &:focus-within {
+    .checkbox-box {
+      border-color: var(--input-checkbox-border-color-focus);
+    }
+  }
+}
+
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: $sz-16;
+  block-size: $sz-16;
+  border-radius: $br-4;
+  border: $b-1 solid var(--input-checkbox-border-color);
+  color: var(--input-checkbox-foreground-color);
+  background-color: var(--input-checkbox-background-color);
+
+  &.disabled {
+    border: 0;
+  }
+
+  &.checked {
+    --input-checkbox-border-color: var(--input-checkbox-border-color-checked);
+    --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-checked);
+    --input-checkbox-background-color: var(--input-checkbox-background-color-checked);
+
+    &.disabled {
+      --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-disabled);
+      --input-checkbox-background-color: var(--input-checkbox-background-color-disabled);
+    }
+  }
+}
+
+.checkbox-text {
+  @include use-typography("body-small");
+  padding-inline-start: var(--sp-s);
+  color: var(--input-checkbox-text-color);
+}
+
+.checkbox-input {
+  &:focus {
+    outline: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+}

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

@@ -0,0 +1,76 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+import * as React from "react";
+import Components from "@target/components";
+
+const { Checkbox } = Components;
+
+export default {
+  title: "Controls/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text displayed next to the checkbox",
+    },
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is checked",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is disabled",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ["id", "on-change"],
+    },
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const Default = {
+  args: {
+    label: "Toggle something",
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const Checked = {
+  args: {
+    label: "Toggle something",
+    checked: true,
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const WithoutLabel = {
+  args: {
+    disabled: false,
+  },
+  render: ({ ...args }) => <Checkbox {...args} />,
+};
+
+export const WithLongLabel = {
+  args: {
+    label:
+      "This is a very long label that demonstrates how the checkbox component handles text wrapping and layout when the label content is extensive",
+    disabled: false,
+  },
+  render: ({ ...args }) => (
+    <div style={{ maxWidth: "300px" }}>
+      <Checkbox {...args} />
+    </div>
+  ),
+};