📚 Add shadow token documentation

🐛 Fix translation on rename token

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

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

.github/workflows/build-tag.yml

@@ -33,7 +33,7 @@ jobs:
           MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
           MATTERMOST_CHANNEL: bot-alerts-cicd
           TEXT: |
-            🐳 *[PENPOT] Docker image available.*
+            🐳 *[PENPOT] Docker image available: {{ github.ref_name }}*
             🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
             @infra
 

.github/workflows/tests.yml

@@ -51,6 +51,51 @@ jobs:
         run: |
           ./scripts/test
 
+  test-plugins:
+    name: Plugins Runtime Linter & Tests
+    runs-on: ubuntu-24.04
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        id: setup-node
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install deps
+        working-directory: ./plugins
+        shell: bash
+        run: |
+          corepack enable;
+          corepack install;
+          pnpm install;
+
+      - name: Run Lint
+        working-directory: ./plugins
+        run: pnpm run lint
+
+      - name: Run Format Check
+        working-directory: ./plugins
+        run: pnpm run format:check
+
+      - name: Run Test
+        working-directory: ./plugins
+        run: pnpm run test
+
+      - name: Build runtime
+        working-directory: ./plugins
+        run: pnpm run build
+
+      - name: Build plugins
+        working-directory: ./plugins
+        run: pnpm run build:plugins
+
+      - name: Build styles
+        working-directory: ./plugins
+        run: pnpm run build:styles-example
+
   test-frontend:
     name: "Frontend Tests"
     runs-on: ubuntu-24.04
@@ -67,6 +112,8 @@ jobs:
 
       - name: Component Tests
         working-directory: ./frontend
+        env:
+          VITEST_BROWSER_TIMEOUT: 120000
         run: |
           ./scripts/test-components
 

.gitignore

@@ -5,6 +5,7 @@
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.pnpm-store
 *-init.clj
 *.css.json
 *.jar

.nvmrc

@@ -1 +1 @@
-v22.19.0
+v22.21.1

CHANGES.md

@@ -12,16 +12,35 @@
 
 ### :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)
+- Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797)
+- Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
+- Fix color assets from shared libraries not appearing as assets in Selected colors panel [Taiga #12957](https://tree.taiga.io/project/penpot/issue/12957)
+- Fix CSS generated box-shadow property [Taiga #12997](https://tree.taiga.io/project/penpot/issue/12997)
+- Fix inner shadow selector on shadow token [Taiga #12951](https://tree.taiga.io/project/penpot/issue/12951)
+- Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
+- Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
+- Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
 
 
-## 2.12.0 (Unreleased)
+## 2.12.1
+
+### :bug: Bugs fixed
+
+- Fix setting a portion of text as bold or underline messes things up [Github #7980](https://github.com/penpot/penpot/issues/7980)
+- Fix problem with style in fonts input [Taiga #12935](https://tree.taiga.io/project/penpot/issue/12935)
+- Fix problem with path editor and right click [Github #7917](https://github.com/penpot/penpot/issues/7917)
+
+
+## 2.12.0
 
 ### :boom: Breaking changes & Deprecations
 
@@ -83,6 +102,7 @@ example. It's still usable as before, we just removed the example.
 
 - Ensure consistent snap behavior across all zoom levels [Github #7774](https://github.com/penpot/penpot/pull/7774) by [@Tokytome](https://github.com/Tokytome)
 - Fix crash in token grid view due to tooltip validation (by @dfelinto) [Github #7887](https://github.com/penpot/penpot/pull/7887)
+- Enable Hindi translations on the application
 
 ### :sparkles: New features & Enhancements
 
@@ -116,6 +136,7 @@ example. It's still usable as before, we just removed the example.
 - Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
 - Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
 - Fix horizontal scroll on layer panel [Taiga #12843](https://tree.taiga.io/project/penpot/issue/12843)
+- Fix unicode handling on email template abbreviation filter [Github #7966](https://github.com/penpot/penpot/pull/7966)
 
 ## 2.11.1
 

backend/deps.edn

@@ -97,8 +97,8 @@
 
   :jmx-remote
   {:jvm-opts ["-Dcom.sun.management.jmxremote"
-              "-Dcom.sun.management.jmxremote.port=9090"
-              "-Dcom.sun.management.jmxremote.rmi.port=9090"
+              "-Dcom.sun.management.jmxremote.port=9000"
+              "-Dcom.sun.management.jmxremote.rmi.port=9000"
               "-Dcom.sun.management.jmxremote.local.only=false"
               "-Dcom.sun.management.jmxremote.authenticate=false"
               "-Dcom.sun.management.jmxremote.ssl=false"

backend/resources/app/email/invite-to-team/en.html

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

backend/src/app/auth/oidc.clj

@@ -36,17 +36,6 @@
    [integrant.core :as ig]
    [yetti.response :as-alias yres]))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn obfuscate-string
-  [s]
-  (if (< (count s) 10)
-    (apply str (take (count s) (repeat "*")))
-    (str (subs s 0 5)
-         (apply str (take (- (count s) 5) (repeat "*"))))))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; OIDC PROVIDER (GENERIC)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -177,7 +166,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -222,7 +211,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -299,7 +288,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -341,7 +330,7 @@
              :provider "gitlab"
              :base-uri (:base-uri provider)
              :client-id (:client-id provider)
-             :client-secret (obfuscate-string (:client-secret provider)))
+             :client-secret (d/obfuscate-string (:client-secret provider)))
       provider)
     (catch Throwable cause
       (ex/raise :type ::internal
@@ -361,7 +350,7 @@
         (l/inf :hint "provider initialized"
                :provider (:id provider)
                :client-id (:client-id provider)
-               :client-secret (obfuscate-string (:client-secret provider)))
+               :client-secret (d/obfuscate-string (:client-secret provider)))
         provider)
 
       (catch Throwable cause
@@ -459,7 +448,7 @@
     (l/trc :hint "fetch access token"
            :provider (:id provider)
            :client-id (:client-id provider)
-           :client-secret (obfuscate-string (:client-secret provider))
+           :client-secret (d/obfuscate-string (:client-secret provider))
            :grant-type (:grant_type params)
            :redirect-uri (:redirect_uri params))
 
@@ -512,7 +501,7 @@
   [cfg provider tdata]
   (l/trc :hint "fetch user info"
          :uri (:user-uri provider)
-         :token (obfuscate-string (:token/access tdata)))
+         :token (d/obfuscate-string (:token/access tdata)))
 
   (let [params   {:uri (:user-uri provider)
                   :headers {"Authorization" (str (:token/type tdata) " " (:token/access tdata))}

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/binfile/v3.clj

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

backend/src/app/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/auth.clj

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

backend/src/app/rpc/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
 
@@ -777,7 +704,6 @@
             f.created_at,
             f.modified_at,
             f.name,
-            f.is_shared,
             f.deleted_at AS will_be_deleted_at,
             ft.media_id AS thumbnail_id,
             row_number() OVER w AS row_num,
@@ -785,8 +711,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)
@@ -888,7 +813,7 @@
       AND (f.deleted_at IS NULL OR f.deleted_at > now())
     ORDER BY f.created_at ASC;")
 
-(defn- absorb-library-by-file!
+(defn- absorb-library-by-file
   [cfg ldata file-id]
 
   (assert (db/connection-map? cfg)
@@ -912,7 +837,7 @@
                              :modified-at (ct/now)
                              :has-media-trimmed false}))))
 
-(defn- absorb-library
+(defn- absorb-library*
   "Find all files using a shared library, and absorb all library assets
   into the file local libraries"
   [cfg {:keys [id data] :as library}]
@@ -927,10 +852,10 @@
            :library-id (str id)
            :files (str/join "," (map str ids)))
 
-    (run! (partial absorb-library-by-file! cfg data) ids)
+    (run! (partial absorb-library-by-file cfg data) ids)
     library))
 
-(defn absorb-library!
+(defn absorb-library
   [{:keys [::db/conn] :as cfg} id]
   (let [file (-> (bfc/get-file cfg id
                                :realize? true
@@ -947,7 +872,7 @@
     (-> (cfeat/get-team-enabled-features cf/flags team)
         (cfeat/check-file-features! (:features file)))
 
-    (absorb-library cfg file)))
+    (absorb-library* cfg file)))
 
 (defn- set-file-shared
   [{:keys [::db/conn] :as cfg} {:keys [profile-id id] :as params}]
@@ -960,14 +885,14 @@
                ;; file, we need to perform more complex operation,
                ;; so in this case we retrieve the complete file and
                ;; perform all required validations.
-               (let [file (-> (absorb-library! cfg id)
+               (let [file (-> (absorb-library cfg id)
                               (assoc :is-shared false))]
                  (db/delete! conn :file-library-rel {:library-file-id id})
                  (db/update! conn :file
                              {:is-shared false
                               :modified-at (ct/now)}
                              {:id id})
-                 (select-keys file [:id :name :is-shared]))
+                 file)
 
                (and (false? (:is-shared file))
                     (true? (:is-shared params)))
@@ -1014,6 +939,11 @@
                           {:id file-id}
                           {::db/return-keys [:id :name :is-shared :deleted-at
                                              :project-id :created-at :modified-at]})]
+
+    ;; Remove all possible relations for that file
+    (db/delete! conn :file-library-rel
+                {:library-file-id file-id})
+
     (wrk/submit! {::db/conn conn
                   ::wrk/task :delete-object
                   ::wrk/params {:object :file
@@ -1164,47 +1094,53 @@
 
 ;; --- MUTATION COMMAND: delete-files-immediatelly
 
-(def ^:private sql:delete-team-files
-  "UPDATE file AS uf SET deleted_at = ?::timestamptz
-     FROM (
-        SELECT f.id
-          FROM file AS f
-          JOIN project AS p ON (p.id = f.project_id)
-          JOIN team AS t ON (t.id = p.team_id)
-         WHERE t.deleted_at IS NULL
-           AND t.id = ?
-           AND f.id = ANY(?::uuid[])
-     ) AS subquery
-    WHERE uf.id = subquery.id
-   RETURNING uf.id, uf.deleted_at;")
+(def ^:private sql:get-delete-team-files-candidates
+  "SELECT f.id
+    FROM file AS f
+    JOIN project AS p ON (p.id = f.project_id)
+    JOIN team AS t ON (t.id = p.team_id)
+   WHERE t.deleted_at IS NULL
+     AND t.id = ?
+     AND f.id = ANY(?::uuid[])")
 
 (def ^:private schema:permanently-delete-team-files
   [:map {:title "permanently-delete-team-files"}
    [:team-id ::sm/uuid]
    [:ids [::sm/set ::sm/uuid]]])
 
+(defn- permanently-delete-team-files
+  [{:keys [::db/conn]} {:keys [::rpc/request-at team-id ids]}]
+  (let [ids (into #{}
+                  d/xf:map-id
+                  (db/exec! conn [sql:get-delete-team-files-candidates team-id
+                                  (db/create-array conn "uuid" ids)]))]
+
+    (reduce (fn [acc id]
+              (events/tap :progress {:file-id id :index (inc (count acc)) :total (count ids)})
+              (db/update! conn :file
+                          {:deleted-at request-at}
+                          {:id id}
+                          {::db/return-keys false})
+              (wrk/submit! {::db/conn conn
+                            ::wrk/task :delete-object
+                            ::wrk/params {:object :file
+                                          :deleted-at request-at
+                                          :id id}})
+              (conj acc id))
+            #{}
+            ids)))
+
 (sv/defmethod ::permanently-delete-team-files
   "Mark the specified files to be deleted immediatelly on the
   specified team. The team-id on params will be used to filter and
   check writable permissons on team."
 
-  {::doc/added "2.12"
-   ::sm/params schema:permanently-delete-team-files
-   ::db/transaction true}
+  {::doc/added "2.13"
+   ::sm/params schema:permanently-delete-team-files}
 
-  [{:keys [::db/conn]} {:keys [::rpc/profile-id ::rpc/request-at team-id ids]}]
-  (teams/check-edition-permissions! conn profile-id team-id)
-
-  (reduce (fn [acc {:keys [id deleted-at]}]
-            (wrk/submit! {::db/conn conn
-                          ::wrk/task :delete-object
-                          ::wrk/params {:object :file
-                                        :deleted-at deleted-at
-                                        :id id}})
-            (conj acc id))
-          #{}
-          (db/plan conn [sql:delete-team-files request-at team-id
-                         (db/create-array conn "uuid" ids)])))
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id team-id] :as params}]
+  (teams/check-edition-permissions! pool profile-id team-id)
+  (sse/response #(db/tx-run! cfg permanently-delete-team-files params)))
 
 ;; --- MUTATION COMMAND: restore-files-immediatelly
 
@@ -1268,7 +1204,7 @@
         {:keys [files projects]}
         (reduce (fn [result {:keys [id project-id]}]
                   (let [index (-> result :files count)]
-                    (events/tap :progress {:file-id id :index index :total total-files})
+                    (events/tap :progress {:file-id id :index (inc index) :total total-files})
                     (restore-file conn id)
 
                     (-> result
@@ -1291,7 +1227,7 @@
 (sv/defmethod ::restore-deleted-team-files
   "Removes the deletion mark from the specified files (and respective
   projects) on the specified team."
-  {::doc/added "2.12"
+  {::doc/added "2.13"
    ::sse/stream? true
    ::sm/params schema:restore-deleted-team-files}
   [cfg params]

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/search.clj

@@ -19,7 +19,7 @@
       inner join team_profile_rel as tpr on (tpr.team_id = p.team_id)
       where tpr.profile_id = ?
         and p.team_id = ?
-        and (p.deleted_at is null or p.deleted_at > now())
+        and (p.deleted_at is null)
         and (tpr.is_admin = true or
              tpr.is_owner = true or
              tpr.can_edit = true)
@@ -29,7 +29,7 @@
       inner join project_profile_rel as ppr on (ppr.project_id = p.id)
       where ppr.profile_id = ?
         and p.team_id = ?
-        and (p.deleted_at is null or p.deleted_at > now())
+        and (p.deleted_at is null)
         and (ppr.is_admin = true or
              ppr.is_owner = true or
              ppr.can_edit = true)
@@ -47,7 +47,7 @@
      left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
     inner join projects as pr on (f.project_id = pr.id)
     where f.name ilike ('%' || ? || '%')
-      and (f.deleted_at is null or f.deleted_at > now())
+      and (f.deleted_at is null)
     order by f.created_at asc")
 
 (defn search-files

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

backend/src/app/rpc/rlimit.clj

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

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

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

backend/src/app/storage.clj

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

backend/src/app/storage/gc_touched.clj

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

backend/src/app/tasks/delete_object.clj

@@ -45,7 +45,8 @@
            :deleted-at (ct/format-inst deleted-at))
 
     (db/update! conn :file
-                {:deleted-at deleted-at}
+                {:deleted-at deleted-at
+                 :is-shared false}
                 {:id id}
                 {::db/return-keys false})
 
@@ -53,7 +54,7 @@
                (not *team-deletion*))
       ;; NOTE: we don't prevent file deletion on absorb operation failure
       (try
-        (db/tx-run! cfg files/absorb-library! id)
+        (db/tx-run! cfg files/absorb-library id)
         (catch Throwable cause
           (l/warn :hint "error on absorbing library"
                   :file-id id

backend/src/app/util/template.clj

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

backend/src/app/worker/dispatcher.clj

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

backend/test/backend_tests/helpers.clj

@@ -595,8 +595,8 @@
       (px/exec! :virtual #(rcp/write-body-to-stream body nil output))
       (into []
             (map (fn [{:keys [event data]}]
-                   [(keyword event)
-                    (tr/decode-str data)]))
+                   (d/vec2 (keyword event)
+                           (tr/decode-str data))))
             (parse-sse (slurp' input)))
       (finally
         (.close input)))))

backend/test/backend_tests/rpc_file_test.clj

@@ -1921,7 +1921,11 @@
         ;; (th/print-result! out)
         (t/is (nil? (:error out)))
         (let [result (:result out)]
-          (t/is (= (:ids data) result)))
+          (t/is (fn? result))
+
+          (let [[ev1 ev2 :as events] (th/consume-sse result)]
+            (t/is (= 2 (count events)))
+            (t/is (= (:ids data) (val ev2)))))
 
         (let [row (th/db-exec-one! ["select * from file where id = ?" file-id])]
           (t/is (= (:deleted-at row) now)))))))

common/deps.edn

@@ -29,8 +29,7 @@
   java-http-clj/java-http-clj {:mvn/version "0.4.3"}
   integrant/integrant {:mvn/version "1.0.0"}
 
-  funcool/tubax {:mvn/version "2021.05.20-0"}
-  funcool/cuerdas {:mvn/version "2025.06.16-414"}
+  funcool/cuerdas {:mvn/version "2026.415"}
   funcool/promesa
   {:git/sha "46048fc0d4bf5466a2a4121f5d52aefa6337f2e8"
    :git/url "https://github.com/funcool/promesa"}

common/src/app/common/data.cljc

@@ -1024,6 +1024,26 @@
       :clj
       (sort comp-fn items))))
 
+(defn obfuscate-string
+  "Obfuscates potentially sensitive values.
+
+  - One-arg arity:
+    * For strings shorter than 10 characters, all characters are replaced by `*`.
+    * For longer strings, the first 5 characters are preserved and the rest obfuscated.
+  - Two-arg arity accepts a boolean `full?` that, when true, replaces the whole value
+    by `*`, preserving only the length."
+  ([v]
+   (obfuscate-string v false))
+  ([v full?]
+   (let [s (str v)
+         n (count s)]
+     (cond
+       (zero? n) s
+       full? (apply str (repeat n "*"))
+       (< n 10) (apply str (repeat n "*"))
+       :else (str (subs s 0 5)
+                  (apply str (repeat (- n 5) "*")))))))
+
 (defn reorder
   "Reorder a vector by moving one of their items from some position to some space between positions.
    It clamps the position numbers to a valid range."

common/src/app/common/exceptions.cljc

@@ -10,6 +10,7 @@
   (:refer-clojure :exclude [instance?])
   (:require
    #?(:clj [clojure.stacktrace :as strace])
+   [app.common.data :refer [obfuscate-string]]
    [app.common.pprint :as pp]
    [app.common.schema :as sm]
    [clojure.core :as c]
@@ -19,6 +20,10 @@
      (:import
       clojure.lang.IPersistentMap)))
 
+(def ^:private sensitive-fields
+  "Keys whose values must be obfuscated in validation explains."
+  #{:password :old-password :token :invitation-token})
+
 #?(:clj (set! *warn-on-reflection* true))
 
 (def ^:dynamic *data-length* 8)
@@ -110,7 +115,25 @@
     (explain (:explain data) opts)
 
     (contains? data ::sm/explain)
-    (sm/humanize-explain (::sm/explain data) opts)))
+    (let [exp (::sm/explain data)
+          sanitize-map (fn sanitize-map [m]
+                         (reduce-kv
+                          (fn [acc k v]
+                            (let [k* (if (string? k) (keyword k) k)]
+                              (cond
+                                (contains? sensitive-fields k*)
+                                (assoc acc k (if (map? v)
+                                               (sanitize-map v)
+                                               (obfuscate-string v true)))
+
+                                (map? v) (assoc acc k (sanitize-map v))
+                                :else (assoc acc k v))))
+                          {}
+                          m))
+          sanitize-explain (fn [exp]
+                             (cond-> exp
+                               (:value exp) (update :value sanitize-map)))]
+      (sm/humanize-explain (sanitize-explain exp) opts))))
 
 #?(:clj
    (defn format-throwable

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/path_names.cljc

@@ -132,94 +132,3 @@ 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/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/container.cljc

@@ -269,8 +269,8 @@
   "Remove flex children properties except the fit-content for flex layouts. These are properties
   that we don't have to propagate to copies but will be respected when swapping components"
   [shape]
-  (let [layout-item-h-sizing (when (and (ctl/flex-layout? shape) (ctl/auto-width? shape)) :auto)
-        layout-item-v-sizing (when (and (ctl/flex-layout? shape) (ctl/auto-height? shape)) :auto)]
+  (let [layout-item-h-sizing (when (and (ctl/any-layout? shape) (ctl/auto-width? shape)) :auto)
+        layout-item-v-sizing (when (and (ctl/any-layout? shape) (ctl/auto-height? shape)) :auto)]
     (-> shape
         (d/without-keys ctk/swap-keep-attrs)
         (cond-> (some? layout-item-h-sizing)

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

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

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

@@ -112,8 +112,10 @@
                 (:c2y params) (update-in [index :params :c2y] + (:c2y params)))
               content))]
 
-    (impl/path-data
-     (reduce apply-to-index (vec content) modifiers))))
+    (if (some? modifiers)
+      (impl/path-data
+       (reduce apply-to-index (vec content) modifiers))
+      content)))
 
 (defn transform-content
   "Applies a transformation matrix over content and returns a new

common/src/app/common/types/project.cljc

@@ -0,0 +1,29 @@
+
+;; 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.common.types.project
+  (:require
+   [app.common.schema :as sm]
+   [app.common.time :as cm]))
+
+(def schema:project
+  [:map {:title "Profile"}
+   [:id ::sm/uuid]
+   [:created-at {:optional true} ::cm/inst]
+   [:modified-at {:optional true} ::cm/inst]
+   [:name :string]
+   [:is-default {:optional true} ::sm/boolean]
+   [:is-pinned {:optional true} ::sm/boolean]
+   [:count {:optional true} ::sm/int]
+   [:total-count {:optional true} ::sm/int]
+   [:team-id ::sm/uuid]])
+
+(def valid-project?
+  (sm/lazy-validator schema:project))
+
+(def check-project
+  (sm/check-fn schema:project))

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

@@ -1410,8 +1410,8 @@ Will return a value that matches this schema:
     ;; NOTE: we can't assign statically at eval time the value of a
     ;; function that is declared but not defined; so we need to pass
     ;; an anonymous function and delegate the resolution to runtime
-    {:encode/json #(export-dtcg-json %)
-     :decode/json #(read-multi-set-dtcg %)
+    {:encode/json #(some-> % export-dtcg-json)
+     :decode/json #(some-> % read-multi-set-dtcg)
      ;; FIXME: add better, more reallistic generator
      :gen/gen (->> (sg/small-int)
                    (sg/fmap (fn [_]
@@ -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,7 +1568,7 @@ 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]

docker/devenv/docker-compose.yaml

@@ -41,7 +41,10 @@ services:
       - 6062:6062
       - 6063:6063
       - 6064:6064
+      - 9000:9000
+      - 9001:9001
       - 9090:9090
+      - 9091:9091
 
     environment:
       - EXTERNAL_UID=${CURRENT_USER_ID}

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

@@ -145,8 +145,8 @@ http {
             proxy_pass http://127.0.0.1:3000/;
         }
 
-        location /playground {
-            alias /home/penpot/penpot/experiments/;
+        location /wasm-playground {
+            alias /home/penpot/penpot/frontend/resources/public/wasm-playground/;
             add_header Cache-Control "no-cache, max-age=0";
             autoindex on;
         }

docker/devenv/files/start-tmux.sh

@@ -8,14 +8,10 @@ source ~/.bashrc
 
 echo "[start-tmux.sh] Installing node dependencies"
 pushd ~/penpot/frontend/
-corepack install;
-yarn install;
-yarn playwright install chromium
+./scripts/setup;
 popd
 pushd ~/penpot/exporter/
-corepack install;
-yarn install
-yarn playwright install chromium
+./scripts/setup;
 popd
 
 tmux -2 new-session -d -s penpot
@@ -23,30 +19,25 @@ tmux -2 new-session -d -s penpot
 tmux rename-window -t penpot:0 'frontend watch'
 tmux select-window -t penpot:0
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch' enter
+tmux send-keys -t penpot './scripts/watch app' enter
 
-tmux new-window -t penpot:1 -n 'frontend shadow'
+tmux new-window -t penpot:1 -n 'frontend storybook'
 tmux select-window -t penpot:1
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch:app' enter
+tmux send-keys -t penpot './scripts/watch storybook' enter
 
-tmux new-window -t penpot:2 -n 'frontend storybook'
+tmux new-window -t penpot:2 -n 'exporter'
 tmux select-window -t penpot:2
-tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
-tmux send-keys -t penpot 'yarn run watch:storybook' enter
-
-tmux new-window -t penpot:3 -n 'exporter'
-tmux select-window -t penpot:3
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot 'rm -f target/app.js*' enter C-l
-tmux send-keys -t penpot 'yarn run watch' enter
+tmux send-keys -t penpot './scripts/watch' enter
 
 tmux split-window -v
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot './scripts/wait-and-start.sh' enter
 
-tmux new-window -t penpot:4 -n 'backend'
-tmux select-window -t penpot:4
+tmux new-window -t penpot:3 -n 'backend'
+tmux select-window -t penpot:3
 tmux send-keys -t penpot 'cd penpot/backend' enter C-l
 tmux send-keys -t penpot './scripts/start-dev' enter
 

docs/scripts/build

@@ -1,8 +1,10 @@
 #!/usr/bin/env bash
 
-source ~/.bashrc
-
 set -ex
+
+corepack enable;
+corepack install;
+
 rm -rf ./_dist
-yarn
+yarn install
 yarn run build

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

@@ -455,6 +455,43 @@ ExtraBold Italic
 <p>A <strong>Typography composite token</strong> can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.</p>
 <p>When applying a Typography composite token to a layer, any previously applied <em>Typography composite token</em> or <em>style</em> will be detached. The same happens in reverse. Only one of them can be active at a time.</p>
 
+<h3 id="design-tokens-shadow">Shadow</h3>
+<p>Shadow tokens are composite entities that encapsulate the properties of one or more shadows into a single token definition. This token can contain a single shadow or an array of multiple shadows that can be reordered.</p>
+<p>Shadow tokens support both <strong>Drop Shadow</strong> and <strong>Inner Shadow</strong> types. When creating or editing a shadow token, you can select the type of shadow you want to use. The default selection is Drop Shadow.</p>
+<figure>
+  <img src="/img/design-tokens/37-tokens-shadow-individual.webp" alt="Shadow token creation with individual values" />
+</figure>
+
+<h4 id="design-tokens-shadow-properties">Shadow properties</h4>
+<p>Each shadow within a shadow token contains a set of properties that define how the shadow appears:</p>
+<ul>
+  <li><strong>Color:</strong> The color of the shadow. Accepts the same values as <a href="#design-tokens-color">color tokens</a> (Hex, RGB, RGBA, ARGB, HSL, HSLA), and you can reference existing color tokens. The color picker is available when defining the value.</li>
+  <li><strong>X offset:</strong> The horizontal offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Y offset:</strong> The vertical offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Blur:</strong> The blur radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Spread:</strong> The spread radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Type:</strong> Whether the shadow is a drop shadow or an inner shadow. Selected via a dropdown menu, with Drop Shadow as the default.</li>
+</ul>
+<p>Each property within a shadow token can reference existing tokens or be assigned hardcoded values. Shadows can also reference other shadow tokens (the type of shadow must match when using references).</p>
+<p class="advice">Not all properties are mandatory to save a shadow token. Some can be empty (and will be computed as 0). Only the color property is mandatory. In an array of shadows, if any shadow does not have the color set, the form cannot be saved.</p>
+
+<h4 id="design-tokens-shadow-create">Creating shadow tokens</h4>
+<p>To create a shadow token, click on the <strong>+</strong> next to <strong>Shadow</strong> in the Tokens panel. Shadow tokens can be created in two ways:</p>
+<ul>
+  <li><strong>Individual values:</strong> You can create one shadow or multiple shadows with individual property values. Click the <strong>+</strong> button to add more shadows to the array. New shadows are added at the top of the list.</li>
+  <li><strong>Single reference:</strong> You can reference another existing shadow token. When using a single reference, you cannot add more than one shadow. The resolved value will display the shadow or list of shadows that the referenced token contains.</li>
+</ul>
+<figure>
+  <img src="/img/design-tokens/38-tokens-shadow-reference.webp" alt="Shadow token creation with reference" />
+</figure>
+<p>When creating a shadow with individual values, the color value starts empty, but the other inputs have default values (X: 4, Y: 4, Blur: 4, Spread: 0). You can reorder shadows by hovering over a shadow form and using the reorder button to drag it to a different position.</p>
+<p>You can also reference another existing shadow token instead of defining each property manually. When doing so, Penpot resolves all shadow properties from the referenced token.</p>
+
+<h4 id="design-tokens-shadow-apply">Applying shadow tokens</h4>
+<p>Shadow tokens can be applied to any layer type. Clicking on a shadow token will apply it to the selected layer. Right-clicking on a shadow token shows the context menu with the <strong>Shadow</strong> option to apply it.</p>
+<p class="advice">Text elements in CSS do not support inner shadows, but Penpot does, since it uses the filter property internally instead of the box-shadow property.</p>
+<p>When applying a shadow token, any existing shadow on the layer will be overridden (whether it's a raw shadow or an applied token shadow). If the token contains an array of shadows, each shadow will be added in the same order as in the creation form.</p>
+<p class="advice">In Penpot, an element can have multiple shadows, but only one token of the same type can be applied. This means that applying a second shadow token would override the first one, regardless of how many shadows the shape currently has.</p>
 
 
 

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",
@@ -30,8 +30,8 @@
   },
   "scripts": {
     "clear:shadow-cache": "rm -rf .shadow-cljs && rm -rf target",
-    "watch:app": "clojure -M:dev:shadow-cljs watch main",
-    "watch": "yarn run clear:shadow-cache && yarn run watch:app",
+    "watch:app": "yarn run clear:shadow-cache && clojure -M:dev:shadow-cljs watch main",
+    "watch": "yarn run watch:app",
     "build:app": "clojure -M:dev:shadow-cljs release main",
     "build": "yarn run clear:shadow-cache && yarn run build:app",
     "fmt:clj:check": "cljfmt check --parallel=false src/",

exporter/scripts/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -e;
+
+corepack enable;
+corepack install;
+yarn install;
+yarn playwright install chromium

exporter/scripts/watch

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

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/main.js

@@ -1,3 +1,5 @@
+import { defineConfig } from 'vite';
+
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -5,18 +7,38 @@ const config = {
   addons: [
     "@storybook/addon-themes",
     "@storybook/addon-docs",
-    "@storybook/addon-vitest"
+    "@storybook/addon-vitest",
   ],
-  core: {
-    builder: "@storybook/builder-vite",
-    options: {
-      viteConfigPath: "../vite.config.js",
-    },
-  },
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      // fastRefresh: false,
+    }
   },
   docs: {},
+
+  async viteFinal(config) {
+    return defineConfig({
+      ...config,
+      plugins: [
+        ...(config.plugins ?? []),
+        {
+          name: 'force-full-reload-always',
+          apply: 'serve',
+          enforce: 'post',
+
+          handleHotUpdate(ctx) {
+            ctx.server.ws.send({
+              type: 'full-reload',
+              path: '*',
+            });
+
+            // returning [] tells Vite: “no modules handled”
+            return [];
+          },
+        }
+      ]
+    });
+  }
 };
 export default config;

frontend/.storybook/preview.js

@@ -1,6 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 
-
 import Components from "@target/components";
 import translations from "@public/translation.en.js";
 Components.setDefaultTranslations(translations);

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"
@@ -45,7 +50,7 @@
    {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

@@ -47,89 +47,81 @@
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
-    "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
-    "watch": "yarn run watch:app:assets",
-    "watch:storybook": "yarn run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
-    "watch:storybook:assets": "node ./scripts/watch-storybook.js"
+    "watch": "exit 0",
+    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {
-    "@playwright/test": "1.52.0",
-    "@storybook/addon-docs": "10.0.4",
-    "@storybook/addon-themes": "10.0.4",
-    "@storybook/addon-vitest": "10.0.4",
-    "@storybook/react-vite": "10.0.4",
-    "@types/node": "^22.15.21",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-v8": "3.2.4",
+    "@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.57.0",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-themes": "10.1.11",
+    "@storybook/addon-vitest": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@tokens-studio/sd-transforms": "1.2.11",
+    "@types/node": "^22.19.3",
+    "@vitest/browser": "4.0.16",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "4.0.16",
+    "@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",
-    "jsdom": "^27.0.0",
+    "highlight.js": "^11.10.0",
+    "js-beautify": "^1.15.4",
+    "jsdom": "^27.4.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.1.11",
     "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": "^7.3.0",
+    "vitest": "^4.0.16",
+    "wait-on": "^9.0.3",
+    "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/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/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,26 @@
+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 delete-page-section element
+    await expect(page.getByTestId("deleted-page-section")).toBeVisible();
+  });
+});

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

@@ -305,7 +305,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -335,7 +335,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -375,7 +375,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");

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

@@ -40,7 +40,6 @@ const setupEmptyTokensFile = async (page, options = {}) => {
     tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
     tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
     tokenSetItems: workspacePage.tokenSetItems,
-    tokensSidebar: workspacePage.tokensSidebar,
     tokenSetGroupItems: workspacePage.tokenSetGroupItems,
     tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
   };
@@ -111,12 +110,15 @@ const checkInputFieldWithError = async (
   ).toBeVisible();
 };
 
-const checkInputFieldWithoutError = async (inputLocator) => {
+const checkInputFieldWithoutError = async (
+  tokenThemeUpdateCreateModal,
+  inputLocator,
+) => {
   expect(await inputLocator.getAttribute("aria-invalid")).toBeNull();
   expect(await inputLocator.getAttribute("aria-describedby")).toBeNull();
 };
 
-const testTokenCreationFlow = async (
+async function testTokenCreationFlow(
   page,
   {
     tokenLabel,
@@ -130,7 +132,7 @@ const testTokenCreationFlow = async (
     resolvedValueText,
     secondResolvedValueText,
   },
-) => {
+) {
   const invalidValueError = "Invalid token value";
   const emptyNameError = "Name should be at least 1 character";
   const selfReferenceError = "Token has self reference";
@@ -240,45 +242,7 @@ const testTokenCreationFlow = async (
   await expect(
     tokensTabPanel.getByRole("button", { name: "my-token-2" }),
   ).toBeEnabled();
-};
-
-const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
-  const tokenSegments = tokenName.split(".");
-  const tokenFolderTree = tokenSegments.slice(0, -1);
-  const tokenLeafName = tokenSegments.pop();
-
-  const typeParentWrapper = tokensTabPanel.getByTestId(`section-${type}`);
-  const typeSectionButton = typeParentWrapper
-    .getByRole("button", {
-      name: type,
-    })
-    .first();
-
-  const isSectionExpanded =
-    await typeSectionButton.getAttribute("aria-expanded");
-
-  if (isSectionExpanded === "false") {
-    await typeSectionButton.click();
-  }
-
-  for (const segment of tokenFolderTree) {
-    const segmentButton = typeParentWrapper
-      .getByRole("listitem")
-      .getByRole("button", { name: segment })
-      .first();
-
-    const isExpanded = await segmentButton.getAttribute("aria-expanded");
-    if (isExpanded === "false") {
-      await segmentButton.click();
-    }
-  }
-
-  await expect(
-    typeParentWrapper.getByRole("button", {
-      name: tokenLeafName,
-    }),
-  ).toBeEnabled();
-};
+}
 
 test.describe("Tokens: Tokens Tab", () => {
   test("Clicking tokens tab button opens tokens sidebar tab", async ({
@@ -434,12 +398,15 @@ test.describe("Tokens: Tokens Tab", () => {
     const emptyNameError = "Name should be at least 1 character";
     const selfReferenceError = "Token has self reference";
     const missingReferenceError = "Missing token references";
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
       await setupEmptyTokensFile(page);
 
-    await tokensSidebar
-      .getByRole("button", { name: "Add Token: Color" })
-      .click();
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    const addTokenButton = tokensTabPanel.getByRole("button", {
+      name: `Add Token: Color`,
+    });
+
+    await addTokenButton.click();
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     // Placeholder checks
@@ -504,34 +471,38 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
-    await unfoldTokenTree(tokensSidebar, "color", "color.primary");
+    await expect(
+      tokensTabPanel.getByRole("button", {
+        name: "color.primary",
+      }),
+    ).toBeEnabled();
 
     // Create token referencing the previous one with keyboard
 
-    await tokensSidebar
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     await nameField.click();
-    await nameField.fill("secondary");
+    await nameField.fill("color.secondary");
     await nameField.press("Tab");
 
     await valueField.click();
     await valueField.fill("{color.primary}");
 
     await expect(submitButton).toBeEnabled();
-    await submitButton.press("Enter");
+    await nameField.press("Enter");
 
     await expect(
-      tokensSidebar.getByRole("button", {
-        name: "secondary",
+      tokensTabPanel.getByRole("button", {
+        name: "color.secondary",
       }),
     ).toBeEnabled();
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
     await expect(
-      tokensSidebar.getByRole("button", { name: "#ff0000" }),
+      tokensTabPanel.getByRole("button", { name: "#ff0000" }),
     ).toHaveCount(2);
 
     // Global set has been auto created and is active
@@ -547,7 +518,7 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toHaveAttribute("aria-checked", "true");
 
     // Check color picker
-    await tokensSidebar
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
     await expect(tokensUpdateCreateModal).toBeVisible();
@@ -1108,7 +1079,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
+      await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]});
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1536,15 +1507,24 @@ test.describe("Tokens: Tokens Tab", () => {
   test("User edits token and auto created set show up in the sidebar", async ({
     page,
   }) => {
-    const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+    const {
+      workspacePage,
+      tokensUpdateCreateModal,
+      tokenThemesSetsSidebar,
+      tokensSidebar,
+      tokenContextMenuForToken,
+    } = await setupTokensFile(page);
 
     await expect(tokensSidebar).toBeVisible();
 
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible();
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await colorToken.click({ button: "right" });
@@ -1561,10 +1541,8 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed");
-
     const colorTokenChanged = tokensSidebar.getByRole("button", {
-      name: "changed",
+      name: "colors.blue.100.changed",
     });
     await expect(colorTokenChanged).toBeVisible();
   });
@@ -1655,10 +1633,11 @@ test.describe("Tokens: Tokens Tab", () => {
   });
 
   test("User creates grouped color token", async ({ page }) => {
-    const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
+    const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
       await setupEmptyTokensFile(page);
 
-    await tokensSidebar
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel
       .getByRole("button", { name: "Add Token: Color" })
       .click();
 
@@ -1670,7 +1649,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const valueField = tokensUpdateCreateModal.getByLabel("Value");
 
     await nameField.click();
-    await nameField.fill("dark.primary");
+    await nameField.fill("color.dark.primary");
 
     await valueField.click();
     await valueField.fill("red");
@@ -1681,9 +1660,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
-    await unfoldTokenTree(tokensSidebar, "color", "dark.primary");
-
-    await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
+    await expect(tokensTabPanel.getByLabel("color.dark.primary")).toBeEnabled();
   });
 
   test("User cant create regular token with value missing", async ({
@@ -1699,6 +1676,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const valueField = tokensUpdateCreateModal.getByLabel("Value");
     const submitButton = tokensUpdateCreateModal.getByRole("button", {
       name: "Save",
     });
@@ -1708,7 +1686,7 @@ test.describe("Tokens: Tokens Tab", () => {
 
     // Fill in name but leave value empty
     await nameField.click();
-    await nameField.fill("primary");
+    await nameField.fill("color.primary");
 
     // Submit button should remain disabled when value is empty
     await expect(submitButton).toBeDisabled();
@@ -1726,6 +1704,7 @@ test.describe("Tokens: Tokens Tab", () => {
       .click();
 
     await expect(tokensUpdateCreateModal).toBeVisible();
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
     const valueField = tokensUpdateCreateModal.getByLabel("Value");
 
     await valueField.click();
@@ -1775,10 +1754,15 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensSidebar).toBeVisible();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+
+    await expect(tokensColorGroup).toBeVisible();
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
 
     await colorToken.click({ button: "right" });
@@ -1798,10 +1782,15 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensSidebar).toBeVisible();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible();
+
+    await tokensColorGroup.click();
 
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await colorToken.click({ button: "right" });
@@ -1814,7 +1803,8 @@ test.describe("Tokens: Tokens Tab", () => {
   });
 
   test("User fold/unfold color tokens", async ({ page }) => {
-    const { tokensSidebar } = await setupTokensFile(page);
+    const { tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
 
     await expect(tokensSidebar).toBeVisible();
 
@@ -1824,10 +1814,8 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensColorGroup).toBeVisible();
     await tokensColorGroup.click();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
-
     const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
+      name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
     await tokensColorGroup.click();
@@ -2230,10 +2218,13 @@ test.describe("Tokens: Apply token", () => {
     const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
     await tokensTabButton.click();
 
-    unfoldTokenTree(tokensSidebar, "color", "colors.black");
+    await tokensSidebar
+      .getByRole("button")
+      .filter({ hasText: "Color" })
+      .click();
 
     await tokensSidebar
-      .getByRole("button", { name: "black" })
+      .getByRole("button", { name: "colors.black" })
       .click({ button: "right" });
     await tokenContextMenuForToken.getByText("Fill").click();
 
@@ -2471,7 +2462,7 @@ test.describe("Tokens: Apply token", () => {
       await expect(tokensUpdateCreateModal).toBeVisible();
 
       const nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary");
+      await nameField.fill("shadow.primary");
 
       // User adds first shadow with a color from the color ramp
       const firstShadowFields = tokensUpdateCreateModal.getByTestId(
@@ -2718,11 +2709,9 @@ test.describe("Tokens: Apply token", () => {
       await submitButton.click();
       await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-      unfoldTokenTree(tokensSidebar, "shadow", "primary");
-
       // Verify token appears in sidebar
       const shadowToken = tokensSidebar.getByRole("button", {
-        name: "primary",
+        name: "shadow.primary",
       });
       await expect(shadowToken).toBeEnabled();
 

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

@@ -667,6 +667,9 @@
 }
 
 // UI ELEMENTS
+
+// FIXME: This is used multiple times accross the app. We should design this in
+// the DS and create a proper component for it.
 .asset-element {
   @include bodySmallTypography;
   display: flex;

frontend/resources/templates/index.mustache

@@ -24,6 +24,8 @@
 
     <link rel="icon" href="images/favicon.png" />
 
+    <script type="importmap">{{& manifest.importmap }}</script>
+
     <script type="module">
       globalThis.penpotVersion = "{{& version}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
@@ -33,7 +35,6 @@
     {{# manifest}}
     <script src="{{& config}}"></script>
     <script src="{{& polyfills}}"></script>
-    <script type="importmap">{{& importmap }}</script>
     {{/manifest}}
 
     <!--cookie-consent-->
@@ -49,7 +50,9 @@
     <script type="module" src="{{& libs}}"></script>
     <script type="module">
       import { init } from "{{& app_main}}";
-      init();
+      import defaultTranslations from "{{& default_translations}}";
+
+      init({defaultTranslations});
     </script>
     {{/manifest}}
   </body>

frontend/scripts/_helpers.js

@@ -74,7 +74,7 @@ export function isJsFile(path) {
 export async function compileSass(worker, path, options) {
   path = ph.resolve(path);
 
-  log.info("compile:", path);
+  // log.info("compile:", path);
   return worker.exec("compileSass", [path, options]);
 }
 
@@ -187,7 +187,7 @@ async function readManifestFile(resource) {
   return JSON.parse(content);
 }
 
-async function readShadowManifest() {
+async function generateManifest() {
   const index = {
     app_main: "./js/main.js",
     render_main: "./js/render.js",
@@ -197,6 +197,7 @@ async function readShadowManifest() {
     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,
 
     importmap: JSON.stringify({
       "imports": {
@@ -276,6 +277,7 @@ export async function compileTranslations() {
     "id",
     "ru",
     "tr",
+    "hi",
     "zh_CN",
     "zh_Hant",
     "hr",
@@ -391,7 +393,7 @@ async function generateTemplates() {
   const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
-  const manifest = await readShadowManifest();
+  const manifest = await generateManifest();
   let content;
 
   const iconsSprite = await fs.readFile(

frontend/scripts/setup

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+corepack enable;
+corepack install;
+yarn install;
+yarn playwright install chromium;

frontend/scripts/test-components

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

frontend/scripts/test-e2e

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

frontend/scripts/watch

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

frontend/shadow-cljs.edn

@@ -121,24 +121,22 @@
   :storybook
   {:target :esm
    :output-dir "target/storybook/"
-   :devtools {:enabled false}
+   :devtools {:enabled false
+              :console-support false}
    :js-options
    {:js-provider :import
     :entry-keys ["module" "browser" "main"]
     :export-conditions ["module" "import", "browser" "require" "default"]}
 
    :modules
-   {:base
-    {:entries []}
-
-    :components
+   {:components
     {:exports {default app.main.ui.ds/default
                helpers app.main.ui.ds.helpers/default}
      :prepend-js ";(globalThis.goog.provide = globalThis.goog.constructNamespace_);(globalThis.goog.require = globalThis.goog.module.get);"
-     :depends-on #{:base}}}
+     :depends-on #{}}}
 
    :compiler-options
-   {:output-feature-set :es2020
+   {:output-feature-set :es-next
     :output-wrapper false
     :warnings {:fn-deprecated false}}}
 

frontend/src/app/main.cljs

@@ -90,7 +90,10 @@
             (rx/map #(ws/initialize)))))))
 
 (defn ^:export init
-  []
+  [options]
+  (some-> (unchecked-get options "defaultTranslations")
+          (i18n/set-default-translations))
+
   (mw/init!)
   (i18n/init)
   (cur/init-styles)

frontend/src/app/main/constants.cljs

@@ -302,3 +302,9 @@
     :height 720}])
 
 (def max-input-length 255)
+
+(def ^:const default-slow-progress-threshold
+  "A constant value that represents a threshold in milliseconds when a
+  normal progress becomes tagged as slow if no event received in the
+  specified amount of time"
+  1000)

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

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.schema :as sm]
+   [app.common.time :as ct]
    [app.common.types.team :as ctt]
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as modal]
@@ -229,6 +230,91 @@
                 ;; Delay so the navigation can finish
                 (rx/delay 250))))))))
 
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; PROGRESS EVENTS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def noop-fn
+  (constantly nil))
+
+(def ^:private schema:progress-params
+  [:map {:title "Progress"}
+   [:key {:optional true} ::sm/text]
+   [:index {:optional true} ::sm/int]
+   [:total ::sm/int]
+   [:hints
+    [:map-of :keyword fn?]]
+   [:slow-progress-threshold {:optional true} ::sm/int]])
+
+(def ^:private check-progress-params
+  (sm/check-fn schema:progress-params))
+
+(defn initialize-progress
+  [& {:keys [key index total hints slow-progress-threshold] :as params}]
+
+  (assert (check-progress-params params))
+
+  (ptk/reify ::initialize-progress
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :progress
+              (fn [_]
+                (let [hint ((:normal hints noop-fn) params)]
+                  {:threshold (or slow-progress-threshold 5000)
+                   :key key
+                   :last-update (ct/now)
+                   :healthy true
+                   :visible true
+                   :hints hints
+                   :progress (d/nilv index 0)
+                   :total total
+                   :hint hint}))))))
+
+(defn update-progress
+  [{:keys [index total] :as params}]
+
+  (assert (check-progress-params params))
+
+  (ptk/reify ::update-progress
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :progress
+              (fn [state]
+                (let [last-update (get state :last-update)
+                      hints       (get state :hints)
+                      threshold   (get state :slow-progress-threshold)
+
+                      time-diff   (ct/diff-ms last-update (ct/now))
+                      healthy?    (< time-diff threshold)
+
+                      hint        (if healthy?
+                                    ((:normal hints noop-fn) params)
+                                    ((:slow hints noop-fn) params))]
+
+                  (-> state
+                      (assoc :progress index)
+                      (assoc :total total)
+                      (assoc :last-update (ct/now))
+                      (assoc :healthy healthy?)
+                      (assoc :hint hint))))))))
+
+(defn toggle-progress-visibility
+  []
+  (ptk/reify ::toggle-progress-visibility
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :progress
+              (fn [state]
+                (update state :visible not))))))
+
+(defn clear-progress
+  []
+  (ptk/reify ::clear-progress
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :progress))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; NAVEGATION EVENTS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -386,3 +472,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

@@ -13,14 +13,18 @@
    [app.common.logging :as log]
    [app.common.schema :as sm]
    [app.common.time :as ct]
+   [app.common.types.project :refer [valid-project?]]
    [app.common.uuid :as uuid]
+   [app.main.constants :as mconst]
    [app.main.data.common :as dcm]
    [app.main.data.event :as ev]
    [app.main.data.fonts :as df]
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as modal]
+   [app.main.data.notifications :as ntf]
    [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 +80,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 +157,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 +493,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 +690,251 @@
     :team-role-change       (handle-change-team-role msg)
     :team-membership-change (dcm/team-membership-change msg)
     nil))
+
+
+;; --- Delete files immediately
+
+(defn- delete-files
+  [{:keys [team-id ids on-success on-error]}]
+  (assert (uuid? team-id))
+  (assert (set? ids))
+  (assert (every? uuid? ids))
+  (assert (fn? on-success))
+  (assert (fn? on-error))
+
+  (ptk/reify ::delete-files
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [progress-hint #(tr "dashboard.progress-notification.deleting-files")
+            slow-hint     #(tr "dashboard.progress-notification.slow-delete")
+            stream        (->> (rp/cmd! ::sse/permanently-delete-team-files {:team-id team-id :ids ids})
+                               (rx/share))]
+        (rx/merge
+         (rx/of (dcm/initialize-progress
+                 {:slow-progress-threshold
+                  mconst/default-slow-progress-threshold
+                  :total (count ids)
+                  :hints {:progress progress-hint
+                          :slow slow-hint}}))
+
+         (->> stream
+              (rx/filter sse/progress?)
+              (rx/mapcat (fn [event]
+                           (if-let [payload (sse/get-payload event)]
+                             (let [{:keys [index total]} payload]
+                               (if (and index total)
+                                 (rx/of (dcm/update-progress {:index index :total total}))
+                                 (rx/empty)))
+                             (rx/empty))))
+              (rx/catch rx/empty))
+
+         (->> stream
+              (rx/filter sse/end-of-stream?)
+              (rx/map sse/get-payload)
+              (rx/merge-map (fn [_]
+                              (rx/concat
+                               (rx/of (dcm/clear-progress)
+                                      (fetch-projects team-id)
+                                      (fetch-deleted-files team-id)
+                                      (fetch-projects team-id))
+                               (on-success))))
+
+              (rx/catch (fn [error]
+                          (rx/concat
+                           (rx/of (dcm/clear-progress))
+                           (on-error error))))))))))
+
+(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
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [deleted-files
+            (get state :deleted-files)
+
+            on-success
+            (fn []
+              (if (= 1 (count ids))
+                (let [fname (get-in deleted-files [(first ids) :name])]
+                  (rx/of (ntf/success (tr "dashboard.delete-success-notification" fname))))
+                (rx/of (ntf/success (tr "dashboard.delete-files-success-notification" (count ids))))))
+
+            on-error
+            #(rx/of (ntf/error (tr "dashboard.errors.error-on-delete-files")))]
+
+        (rx/of (ev/event
+                {::ev/name "delete-files"
+                 ::ev/origin "dashboard:trash"
+                 :team-id team-id
+                 :num-files (count ids)})
+               (delete-files
+                {:team-id team-id
+                 :ids ids
+                 :on-success on-success
+                 :on-error on-error}))))))
+
+
+(defn delete-project-immediately
+  [{:keys [team-id id name] :as project}]
+  (assert (valid-project? project))
+
+  (ptk/reify ::delete-project-immediately
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [ids
+            (reduce-kv (fn [acc file-id file]
+                         (if (= (:project-id file) id)
+                           (conj acc file-id)
+                           acc))
+                       #{}
+                       (get state :deleted-files))
+
+            on-success
+            #(rx/of (ntf/success (tr "dashboard.delete-success-notification" name)))
+
+            on-error
+            #(rx/of (ntf/error (tr "dashboard.errors.error-on-delete-project" name)))]
+
+        (rx/of (ev/event
+                {::ev/name "delete-files"
+                 ::ev/origin "dashboard:trash"
+                 :team-id team-id
+                 :project-id id
+                 :num-files (count ids)})
+               (delete-files
+                {:team-id team-id
+                 :ids ids
+                 :on-success on-success
+                 :on-error on-error}))))))
+
+
+;; --- Restore deleted files immediately
+
+
+(defn- restore-files
+  [{:keys [team-id ids on-success on-error]}]
+  (assert (uuid? team-id))
+  (assert (set? ids))
+  (assert (every? uuid? ids))
+  (assert (fn? on-success))
+  (assert (fn? on-error))
+
+  (ptk/reify ::restore-files
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [progress-hint #(tr "dashboard.progress-notification.restoring-files")
+            slow-hint     #(tr "dashboard.progress-notification.slow-restore")]
+
+        (rx/merge
+         (rx/of (dcm/initialize-progress
+                 {:slow-progress-threshold
+                  mconst/default-slow-progress-threshold
+                  :total (count ids)
+                  :hints {:progress progress-hint
+                          :slow slow-hint}}))
+
+         (let [stream (->> (rp/cmd! ::sse/restore-deleted-team-files {:team-id team-id :ids ids})
+                           (rx/share))]
+
+           (rx/merge
+            (->> stream
+                 (rx/filter sse/progress?)
+                 (rx/mapcat (fn [event]
+                              (if-let [payload (sse/get-payload event)]
+                                (let [{:keys [index total]} payload]
+                                  (if (and index total)
+                                    (rx/of (dcm/update-progress {:index index :total total}))
+                                    (rx/empty)))
+                                (rx/empty))))
+                 (rx/catch rx/empty))
+
+            (->> stream
+                 (rx/filter sse/end-of-stream?)
+                 (rx/map sse/get-payload)
+                 (rx/mapcat (fn [_]
+                              (rx/concat
+                               (rx/of (dcm/clear-progress)
+                                      ;; (ntf/success (tr "dashboard.restore-success-notification"))
+                                      (fetch-projects team-id)
+                                      (fetch-deleted-files team-id)
+                                      (fetch-projects team-id))
+                               (on-success))))
+                 (rx/catch (fn [error]
+                             (rx/concat
+                              (rx/of (dcm/clear-progress))
+                              (on-error error))))))))))))
+
+
+
+(defn restore-files-immediately
+  [{:keys [team-id ids]}]
+  (assert (uuid? team-id))
+  (assert (set? ids))
+
+  (ptk/reify ::restore-files-immediately
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [deleted-files
+            (get state :deleted-files)
+
+            on-success
+            (fn []
+              (if (= 1 (count ids))
+                (let [fname (get-in deleted-files [(first ids) :name])]
+                  (rx/of (ntf/success (tr "dashboard.restore-success-notification" fname))))
+                (rx/of (ntf/success (tr "dashboard.restore-files-success-notification" (count ids))))))
+
+            on-error
+            (fn [_cause]
+              (if (= 1 (count ids))
+                (let [fname (get-in deleted-files [(first ids) :name])]
+                  (rx/of (ntf/error (tr "dashboard.errors.error-on-restore-file" fname))))
+                (rx/of (ntf/error (tr "dashboard.errors.error-on-restore-files")))))]
+
+        (rx/of (ev/event
+                {::ev/name "restore-files"
+                 ::ev/origin "dashboard:trash"
+                 :team-id team-id
+                 :num-files (count ids)})
+               (restore-files
+                {:team-id team-id
+                 :ids ids
+                 :on-success on-success
+                 :on-error on-error}))))))
+
+(defn restore-project-immediately
+  [{:keys [team-id id name] :as project}]
+  (assert (valid-project? project))
+
+  (ptk/reify ::restore-project-immediately
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [ids
+            (reduce-kv (fn [acc file-id file]
+                         (if (= (:project-id file) id)
+                           (conj acc file-id)
+                           acc))
+                       #{}
+                       (get state :deleted-files))
+
+            on-success
+            #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" name)))
+
+            on-error
+            #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restoring-project" name)))]
+
+        (rx/of (ev/event
+                {::ev/name "restore-files"
+                 ::ev/origin "dashboard:trash"
+                 :team-id team-id
+                 :project-id id
+                 :num-files (count ids)})
+               (restore-files
+                {:team-id team-id
+                 :ids ids
+                 :on-success on-success
+                 :on-error on-error}))))))

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

@@ -98,9 +98,7 @@
 (def context
   (atom (d/without-nils (collect-context))))
 
-(add-watch i18n/state "events"
-           (fn [_ _ _ v]
-             (swap! context assoc :locale (get v :locale))))
+(add-watch i18n/locale "events" #(swap! context assoc :locale %4))
 
 ;; --- EVENT TRANSLATION
 

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

@@ -236,7 +236,7 @@
   Uses `font-size-value` to calculate the relative line-height value.
   Returns an error for an invalid font-size value."
   [line-height-value font-size-value font-size-errors]
-  (let [missing-references (seq (some cto/find-token-value-references line-height-value))
+  (let [missing-references (seq (cto/find-token-value-references line-height-value))
         error
         (cond
           missing-references

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

@@ -270,8 +270,12 @@
   (ptk/reify ::process-wasm-object
     ptk/EffectEvent
     (effect [_ state _]
-      (let [objects (dsh/lookup-page-objects state)]
-        (wasm.api/process-object (get objects id))))))
+      (let [objects (dsh/lookup-page-objects state)
+            shape (get objects id)]
+        ;; Only process objects that exist in the current page
+        ;; This prevents errors when processing changes from other pages
+        (when shape
+          (wasm.api/process-object shape))))))
 
 (defn initialize-workspace
   [team-id file-id]
@@ -428,10 +432,12 @@
                                                 :val position-data
                                                 :ignore-touched true
                                                 :ignore-geometry true}]})))]
-                            (dch/commit-changes
-                             {:redo-changes changes :undo-changes []
-                              :save-undo? false
-                              :tags #{:position-data}})))))))
+                            (when (d/not-empty? changes)
+                              (dch/commit-changes
+                               {:redo-changes changes :undo-changes []
+                                :save-undo? false
+                                :tags #{:position-data}})))))
+                       (rx/take-until stoper-s))))
 
               (->> stream
                    (rx/filter dch/commit?)

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

@@ -14,7 +14,7 @@
    [app.common.types.fills :as types.fills]
    [app.common.types.library :as ctl]
    [app.common.types.shape :as shp]
-   [app.common.types.shape.shadow :refer [check-shadow]]
+   [app.common.types.shape.shadow :as types.shadow]
    [app.common.types.text :as txt]
    [app.main.broadcast :as mbc]
    [app.main.data.helpers :as dsh]
@@ -406,30 +406,30 @@
 
 (defn change-shadow
   [ids attrs index]
-  (ptk/reify ::change-shadow
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (rx/of (dwsh/update-shapes
-              ids
-              (fn [shape]
-                (let [;; If we try to set a gradient to a shadow (for
-                      ;; example using the color selection from
-                      ;; multiple shapes) let's use the first stop
-                      ;; color
-                      attrs  (cond-> attrs
-                               (:gradient attrs)
-                               (dm/get-in [:gradient :stops 0]))
+  (letfn [(update-shadow [shape]
+            (let [;; If we try to set a gradient to a shadow (for
+                  ;; example using the color selection from
+                  ;; multiple shapes) let's use the first stop
+                  ;; color
+                  attrs  (cond-> attrs
+                           (:gradient attrs)
+                           (-> (dm/get-in [:gradient :stops 0])
+                               (select-keys types.shadow/color-attrs)))
 
-                      attrs' (-> (dm/get-in shape [:shadow index :color])
-                                 (merge attrs)
-                                 (d/without-nils))]
-                  (assoc-in shape [:shadow index :color] attrs'))))))))
+                  attrs' (-> (dm/get-in shape [:shadow index :color])
+                             (merge attrs)
+                             (d/without-nils))]
+              (assoc-in shape [:shadow index :color] attrs')))]
+    (ptk/reify ::change-shadow
+      ptk/WatchEvent
+      (watch [_ _ _]
+        (rx/of (dwsh/update-shapes ids update-shadow))))))
 
 (defn add-shadow
   [ids shadow]
 
   (assert
-   (check-shadow shadow)
+   (types.shadow/check-shadow shadow)
    "expected a valid shadow struct")
 
   (assert
@@ -1122,7 +1122,7 @@
         ref-id     (:stroke-color-ref-id stroke)
 
         colors     (-> libraries
-                       (get ref-id)
+                       (get ref-file)
                        (get :data)
                        (ctl/get-colors))
         shared?    (contains? colors ref-id)
@@ -1146,16 +1146,16 @@
 (defn- shadow->color-attr
   "Given a stroke map enriched with :shape-id, :index, and optionally
      :has-token-applied / :token-name, returns a color attribute map.
-  
+
      If :has-token-applied is true, adds token metadata to :attrs:
        {:has-token-applied true
         :token-name <token-name>}
-  
+
      Args:
      - stroke: map with stroke info, including :shape-id and :index
      - file-id: current file UUID
      - libraries: map of shared color libraries
-  
+
      Returns:
      A map like:
      {:attrs {...color data...}
@@ -1167,7 +1167,7 @@
         ref-file (get color :ref-file)
         ref-id   (get color :ref-id)
         colors   (-> libraries
-                     (get ref-id)
+                     (get ref-file)
                      (get :data)
                      (ctl/get-colors))
         shared?  (contains? colors ref-id)
@@ -1180,19 +1180,20 @@
      :index (:index shadow)}))
 
 (defn- text->color-att
-  [fill file-id libraries]
+  [fill file-id libraries & {:keys [has-token-applied token-name]}]
   (let [ref-file (:fill-color-ref-file fill)
         ref-id   (:fill-color-ref-id fill)
         colors   (-> libraries
-                     (get ref-id)
+                     (get ref-file)
                      (get :data)
                      (ctl/get-colors))
-
         shared?  (contains? colors ref-id)
-        attrs    (cond-> (types.fills/fill->color fill)
-                   (not (or shared? (= ref-file file-id)))
-                   (dissoc :ref-file :ref-id))]
-
+        base-attrs (cond-> (types.fills/fill->color fill)
+                     (not (or shared? (= ref-file file-id)))
+                     (dissoc :ref-file :ref-id))
+        attrs (cond-> base-attrs
+                has-token-applied (assoc :has-token-applied true)
+                token-name (assoc :token-name token-name))]
     {:attrs attrs
      :prop :content
      :shape-id (:shape-id fill)
@@ -1200,13 +1201,18 @@
 
 (defn- extract-text-colors
   [text file-id libraries]
-  (let [treat-node
+  (let [applied-fill-token (get-in text [:applied-tokens :fill])
+        treat-node
         (fn [node shape-id]
-          (map-indexed #(assoc %2 :shape-id shape-id :index %1) node))]
+          (map-indexed (fn [idx fill]
+                         (let [args (cond-> []
+                                      (and (= idx 0) applied-fill-token)
+                                      (conj :has-token-applied true :token-name applied-fill-token))]
+                           (apply text->color-att (assoc fill :shape-id shape-id :index idx) file-id libraries args)))
+                       node))]
     (->> (txt/node-seq txt/is-text-node? (:content text))
          (map :fills)
-         (mapcat #(treat-node % (:id text)))
-         (map #(text->color-att % file-id libraries)))))
+         (mapcat #(treat-node % (:id text))))))
 
 (defn- fill->color-att
   "Given a fill map enriched with :shape-id, :index, and optionally
@@ -1232,7 +1238,7 @@
         ref-id     (:fill-color-ref-id fill)
 
         colors     (-> libraries
-                       (get ref-id)
+                       (get ref-file)
                        (get :data)
                        (ctl/get-colors))
         shared?    (contains? colors ref-id)
@@ -1260,12 +1266,12 @@
      will include extra attributes in its :attrs map:
        {:has-token-applied true
         :token-name <token-name>}
-  
+
      Args:
      - shapes: vector of shape maps
      - file-id: current file UUID
      - libraries: map of shared color libraries
-  
+
      Returns:
      A vector of color attribute maps with metadata for each shape."
   [shapes file-id libraries]

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

@@ -47,32 +47,31 @@
   (ptk/reify ::apply-content-modifiers
     ptk/WatchEvent
     (watch [it state _]
-      (let [page-id (get state :current-page-id state)
-            objects (dsh/lookup-page-objects state)
-
-            id (st/get-path-id state)
-
-            shape
-            (st/get-path state)
+      (let [id    (st/get-path-id state)
+            shape (st/get-path state)
 
             content-modifiers
-            (dm/get-in state [:workspace-local :edit-path id :content-modifiers])
+            (dm/get-in state [:workspace-local :edit-path id :content-modifiers])]
+        (if (or (nil? shape) (nil? content-modifiers))
+          (rx/of (dwe/clear-edition-mode))
+          (let [page-id      (get state :current-page-id state)
+                objects      (dsh/lookup-page-objects state)
 
-            content      (get shape :content)
-            new-content  (path/apply-content-modifiers content content-modifiers)
+                content      (get shape :content)
+                new-content  (path/apply-content-modifiers content content-modifiers)
 
-            old-points   (path.segment/get-points content)
-            new-points   (path.segment/get-points new-content)
-            point-change (->> (map hash-map old-points new-points) (reduce merge))]
+                old-points   (path.segment/get-points content)
+                new-points   (path.segment/get-points new-content)
+                point-change (->> (map hash-map old-points new-points) (reduce merge))]
 
-        (when (and (some? new-content) (some? shape))
-          (let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
-            (if (empty? new-content)
-              (rx/of (dch/commit-changes changes)
-                     (dwe/clear-edition-mode))
-              (rx/of (dch/commit-changes changes)
-                     (selection/update-selection point-change)
-                     (fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))
+            (when (and (some? new-content) (some? shape))
+              (let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
+                (if (empty? new-content)
+                  (rx/of (dch/commit-changes changes)
+                         (dwe/clear-edition-mode))
+                  (rx/of (dch/commit-changes changes)
+                         (selection/update-selection point-change)
+                         (fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))))
 
 (defn modify-content-point
   [content {dx :x dy :y} modifiers point]

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

@@ -554,7 +554,7 @@
        (when (features/active-feature? state "text-editor/v2")
          (let [instance (:workspace-editor state)
                styles   (some-> (editor.v2/getCurrentStyle instance)
-                                (styles/get-styles-from-style-declaration)
+                                (styles/get-styles-from-style-declaration :removed-mixed true)
                                 ((comp update-node-fn migrate-node))
                                 (styles/attrs->styles))]
            (editor.v2/applyStylesToSelection instance styles)))))))

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

@@ -238,12 +238,12 @@
                 :always
                 (ctm/resize scalev resize-origin shape-transform shape-transform-inverse)
 
-                (and (ctl/any-layout-immediate-child? objects shape)
+                (and (or (ctl/any-layout-immediate-child? objects shape) (ctl/any-layout? shape))
                      (not= (:layout-item-h-sizing shape) :fix)
                      ^boolean change-width?)
                 (ctm/change-property :layout-item-h-sizing :fix)
 
-                (and (ctl/any-layout-immediate-child? objects shape)
+                (and (or (ctl/any-layout-immediate-child? objects shape) (ctl/any-layout? shape))
                      (not= (:layout-item-v-sizing shape) :fix)
                      ^boolean change-height?)
                 (ctm/change-property :layout-item-v-sizing :fix)

frontend/src/app/main/refs.cljs

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

frontend/src/app/main/repo.cljs

@@ -87,6 +87,12 @@
    {:stream? true
     :form-data? true}
 
+   ::sse/permanently-delete-team-files
+   {:stream? 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

@@ -224,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/components/editable_select.scss

@@ -4,22 +4,29 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+// FIXME: we need this import for .asset-element
+@use "refactor/basic-rules.scss" as deprecated;
+
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/spacing.scss" as *;
 
 .editable-select {
   @extend .asset-element;
   margin: 0;
   padding: 0;
-  border: deprecated.$s-1 solid var(--input-border-color);
+  border: $b-1 solid var(--input-border-color);
   position: relative;
   display: flex;
-  height: deprecated.$s-32;
+  height: $sz-32;
   width: 100%;
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$br-8;
+  padding: var(--sp-s);
+  border-radius: $br-8;
   cursor: pointer;
   .dropdown-button {
-    @include deprecated.flexCenter;
+    display: flex;
+    place-content: center;
     svg {
       @extend .button-icon-small;
       transform: rotate(90deg);
@@ -29,10 +36,11 @@
 
   .custom-select-dropdown {
     @extend .dropdown-wrapper;
-    max-height: deprecated.$s-320;
+    width: fit-content;
+    max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token
     .separator {
       margin: 0;
-      height: deprecated.$s-12;
+      height: $sz-12;
     }
     .dropdown-element {
       @extend .dropdown-element-base;
@@ -43,7 +51,8 @@
       }
 
       .check-icon {
-        @include deprecated.flexCenter;
+        display: flex;
+        place-content: center;
         svg {
           @extend .button-icon-small;
           visibility: hidden;

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

@@ -50,7 +50,8 @@
         touched?     (and (contains? (:data @form) input-name)
                           (get-in @form [:touched input-name]))
 
-        error        (get-in @form [:errors input-name])
+        error        (or (get-in @form [:errors input-name])
+                         (get-in @form [:extra-errors input-name]))
 
         value        (get-in @form [:data input-name] "")
 

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

@@ -0,0 +1,103 @@
+;; 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.components.progress
+  "Assets exportation common components."
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.types.color :as clr]
+   [app.main.data.common :as dcm]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.icons :as deprecated-icons]
+   [app.util.i18n :as i18n :refer  [tr]]
+   [app.util.theme :as theme]
+   [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+  (deprecated-icons/icon-xref :msg-neutral (stl/css :icon)))
+
+(def ^:private error-icon
+  (deprecated-icons/icon-xref :delete-text (stl/css :icon)))
+
+(def ^:private close-icon
+  (deprecated-icons/icon-xref :close (stl/css :close-icon)))
+
+(mf/defc progress-notification-widget*
+  []
+  (let [state          (mf/deref refs/progress)
+        profile        (mf/deref refs/profile)
+        theme          (get profile :theme theme/default)
+        default-theme? (= theme/default theme)
+        error?         (:error state)
+        healthy?       (:healthy state)
+        visible?       (:visible state)
+        progress       (:progress state)
+        hint           (:hint state)
+        total          (:total state)
+
+        pwidth
+        (if error?
+          280
+          (/ (* progress 280) total))
+
+        color
+        (cond
+          error?         clr/new-danger
+          healthy?       (if default-theme?
+                           clr/new-primary
+                           clr/new-primary-light)
+          (not healthy?) clr/new-warning)
+
+        background-clr
+        (if default-theme?
+          clr/background-quaternary
+          clr/background-quaternary-light)
+
+        toggle-detail-visibility
+        (mf/use-fn
+         (fn []
+           (st/emit! (dcm/toggle-progress-visibility))))]
+
+    [:*
+     (when visible?
+       [:div {:class (stl/css-case :progress-modal true
+                                   :has-error error?)}
+        (if error?
+          error-icon
+          neutral-icon)
+
+        [:div {:class (stl/css :title)}
+         [:div {:class (stl/css :title-text)} hint]
+         (if error?
+           [:button {:class (stl/css :retry-btn)
+                     ;; :on-click retry-last-operation
+                     }
+            (tr "labels.retry")]
+
+           [:span {:class (stl/css :progress)}
+            (dm/str progress " / " total)])]
+
+        [:button {:class (stl/css :progress-close-button)
+                  :on-click toggle-detail-visibility}
+         close-icon]
+
+        (when-not error?
+          [:svg {:class (stl/css :progress-bar)
+                 :height 4
+                 :width 280}
+           [:g
+            [:path {:d "M0 0 L280 0"
+                    :stroke background-clr
+                    :stroke-width 30}]
+            [:path {:d (dm/str "M0 0 L280 0")
+                    :stroke color
+                    :stroke-width 30
+                    :fill "transparent"
+                    :stroke-dasharray 280
+                    :stroke-dashoffset (- 280 pwidth)
+                    :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])])]))

frontend/src/app/main/ui/components/progress.scss

@@ -0,0 +1,101 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+// PROGRESS WIDGET
+.progress-widget {
+  @include deprecated.flexCenter;
+  width: deprecated.$s-28;
+  height: deprecated.$s-28;
+}
+
+// PROGRESS MODAL
+.progress-modal {
+  --export-modal-bg-color: var(--alert-background-color-default);
+  --export-modal-fg-color: var(--alert-text-foreground-color-default);
+  --export-modal-icon-color: var(--alert-icon-foreground-color-default);
+  --export-modal-border-color: var(--alert-border-color-default);
+  position: absolute;
+  right: deprecated.$s-16;
+  top: deprecated.$s-48;
+  display: grid;
+  grid-template-columns: deprecated.$s-24 1fr deprecated.$s-24;
+  grid-template-areas:
+    "icon text close"
+    "bar bar bar";
+  gap: deprecated.$s-4 deprecated.$s-8;
+  padding-block-start: deprecated.$s-8;
+  background-color: var(--export-modal-bg-color);
+  border: deprecated.$s-1 solid var(--export-modal-border-color);
+  border-radius: deprecated.$br-8;
+  z-index: deprecated.$z-index-modal;
+  overflow: hidden;
+}
+
+.has-error {
+  --export-modal-bg-color: var(--alert-background-color-error);
+  --export-modal-fg-color: var(--alert-text-foreground-color-error);
+  --export-modal-icon-color: var(--alert-icon-foreground-color-error);
+  --export-modal-border-color: var(--alert-border-color-error);
+  grid-template-areas: "icon text close";
+  gap: deprecated.$s-8;
+  padding-block: deprecated.$s-8;
+}
+
+.icon {
+  @extend .button-icon;
+  grid-area: icon;
+  align-self: center;
+  margin-inline-start: deprecated.$s-8;
+  stroke: var(--export-modal-icon-color);
+}
+
+.title {
+  @include deprecated.bodyMediumTypography;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: deprecated.$s-8;
+  grid-area: text;
+  align-self: center;
+  padding: 0;
+  margin: 0;
+  color: var(--export-modal-fg-color);
+}
+
+.progress {
+  @include deprecated.bodyMediumTypography;
+  padding-left: deprecated.$s-8;
+  margin: 0;
+  align-self: center;
+  color: var(--modal-text-foreground-color);
+}
+
+.retry-btn {
+  @include deprecated.buttonStyle;
+  @include deprecated.bodySmallTypography;
+  display: inline;
+  text-align: left;
+  color: var(--modal-link-foreground-color);
+  margin: 0;
+  padding: 0;
+}
+
+.progress-close-button {
+  @include deprecated.buttonStyle;
+  padding: 0;
+  margin-inline-end: deprecated.$s-8;
+}
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--export-modal-icon-color);
+}
+
+.progress-bar {
+  margin-top: 0;
+  grid-area: bar;
+}

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

@@ -53,6 +53,6 @@
 
 
 (mf/defc inspect-title-bar*
-  [{:keys [class title]}]
+  [{:keys [class title title-class]}]
   [:div {:class [(stl/css :title-bar) class]}
-   [:div {:class (stl/css :title-only :inspect-title)} title]])
+   [:div {:class [title-class (stl/css :title-only :inspect-title)]} title]])

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

@@ -19,7 +19,9 @@
    [app.main.refs :as refs]
    [app.main.router :as rt]
    [app.main.store :as st]
+   [app.main.ui.components.progress :refer [progress-notification-widget*]]
    [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]
@@ -73,7 +75,13 @@
 
         show-templates?
         (and (contains? cf/flags :dashboard-templates-section)
-             (:can-edit permissions))]
+             (:can-edit permissions))
+
+        show-deleted? (:can-edit permissions)
+
+        section (if (and (not show-deleted?) (= section :dashboard-deleted))
+                  :dashboard-recent
+                  section)]
 
     (mf/with-effect []
       (let [key1 (events/listen js/window "resize" on-resize)]
@@ -84,6 +92,9 @@
     [:div {:class (stl/css :dashboard-content)
            :on-click clear-selected-fn
            :ref container}
+
+     [:> progress-notification-widget*]
+
      (case section
        :dashboard-recent
        (when (seq projects)
@@ -140,6 +151,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

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

@@ -0,0 +1,327 @@
+;; 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.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 ref:deleted-files
+  (l/derived :deleted-files st/state))
+
+(def ^:private menu-icon
+  (deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
+
+(defn- on-restore-project
+  [project]
+  (let [on-accept #(st/emit! (dd/restore-project-immediately project))]
+    (st/emit! (modal/show
+               {:type :confirm
+                :title (tr "dashboard.restore-project-confirmation.title")
+                :message (tr "dashboard.restore-project-confirmation.description" (:name project))
+                :accept-style :primary
+                :accept-label (tr "labels.continue")
+                :on-accept on-accept}))))
+
+(defn- on-delete-project
+  [project]
+  (let [accept-fn #(st/emit! (dd/delete-project-immediately project))]
+    (st/emit! (modal/show
+               {:type :confirm
+                :title (tr "dashboard.delete-forever-confirmation.title")
+                :message (tr "dashboard.delete-project-forever-confirmation.description" (:name project))
+                :accept-label (tr "dashboard.delete-forever-confirmation.title")
+                :on-accept accept-fn}))))
+
+(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 project-context-menu*
+  {::mf/private true}
+  [{:keys [project  show on-close top left]}]
+  (let [top  (d/nilv top 0)
+        left (d/nilv left 0)
+
+        on-restore-project
+        (mf/use-fn
+         (mf/deps project)
+         (partial on-restore-project project))
+
+        on-delete-project
+        (mf/use-fn
+         (mf/deps project)
+         (partial on-delete-project project))
+
+        options
+        (mf/with-memo [on-restore-project on-delete-project]
+          [{:name   (tr "dashboard.restore-project-button")
+            :id     "project-restore"
+            :handler on-restore-project}
+           {:name   (tr "dashboard.delete-project-button")
+            :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/private true}
+  [{:keys [project 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)
+            [:> project-context-menu*
+             {:project project
+              :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}])]]))
+
+(mf/defc menu*
+  {::mf/private true}
+  [{:keys [team-id section]}]
+  (let [on-recent-click
+        (mf/use-fn
+         (mf/deps team-id)
+         (fn []
+           (st/emit! (dcm/go-to-dashboard-recent :team-id team-id))))
+
+        on-deleted-click
+        (mf/use-fn
+         (mf/deps team-id)
+         (fn []
+           (st/emit! (dcm/go-to-dashboard-deleted :team-id team-id))))]
+
+    [:div {:class (stl/css :nav)}
+     [:div {:class (stl/css :nav-inside)}
+      [:div {:class [(stl/css :nav-option)
+                     (stl/css-case :selected (= section :dashboard-recent))]
+             :data-testid "recent-tab"
+             :on-click on-recent-click}
+       (tr "labels.recent")]
+      [:div {:class [(stl/css :nav-option)
+                     (stl/css-case :selected (= section :dashboard-deleted))]
+             :variant "ghost"
+             :type "button"
+             :data-testid "deleted-tab"
+             :on-click on-deleted-click}
+       (tr "labels.deleted")]]]))
+
+(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)
+               (not-empty)))
+
+        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-delete-all
+        (mf/use-fn
+         (mf/deps team-id deleted-map)
+         (fn []
+           (when-let [ids (not-empty (into #{} (map key) deleted-map))]
+             (let [on-accept #(st/emit! (dd/delete-files-immediately
+                                         {:team-id team-id
+                                          :ids ids}))]
+               (st/emit! (modal/show {:type :confirm
+                                      :title (tr "dashboard.delete-forever-confirmation.title")
+                                      :message (tr "dashboard.delete-all-forever-confirmation.description" (count ids))
+                                      :accept-label (tr "dashboard.delete-forever-confirmation.title")
+                                      :on-accept on-accept}))))))
+
+        on-restore-all
+        (mf/use-fn
+         (mf/deps team-id deleted-map)
+         (fn []
+           (when-let [ids (not-empty (into #{} (map key) deleted-map))]
+             (let [on-accept #(st/emit! (dd/restore-files-immediately {:team-id team-id :ids ids}))]
+               (st/emit! (modal/show {:type :confirm
+                                      :title (tr "dashboard.restore-all-confirmation.title")
+                                      :message (tr "dashboard.restore-all-confirmation.description" (count ids))
+                                      :accept-label (tr "labels.continue")
+                                      :accept-style :primary
+                                      :on-accept on-accept}))))))]
+
+
+    (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)
+                :data-testid "deleted-page-section"}
+      [:*
+       [:div {:class (stl/css :no-bg)}
+
+        [:> menu* {:team-id team-id :section :dashboard-deleted}]
+
+        (if (seq projects)
+          [:*
+           [:div {:class (stl/css :deleted-info-content)}
+            [:p {:class (stl/css :deleted-info)}
+             (tr "dashboard.trash-info-text-part1")
+             [:span {:class (stl/css :info-text-highlight)}
+              (tr "dashboard.trash-info-text-part2" deletion-days)]
+             (tr "dashboard.trash-info-text-part3")
+             [:br]
+             (tr "dashboard.trash-info-text-part4")]
+            [:div {:class (stl/css :deleted-options)}
+             [:> button* {:variant "ghost"
+                          :type "button"
+                          :on-click on-restore-all}
+              (tr "dashboard.restore-all-deleted-button")]
+             [:> button* {:variant "destructive"
+                          :type "button"
+                          :icon "delete"
+                          :on-click on-delete-all}
+              (tr "dashboard.clear-trash-button")]]]
+
+           (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
+                                          :files files
+                                          :key id}]))]
+
+          ;; when no deleted projects
+          [:div {:class (stl/css :deleted-info-content)}
+           [:p {:class (stl/css :deleted-info)}
+            (tr "dashboard.deleted.empty-state-description")]])]]]]))