✨ Add the ability to add relations on penpot sdk (#7987)

* ✨ Add the ability to add relations on penpot sdk

* 📎 Remove debug console log

.github/workflows/build-tag.yml

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

CHANGES.md

@@ -61,6 +61,8 @@ example. It's still usable as before, we just removed the example.
 ### :heart: Community contributions (Thank you!)
 
 - Ensure consistent snap behavior across all zoom levels [Github #7774](https://github.com/penpot/penpot/pull/7774) by [@Tokytome](https://github.com/Tokytome)
+- Fix crash in token grid view due to tooltip validation (by @dfelinto) [Github #7887](https://github.com/penpot/penpot/pull/7887)
+- Enable Hindi translations on the application
 
 ### :sparkles: New features & Enhancements
 
@@ -88,6 +90,13 @@ example. It's still usable as before, we just removed the example.
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
 - Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
+- Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
+- Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
+- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
+- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
+- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
+- Fix horizontal scroll on layer panel [Taiga #12843](https://tree.taiga.io/project/penpot/issue/12843)
+- Fix unicode handling on email template abbreviation filter [Github #7966](https://github.com/penpot/penpot/pull/7966)
 
 ## 2.11.1
 

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

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

backend/resources/app/onboarding.edn

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

backend/scripts/_env

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

backend/src/app/binfile/v3.clj

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

backend/src/app/email.clj

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

backend/src/app/loggers/audit.clj

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

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

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

backend/src/app/rpc/rlimit.clj

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

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

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

backend/src/app/storage.clj

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

backend/src/app/storage/gc_touched.clj

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

backend/src/app/util/template.clj

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

common/deps.edn

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

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

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

common/src/app/common/schema.cljc

@@ -281,7 +281,20 @@
 (defn check-fn
   "Create a predefined check function"
   [s & {:keys [hint type code]}]
-  (let [s          (schema s)
+  (let [s          #?(:clj
+                      (schema s)
+                      :cljs
+                      (try
+                        (schema s)
+                        (catch :default cause
+                          (let [data (ex-data cause)]
+                            (if (= :malli.core/invalid-schema (:type data))
+                              (throw (ex-info
+                                      (str "Invalid schema\n"
+                                           (pp/pprint-str (:data data)))
+                                      {}))
+                              (throw cause))))))
+
         validator* (delay (m/validator s))
         explainer* (delay (m/explainer s))
         hint       (or ^boolean hint "check error")

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/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 [_]

docker/devenv/Dockerfile

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

docker/devenv/docker-compose.yaml

@@ -33,6 +33,8 @@ services:
       - 3447:3447
       - 3448:3448
       - 3449:3449
+      - 3449:3449/udp
+      - 3450:3450
       - 6006:6006
       - 6060:6060
       - 6061:6061

docker/devenv/files/Caddyfile

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

docker/devenv/files/init.sh

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

docker/devenv/files/nginx.conf

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

docker/devenv/files/selfsigned.crt

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

docker/devenv/files/selfsigned.key

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

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

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

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

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

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

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

docs/user-guide/designing/index.njk

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

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

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

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

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

docs/user-guide/index.njk

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

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

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

exporter/package.json

@@ -21,6 +21,7 @@
     "raw-body": "^3.0.1",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
+    "undici": "^7.16.0",
     "xml-js": "^1.6.11",
     "xregexp": "^5.1.2"
   },

exporter/src/app/browser.cljs

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

exporter/src/app/handlers/export_shapes.cljs

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

exporter/src/app/handlers/resources.cljs

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

exporter/src/app/util/shell.cljs

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

exporter/yarn.lock

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

frontend/deps.edn

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

frontend/package.json

@@ -45,9 +45,9 @@
     "translations": "node ./scripts/translations.js",
     "watch:app:assets": "node ./scripts/watch.js",
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
-    "watch:app:main": "clojure -M:dev:shadow-cljs watch main storybook",
+    "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 && yarn run build:app:worker && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "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"
@@ -106,7 +106,7 @@
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
     "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "portal:./text-editor",
     "@tokens-studio/sd-transforms": "1.2.11",
     "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",

frontend/scripts/_helpers.js

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

frontend/scripts/build

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

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

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

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

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

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

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

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

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

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

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

frontend/src/app/main/data/workspace/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
@@ -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...}
@@ -1260,12 +1260,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/tokens/errors.cljs

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

frontend/src/app/main/data/workspace/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/data/workspace/variants.cljs

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

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

@@ -14,6 +14,7 @@
    [app.main.ui.components.dropdown :refer [dropdown-content*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
+   [app.util.globals :as ug]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.timers :as tm]
@@ -53,14 +54,13 @@
 (def ^:private valid-option?
   (sm/lazy-validator schema:option))
 
-(mf/defc context-menu*
-  [{:keys [show on-close options selectable selected
+(mf/defc context-menu-inner*
+  [{:keys [on-close options selectable selected
            top left fixed min-width origin width]
     :as props}]
 
   (assert (every? valid-option? options) "expected valid options")
   (assert (fn? on-close) "missing `on-close` prop")
-  (assert (boolean? show) "missing `show` prop")
   (assert (vector? options) "missing `options` prop")
 
   (let [width          (d/nilv width "initial")
@@ -80,14 +80,15 @@
         offset-x       (get state :offset-x)
         offset-y       (get state :offset-y)
         levels         (get state :levels)
+        internal-id    (mf/use-id)
 
         on-local-close
         (mf/use-fn
          (mf/deps on-close)
          (fn []
-           (swap! state* assoc :levels [{:parent nil
-                                         :options options}])
-           (on-close)))
+           (swap! state* assoc :levels [{:parent nil :options options}])
+           (when (fn? on-close)
+             (on-close))))
 
         props
         (mf/spread-props props {:on-close on-local-close})
@@ -216,11 +217,22 @@
       (swap! state* assoc :levels [{:parent nil
                                     :options options}]))
 
+    (mf/with-effect [internal-id]
+      (ug/dispatch! (ug/event "penpot:context-menu:open" #js {:id internal-id})))
+
+    (mf/with-effect [internal-id on-local-close]
+      (letfn [(on-event [event]
+                (when-let [detail (unchecked-get event "detail")]
+                  (when (not= internal-id (unchecked-get detail "id"))
+                    (on-local-close event))))]
+        (ug/listen "penpot:context-menu:open" on-event)
+        (partial ug/unlisten "penpot:context-menu:open" on-event)))
+
     (mf/with-effect [ids]
       (tm/schedule-on-idle
        #(dom/focus! (dom/get-element (first ids)))))
 
-    (when (and show (some? levels))
+    (when (some? levels)
       [:> dropdown-content* props
        (let [level   (peek levels)
              options (:options level)
@@ -229,7 +241,7 @@
          [:div {:class (stl/css-case
                         :is-selectable selectable
                         :context-menu true
-                        :is-open show
+                        :is-open true
                         :fixed fixed)
                 :style {:top (+ top offset-y)
                         :left (+ left offset-x)}
@@ -241,7 +253,7 @@
                 :role "menu"
                 :ref check-menu-offscreen}
 
-           (when-let [parent (:parent level)]
+           (when parent
              [:*
               [:li {:id "go-back-sub-option"
                     :class (stl/css :context-menu-item)
@@ -256,7 +268,7 @@
 
               [:li {:class (stl/css :separator)}]])
 
-           (for [[index option] (d/enumerate (:options level))]
+           (for [[index option] (d/enumerate options)]
              (let [name        (:name option)
                    id          (:id option)
                    sub-options (:options option)
@@ -297,3 +309,12 @@
                            :data-testid id}
                        name
                        [:span {:class (stl/css :submenu-icon)} deprecated-icon/arrow]])]))))]])])))
+
+(mf/defc context-menu*
+  {::mf/private true}
+  [{:keys [show] :as props}]
+
+  (assert (boolean? show) "expected `show` prop to be a boolean")
+
+  (when ^boolean show
+    [:> context-menu-inner* props]))

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -36,7 +36,7 @@
    :text     [:visibility :geometry :text :shadow :blur :stroke :layout-element]
    :variant  [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]})
 
-(mf/defc attributes
+(mf/defc attributes*
   [{:keys [page-id file-id shapes frame from libraries share-id objects color-space]}]
   (let [shapes             (hooks/use-equal-memo shapes)
         first-shape        (first shapes)

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

@@ -96,7 +96,7 @@
                      embed-images? (replace-map images-data))]
     (str/format page-template style-code markup-code)))
 
-(mf/defc code
+(mf/defc code*
   [{:keys [shapes frame on-expand from]}]
   (let [style-type*    (mf/use-state "css")
         markup-type*   (mf/use-state "html")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -27,7 +27,7 @@
    [app.main.ui.workspace.coordinates :as coordinates]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
-   [app.main.ui.workspace.palette :refer [palette]]
+   [app.main.ui.workspace.palette :refer [palette*]]
    [app.main.ui.workspace.plugins]
    [app.main.ui.workspace.sidebar :refer [sidebar*]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -84,8 +84,8 @@
         node-ref (use-resize-observer on-resize)]
     [:*
      (when (not ^boolean hide-ui?)
-       [:& palette {:layout layout
-                    :on-change-palette-size on-resize-palette}])
+       [:> palette* {:layout layout
+                     :on-change-size on-resize-palette}])
 
      [:section
       {:key (dm/str "workspace-" page-id)

frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs

@@ -156,7 +156,7 @@
                        (let [{:keys [modal title]} (get dwta/token-properties :color)
                              window-size (dom/get-window-size)
                              left-sidebar (dom/get-element "left-sidebar-aside")
-                             x-size (dom/get-data left-sidebar "left-sidebar-width")
+                             x-size (dom/get-data left-sidebar "width")
                              modal-height 392
                              x (- (int x-size) 30)
                              y (- (/ (:height window-size) 2) (/ modal-height 2))]

frontend/src/app/main/ui/workspace/palette.cljs

@@ -33,12 +33,13 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def viewport
+(def ^:private ref:viewport
   (l/derived :vport refs/workspace-local))
 
-(defn calculate-palette-padding [rulers?]
+(defn- calculate-palette-style
+  [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
+        left-sidebar-size      (-> (dom/get-data left-sidebar "width")
                                    (d/parse-integer))
         rulers-width           (if rulers? 22 0)
         min-left-sidebar-width left-sidebar-default-width
@@ -48,36 +49,46 @@
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
          "paddingRight" "322px"}))
 
-(mf/defc palette
-  [{:keys [layout on-change-palette-size]}]
-  (let [color-palette?       (:colorpalette layout)
-        text-palette?        (:textpalette layout)
-        hide-palettes?       (:hide-palettes layout)
-        workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
-        container            (mf/use-ref nil)
-        state*               (mf/use-state {:show-menu false})
-        state                (deref state*)
-        show-menu?           (:show-menu state)
-        selected             (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
-        selected-text*       (mf/use-state :file)
-        selected-text        (deref selected-text*)
-        on-select            (mf/use-fn #(reset! selected %))
-        rulers?              (mf/deref refs/rulers?)
-        {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
+(mf/defc palette*
+  [{:keys [layout on-change-size]}]
+  (let [color-palette? (:colorpalette layout)
+        text-palette?  (:textpalette layout)
+        hide-palettes? (:hide-palettes layout)
 
-        vport (mf/deref viewport)
-        vport-width (:width vport)
+        read-only?     (mf/use-ctx ctx/workspace-read-only?)
+        container      (mf/use-ref nil)
+
+        state*         (mf/use-state #(-> {:show-menu false}))
+        state          (deref state*)
+        show-menu?     (:show-menu state)
+
+        selected       (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
+
+        selected-text* (mf/use-state :file)
+        selected-text  (deref selected-text*)
+
+        on-select      (mf/use-fn #(reset! selected %))
+
+        rulers?        (mf/deref refs/rulers?)
+        vport          (mf/deref ref:viewport)
+        vport-width    (get vport :width)
+
+        {:keys [on-pointer-down
+                on-lost-pointer-capture
+                on-pointer-move
+                parent-ref
+                size]}
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size)
 
         on-resize
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
              (swap! state* assoc :width width))))
 
         on-close-menu
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (swap! state* assoc :show-menu false)))
 
@@ -100,7 +111,7 @@
              (reset! selected-text* (:id lib)))))
 
         toggle-palettes
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (r/set-resize-type! :top)
            (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -131,7 +142,9 @@
                                              (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
              (dom/blur! node))))
 
-        any-palette? (or color-palette? text-palette?)
+        any-palette?
+        (or color-palette? text-palette?)
+
         size-classname
         (cond
           (<= size 64) (stl/css :small-palette)
@@ -142,16 +155,16 @@
       (let [key1 (events/listen js/window "resize" on-resize)]
         #(events/unlistenByKey key1)))
 
-    (mf/use-layout-effect
-     #(let [dom     (mf/ref-val parent-ref)
+    (mf/with-layout-effect []
+      (let [dom     (mf/ref-val parent-ref)
             width (obj/get dom "clientWidth")]
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
            :id "palette-wrapper"
-           :style  (calculate-palette-padding rulers?)
+           :style  (calculate-palette-style rulers?)
            :data-testid "palette"}
-     (when-not workspace-read-only?
+     (when-not ^boolean read-only?
        [:div {:ref parent-ref
               :class (dm/str size-classname " " (stl/css-case :palettes true
                                                               :wide any-palette?

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

@@ -27,7 +27,6 @@
    [app.main.ui.workspace.left-header :refer [left-header*]]
    [app.main.ui.workspace.right-header :refer [right-header*]]
    [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox*]]
-   [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button*]]
    [app.main.ui.workspace.sidebar.debug :refer [debug-panel*]]
    [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info*]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
@@ -44,19 +43,34 @@
 
 ;; --- Left Sidebar (Component)
 
-(defn- on-collapse-left-sidebar
-  []
-  (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
+(def ^:private toggle-collapse-left-sidebar
+  (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
 
 (mf/defc collapse-button*
+  {::mf/private true}
   []
   ;; NOTE: This custom button may be replace by an action button when this variant is designed
   [:button {:class (stl/css :collapse-sidebar-button)
-            :on-click on-collapse-left-sidebar}
+            :on-click toggle-collapse-left-sidebar}
    [:> icon* {:icon-id i/arrow
               :size "s"
               :aria-label (tr "workspace.sidebar.collapse")}]])
 
+(mf/defc collapsed-button*
+  {::mf/memo true
+   ::mf/private true}
+  []
+  [:div {:id "left-sidebar-aside"
+         :data-width "0"
+         :class (stl/css :collapsed-sidebar)}
+   [:div {:class (stl/css :collapsed-title)}
+    [:button {:class (stl/css :collapsed-button)
+              :title (tr "workspace.sidebar.expand")
+              :on-click toggle-collapse-left-sidebar}
+     [:> icon* {:icon-id i/arrow
+                :size "s"
+                :aria-label (tr "workspace.sidebar.expand")}]]]])
+
 (mf/defc layers-content*
   {::mf/private true
    ::mf/memo true}
@@ -97,6 +111,7 @@
 
      [:> layers-toolbox* {:size-parent width}]]))
 
+
 (mf/defc left-sidebar*
   {::mf/memo true}
   [{:keys [layout file page-id tokens-lib active-tokens resolved-active-tokens]}]
@@ -161,7 +176,7 @@
      [:aside {:ref parent-ref
               :id "left-sidebar-aside"
               :data-testid "left-sidebar"
-              :data-left-sidebar-width (str width)
+              :data-width (str width)
               :class aside-class
               :style {:--left-sidebar-width (dm/str width "px")}}
 

frontend/src/app/main/ui/workspace/sidebar.scss

@@ -116,6 +116,44 @@
   }
 }
 
+.collapsed-sidebar {
+  @include deprecated.flexCenter;
+  position: absolute;
+  top: deprecated.$s-48;
+  left: 0;
+  padding: deprecated.$s-4;
+  border-radius: deprecated.$br-8;
+  background: var(--color-background-primary);
+  margin-inline-start: var(--sp-m);
+}
+.collapsed-title {
+  @include deprecated.flexCenter;
+  height: deprecated.$s-36;
+  width: deprecated.$s-24;
+  border-radius: deprecated.$br-8;
+  background: var(--color-background-secondary);
+}
+.collapsed-button {
+  @include deprecated.buttonStyle;
+  height: deprecated.$s-24;
+  width: deprecated.$s-16;
+  padding: 0;
+  border-radius: deprecated.$br-5;
+  svg {
+    @include deprecated.flexCenter;
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+    color: transparent;
+    fill: none;
+    stroke: var(--icon-foreground);
+  }
+  &:hover {
+    svg {
+      stroke: var(--icon-foreground-hover);
+    }
+  }
+}
+
 .versions-tab {
   width: 100%;
   overflow: hidden;

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -56,9 +56,8 @@
                (update file :data dissoc :pages-index))
              refs/file))
 
-(mf/defc assets-local-library
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
+(mf/defc assets-local-library*
+  {::mf/private true}
   [{:keys [filters]}]
   (let [file (mf/deref ref:local-library)]
     [:> file-library*
@@ -68,7 +67,7 @@
       :filters filters}]))
 
 (defn- toggle-values
-  [v [a b]]
+  [v a b]
   (if (= v a) b a))
 
 (mf/defc assets-toolbox*
@@ -97,7 +96,7 @@
         (mf/use-fn
          (mf/deps ordering)
          (fn []
-           (let [new-value (toggle-values ordering [:asc :desc])]
+           (let [new-value (toggle-values ordering :asc :desc)]
              (swap! filters* assoc :ordering new-value)
              (dwa/set-current-assets-ordering! new-value))))
 
@@ -105,7 +104,7 @@
         (mf/use-fn
          (mf/deps list-style)
          (fn []
-           (let [new-value (toggle-values list-style [:thumbs :list])]
+           (let [new-value (toggle-values list-style :thumbs :list)]
              (swap! filters* assoc :list-style new-value)
              (dwa/set-current-assets-list-style! new-value))))
 
@@ -209,5 +208,5 @@
       [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
        [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
         [:*
-         [:& assets-local-library {:filters filters}]
+         [:> assets-local-library* {:filters filters}]
          [:> assets-libraries* {:filters filters}]]]]]]))

frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss

@@ -15,7 +15,7 @@
     cursor: pointer;
 
     .title-menu {
-      display: block;
+      visibility: visible;
     }
   }
 }
@@ -25,7 +25,7 @@
 }
 
 .title-menu {
-  display: none;
+  visibility: hidden;
 }
 
 .group-title {

frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs

@@ -1,29 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.sidebar.collapsable-button
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.main.data.workspace :as dw]
-   [app.main.store :as st]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
-   [app.util.i18n :refer [tr]]
-   [rumext.v2 :as mf]))
-
-(mf/defc collapsed-button*
-  {::mf/memo true}
-  []
-  (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
-    [:div {:id "left-sidebar-aside"
-           :data-size "0"
-           :class (stl/css :collapsed-sidebar)}
-     [:div {:class (stl/css :collapsed-title)}
-      [:button {:class (stl/css :collapsed-button)
-                :title (tr "workspace.sidebar.expand")
-                :on-click on-click}
-       [:> icon* {:icon-id i/arrow
-                  :size "s"
-                  :aria-label (tr "workspace.sidebar.expand")}]]]]))

frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss

@@ -1,45 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "refactor/common-refactor.scss" as deprecated;
-
-.collapsed-sidebar {
-  @include deprecated.flexCenter;
-  position: absolute;
-  top: deprecated.$s-48;
-  left: 0;
-  padding: deprecated.$s-4;
-  border-radius: deprecated.$br-8;
-  background: var(--color-background-primary);
-  margin-inline-start: var(--sp-m);
-}
-.collapsed-title {
-  @include deprecated.flexCenter;
-  height: deprecated.$s-36;
-  width: deprecated.$s-24;
-  border-radius: deprecated.$br-8;
-  background: var(--color-background-secondary);
-}
-.collapsed-button {
-  @include deprecated.buttonStyle;
-  height: deprecated.$s-24;
-  width: deprecated.$s-16;
-  padding: 0;
-  border-radius: deprecated.$br-5;
-  svg {
-    @include deprecated.flexCenter;
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-    color: transparent;
-    fill: none;
-    stroke: var(--icon-foreground);
-  }
-  &:hover {
-    svg {
-      stroke: var(--icon-foreground-hover);
-    }
-  }
-}

frontend/src/app/main/ui/workspace/sidebar/layer_item.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
 
 .layer-row {
   --layer-indentation-size: calc(#{deprecated.$s-4} * 6);
@@ -87,7 +88,7 @@
   height: deprecated.$s-32;
   width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
   cursor: pointer;
-
+  min-width: px2rem(140);
   &.filtered {
     width: calc(100% - deprecated.$s-12);
   }

frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs

@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.common.types.variant :as ctv]
    [app.main.data.workspace :as dw]
-   [app.main.data.workspace.variants :as dwv]
    [app.main.store :as st]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -69,15 +68,7 @@
                  name           (str/trim (dom/get-value name-input))]
              (on-stop-edit)
              (reset! edition* false)
-             (if variant-name
-               (if (ctv/valid-properties-formula? name)
-                 (st/emit! (dwv/update-properties-names-and-values component-id variant-id variant-properties (ctv/properties-formula->map name))
-                           (dwv/remove-empty-properties variant-id)
-                           (dwv/update-error component-id))
-                 (st/emit! (dwv/update-properties-names-and-values component-id variant-id variant-properties {})
-                           (dwv/remove-empty-properties variant-id)
-                           (dwv/update-error component-id name)))
-               (st/emit! (dw/end-rename-shape shape-id name))))))
+             (st/emit! (dw/rename-shape-or-variant shape-id name)))))
 
         cancel-edit
         (mf/use-fn

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -211,9 +211,7 @@
   overflow-x: auto;
   overflow-y: overlay;
   scrollbar-gutter: stable;
-
-  .element-list {
-    width: var(--left-sidebar-width);
-    display: grid;
-  }
+}
+.element-list {
+  display: grid;
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -687,7 +687,7 @@
                               (str/upper (tr "workspace.assets.local-library"))
                               (dm/get-in libraries [current-library-id :name]))
 
-        current-lib-data    (mf/with-memo [libraries]
+        current-lib-data    (mf/with-memo [libraries current-library-id]
                               (get-in libraries [current-library-id :data]))
 
         current-lib-counts  (mf/with-memo [current-lib-data]

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -68,7 +68,7 @@
 
 (mf/defc color-token-row*
   {::mf/private true}
-  [{:keys [active-tokens color-token color on-swatch-click-token detach-token open-modal-from-token]}]
+  [{:keys [active-tokens applied-token-name color on-swatch-click-token detach-token open-modal-from-token]}]
   (let [;; `active-tokens` may be provided as a `delay` (lazy computation).
         ;; In that case we must deref it (`@active-tokens`) to force evaluation
         ;; and obtain the actual value. If it’s already realized (not a delay),
@@ -77,21 +77,22 @@
                         @active-tokens
                         active-tokens)
 
-        color-tokens (:color active-tokens)
+        active-color-tokens (:color active-tokens)
 
-        token (some #(when (= (:name %) color-token) %) color-tokens)
+        token (some #(when (= (:name %) applied-token-name) %) active-color-tokens)
 
         on-detach-token
         (mf/use-fn
-         (mf/deps detach-token token color-token)
+         (mf/deps detach-token token applied-token-name)
          (fn []
-           (let [token (or token color-token)]
+           (let [token (or token applied-token-name)]
              (detach-token token))))
 
         has-errors (some? (:errors token))
         token-name (:name token)
         resolved (:resolved-value token)
-        not-active (and (some? active-tokens) (nil? token))
+        not-active (and (empty? active-tokens)
+                        (nil? token))
         id (dm/str (:id token) "-name")
         swatch-tooltip-content (cond
                                  not-active
@@ -109,7 +110,7 @@
                                #(mf/html
                                  [:div
                                   [:span (dm/str (tr "workspace.tokens.token-name") ": ")]
-                                  [:span {:class (stl/css :token-name-tooltip)} color-token]]))]
+                                  [:span {:class (stl/css :token-name-tooltip)} applied-token-name]]))]
 
     [:div {:class (stl/css :color-info)}
      [:div {:class (stl/css-case :token-color-wrapper true
@@ -128,7 +129,7 @@
                     :class (stl/css :token-tooltip)}
        [:div {:class (stl/css :token-name)
               :aria-labelledby id}
-        (or token-name color-token)]]
+        (or token-name applied-token-name)]]
       [:div {:class (stl/css :token-actions)}
        [:> icon-button*
         {:variant "action"
@@ -146,7 +147,11 @@
            on-change on-reorder on-detach on-open on-close on-remove origin on-detach-token
            disable-drag on-focus on-blur select-only select-on-focus on-token-change applied-token]}]
 
-  (let [token-color      (contains? cfg/flags :token-color)
+  (let [;; TODO: Remove this workaround fixing `get-attrs*` fn on sidebar/options/shapes/multiple.cljs
+        applied-token (if (= :multiple applied-token)
+                        nil
+                        applied-token)
+        token-color      (contains? cfg/flags :token-color)
         libraries        (mf/deref refs/files)
 
         color-without-hash (mf/use-memo
@@ -177,7 +182,6 @@
                                 (-> (deref active-tokens*)
                                     (select-keys (get tk/tokens-by-input origin))
                                     (not-empty)))))
-
         on-focus'
         (mf/use-fn
          (mf/deps on-focus)
@@ -352,7 +356,7 @@
      (cond
        (and token-color applied-token)
        [:> color-token-row* {:active-tokens tokens
-                             :color-token applied-token
+                             :applied-token-name applied-token
                              :color (dissoc color :ref-id :ref-file)
                              :on-swatch-click-token  on-swatch-click-token
                              :detach-token detach-token

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -63,7 +63,8 @@
            :data {:index index})
           [nil nil])
 
-        stroke-color-token (:stroke-color applied-tokens)
+        stroke-color-token
+        (:stroke-color applied-tokens)
 
         on-color-change-refactor
         (mf/use-fn

frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs

@@ -20,15 +20,21 @@
 
 ;; Component -------------------------------------------------------------------
 
-(defn calculate-position
+(defn- calculate-position
   "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y color?]
-  (let [;; picker height in pixels
-        ;; TODO: Revisit these harcoded values
-        h (if color? 610 510)
+  [{vh :height} position x y token-type]
+  (let [; TODO: Revisit these harcoded values
+        modal-height (case token-type
+                       :color
+                       500
+                       :typography
+                       660
+                       :shadow
+                       660
+                       400)
         ;; Checks for overflow outside the viewport height
-        max-y             (- vh h)
-        overflow-fix      (max 0 (+ y (- 50) h (- vh)))
+        max-y             (- vh modal-height)
+        overflow-fix      (max 0 (+ y (- 50) modal-height (- vh)))
         bottom-offset     "1rem"
         top-offset        (dm/str (- y 70) "px")
         max-height-top    (str "calc(100vh - " top-offset)
@@ -61,17 +67,19 @@
          :top (dm/str (- y 70 overflow-fix) "px")
          :maxHeight max-height-top}))))
 
-(defn use-viewport-position-style [x y position color?]
+(defn use-viewport-position-style [x y position token-type]
   (let [vport (-> (l/derived :vport refs/workspace-local)
                   (mf/deref))]
-    (-> (calculate-position vport position x y color?)
+    (-> (calculate-position vport position x y token-type)
         (clj->js))))
 
 (mf/defc token-update-create-modal
   {::mf/wrap-props false}
   [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
-  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
-        modal-size-large* (mf/use-state (= token-type :typography))
+  (let [wrapper-style (use-viewport-position-style x y position token-type)
+        modal-size-large* (mf/use-state (or (= token-type :typography)
+                                            (= token-type :color)
+                                            (= token-type :shadow)))
         modal-size-large? (deref modal-size-large*)
         close-modal (mf/use-fn
                      (fn []

frontend/src/app/main/ui/workspace/top_toolbar.scss

@@ -18,7 +18,7 @@
   padding: deprecated.$s-8 deprecated.$s-16;
   border-radius: deprecated.$s-8;
   border: deprecated.$s-2 solid var(--panel-border-color);
-  z-index: deprecated.$z-index-3;
+  z-index: deprecated.$z-index-1;
   background-color: var(--color-background-primary);
   transition:
     top 0.3s,

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -149,9 +149,9 @@
 
         canvas-ref        (mf/use-ref nil)
 
-        ;; VARS
-        disable-paste     (mf/use-var false)
-        in-viewport?      (mf/use-var false)
+        ;; STATE REFS
+        disable-paste-ref (mf/use-ref false)
+        in-viewport-ref   (mf/use-ref false)
 
         ;; STREAMS
         move-stream       (mf/use-memo #(rx/subject))
@@ -210,10 +210,10 @@
         on-pointer-down   (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing?
                                                    path-drawing? create-comment? space? panning z? read-only?)
 
-        on-pointer-up     (actions/on-pointer-up disable-paste)
+        on-pointer-up     (actions/on-pointer-up disable-paste-ref)
 
-        on-pointer-enter  (actions/on-pointer-enter in-viewport?)
-        on-pointer-leave  (actions/on-pointer-leave in-viewport?)
+        on-pointer-enter  (actions/on-pointer-enter in-viewport-ref)
+        on-pointer-leave  (actions/on-pointer-leave in-viewport-ref)
         on-pointer-move   (actions/on-pointer-move move-stream)
         on-move-selected  (actions/on-move-selected hover hover-ids selected space? z? read-only?)
         on-menu-selected  (actions/on-menu-selected hover hover-ids selected read-only?)
@@ -304,7 +304,7 @@
          #(st/emit!
            (dwv/add-new-variant (:id first-shape))))]
 
-    (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?)
+    (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?)
     (hooks/setup-viewport-size vport viewport-ref)
     (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
     (hooks/setup-keyboard alt? mod? space? z? shift?)

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -266,7 +266,7 @@
          (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids})))))))
 
 (defn on-pointer-up
-  [disable-paste]
+  [disable-paste-ref]
   (mf/use-callback
    (fn [event]
      (dom/stop-propagation event)
@@ -291,21 +291,19 @@
          (dom/prevent-default event)
 
          ;; We store this so in Firefox the middle button won't do a paste of the content
-         (reset! disable-paste true)
-         (ts/schedule #(reset! disable-paste false)))
+         (mf/set-ref-val! disable-paste-ref true)
+         (ts/schedule #(mf/set-ref-val! disable-paste-ref false)))
 
        (st/emit! (dw/finish-panning)
                  (dw/finish-zooming))))))
 
-(defn on-pointer-enter [in-viewport?]
-  (mf/use-callback
-   (fn []
-     (reset! in-viewport? true))))
+(defn on-pointer-enter
+  [in-viewport-ref]
+  (mf/use-fn #(mf/set-ref-val! in-viewport-ref true)))
 
-(defn on-pointer-leave [in-viewport?]
-  (mf/use-callback
-   (fn []
-     (reset! in-viewport? false))))
+(defn on-pointer-leave
+  [in-viewport-ref]
+  (mf/use-fn #(mf/set-ref-val! in-viewport-ref false)))
 
 (defn on-key-down []
   (mf/use-callback
@@ -524,15 +522,22 @@
                        :blobs (seq files)}]
            (st/emit! (dwm/upload-media-workspace params))))))))
 
+(def ^:private invalid-paste-targets
+  #{"INPUT" "TEXTAREA"})
+
 (defn on-paste
-  [disable-paste in-viewport? read-only?]
+  [disable-paste-ref in-viewport-ref read-only?]
   (mf/use-fn
    (mf/deps read-only?)
    (fn [event]
-     ;; We disable the paste just after mouse-up of a middle button so
-     ;; when panning won't paste the content into the workspace
-     (let [tag-name (-> event dom/get-target dom/get-tag-name)]
-       (when (and (not (#{"INPUT" "TEXTAREA"} tag-name))
-                  (not @disable-paste)
+     ;; We disable the paste when: 1. just after mouse-up of a middle
+     ;; button (so when panning won't paste the content into the
+     ;; workspace); 2. when we paste content in an input on the
+     ;; sidebar
+     (let [tag-name       (-> event dom/get-target dom/get-tag-name)
+           disable-paste? (mf/ref-val disable-paste-ref)
+           in-viewport?   (mf/ref-val in-viewport-ref)]
+       (when (and (not (contains? invalid-paste-targets tag-name))
+                  (not disable-paste?)
                   (not read-only?))
-         (st/emit! (dw/paste-from-event event @in-viewport?)))))))
+         (st/emit! (dw/paste-from-event event in-viewport?)))))))

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -42,11 +42,12 @@
    [rumext.v2 :as mf])
   (:import goog.events.EventType))
 
-(defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only? drawing-tool drawing-path?]
+(defn setup-dom-events
+  [zoom disable-paste-ref in-viewport-ref workspace-read-only? drawing-tool drawing-path?]
   (let [on-key-down       (actions/on-key-down)
         on-key-up         (actions/on-key-up)
         on-mouse-wheel    (actions/on-mouse-wheel zoom)
-        on-paste          (actions/on-paste disable-paste in-viewport? workspace-read-only?)
+        on-paste          (actions/on-paste disable-paste-ref in-viewport-ref workspace-read-only?)
         on-pointer-down   (mf/use-fn
                            (mf/deps drawing-tool drawing-path?)
                            (fn [e]
@@ -56,27 +57,27 @@
                                  (st/emit! (dwe/clear-edition-mode))))))
         on-blur           (mf/use-fn #(st/emit! (mse/->BlurEvent)))]
 
-    (mf/use-effect
-     (mf/deps drawing-tool drawing-path?)
-     (fn []
-       (let [keys [(events/listen js/window EventType.POINTERDOWN on-pointer-down)]]
-         (fn []
-           (doseq [key keys]
-             (events/unlistenByKey key))))))
+    (mf/with-effect [drawing-tool drawing-path?]
+      (let [key (events/listen js/window EventType.POINTERDOWN on-pointer-down)]
 
-    (mf/use-layout-effect
-     (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
-     (fn []
-       (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
-                   (events/listen js/document EventType.KEYUP on-key-up)
-                   ;; bind with passive=false to allow the event to be cancelled
-                   ;; https://stackoverflow.com/a/57582286/3219895
-                   (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
-                   (events/listen js/window EventType.PASTE on-paste)
-                   (events/listen js/window EventType.BLUR on-blur)]]
-         (fn []
-           (doseq [key keys]
-             (events/unlistenByKey key))))))))
+        ;; We need to disable workspace paste when we on comments
+        (if (= drawing-tool :comments)
+          (mf/set-ref-val! disable-paste-ref true)
+          (mf/set-ref-val! disable-paste-ref false))
+
+        #(events/unlistenByKey key)))
+
+    (mf/with-layout-effect [on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?]
+      (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
+                  (events/listen js/document EventType.KEYUP on-key-up)
+                  ;; bind with passive=false to allow the event to be cancelled
+                  ;; https://stackoverflow.com/a/57582286/3219895
+                  (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
+                  (events/listen js/window EventType.PASTE on-paste)
+                  (events/listen js/window EventType.BLUR on-blur)]]
+        (fn []
+          (doseq [key keys]
+            (events/unlistenByKey key)))))))
 
 (defn setup-viewport-size [vport viewport-ref]
   (mf/with-effect [vport]

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -142,9 +142,9 @@
         canvas-ref        (mf/use-ref nil)
         text-editor-ref   (mf/use-ref nil)
 
-        ;; VARS
-        disable-paste     (mf/use-var false)
-        in-viewport?      (mf/use-var false)
+        ;; STATE REFS
+        disable-paste-ref (mf/use-ref false)
+        in-viewport-ref   (mf/use-ref false)
 
         ;; STREAMS
         move-stream       (mf/use-memo #(rx/subject))
@@ -204,10 +204,10 @@
         on-pointer-down   (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing?
                                                    path-drawing? create-comment? space? panning z? read-only?)
 
-        on-pointer-up     (actions/on-pointer-up disable-paste)
+        on-pointer-up     (actions/on-pointer-up disable-paste-ref)
 
-        on-pointer-enter  (actions/on-pointer-enter in-viewport?)
-        on-pointer-leave  (actions/on-pointer-leave in-viewport?)
+        on-pointer-enter  (actions/on-pointer-enter in-viewport-ref)
+        on-pointer-leave  (actions/on-pointer-leave in-viewport-ref)
         on-pointer-move   (actions/on-pointer-move move-stream)
         on-move-selected  (actions/on-move-selected hover hover-ids selected space? z? read-only?)
         on-menu-selected  (actions/on-menu-selected hover hover-ids selected read-only?)
@@ -349,7 +349,7 @@
           (wasm.api/show-grid @hover-top-frame-id)
           (wasm.api/clear-grid))))
 
-    (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?)
+    (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?)
     (hooks/setup-viewport-size vport viewport-ref)
     (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
     (hooks/setup-keyboard alt? mod? space? z? shift?)

frontend/src/app/plugins/library.cljs

@@ -901,10 +901,10 @@
     (fn [pos value]
       (cond
         (not (nat-int? pos))
-        (u/display-not-valid :pos pos)
+        (u/display-not-valid :pos (str pos))
 
-        (not (string? name))
-        (u/display-not-valid :name name)
+        (not (string? value))
+        (u/display-not-valid :name value)
 
         :else
         (st/emit!

frontend/src/app/plugins/shape.cljs

@@ -55,6 +55,7 @@
    [app.plugins.ruler-guides :as rg]
    [app.plugins.text :as text]
    [app.plugins.utils :as u]
+   [app.util.http :as http]
    [app.util.object :as obj]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
@@ -218,7 +219,7 @@
                   (u/display-not-valid :name value)
 
                   :else
-                  (st/emit! (dw/end-rename-shape id value)))))}
+                  (st/emit! (dw/rename-shape-or-variant file-id page-id id value)))))}
 
            :blocked
            {:this true
@@ -1196,7 +1197,12 @@
                    (js/Promise.
                     (fn [resolve reject]
                       (->> (rp/cmd! :export payload)
-                           (rx/mapcat #(rp/cmd! :export {:cmd :get-resource :wait true :id (:id %) :blob? true}))
+                           (rx/mapcat (fn [{:keys [uri]}]
+                                        (->> (http/send! {:method :get
+                                                          :uri uri
+                                                          :response-type :blob
+                                                          :omit-default-headers true})
+                                             (rx/map :body))))
                            (rx/mapcat #(.arrayBuffer %))
                            (rx/map #(js/Uint8Array. %))
                            (rx/subs! resolve reject))))))))

frontend/src/app/render_wasm/api.cljs

@@ -1316,51 +1316,16 @@
       (mem/free)
       content)))
 
-
 (defn init-wasm-module
   [module]
   (let [default-fn (unchecked-get module "default")
-        serializers
-        #js
-         {:blur-type (unchecked-get module "RawBlurType")
-          :blend-mode (unchecked-get module "RawBlendMode")
-          :bool-type (unchecked-get module "RawBoolType")
-          :font-style (unchecked-get module "RawFontStyle")
-          :flex-direction (unchecked-get module "RawFlexDirection")
-          :grid-direction (unchecked-get module "RawGridDirection")
-          :grow-type (unchecked-get module "RawGrowType")
-          :align-items (unchecked-get module "RawAlignItems")
-          :align-self (unchecked-get module "RawAlignSelf")
-          :align-content (unchecked-get module "RawAlignContent")
-          :justify-items (unchecked-get module "RawJustifyItems")
-          :justify-content (unchecked-get module "RawJustifyContent")
-          :justify-self (unchecked-get module "RawJustifySelf")
-          :wrap-type (unchecked-get module "RawWrapType")
-          :grid-track-type (unchecked-get module "RawGridTrackType")
-          :shadow-style (unchecked-get module "RawShadowStyle")
-          :stroke-style (unchecked-get module "RawStrokeStyle")
-          :stroke-cap (unchecked-get module "RawStrokeCap")
-          :shape-type (unchecked-get module "RawShapeType")
-          :constraint-h (unchecked-get module "RawConstraintH")
-          :constraint-v (unchecked-get module "RawConstraintV")
-          :sizing (unchecked-get module "RawSizing")
-          :vertical-align (unchecked-get module "RawVerticalAlign")
-          :fill-data (unchecked-get module "RawFillData")
-          :text-align (unchecked-get module "RawTextAlign")
-          :text-direction (unchecked-get module "RawTextDirection")
-          :text-decoration (unchecked-get module "RawTextDecoration")
-          :text-transform (unchecked-get module "RawTextTransform")
-          :segment-data (unchecked-get module "RawSegmentData")
-          :stroke-linecap (unchecked-get module "RawStrokeLineCap")
-          :stroke-linejoin (unchecked-get module "RawStrokeLineJoin")
-          :fill-rule (unchecked-get module "RawFillRule")}]
-    (set! wasm/serializers serializers)
-    (default-fn)))
+        href       (cf/resolve-href "js/render-wasm.wasm")]
+    (default-fn #js {:locateFile (constantly href)})))
 
 (defonce module
   (delay
     (if (exists? js/dynamicImport)
-      (let [uri (cf/resolve-static-asset "js/render_wasm.js")]
+      (let [uri (cf/resolve-href "js/render-wasm.js")]
         (->> (js/dynamicImport (str uri))
              (p/mcat init-wasm-module)
              (p/fmap

frontend/src/app/render_wasm/api/shared.js

@@ -0,0 +1,242 @@
+export const GrowType = {
+  "fixed": 0,
+  "auto-width": 1,
+  "auto-height": 2,
+};
+
+export const RawBlendMode = {
+  "normal": 3,
+  "screen": 14,
+  "overlay": 15,
+  "darken": 16,
+  "lighten": 17,
+  "color-dodge": 18,
+  "color-burn": 19,
+  "hard-light": 20,
+  "soft-light": 21,
+  "difference": 22,
+  "exclusion": 23,
+  "multiply": 24,
+  "hue": 25,
+  "saturation": 26,
+  "color": 27,
+  "luminosity": 28,
+};
+
+export const RawBlurType = {
+  "layer-blur": 0,
+};
+
+export const RawFillData = {
+  "solid": 0,
+  "linear": 1,
+  "radial": 2,
+  "image": 3,
+};
+
+export const RawFontStyle = {
+  "normal": 0,
+  "italic": 1,
+};
+
+export const RawAlignItems = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "stretch": 3,
+};
+
+export const RawAlignContent = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "space-between": 3,
+  "space-around": 4,
+  "space-evenly": 5,
+  "stretch": 6,
+};
+
+export const RawJustifyItems = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "stretch": 3,
+};
+
+export const RawJustifyContent = {
+  "start": 0,
+  "end": 1,
+  "center": 2,
+  "space-between": 3,
+  "space-around": 4,
+  "space-evenly": 5,
+  "stretch": 6,
+};
+
+export const RawJustifySelf = {
+  "none": 0,
+  "auto": 1,
+  "start": 2,
+  "end": 3,
+  "center": 4,
+  "stretch": 5,
+};
+
+export const RawAlignSelf = {
+  "none": 0,
+  "auto": 1,
+  "start": 2,
+  "end": 3,
+  "center": 4,
+  "stretch": 5,
+};
+
+export const RawVerticalAlign = {
+  "top": 0,
+  "center": 1,
+  "bottom": 2,
+};
+
+export const RawConstraintH = {
+  "left": 0,
+  "right": 1,
+  "leftright": 2,
+  "center": 3,
+  "scale": 4,
+};
+
+export const RawConstraintV = {
+  "top": 0,
+  "bottom": 1,
+  "topbottom": 2,
+  "center": 3,
+  "scale": 4,
+};
+
+export const RawFlexDirection = {
+  "row": 0,
+  "row-reverse": 1,
+  "column": 2,
+  "column-reverse": 3,
+};
+
+export const RawWrapType = {
+  "wrap": 0,
+  "nowrap": 1,
+};
+
+export const RawGridDirection = {
+  "row": 0,
+  "column": 1,
+};
+
+export const RawGridTrackType = {
+  "percent": 0,
+  "flex": 1,
+  "auto": 2,
+  "fixed": 3,
+};
+
+export const RawSizing = {
+  "fill": 0,
+  "fix": 1,
+  "auto": 2,
+};
+
+export const RawBoolType = {
+  "union": 0,
+  "difference": 1,
+  "intersection": 2,
+  "exclusion": 3,
+};
+
+export const RawSegmentData = {
+  "move-to": 1,
+  "line-to": 2,
+  "curve-to": 3,
+  "close": 4,
+};
+
+export const RawShadowStyle = {
+  "drop-shadow": 0,
+  "inner-shadow": 1,
+};
+
+export const RawShapeType = {
+  "frame": 0,
+  "group": 1,
+  "bool": 2,
+  "rect": 3,
+  "path": 4,
+  "text": 5,
+  "circle": 6,
+  "svg-raw": 7,
+};
+
+export const RawStrokeStyle = {
+  "solid": 0,
+  "dotted": 1,
+  "dashed": 2,
+  "mixed": 3,
+};
+
+export const RawStrokeCap = {
+  "none": 0,
+  "line-arrow": 1,
+  "triangle-arrow": 2,
+  "square-marker": 3,
+  "circle-marker": 4,
+  "diamond-marker": 5,
+  "round": 6,
+  "square": 7,
+};
+
+export const RawFillRule = {
+  "nonzero": 0,
+  "evenodd": 1,
+};
+
+export const RawStrokeLineCap = {
+  "butt": 0,
+  "round": 1,
+  "square": 2,
+};
+
+export const RawStrokeLineJoin = {
+  "miter": 0,
+  "round": 1,
+  "bevel": 2,
+};
+
+export const RawTextAlign = {
+  "left": 0,
+  "center": 1,
+  "right": 2,
+  "justify": 3,
+};
+
+export const RawTextDirection = {
+  "ltr": 0,
+  "rtl": 1,
+};
+
+export const RawTextDecoration = {
+  "none": 0,
+  "underline": 1,
+  "line-through": 2,
+  "overline": 3,
+};
+
+export const RawTextTransform = {
+  "none": 0,
+  "uppercase": 1,
+  "lowercase": 2,
+  "capitalize": 3,
+};
+
+export const RawGrowType = {
+  "fixed": 0,
+  "auto-width": 1,
+  "auto-height": 2,
+};
+