feat: add TypeScript support

CHANGES.md

@@ -111,9 +111,6 @@ example. It's still usable as before, we just removed the example.
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
 - Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
 - Fix U and E icon displayed in project list [Taiga #12806](https://tree.taiga.io/project/penpot/issue/12806)
-- Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
-- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
-- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
 
 ## 2.11.1
 

backend/src/app/email.clj

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

backend/src/app/loggers/audit.clj

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

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

@@ -12,11 +12,8 @@
    [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]
@@ -28,7 +25,6 @@
    [app.common.types.library :as ctl]
    [app.common.types.page :as ctp]
    [app.common.types.pages-list :as ctpl]
-   [app.common.types.path.segment :as segment]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
@@ -1878,44 +1874,6 @@
                    roperations'
                    uoperations')))))))
 
-(defn- set-path-new-values
-  [current-shape prev-shape transform]
-  (let [new-content   (segment/transform-content
-                       (:content current-shape)
-                       (gmt/transform-in (gpt/point 0 0) transform))
-        new-points    (-> (segment/content->selrect new-content)
-                          (grc/rect->points))
-        points-center (gco/points->center new-points)
-        new-selrect   (gsh/calculate-selrect new-points points-center)
-        shape         (assoc current-shape
-                             :content new-content
-                             :points new-points
-                             :selrect new-selrect)
-
-        prev-center   (segment/content-center (:content prev-shape))
-        delta         (gpt/subtract points-center (first new-points))
-        new-pos       (gpt/subtract prev-center delta)]
-    (gsh/absolute-move shape new-pos)))
-
-(defn- switch-path-change-value
-  [prev-shape           ;; The shape before the switch
-   current-shape        ;; The shape after the switch (a clean copy)
-   ref-shape            ;; The referenced shape on the main component
-                        ;; before the switch
-   attr]
-  (let [old-width (-> ref-shape :selrect :width)
-        new-width (-> prev-shape :selrect :width)
-
-        old-height (-> ref-shape :selrect :height)
-        new-height (-> prev-shape :selrect :height)
-
-        transform (-> (gpt/point (/ new-width old-width)
-                                 (/ new-height old-height))
-                      (gmt/scale-matrix))
-
-        shape     (set-path-new-values current-shape prev-shape transform)]
-    (get shape attr)))
-
 
 (defn- switch-text-change-value
   [prev-content         ;; The :content of the text before the switch
@@ -2067,10 +2025,6 @@
                (= :content attr)
                (touched attr-group))
 
-              path-change?
-              (and (= :path (:type current-shape))
-                   (contains? #{:points :selrect :content} attr))
-
               ;; position-data is a special case because can be affected by :geometry-group and :content-group
               ;; so, if the position-data changes but the geometry is touched we need to reset the position-data
               ;; so it's calculated again
@@ -2099,12 +2053,6 @@
                                             (:content origin-ref-shape)
                                             touched)
 
-                  path-change?
-                  (switch-path-change-value previous-shape
-                                            current-shape
-                                            origin-ref-shape
-                                            attr)
-
                   :else
                   (get previous-shape attr)))
 

common/src/app/common/path_names.cljc

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

common/src/app/common/schema.cljc

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

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

@@ -234,15 +234,16 @@
   "Calculate the boolean content from shape and objects. Returns a
   packed PathData instance"
   [shape objects]
-  (let [content (calc-bool-content* shape objects)]
+  (let [content (if (fn? wasm:calc-bool-content)
+                  (wasm:calc-bool-content (get shape :bool-type)
+                                          (get shape :shapes))
+                  (calc-bool-content* shape objects))]
     (impl/path-data content)))
 
 (defn update-bool-shape
   "Calculates the selrect+points for the boolean shape"
   [shape objects]
-  (let [content (if (fn? wasm:calc-bool-content)
-                  (wasm:calc-bool-content shape objects)
-                  (calc-bool-content shape objects))
+  (let [content (calc-bool-content shape objects)
         shape   (assoc shape :content content)]
     (update-geometry shape)))
 

docker/devenv/files/nginx.conf

@@ -223,19 +223,15 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+            location ~* \.(js|css|jpg|png|svg|ttf|woff|woff2|wasm)$ {
                 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" always;
+            add_header Cache-Control "no-store, no-cache, max-age=0" always;
             try_files $uri /index.html$is_args$args /index.html =404;
         }
     }

docker/devenv/files/start-tmux.sh

@@ -30,13 +30,18 @@ tmux select-window -t penpot:1
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
 tmux send-keys -t penpot 'yarn run watch:app' enter
 
-tmux new-window -t penpot:2 -n 'frontend storybook'
+tmux new-window -t penpot:2 -n 'frontend ts'
 tmux select-window -t penpot:2
 tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
+tmux send-keys -t penpot 'yarn watch:ts' enter
+
+tmux new-window -t penpot:3 -n 'frontend storybook'
+tmux select-window -t penpot:3
+tmux send-keys -t penpot 'cd penpot/frontend' enter C-l
 tmux send-keys -t penpot 'yarn run watch:storybook' enter
 
-tmux new-window -t penpot:3 -n 'exporter'
-tmux select-window -t penpot:3
+tmux new-window -t penpot:4 -n 'exporter'
+tmux select-window -t penpot:4
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot 'rm -f target/app.js*' enter C-l
 tmux send-keys -t penpot 'yarn run watch' enter
@@ -45,8 +50,8 @@ tmux split-window -v
 tmux send-keys -t penpot 'cd penpot/exporter' enter C-l
 tmux send-keys -t penpot './scripts/wait-and-start.sh' enter
 
-tmux new-window -t penpot:4 -n 'backend'
-tmux select-window -t penpot:4
+tmux new-window -t penpot:5 -n 'backend'
+tmux select-window -t penpot:5
 tmux send-keys -t penpot 'cd penpot/backend' enter C-l
 tmux send-keys -t penpot './scripts/start-dev' enter
 

docker/images/Dockerfile.frontend

@@ -10,7 +10,6 @@ RUN set -ex; \
     mkdir -p /etc/nginx/overrides/main.d/; \
     mkdir -p /etc/nginx/overrides/http.d/; \
     mkdir -p /etc/nginx/overrides/server.d/; \
-    mkdir -p /etc/nginx/overrides/assets.d/; \
     mkdir -p /etc/nginx/overrides/location.d/;
 
 ARG BUNDLE_PATH="./bundle-frontend/"

docker/images/files/nginx.conf.template

@@ -110,8 +110,6 @@ http {
             recursive_error_pages on;
             proxy_intercept_errors on;
             error_page 301 302 307 = @handle_redirect;
-
-            include /etc/nginx/overrides/assets.d/*.conf;
         }
 
         location /internal/assets {

exporter/scripts/wait-and-start.sh

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

exporter/src/app/browser.cljs

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

exporter/src/app/handlers/export_shapes.cljs

@@ -74,7 +74,7 @@
          (p/fmap (fn [resource]
                    (assoc exchange :response/body resource)))
          (p/merr (fn [cause]
-                   (l/error :hint "unexpected error on single export"
+                   (l/error :hint "unexpected error on export multiple"
                             :cause cause)
                    (p/rejected cause))))))
 
@@ -94,7 +94,7 @@
                           (redis/pub! topic data))))
 
         on-error    (fn [cause]
-                      (l/error :hint "unexpected error on multiple export" :cause cause)
+                      (l/error :hint "unexpected error on multiple exportation" :cause cause)
                       (if wait
                         (p/rejected cause)
                         (redis/pub! topic {:type :export-update

frontend/.gitignore

@@ -11,4 +11,4 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 /playwright/**/visual-specs/**/*.png
-
+/ts/dist/

frontend/.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)", "../ts/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   staticDirs: ["../resources/public"],
   addons: [
     "@storybook/addon-themes",

frontend/deps.edn

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

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['ts/dist']),
+  {
+    files: ['ts/src/**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/package.json

@@ -17,7 +17,8 @@
     "@zip.js/zip.js@npm:^2.7.44": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
     "@vitejs/plugin-react": "^4.2.0",
     "playwright": "1.52.0",
-    "playwright-core": "1.52.0"
+    "playwright-core": "1.52.0",
+    "globals": "^16.5.0"
   },
   "scripts": {
     "build:app:assets": "node ./scripts/build-app-assets.js",
@@ -32,8 +33,9 @@
     "e2e:server": "node ./scripts/e2e-server.js",
     "fmt:clj": "cljfmt fix --parallel=true src/ test/",
     "fmt:clj:check": "cljfmt check --parallel=false src/ test/",
-    "fmt:js": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -w",
-    "fmt:js:check": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js",
+    "fmt:js": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -c ts/src/**/*.ts -w",
+    "fmt:js:check": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -c ts/src/**/*.ts -c --check",
+    "lint:ts": "eslint ts/",
     "lint:clj": "clj-kondo --parallel --lint src/",
     "lint:scss": "yarn run prettier -c resources/styles -c src/**/*.scss",
     "lint:scss:fix": "yarn run prettier -c resources/styles -c src/**/*.scss -w",
@@ -50,6 +52,7 @@
     "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:ts": "vite build --watch",
     "watch:storybook:assets": "node ./scripts/watch-storybook.js"
   },
   "devDependencies": {
@@ -59,11 +62,16 @@
     "@storybook/addon-vitest": "10.0.4",
     "@storybook/react-vite": "10.0.4",
     "@types/node": "^22.15.21",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "^10.4.21",
     "concurrently": "^9.2.1",
     "esbuild": "^0.25.9",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
     "express": "^5.1.0",
     "fancy-log": "^2.0.0",
     "getopts": "^2.3.0",
@@ -95,6 +103,7 @@
     "storybook": "10.0.4",
     "svg-sprite": "^2.0.4",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.45.0",
     "vite": "^6.3.5",
     "vitest": "^3.2.0",
     "wasm-pack": "^0.13.1",
@@ -106,9 +115,11 @@
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
     "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.2",
+    "@penpot/svgo": "penpot/svgo#v3.1",
     "@penpot/text-editor": "portal:./text-editor",
+    "@penpot/ts": "portal:./ts",
     "@tokens-studio/sd-transforms": "1.2.11",
+    "@vitejs/plugin-react": "4.2.0",
     "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
     "compression": "^1.8.1",
     "date-fns": "^4.1.0",

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

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

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

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

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

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

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

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

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

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

frontend/playwright/helpers/Clipboard.js

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

frontend/playwright/helpers/Transit.js

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

frontend/playwright/ui/pages/BasePage.js

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

frontend/playwright/ui/pages/WorkspacePage.js

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

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

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

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

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

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

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

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

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

frontend/resources/templates/index.mustache

@@ -18,6 +18,7 @@
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/ts-style.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
     <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}

frontend/scripts/_helpers.js

@@ -181,8 +181,8 @@ export async function watch(baseDir, predicate, callback) {
   });
 }
 
-async function readManifestFile(resource) {
-  const manifestPath = "resources/public/" + resource;
+async function readManifestFile() {
+  const manifestPath = "resources/public/js/manifest.json";
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
   return JSON.parse(content);
 }

frontend/scripts/build

@@ -29,7 +29,7 @@ rm -rf target/dist;
 mkdir -p resources/public;
 mkdir -p target/dist;
 
-yarn run build:app:main $EXTRA_PARAMS;
+yarn run build:app:main $EXTRA_PARAMS || exit 1
 
 if [ "$INCLUDE_WASM" = "yes" ];  then
     yarn run build:wasm || exit 1;
@@ -38,6 +38,8 @@ fi
 yarn run build:app:libs || exit 1;
 yarn run build:app:assets || exit 1;
 
+sed -i "s/render-wasm.js/render-wasm.js?version=$CURRENT_VERSION/g" ./resources/public/js/worker/main.js;
+
 rsync -avr resources/public/ target/dist/;
 
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

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

frontend/src/app/main.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main
   (:require
+   ["@penpot/ts" :refer [setTranslation]]
    [app.common.data.macros :as dm]
    [app.common.logging :as log]
    [app.common.types.objects-map]
@@ -38,6 +39,8 @@
 (log/setup! {:app :info})
 (log/set-level! :debug)
 
+(setTranslation i18n/tr)
+
 (when (= :browser cf/target)
   (log/inf :version (:full cf/version)
            :asserts *assert*

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

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

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

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

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

@@ -261,19 +261,14 @@
 
 (defn- parse-sd-token-font-family-value
   [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))]
+  (let [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 value})))
+      {:value (-> (js->clj value) (flatten))})))
 
 (defn parse-atomic-typography-value [token-type token-value]
   (case token-type

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

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

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

@@ -102,8 +102,7 @@
                   {:origin it
                    :redo-changes changes
                    :undo-changes []
-                   :save-undo? false
-                   :ignore-wasm? true})))))))
+                   :save-undo? false})))))))
 
 ;; FIXME: would be nice to not execute this code twice per page in the
 ;; same working session, maybe some local memoization can improve that
@@ -120,5 +119,4 @@
                   {:origin it
                    :redo-changes changes
                    :undo-changes []
-                   :save-undo? false
-                   :ignore-wasm? true})))))))
+                   :save-undo? false})))))))

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

@@ -649,7 +649,7 @@
             (propagate-structure-modifiers modif-tree (dsh/lookup-page-objects state))
 
             ids
-            (into (set (keys modif-tree)) xf:without-uuid-zero (keys transforms))
+            (into [] xf:without-uuid-zero (keys transforms))
 
             update-shape
             (fn [shape]

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

@@ -831,8 +831,7 @@
     (effect [_ state _]
       (when (features/active-feature? state "text-editor/v2")
         (let [instance (:workspace-editor state)
-              attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
-                                        (styles/get-styles-from-style-declaration))
+              attrs-to-override (some-> (editor.v2/getCurrentStyle instance) (styles/get-styles-from-style-declaration))
               overriden-attrs (merge attrs-to-override attrs)
               styles  (styles/attrs->styles overriden-attrs)]
           (editor.v2/applyStylesToSelection instance styles))))))

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

@@ -88,10 +88,6 @@
    {: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/fonts.cljs

@@ -26,7 +26,7 @@
 (log/set-level! :warn)
 
 (def google-fonts
-  (preload-gfonts "fonts/gfonts.2025.11.28.json"))
+  (preload-gfonts "fonts/gfonts.2025.05.19.json"))
 
 (def local-fonts
   [{:id "sourcesanspro"
@@ -342,8 +342,8 @@
         (fn [result {:keys [font-id] :as node}]
           (let [current-font
                 (if (some? font-id)
-                  (select-keys node [:font-id :font-variant-id :font-weight :font-style])
-                  (select-keys txt/default-typography [:font-id :font-variant-id :font-weight :font-style]))]
+                  (select-keys node [:font-id :font-variant-id])
+                  (select-keys txt/default-typography [:font-id :font-variant-id]))]
             (conj result current-font)))
         #{})))
 

frontend/src/app/main/refs.cljs

@@ -372,9 +372,6 @@
 (def workspace-modifiers
   (l/derived :workspace-modifiers st/state))
 
-(def workspace-wasm-modifiers
-  (l/derived :workspace-wasm-modifiers st/state))
-
 (def ^:private workspace-modifiers-with-objects
   (l/derived
    (fn [state]

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

@@ -30,7 +30,6 @@
 (def current-zoom         (mf/create-context nil))
 
 (def workspace-read-only? (mf/create-context nil))
-(def is-render?           (mf/create-context false))
 (def is-component?        (mf/create-context false))
 
 (def sidebar

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.dashboard.projects
   (:require-macros [app.main.style :as stl])
   (:require
+   ["@penpot/ts" :refer [TestTsxComponent]]
    [app.common.geom.point :as gpt]
    [app.common.time :as ct]
    [app.main.data.common :as dcm]
@@ -50,8 +51,11 @@
    ::mf/props :obj
    ::mf/private true}
   [{:keys [can-edit]}]
+;;  (js/console.log "xxxx" TestTsxComponent)
   (let [on-click (mf/use-fn #(st/emit! (dd/create-project)))]
     [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"}
+     [:div
+      [:> TestTsxComponent]]
      [:div#dashboard-projects-title {:class (stl/css :dashboard-title)}
       [:h1 (tr "dashboard.projects-title")]]
      (when can-edit

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

@@ -106,14 +106,14 @@
        (when (not= 0 count-libraries)
          (if (pos? (count references))
            [:*
-            (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]])]
+            [: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? hint) (not= hint ""))
               [:> context-notification* {:level :info
                                          :appearance :ghost}

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

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

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

@@ -32,7 +32,6 @@
    [app.main.ui.ds.product.avatar :refer [avatar*]]
    [app.main.ui.ds.product.cta :refer [cta*]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
    [app.main.ui.ds.product.input-with-meta :refer [input-with-meta*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.product.milestone :refer [milestone*]]
@@ -57,7 +56,6 @@
     :HintMessage hint-message*
     :InputWithMeta input-with-meta*
     :EmptyPlaceholder empty-placeholder*
-    :EmptyState empty-state*
     :Loader loader*
     :RawSvg raw-svg*
     :Select select*

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

@@ -32,19 +32,13 @@
   min-width: var(--sp-l);
 }
 
-// TODO: Review if we need other type of button, so we don't need important here
 .invisible-button {
-  position: absolute;
-  right: 4px;
-  top: 4px;
   opacity: var(--opacity-button);
-  background-color: var(--color-background-quaternary) !important;
+
   &:hover {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs

@@ -80,7 +80,7 @@
          [:div {:class (stl/css :pill-dot)}])]]
 
      (when-not ^boolean disabled
-       [:> icon-button* {:variant "ghost"
+       [:> icon-button* {:variant "action"
                          :class (stl/css :invisible-button)
                          :icon i/broken-link
                          :ref token-detach-btn-ref

frontend/src/app/main/ui/ds/controls/utilities/token_field.scss

@@ -8,7 +8,6 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/typography.scss" as t;
 @use "ds/colors.scss" as *;
-@use "ds/mixins.scss" as *;
 
 .token-field {
   --token-field-bg-color: var(--color-background-tertiary);
@@ -17,8 +16,9 @@
   --token-field-outline-color: none;
   --token-field-height: var(--sp-xxxl);
   --token-field-margin: unset;
+
   display: grid;
-  width: inherit;
+  grid-template-columns: 1fr auto;
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
@@ -27,7 +27,6 @@
   border-radius: $br-8;
   padding: var(--sp-xs);
   outline: $b-1 solid var(--token-field-outline-color);
-  position: relative;
 
   &:hover {
     --token-field-bg-color: var(--color-background-quaternary);
@@ -40,7 +39,7 @@
 }
 
 .with-icon {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr auto;
 }
 
 .token-field-disabled {
@@ -58,8 +57,6 @@
   --pill-bg-color: var(--color-background-tertiary);
   --pill-fg-color: var(--color-token-foreground);
   @include t.use-typography("code-font");
-  @include textEllipsis;
-  display: block;
   height: var(--sp-xxl);
   width: fit-content;
   background: var(--pill-bg-color);
@@ -68,7 +65,6 @@
   color: var(--pill-fg-color);
   border-radius: $br-6;
   padding-inline: $sz-6;
-max-width: 100%;
   &:hover {
     --pill-bg-color: var(--color-token-background);
     --pill-fg-color: var(--color-foreground-primary);
@@ -119,9 +115,6 @@ max-width: 100%;
 }
 
 .invisible-button {
-  position: absolute;
-  right: 0;
-  top: 0;
   opacity: var(--opacity-button);
 
   &:hover {

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

@@ -1,49 +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.ds.layers.layer-button
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:layer-button
-  [:map
-   [:label :string]
-   [:description {:optional true} [:maybe :string]]
-   [:class {:optional true} :string]
-   [:expandable {:optional true} :boolean]
-   [:expanded {:optional true} :boolean]
-   [:icon {:optional true} :string]
-   [:on-toggle-expand fn?]])
-
-(mf/defc layer-button*
-  {::mf/schema schema:layer-button}
-  [{:keys [label description class is-expandable expanded icon on-toggle-expand children] :rest props}]
-  (let [button-props (mf/spread-props props
-                                      {:class [class (stl/css-case :layer-button true
-                                                                   :layer-button--expandable is-expandable
-                                                                   :layer-button--expanded expanded)]
-                                       :type "button"
-                                       :on-click on-toggle-expand})]
-    [:div {:class (stl/css :layer-button-wrapper)}
-     [:> "button" button-props
-      [:div {:class (stl/css :layer-button-content)}
-       (when is-expandable
-         (if expanded
-           [:> icon* {:icon-id i/arrow-down :class (stl/css :folder-node-icon)}]
-           [:> icon* {:icon-id i/arrow-right :class (stl/css :folder-node-icon)}]))
-       (when icon
-         [:> icon* {:icon-id icon :class (stl/css :layer-button-icon)}])
-       [:span {:class (stl/css :layer-button-name)}
-        label]
-       (when description
-         [:span {:class (stl/css :layer-button-description)}
-          description])
-       [:span {:class (stl/css :layer-button-quantity)}]]]
-     [:div {:class (stl/css :layer-button-actions)}
-      children]]))

frontend/src/app/main/ui/ds/layers/layer_button.scss

@@ -1,56 +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 "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/typography.scss" as *;
-@use "ds/colors.scss" as *;
-
-.layer-button-wrapper {
-  --layer-button-block-size: #{$sz-32};
-  --layer-button-background: var(--color-background-primary);
-  --layer-button-text: var(--color-foreground-secondary);
-
-  display: flex;
-  justify-content: space-between;
-
-  block-size: var(--layer-button-block-size);
-
-  background: var(--layer-button-background);
-  color: var(--layer-button-text);
-}
-
-.layer-button {
-  @include use-typography("body-small");
-
-  appearance: none;
-
-  flex: 1;
-  display: flex;
-  align-items: center;
-
-  border: none;
-  background: none;
-  color: inherit;
-}
-
-.layer-button--expanded {
-  & .layer-button-name {
-    color: var(--color-foreground-primary);
-  }
-}
-
-.layer-button-content {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-xs);
-}
-
-.layer-button-description {
-  padding: var(--sp-xs);
-  background-color: var(--color-background-tertiary);
-  border-radius: $br-6;
-}

frontend/src/app/main/ui/ds/product/empty_state.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.ds.product.empty-state
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:empty-state
-  [:map
-   [:class {:optional true} :string]
-   [:icon [:and :string [:fn #(contains? icon-list %)]]]
-   [:text :string]])
-
-(mf/defc empty-state*
-  {::mf/schema schema:empty-state}
-  [{:keys [class icon text] :rest props}]
-  (let [props (mf/spread-props props {:class [class (stl/css :group)]})]
-    [:> :div props
-     [:div {:class (stl/css :icon-wrapper)}
-      [:> icon* {:icon-id icon
-                 :size "l"
-                 :class (stl/css :icon)}]]
-     [:div {:class (stl/css :text)} text]]))

frontend/src/app/main/ui/ds/product/empty_state.mdx

@@ -1,35 +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 */ }
-  
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as EmptyState from "./empty_state.stories";
-
-<Meta title="Product/EmptyState" />
-
-# EmptyState
-
-An indication to the user that there is no data to display in the current view; often includes instructions on what to do next.
-
-<Canvas of={EmptyState.Default} />
-
-## Technical notes
-
-The icon and the text are mandatory, and a class is optional.
-
-```clj
-[:> empty-state* {:icon i/at
-                  :text "This is an empty state"}]
-```
-
-## Usage guidelines (design)
-
-### Where to use
-
-Use in areas of the app where users can add data or elements, but where there is currently no available information.
-
-### Interaction / Behavior
-
-There is no interaction.

frontend/src/app/main/ui/ds/product/empty_state.scss

@@ -1,36 +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 "ds/_sizes.scss" as *;
-@use "ds/spacing.scss" as *;
-@use "ds/typography.scss" as t;
-
-.group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sp-m);
-}
-
-.icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  inline-size: $sz-48;
-  block-size: $sz-48;
-}
-
-.icon {
-  color: var(--color-foreground-secondary);
-  inline-size: $sz-32;
-  block-size: $sz-32;
-}
-
-.text {
-  @include t.use-typography("body-small");
-  text-align: center;
-  color: var(--color-foreground-secondary);
-}

frontend/src/app/main/ui/ds/product/empty_state.stories.jsx

@@ -1,32 +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
-
-import * as React from "react";
-import Components from "@target/components";
-
-const { EmptyState } = Components;
-const { icons } = Components.meta;
-
-export default {
-  title: "Product/EmptyState",
-  component: Components.EmptyState,
-  argTypes: {
-    icon: {
-      options: icons,
-      control: { type: "select" },
-    },
-    text: {
-      control: { type: "text" },
-    },
-  },
-  args: {
-    icon: "help",
-    text: "This is an empty state",
-  },
-  render: ({ ...args }) => <EmptyState {...args} />,
-};
-
-export const Default = {};

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

@@ -159,6 +159,4 @@ $arrow-side: 12px;
   block-size: fit-content;
   inline-size: fit-content;
   line-height: 0;
-  display: grid;
-  max-width: 100%;
 }

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

@@ -223,30 +223,24 @@
         circ              (* 2 Math/PI 12)
         pct               (- circ (* circ (/ progress total)))
 
-        pwidth
-        (if error?
-          280
-          (/ (* progress 280) 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)
 
-        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"))
+        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)))
@@ -290,7 +284,7 @@
                      :on-click retry-last-export}
             (tr "workspace.options.retry")]
 
-           [:span {:class (stl/css :progress)}
+           [:p {:class (stl/css :progress)}
             (dm/str progress " / " total)])]
 
         [:button {:class (stl/css :progress-close-button)

frontend/src/app/main/ui/flex_controls/gap.cljs

@@ -7,7 +7,6 @@
 (ns app.main.ui.flex-controls.gap
   (:require
    [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
@@ -17,8 +16,6 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.modifiers :as dwm]
-   [app.main.data.workspace.transforms :as dwt]
-   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.css-cursors :as cur]
@@ -30,11 +27,10 @@
 (mf/defc gap-display
   [{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
            rect-data hover? selected? mouse-pos hover-value
-           on-move-selected on-context-menu on-change]}]
+           on-move-selected on-context-menu]}]
   (let [resizing             (mf/use-var nil)
         start                (mf/use-var nil)
         original-value       (mf/use-var 0)
-        last-pos             (mf/use-var nil)
         negate?              (:resize-negate? rect-data)
         axis                 (:resize-axis rect-data)
 
@@ -47,55 +43,32 @@
            (reset! start (dom/get-client-position event))
            (reset! original-value (:initial-value rect-data))))
 
-        calc-modifiers
-        (mf/use-fn
-         (mf/deps frame-id gap-type gap)
-         (fn [pos]
-           (let [delta
-                 (-> (gpt/to-vec @start pos)
-                     (cond-> negate? gpt/negate)
-                     (get axis))
-                 val
-                 (int (max (+ @original-value (/ delta zoom)) 0))
-
-                 layout-gap (assoc gap gap-type val)]
-             [val
-              (dwm/create-modif-tree
-               [frame-id]
-               (ctm/change-property (ctm/empty) :layout-gap layout-gap))])))
-
         on-lost-pointer-capture
         (mf/use-fn
-         (mf/deps calc-modifiers)
+         (mf/deps frame-id gap-type gap)
          (fn [event]
            (dom/release-pointer event)
-
-           (when (and (features/active-feature? @st/state "render-wasm/v1") (= @resizing gap-type))
-             (let [[_ modifiers]  (calc-modifiers @last-pos)]
-               (st/emit! (dwm/apply-wasm-modifiers modifiers)
-                         (dwt/finish-transform))))
-
            (reset! resizing nil)
            (reset! start nil)
            (reset! original-value 0)
-           (when (not (features/active-feature? @st/state "render-wasm/v1"))
-             (st/emit! (dwm/apply-modifiers)))))
+           (st/emit! (dwm/apply-modifiers))))
 
         on-pointer-move
         (mf/use-fn
-         (mf/deps calc-modifiers on-change)
+         (mf/deps frame-id gap-type gap)
          (fn [event]
            (let [pos (dom/get-client-position event)]
-             (reset! last-pos pos)
              (reset! mouse-pos (point->viewport pos))
              (when (= @resizing gap-type)
-               (let [[val modifiers]  (calc-modifiers pos)]
+               (let [delta      (-> (gpt/to-vec @start pos)
+                                    (cond-> negate? gpt/negate)
+                                    (get axis))
+                     val            (int (max (+ @original-value (/ delta zoom)) 0))
+                     layout-gap (assoc gap gap-type val)
+                     modifiers  (dwm/create-modif-tree [frame-id] (ctm/change-property (ctm/empty) :layout-gap layout-gap))]
+
                  (reset! hover-value val)
-                 (if (features/active-feature? @st/state "render-wasm/v1")
-                   (st/emit! (dwm/set-wasm-modifiers modifiers))
-                   (st/emit! (dwm/set-modifiers modifiers)))
-                 (when on-change
-                   (on-change modifiers)))))))]
+                 (st/emit! (dwm/set-modifiers modifiers)))))))]
 
     [:g.gap-rect
      [:rect.info-area
@@ -147,17 +120,10 @@
         pill-width                 (/ fcc/flex-display-pill-width zoom)
         pill-height                (/ fcc/flex-display-pill-height zoom)
         workspace-modifiers        (mf/deref refs/workspace-modifiers)
-        workspace-wasm-modifiers   (mf/deref refs/workspace-wasm-modifiers)
-
         gap-selected               (mf/deref refs/workspace-gap-selected)
         hover                      (mf/use-state nil)
         hover-value                (mf/use-state 0)
         mouse-pos                  (mf/use-state nil)
-        current-modifiers          (mf/use-state nil)
-
-        frame
-        (ctm/apply-structure-modifiers frame (dm/get-in @current-modifiers [frame-id :modifiers]))
-
         padding                    (:layout-padding frame)
         gap                        (:layout-gap frame)
         {:keys [width height x1 y1]} (:selrect frame)
@@ -166,12 +132,6 @@
                                      (reset! hover-value val))
 
         on-pointer-leave           #(reset! hover nil)
-
-        on-change
-        (mf/use-fn
-         (fn [modifiers]
-           (reset! current-modifiers modifiers)))
-
         negate                     {:column-gap (if flip-x true false)
                                     :row-gap (if flip-y true false)}
 
@@ -183,16 +143,8 @@
                                     (= :column-reverse saved-dir))
                               (drop-last children)
                               (rest children))
-        children-to-display
-        (if (features/active-feature? @st/state "render-wasm/v1")
-          (let [modifiers (into {} workspace-wasm-modifiers)]
-            (->> children-to-display
-                 ;;(map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers])))
-                 (map (fn [shape]
-                        (gsh/apply-transform shape (get modifiers (:id shape)))))))
-
-          (->> children-to-display
-               (map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers])))))
+        children-to-display (->> children-to-display
+                                 (map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers]))))
 
         wrap-blocks
         (let [block-children (->> children
@@ -320,22 +272,20 @@
     [:g.gaps {:pointer-events "visible"}
      (for [[index display-item] (d/enumerate (concat display-blocks display-children))]
        (let [gap-type (:gap-type display-item)]
-         [:& gap-display
-          {:key (str frame-id index)
-           :frame-id frame-id
-           :zoom zoom
-           :gap-type gap-type
-           :gap gap
-           :on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
-           :on-pointer-leave on-pointer-leave
-           :on-move-selected on-move-selected
-           :on-context-menu on-context-menu
-           :on-change on-change
-           :rect-data display-item
-           :hover?    (= @hover gap-type)
-           :selected? (= gap-selected gap-type)
-           :mouse-pos mouse-pos
-           :hover-value hover-value}]))
+         [:& gap-display {:key (str frame-id index)
+                          :frame-id frame-id
+                          :zoom zoom
+                          :gap-type gap-type
+                          :gap gap
+                          :on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
+                          :on-pointer-leave on-pointer-leave
+                          :on-move-selected on-move-selected
+                          :on-context-menu on-context-menu
+                          :rect-data display-item
+                          :hover?    (= @hover gap-type)
+                          :selected? (= gap-selected gap-type)
+                          :mouse-pos mouse-pos
+                          :hover-value hover-value}]))
 
      (when @hover
        [:& fcc/flex-display-pill

frontend/src/app/main/ui/flex_controls/margin.cljs

@@ -6,12 +6,9 @@
 
 (ns app.main.ui.flex-controls.margin
   (:require
-   [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.types.modifiers :as ctm]
    [app.main.data.workspace.modifiers :as dwm]
-   [app.main.data.workspace.transforms :as dwt]
-   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.css-cursors :as cur]
@@ -20,14 +17,11 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(mf/defc margin-display
-  [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin
-           on-pointer-enter on-pointer-leave on-change
-           rect-data hover? selected? mouse-pos hover-value]}]
+(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave
+                                 rect-data hover? selected? mouse-pos hover-value]}]
   (let [resizing?            (mf/use-var false)
         start                (mf/use-var nil)
         original-value       (mf/use-var 0)
-        last-pos             (mf/use-var nil)
         negate?              (true? (:resize-negate? rect-data))
         axis                 (:resize-axis rect-data)
 
@@ -40,69 +34,39 @@
            (reset! start (dom/get-client-position event))
            (reset! original-value (:initial-value rect-data))))
 
-        calc-modifiers
-        (mf/use-fn
-         (mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?)
-         (fn [pos]
-           (let [delta
-                 (-> (gpt/to-vec @start pos)
-                     (cond-> negate? gpt/negate)
-                     (get axis))
-
-                 val
-                 (int (max (+ @original-value (/ delta zoom)) 0))
-
-                 layout-item-margin
-                 (cond
-                   hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val)
-                   hover-v?   (assoc margin :m1 val :m3 val)
-                   hover-h?   (assoc margin :m2 val :m4 val)
-                   :else      (assoc margin margin-num val))
-
-                 layout-item-margin-type
-                 (if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)]
-
-             [val
-              (dwm/create-modif-tree
-               [shape-id]
-               (-> (ctm/empty)
-                   (ctm/change-property  :layout-item-margin layout-item-margin)
-                   (ctm/change-property  :layout-item-margin-type layout-item-margin-type)))])))
-
         on-lost-pointer-capture
         (mf/use-fn
-         (mf/deps calc-modifiers)
+         (mf/deps shape-id margin-num margin)
          (fn [event]
            (dom/release-pointer event)
-
-           (when (features/active-feature? @st/state "render-wasm/v1")
-             (let [[_ modifiers]  (calc-modifiers @last-pos)]
-               (st/emit! (dwm/apply-wasm-modifiers modifiers)
-                         (dwt/finish-transform))))
-
            (reset! resizing? false)
            (reset! start nil)
            (reset! original-value 0)
-
-           (when (not (features/active-feature? @st/state "render-wasm/v1"))
-             (st/emit! (dwm/apply-modifiers)))))
+           (st/emit! (dwm/apply-modifiers))))
 
         on-pointer-move
         (mf/use-fn
-         (mf/deps calc-modifiers on-change)
+         (mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?)
          (fn [event]
            (let [pos (dom/get-client-position event)]
              (reset! mouse-pos (point->viewport pos))
-             (reset! last-pos pos)
              (when @resizing?
-               (let [[val modifiers] (calc-modifiers pos)]
+               (let [delta          (-> (gpt/to-vec @start pos)
+                                        (cond-> negate? gpt/negate)
+                                        (get axis))
+                     val            (int (max (+ @original-value (/ delta zoom)) 0))
+                     layout-item-margin (cond
+                                          hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val)
+                                          hover-v?   (assoc margin :m1 val :m3 val)
+                                          hover-h?   (assoc margin :m2 val :m4 val)
+                                          :else      (assoc margin margin-num val))
+                     layout-item-margin-type (if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)
+                     modifiers      (dwm/create-modif-tree [shape-id]
+                                                           (-> (ctm/empty)
+                                                               (ctm/change-property  :layout-item-margin layout-item-margin)
+                                                               (ctm/change-property  :layout-item-margin-type layout-item-margin-type)))]
                  (reset! hover-value val)
-                 (if (features/active-feature? @st/state "render-wasm/v1")
-                   (st/emit! (dwm/set-wasm-modifiers modifiers))
-                   (st/emit! (dwm/set-modifiers modifiers)))
-
-                 (when on-change
-                   (on-change modifiers)))))))]
+                 (st/emit! (dwm/set-modifiers modifiers)))))))]
 
     [:rect.margin-rect
      {:x (:x rect-data)
@@ -125,11 +89,6 @@
         pill-width                 (/ fcc/flex-display-pill-width zoom)
         pill-height                (/ fcc/flex-display-pill-height zoom)
         margins-selected           (mf/deref refs/workspace-margins-selected)
-        current-modifiers          (mf/use-state nil)
-
-        shape
-        (ctm/apply-structure-modifiers shape (dm/get-in @current-modifiers [shape-id :modifiers]))
-
         hover-value                (mf/use-state 0)
         mouse-pos                  (mf/use-state nil)
         hover                      (mf/use-state nil)
@@ -138,67 +97,50 @@
         hover-h?                   (and (or (= @hover :m2) (= @hover :m4)) shift?)
         margin                    (:layout-item-margin shape)
         {:keys [width height x1 x2 y1 y2]} (:selrect shape)
-
-        on-pointer-enter
-        (mf/use-fn
-         (fn [hover-type val]
-           (reset! hover hover-type)
-           (reset! hover-value val)))
-
-        on-pointer-leave
-        (mf/use-fn
-         (fn []
-           (reset! hover nil)))
-
-        on-change
-        (mf/use-fn
-         (fn [modifiers]
-           (reset! current-modifiers modifiers)))
-
-        hover?
-        (fn [value]
-          (or hover-all?
-              (and (or (= value :m1) (= value :m3)) hover-v?)
-              (and (or (= value :m2) (= value :m4)) hover-h?)
-              (= @hover value)))
-
-        margin-display-data
-        {:m1 {:key (str shape-id "-m1")
-              :x x1
-              :y (if (:flip-y frame) y2 (- y1 (:m1 margin)))
-              :width width
-              :height (:m1 margin)
-              :initial-value (:m1 margin)
-              :resize-type :top
-              :resize-axis :y
-              :resize-negate? (:flip-y frame)}
-         :m2 {:key (str shape-id "-m2")
-              :x (if (:flip-x frame) (- x1 (:m2 margin)) x2)
-              :y y1
-              :width (:m2 margin)
-              :height height
-              :initial-value (:m2 margin)
-              :resize-type :left
-              :resize-axis :x
-              :resize-negate? (:flip-x frame)}
-         :m3 {:key (str shape-id "-m3")
-              :x x1
-              :y (if (:flip-y frame) (- y1 (:m3 margin)) y2)
-              :width width
-              :height (:m3 margin)
-              :initial-value (:m3 margin)
-              :resize-type :top
-              :resize-axis :y
-              :resize-negate? (:flip-y frame)}
-         :m4 {:key (str shape-id "-m4")
-              :x (if (:flip-x frame) x2 (- x1 (:m4 margin)))
-              :y y1
-              :width (:m4 margin)
-              :height height
-              :initial-value (:m4 margin)
-              :resize-type :left
-              :resize-axis :x
-              :resize-negate? (:flip-x frame)}}]
+        on-pointer-enter          (fn [hover-type val]
+                                    (reset! hover hover-type)
+                                    (reset! hover-value val))
+        on-pointer-leave           #(reset! hover nil)
+        hover? #(or hover-all?
+                    (and (or (= % :m1) (= % :m3)) hover-v?)
+                    (and (or (= % :m2) (= % :m4)) hover-h?)
+                    (= @hover %))
+        margin-display-data       {:m1 {:key (str shape-id "-m1")
+                                        :x x1
+                                        :y (if (:flip-y frame) y2 (- y1 (:m1 margin)))
+                                        :width width
+                                        :height (:m1 margin)
+                                        :initial-value (:m1 margin)
+                                        :resize-type :top
+                                        :resize-axis :y
+                                        :resize-negate? (:flip-y frame)}
+                                   :m2 {:key (str shape-id "-m2")
+                                        :x (if (:flip-x frame) (- x1 (:m2 margin)) x2)
+                                        :y y1
+                                        :width (:m2 margin)
+                                        :height height
+                                        :initial-value (:m2 margin)
+                                        :resize-type :left
+                                        :resize-axis :x
+                                        :resize-negate? (:flip-x frame)}
+                                   :m3 {:key (str shape-id "-m3")
+                                        :x x1
+                                        :y (if (:flip-y frame) (- y1 (:m3 margin)) y2)
+                                        :width width
+                                        :height (:m3 margin)
+                                        :initial-value (:m3 margin)
+                                        :resize-type :top
+                                        :resize-axis :y
+                                        :resize-negate? (:flip-y frame)}
+                                   :m4 {:key (str shape-id "-m4")
+                                        :x (if (:flip-x frame) x2 (- x1 (:m4 margin)))
+                                        :y y1
+                                        :width (:m4 margin)
+                                        :height height
+                                        :initial-value (:m4 margin)
+                                        :resize-type :left
+                                        :resize-axis :x
+                                        :resize-negate? (:flip-x frame)}}]
 
     [:g.margins {:pointer-events "visible"}
      (for [[margin-num rect-data] margin-display-data]
@@ -213,7 +155,6 @@
          :margin margin
          :on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
          :on-pointer-leave on-pointer-leave
-         :on-change on-change
          :rect-data rect-data
          :hover?  (hover? margin-num)
          :selected? (get margins-selected margin-num)

frontend/src/app/main/ui/flex_controls/padding.cljs

@@ -6,12 +6,9 @@
 
 (ns app.main.ui.flex-controls.padding
   (:require
-   [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.types.modifiers :as ctm]
    [app.main.data.workspace.modifiers :as dwm]
-   [app.main.data.workspace.transforms :as dwt]
-   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.css-cursors :as cur]
@@ -21,13 +18,11 @@
    [rumext.v2 :as mf]))
 
 (mf/defc padding-display
-  [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter
-           on-pointer-leave rect-data hover? selected? mouse-pos hover-value on-move-selected
-           on-context-menu on-change]}]
+  [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter on-pointer-leave
+           rect-data hover? selected? mouse-pos hover-value on-move-selected on-context-menu]}]
   (let [resizing?            (mf/use-var false)
         start                (mf/use-var nil)
         original-value       (mf/use-var 0)
-        last-pos             (mf/use-var nil)
         negate?              (true? (:resize-negate? rect-data))
         axis                 (:resize-axis rect-data)
 
@@ -40,69 +35,41 @@
            (reset! start (dom/get-client-position event))
            (reset! original-value (:initial-value rect-data))))
 
-        calc-modifiers
-        (mf/use-fn
-         (mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?)
-         (fn [pos]
-           (let [delta
-                 (-> (gpt/to-vec @start pos)
-                     (cond-> negate? gpt/negate)
-                     (get axis))
-
-                 val
-                 (int (max (+ @original-value (/ delta zoom)) 0))
-
-                 layout-padding
-                 (cond
-                   hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val)
-                   hover-v?   (assoc padding :p1 val :p3 val)
-                   hover-h?   (assoc padding :p2 val :p4 val)
-                   :else      (assoc padding padding-num val))
-
-
-                 layout-padding-type
-                 (if (= (:p1 padding) (:p2 padding) (:p3 padding) (:p4 padding)) :simple :multiple)]
-             [val
-              (dwm/create-modif-tree
-               [frame-id]
-               (-> (ctm/empty)
-                   (ctm/change-property  :layout-padding layout-padding)
-                   (ctm/change-property  :layout-padding-type layout-padding-type)))])))
-
         on-lost-pointer-capture
         (mf/use-fn
-         (mf/deps calc-modifiers)
+         (mf/deps frame-id padding-num padding)
          (fn [event]
            (dom/release-pointer event)
-
-           (when (features/active-feature? @st/state "render-wasm/v1")
-             (let [[_ modifiers]  (calc-modifiers @last-pos)]
-               (st/emit! (dwm/apply-wasm-modifiers modifiers)
-                         (dwt/finish-transform))))
-
            (reset! resizing? false)
            (reset! start nil)
            (reset! original-value 0)
-
-           (when (not (features/active-feature? @st/state "render-wasm/v1"))
-             (st/emit! (dwm/apply-modifiers)))))
+           (st/emit! (dwm/apply-modifiers))))
 
         on-pointer-move
         (mf/use-fn
-         (mf/deps calc-modifiers on-change)
+         (mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?)
          (fn [event]
            (let [pos (dom/get-client-position event)]
              (reset! mouse-pos (point->viewport pos))
-             (reset! last-pos pos)
              (when @resizing?
-               (let [[val modifiers] (calc-modifiers pos)]
-                 (reset! hover-value val)
-                 (if (features/active-feature? @st/state "render-wasm/v1")
-                   (st/emit! (dwm/set-wasm-modifiers modifiers))
-                   (st/emit! (dwm/set-modifiers modifiers)))
+               (let [delta               (-> (gpt/to-vec @start pos)
+                                             (cond-> negate? gpt/negate)
+                                             (get axis))
+                     val                 (int (max (+ @original-value (/ delta zoom)) 0))
+                     layout-padding      (cond
+                                           hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val)
+                                           hover-v?   (assoc padding :p1 val :p3 val)
+                                           hover-h?   (assoc padding :p2 val :p4 val)
+                                           :else      (assoc padding padding-num val))
 
-                 (when on-change
-                   (on-change modifiers)))))))]
+
+                     layout-padding-type (if (= (:p1 padding) (:p2 padding) (:p3 padding) (:p4 padding)) :simple :multiple)
+                     modifiers           (dwm/create-modif-tree [frame-id]
+                                                                (-> (ctm/empty)
+                                                                    (ctm/change-property  :layout-padding layout-padding)
+                                                                    (ctm/change-property  :layout-padding-type layout-padding-type)))]
+                 (reset! hover-value val)
+                 (st/emit! (dwm/set-modifiers modifiers)))))))]
 
     [:g.padding-rect
      [:rect.info-area
@@ -138,108 +105,77 @@
          :on-lost-pointer-capture on-lost-pointer-capture
          :on-pointer-move on-pointer-move
          :on-context-menu on-context-menu
-         :class
-         (when (or hover? selected?)
-           (if (= (:resize-axis rect-data) :x)
-             (cur/get-dynamic "resize-ew" 0)
-             (cur/get-dynamic "resize-ew" 90)))
-
-         :style
-         {:fill (if (or hover? selected?) fcc/distance-color "none")
-          :opacity (if selected? 0 1)}}])]))
+         :class (when (or hover? selected?)
+                  (if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90)))
+         :style {:fill (if (or hover? selected?) fcc/distance-color "none")
+                 :opacity (if selected? 0 1)}}])]))
 
 (mf/defc padding-rects
   [{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}]
   (let [frame-id                           (:id frame)
         paddings-selected                  (mf/deref refs/workspace-paddings-selected)
-        current-modifiers                  (mf/use-state nil)
-
-        frame
-        (ctm/apply-structure-modifiers frame (dm/get-in @current-modifiers [frame-id :modifiers]))
-
         hover-value                        (mf/use-state 0)
         mouse-pos                          (mf/use-state nil)
         hover                              (mf/use-state nil)
-
         hover-all?                         (and (not (nil? @hover)) alt?)
         hover-v?                           (and (or (= @hover :p1) (= @hover :p3)) shift?)
         hover-h?                           (and (or (= @hover :p2) (= @hover :p4)) shift?)
         padding                            (:layout-padding frame)
         {:keys [width height x1 x2 y1 y2]} (:selrect frame)
+        on-pointer-enter                   (fn [hover-type val]
+                                             (reset! hover hover-type)
+                                             (reset! hover-value val))
+        on-pointer-leave                   #(reset! hover nil)
         pill-width                         (/ fcc/flex-display-pill-width zoom)
         pill-height                        (/ fcc/flex-display-pill-height zoom)
+        hover?                             #(or hover-all?
+                                                (and (or (= % :p1) (= % :p3)) hover-v?)
+                                                (and (or (= % :p2) (= % :p4)) hover-h?)
+                                                (= @hover %))
+        negate                             {:p1 (if (:flip-y frame) true false)
+                                            :p2 (if (:flip-x frame) true false)
+                                            :p3 (if (:flip-y frame) true false)
+                                            :p4 (if (:flip-x frame) true false)}
+        negate                             (cond-> negate
+                                             (not= :auto (:layout-item-h-sizing frame)) (assoc :p2 (not (:p2 negate)))
+                                             (not= :auto (:layout-item-v-sizing frame)) (assoc :p3 (not (:p3 negate))))
 
-        negate
-        {:p1 (if (:flip-y frame) true false)
-         :p2 (if (:flip-x frame) true false)
-         :p3 (if (:flip-y frame) true false)
-         :p4 (if (:flip-x frame) true false)}
-
-        negate
-        (cond-> negate
-          (not= :auto (:layout-item-h-sizing frame)) (assoc :p2 (not (:p2 negate)))
-          (not= :auto (:layout-item-v-sizing frame)) (assoc :p3 (not (:p3 negate))))
-
-        padding-rect-data
-        {:p1 {:key (str frame-id "-p1")
-              :x x1
-              :y (if (:flip-y frame) (- y2 (:p1 padding)) y1)
-              :width width
-              :height (:p1 padding)
-              :initial-value (:p1 padding)
-              :resize-type (if (:flip-y frame) :bottom :top)
-              :resize-axis :y
-              :resize-negate? (:p1 negate)}
-         :p2 {:key (str frame-id "-p2")
-              :x (if (:flip-x frame) x1 (- x2 (:p2 padding)))
-              :y y1
-              :width (:p2 padding)
-              :height height
-              :initial-value (:p2 padding)
-              :resize-type :left
-              :resize-axis :x
-              :resize-negate? (:p2 negate)}
-         :p3 {:key (str frame-id "-p3")
-              :x x1
-              :y (if (:flip-y frame) y1 (- y2 (:p3 padding)))
-              :width width
-              :height (:p3 padding)
-              :initial-value (:p3 padding)
-              :resize-type :bottom
-              :resize-axis :y
-              :resize-negate? (:p3 negate)}
-         :p4 {:key (str frame-id "-p4")
-              :x (if (:flip-x frame) (- x2 (:p4 padding)) x1)
-              :y y1
-              :width (:p4 padding)
-              :height height
-              :initial-value (:p4 padding)
-              :resize-type (if (:flip-x frame) :right :left)
-              :resize-axis :x
-              :resize-negate? (:p4 negate)}}
-
-        on-pointer-enter
-        (mf/use-fn
-         (fn [hover-type val]
-           (reset! hover hover-type)
-           (reset! hover-value val)))
-
-        on-pointer-leave
-        (mf/use-fn
-         (fn []
-           (reset! hover nil)))
-
-        on-change
-        (mf/use-fn
-         (fn [modifiers]
-           (reset! current-modifiers modifiers)))
-
-        hover?
-        (fn [value]
-          (or hover-all?
-              (and (or (= value :p1) (= value :p3)) hover-v?)
-              (and (or (= value :p2) (= value :p4)) hover-h?)
-              (= @hover value)))]
+        padding-rect-data                  {:p1 {:key (str frame-id "-p1")
+                                                 :x x1
+                                                 :y (if (:flip-y frame) (- y2 (:p1 padding)) y1)
+                                                 :width width
+                                                 :height (:p1 padding)
+                                                 :initial-value (:p1 padding)
+                                                 :resize-type (if (:flip-y frame) :bottom :top)
+                                                 :resize-axis :y
+                                                 :resize-negate? (:p1 negate)}
+                                            :p2 {:key (str frame-id "-p2")
+                                                 :x (if (:flip-x frame) x1 (- x2 (:p2 padding)))
+                                                 :y y1
+                                                 :width (:p2 padding)
+                                                 :height height
+                                                 :initial-value (:p2 padding)
+                                                 :resize-type :left
+                                                 :resize-axis :x
+                                                 :resize-negate? (:p2 negate)}
+                                            :p3 {:key (str frame-id "-p3")
+                                                 :x x1
+                                                 :y (if (:flip-y frame) y1 (- y2 (:p3 padding)))
+                                                 :width width
+                                                 :height (:p3 padding)
+                                                 :initial-value (:p3 padding)
+                                                 :resize-type :bottom
+                                                 :resize-axis :y
+                                                 :resize-negate? (:p3 negate)}
+                                            :p4 {:key (str frame-id "-p4")
+                                                 :x (if (:flip-x frame) (- x2 (:p4 padding)) x1)
+                                                 :y y1
+                                                 :width (:p4 padding)
+                                                 :height height
+                                                 :initial-value (:p4 padding)
+                                                 :resize-type (if (:flip-x frame) :right :left)
+                                                 :resize-axis :x
+                                                 :resize-negate? (:p4 negate)}}]
 
     [:g.paddings {:pointer-events "visible"}
      (for [[padding-num rect-data] padding-rect-data]
@@ -258,11 +194,9 @@
          :on-pointer-leave on-pointer-leave
          :on-move-selected on-move-selected
          :on-context-menu on-context-menu
-         :on-change on-change
          :hover?  (hover? padding-num)
          :selected? (get paddings-selected padding-num)
          :rect-data rect-data}])
-
      (when @hover
        [:& fcc/flex-display-pill
         {:height pill-height

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

@@ -12,13 +12,12 @@
    [app.main.data.event :as ev]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
-   [app.main.ui.inspect.attributes :refer [attributes*]]
-   [app.main.ui.inspect.code :refer [code*]]
+   [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.selection-feedback :refer [resolve-shapes]]
    [app.main.ui.inspect.styles :refer [styles-tab*]]
    [app.util.dom :as dom]
@@ -123,7 +122,8 @@
      (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)))))
+         (handle-change-tab (if (contains? cf/flags :inspect-styles) :styles :info)))
+       (reset! color-space* "hex")))
 
     [:aside {:class (stl/css-case :settings-bar-right true
                                   :viewer-code (= from :viewer))}
@@ -189,49 +189,52 @@
                                :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}])])]]
-
-       [:*
-        [:div {:class (stl/css :empty)}
-         [:> empty-state* {:icon i/code
-                           :text (tr "inspect.empty.select")}]
-         [:> empty-state* {:icon i/help
-                           :text (tr "inspect.empty.help")}]]
-        [:div {:class (stl/css :empty-button)}
-         [:> button* {:variant "secondary"
-                      :on-click navigate-to-help}
-          (tr "inspect.empty.more")]]])]))
+              [:& 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)}
+          deprecated-icon/code]
+         [:span {:class (stl/css :placeholder-label)}
+          (tr "inspect.empty.select")]]
+        [:div {:class (stl/css :help-info)}
+         [:span {:class (stl/css :placeholder-icon)}
+          deprecated-icon/help]
+         [:span {:class (stl/css :placeholder-label)}
+          (tr "inspect.empty.help")]]
+        [:button {:class (stl/css :more-info-btn)
+                  :on-click navigate-to-help}
+         (tr "inspect.empty.more-info")]])]))

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

@@ -81,14 +81,36 @@
 .empty {
   display: flex;
   flex-direction: column;
-  gap: var(--sp-xxxl);
-  margin: var(--sp-xxxl) auto;
-  inline-size: $sz-200;
+  align-items: center;
+  gap: $sz-40;
+  padding-top: $sz-24;
 }
 
-.empty-button {
-  display: flex;
-  justify-content: center;
+.code-info,
+.help-info {
+  @include deprecated.flexColumn;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sp-m);
+  margin-inline-end: var(--sp-s);
+}
+
+.placeholder-icon {
+  @extend .empty-icon;
+}
+
+.placeholder-label {
+  @include deprecated.bodySmallTypography;
+  text-align: center;
+  inline-size: px2rem(200);
+  color: var(--empty-message-foreground-color);
+}
+
+.more-info-btn {
+  @extend .button-secondary;
+  @include deprecated.uppercaseTitleTipography;
+  block-size: $sz-32;
+  padding: var(--sp-s) var(--sp-xxl);
 }
 
 .inspect-tab-switcher {

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 (seq active-themes) (seq active-sets))
+     (when (or active-themes 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,15 +6,6 @@
 
 @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);
@@ -22,9 +13,12 @@
   --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(--low-emphasis-background);
+  background-color: var(--lowEmphasis-background);
 
   border-block-end: 2px solid var(--box-border-color);
 }

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- make-management-form-schema [min-editors]
+(defn schema:seats-form [min-editors]
   [:map {:title "SeatsForm"}
    [:min-members [::sm/number {:min min-editors
                                :max 9999}]]
@@ -87,6 +87,7 @@
   {::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)
 
@@ -111,12 +112,9 @@
           {: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 :initial initial)
+        (fm/use-form :schema (schema:seats-form min-editors)
+                     :initial initial)
 
         submit-in-progress
         (mf/use-ref false)
@@ -336,15 +334,11 @@
         [:> 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
@@ -424,11 +418,7 @@
     (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/shapes/text.cljs

@@ -28,7 +28,6 @@
   {::mf/wrap-props false}
   [props]
   (let [{:keys [position-data content] :as shape} (obj/get props "shape")
-        is-render? (mf/use-ctx ctx/is-render?)
         is-component? (mf/use-ctx ctx/is-component?)]
 
     (mf/with-memo [content]
@@ -42,5 +41,5 @@
       ;; Only use this for component preview, otherwise the dashboard thumbnails
       ;; will give a tainted canvas error because the `foreignObject` cannot be
       ;; rendered.
-      (and (nil? position-data) (or is-component? is-render?))
+      (and (nil? position-data) is-component?)
       [:> fo/text-shape props])))

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-size on-resize-palette}])
+       [:& palette {:layout layout
+                    :on-change-palette-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 "width")
+                             x-size (dom/get-data left-sidebar "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/comments.cljs

@@ -18,7 +18,6 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -161,5 +160,6 @@
              :key (:page-id tgroup)}])]
 
         [:div {:class (stl/css :thread-group-placeholder)}
-         [:> empty-state* {:icon i/comments
-                           :text (tr "labels.no-comments-available")}]])]]))
+         [:span {:class (stl/css :placeholder-icon)} deprecated-icon/comments]
+         [:span {:class (stl/css :placeholder-label)}
+          (tr "labels.no-comments-available")]])]]))

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

@@ -4,7 +4,6 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "ds/_sizes.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .comments-section {
@@ -129,9 +128,29 @@
 }
 
 .thread-group-placeholder {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xxxl);
-  margin: var(--sp-xxxl) auto;
-  inline-size: $sz-200;
+  @include deprecated.flexColumn;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: deprecated.$s-36;
+}
+
+.placeholder-icon {
+  @include deprecated.flexCenter;
+  height: deprecated.$s-48;
+  width: deprecated.$s-48;
+  border-radius: deprecated.$br-circle;
+  background-color: var(--empty-message-background-color);
+  svg {
+    @extend .button-icon;
+    height: deprecated.$s-28;
+    width: deprecated.$s-28;
+    stroke: var(--empty-message-foreground-color);
+  }
+}
+
+.placeholder-label {
+  @include deprecated.bodySmallTypography;
+  text-align: center;
+  width: deprecated.$s-184;
+  color: var(--empty-message-foreground-color);
 }

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

@@ -33,7 +33,6 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.color :as uc]
@@ -50,6 +49,9 @@
 (def ^:private add-icon
   (deprecated-icon/icon-xref :add (stl/css :add-icon)))
 
+(def ^:private library-icon
+  (deprecated-icon/icon-xref :library (stl/css :library-icon)))
+
 (defn- get-library-summary
   "Given a library data return a summary representation of this library"
   [data]
@@ -491,8 +493,9 @@
      [:div {:class (stl/css :update-section)}
       (if (empty? libs-assets)
         [:div {:class (stl/css :section-list-empty)}
-         [:> empty-state* {:icon i/library
-                           :text (tr "workspace.libraries.no-libraries-need-sync")}]]
+         [:span {:class (stl/css :empty-state-icon)}
+          library-icon]
+         (tr "workspace.libraries.no-libraries-need-sync")]
         [:*
          [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
 

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

@@ -192,6 +192,7 @@
 
 // empty state
 .section-list-empty {
+  @include t.use-typography("body-medium");
   display: grid;
   grid-template-rows: auto 1fr;
   justify-items: center;
@@ -199,6 +200,17 @@
   text-align: center;
   height: fit-content;
   margin-block: var(--sp-l);
+  color: var(--modal-title-foreground-color);
+}
+
+.empty-state-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $sz-48;
+  height: $sz-48;
+  border-radius: $br-circle;
+  background-color: var(--pill-background-color);
 }
 
 .library-icon {

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

@@ -33,13 +33,12 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def ^:private ref:viewport
+(def viewport
   (l/derived :vport refs/workspace-local))
 
-(defn- calculate-palette-style
-  [rulers?]
+(defn calculate-palette-padding [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (-> (dom/get-data left-sidebar "width")
+        left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
                                    (d/parse-integer))
         rulers-width           (if rulers? 22 0)
         min-left-sidebar-width left-sidebar-default-width
@@ -49,46 +48,36 @@
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
          "paddingRight" "322px"}))
 
-(mf/defc palette*
-  [{:keys [layout on-change-size]}]
-  (let [color-palette? (:colorpalette layout)
-        text-palette?  (:textpalette layout)
-        hide-palettes? (:hide-palettes layout)
+(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)
 
-        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)
+        vport (mf/deref viewport)
+        vport-width (:width vport)
 
         on-resize
-        (mf/use-fn
+        (mf/use-callback
          (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
              (swap! state* assoc :width width))))
 
         on-close-menu
-        (mf/use-fn
+        (mf/use-callback
          (fn [_]
            (swap! state* assoc :show-menu false)))
 
@@ -111,7 +100,7 @@
              (reset! selected-text* (:id lib)))))
 
         toggle-palettes
-        (mf/use-fn
+        (mf/use-callback
          (fn [_]
            (r/set-resize-type! :top)
            (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
@@ -142,9 +131,7 @@
                                              (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)
@@ -155,16 +142,16 @@
       (let [key1 (events/listen js/window "resize" on-resize)]
         #(events/unlistenByKey key1)))
 
-    (mf/with-layout-effect []
-      (let [dom     (mf/ref-val parent-ref)
+    (mf/use-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-style rulers?)
+           :style  (calculate-palette-padding rulers?)
            :data-testid "palette"}
-     (when-not ^boolean read-only?
+     (when-not workspace-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/shapes/text/text_edition_outline.cljs

@@ -12,20 +12,18 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.render-wasm.api :as wasm.api]
    [rumext.v2 :as mf]))
 
 (mf/defc text-edition-outline
   [{:keys [shape zoom modifiers]}]
   (if (features/active-feature? @st/state "render-wasm/v1")
-    (let [{:keys [width height]} (wasm.api/get-text-dimensions (:id shape))
-          selrect-transform (mf/deref refs/workspace-selrect)
-          [selrect transform] (dsh/get-selrect selrect-transform shape)]
+    (let [selrect-transform (mf/deref refs/workspace-selrect)
+          [{:keys [x y width height]} transform] (dsh/get-selrect selrect-transform shape)]
       [:rect.main.viewport-selrect
-       {:x (:x selrect)
-        :y (:y selrect)
-        :width (max width (:width selrect))
-        :height (max height (:height selrect))
+       {:x x
+        :y y
+        :width width
+        :height height
         :transform transform
         :style {:stroke "var(--color-accent-tertiary)"
                 :stroke-width (/ 1 zoom)

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs

@@ -320,12 +320,10 @@
 
         [{:keys [x y width height]} transform]
         (if render-wasm?
-          (let [{:keys [width height]} (wasm.api/get-text-dimensions shape-id)
+          (let [{:keys [height]} (wasm.api/get-text-dimensions shape-id)
                 selrect-transform (mf/deref refs/workspace-selrect)
                 [selrect transform] (dsh/get-selrect selrect-transform shape)
                 selrect-height (:height selrect)
-                selrect-width (:width selrect)
-                max-width (max width selrect-width)
                 max-height (max height selrect-height)
                 valign (-> shape :content :vertical-align)
                 y (:y selrect)
@@ -333,9 +331,9 @@
                     (case valign
                       "bottom" (- y (- height selrect-height))
                       "center" (- y (/ (- height selrect-height) 2))
-                      y)
+                      "top"    y)
                     y)]
-            [(assoc selrect :y y :width max-width :height max-height) transform])
+            [(assoc selrect :y y :width (:width selrect) :height max-height) transform])
 
           (let [bounds (gst/shape->rect shape)
                 x      (mth/min (dm/get-prop bounds :x)
@@ -354,7 +352,7 @@
           (obj/merge!
            #js {"--editor-container-width" (dm/str width "px")
                 "--editor-container-height" (dm/str height "px")
-                "--fallback-families" (if (seq fallback-families) (dm/str (str/join ", " fallback-families)) "sourcesanspro")})
+                "--fallback-families" (dm/str (str/join ", " fallback-families))})
 
           (not render-wasm?)
           (obj/merge!

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

@@ -27,6 +27,7 @@
    [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*]]
@@ -43,34 +44,19 @@
 
 ;; --- Left Sidebar (Component)
 
-(def ^:private toggle-collapse-left-sidebar
-  (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
+(defn- on-collapse-left-sidebar
+  []
+  (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 toggle-collapse-left-sidebar}
+            :on-click on-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}
@@ -111,7 +97,6 @@
 
      [:> layers-toolbox* {:size-parent width}]]))
 
-
 (mf/defc left-sidebar*
   {::mf/memo true}
   [{:keys [layout file page-id tokens-lib active-tokens resolved-active-tokens]}]
@@ -176,7 +161,7 @@
      [:aside {:ref parent-ref
               :id "left-sidebar-aside"
               :data-testid "left-sidebar"
-              :data-width (str width)
+              :data-left-sidebar-width (str width)
               :class aside-class
               :style {:--left-sidebar-width (dm/str width "px")}}
 

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

@@ -116,44 +116,6 @@
   }
 }
 
-.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,8 +56,9 @@
                (update file :data dissoc :pages-index))
              refs/file))
 
-(mf/defc assets-local-library*
-  {::mf/private true}
+(mf/defc assets-local-library
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
   [{:keys [filters]}]
   (let [file (mf/deref ref:local-library)]
     [:> file-library*
@@ -67,7 +68,7 @@
       :filters filters}]))
 
 (defn- toggle-values
-  [v a b]
+  [v [a b]]
   (if (= v a) b a))
 
 (mf/defc assets-toolbox*
@@ -96,7 +97,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))))
 
@@ -104,7 +105,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))))
 
@@ -208,5 +209,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 {
-      visibility: visible;
+      display: block;
     }
   }
 }
@@ -25,7 +25,7 @@
 }
 
 .title-menu {
-  visibility: hidden;
+  display: none;
 }
 
 .group-title {

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

@@ -0,0 +1,29 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.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

@@ -0,0 +1,45 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@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/history.cljs

@@ -12,8 +12,6 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr] :as i18n]
@@ -329,8 +327,8 @@
     [:div {:class (stl/css :history-toolbox)}
      (if (empty? entries)
        [:div {:class (stl/css :history-entry-empty)}
-        [:> empty-state* {:icon i/history
-                          :text (tr "workspace.undo.empty")}]]
+        [:div {:class (stl/css :history-entry-empty-icon)} deprecated-icon/history]
+        [:div {:class (stl/css :history-entry-empty-msg)} (tr "workspace.undo.empty")]]
        [:ul {:class (stl/css :history-entries)}
         (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)]
              [:& history-entry {:key (str "entry-" idx-entry)

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

@@ -4,7 +4,6 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "ds/_sizes.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .history-toolbox {
@@ -31,11 +30,23 @@
 }
 
 .history-entry-empty {
-  display: flex;
+  @include deprecated.flexCenter;
   flex-direction: column;
-  gap: var(--sp-xxxl);
-  margin: var(--sp-xxxl) auto;
-  inline-size: $sz-200;
+  gap: deprecated.$s-16;
+  padding: deprecated.$s-28 deprecated.$s-16;
+  text-align: center;
+}
+
+.history-entry-empty-icon {
+  @extend .empty-icon;
+  svg {
+    margin-left: calc(-1 * deprecated.$s-2);
+  }
+}
+
+.history-entry-empty-msg {
+  @include deprecated.bodySmallTypography;
+  color: var(--empty-message-foreground-color);
 }
 
 .history-entries {

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

@@ -3,15 +3,10 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.types.shape.radius :as ctsr]
-   [app.common.types.token :as tk]
    [app.main.data.workspace.shapes :as dwsh]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
-   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as hooks]
    [app.util.i18n :as i18n :refer [tr]]
@@ -26,15 +21,11 @@
 (defn- check-border-radius-menu-props
   [old-props new-props]
   (let [old-values (unchecked-get old-props "values")
-        new-values (unchecked-get new-props "values")
-        old-applied-tokens (unchecked-get old-props "applied-tokens")
-        new-applied-tokens (unchecked-get new-props "applied-tokens")]
+        new-values (unchecked-get new-props "values")]
     (and (identical? (unchecked-get old-props "class")
                      (unchecked-get new-props "class"))
          (identical? (unchecked-get old-props "ids")
                      (unchecked-get new-props "ids"))
-         (identical? old-applied-tokens
-                     new-applied-tokens)
          (identical? (get old-values :r1)
                      (get new-values :r1))
          (identical? (get old-values :r2)
@@ -44,64 +35,13 @@
          (identical? (get old-values :r4)
                      (get new-values :r4)))))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach radius] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach name)
-         #(on-detach % name))
-        
-        r1-value (get applied-tokens :r1)
-        r2-value (get applied-tokens :r2)
-        r3-value (get applied-tokens :r3)
-        r4-value (get applied-tokens :r4)
-        all-equal? (= r1-value r2-value r3-value r4-value)
-
-        applied-token (if (= :all radius)
-                        (if all-equal?
-                          r1-value
-                          :mixed)
-                        :mixed)
-        
-
-        props  (mf/spread-props props
-                                {:placeholder (if (or (= :multiple (:applied-tokens values))
-                                                      (= :multiple (get values name)))
-                                                (tr "settings.multiple") "--")
-                                 :class (stl/css :numeric-input-measures)
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value (get values name)})]
-    [:> numeric-input* props]))
-
 (mf/defc border-radius-menu*
   {::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
-  [{:keys [class ids values applied-tokens]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        all-equal?       (all-equal? values)
+  [{:keys [class ids values]}]
+  (let [all-equal?       (all-equal? values)
         radius-expanded* (mf/use-state false)
         radius-expanded  (deref radius-expanded*)
 
-        ;; DETACH
-        on-detach-token
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
-
         change-radius
         (mf/use-fn
          (mf/deps ids)
@@ -154,39 +94,23 @@
 
     [:div {:class (dm/str class " " (stl/css :radius))}
      (if (not radius-expanded)
-       (if token-numeric-inputs
-         [:div {:class (stl/css :radius-1)
-                :title (tr "workspace.options.radius")}
-          [:> numeric-input-wrapper*
-          {:on-change on-single-radius-change
-           :on-detach on-detach-token
-           :icon i/corner-radius
-           :min 0
-           :name :border-radius
-           :nillable true
-           :property (tr "workspace.options.width")
-           :applied-tokens applied-tokens
-           :radius :all
-           :values (if all-equal? (:r1 values) nil)}]]
-         
-         [:div {:class (stl/css :radius-1)
-                :title (tr "workspace.options.radius")}
-          [:> icon* {:icon-id i/corner-radius
-                     :size "s"
-                     :class (stl/css :icon)}]
-
-          [:* [:> deprecated-input/numeric-input*
-               {:placeholder (cond
-                               (not all-equal?)
-                               "Mixed"
-                               (= :multiple (:r1 values))
-                               (tr "settings.multiple")
-                               :else
-                               "--")
-                :min 0
-                :nillable true
-                :on-change on-single-radius-change
-                :value (if all-equal? (:r1 values) nil)}]]])
+       [:div {:class (stl/css :radius-1)
+              :title (tr "workspace.options.radius")}
+        [:> icon* {:icon-id i/corner-radius
+                   :size "s"
+                   :class (stl/css :icon)}]
+        [:> deprecated-input/numeric-input*
+         {:placeholder (cond
+                         (not all-equal?)
+                         "Mixed"
+                         (= :multiple (:r1 values))
+                         (tr "settings.multiple")
+                         :else
+                         "--")
+          :min 0
+          :nillable true
+          :on-change on-single-radius-change
+          :value (if all-equal? (:r1 values) nil)}]]
 
        [:div {:class (stl/css :radius-4)}
         [:div {:class (stl/css :small-input)}

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

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

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

@@ -24,8 +24,7 @@
    [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.ds.product.empty-state :refer [empty-state*]]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -776,11 +775,29 @@
      (when (= (count interactions) 0)
        [:div {:class (stl/css :section)}
         [:div {:class (stl/css :content)}
-         [:div {:class (stl/css :empty)}
+         [:div {:class (stl/css :help)}
+
           (when framed-shape?
-            [:> empty-state* {:icon i/add
-                              :text (tr "workspace.options.add-interaction")}])
-          [:> empty-state* {:icon i/interaction
-                            :text (tr "workspace.options.select-a-shape")}]
-          [:> empty-state* {:icon i/play
-                            :text (tr "workspace.options.use-play-button")}]]]])]))
+            [:div {:class (stl/css :help-group)}
+             [:div {:class (stl/css :help-icon)}
+              [:> icon* {:icon-id i/add
+                         :size "l"
+                         :class (stl/css :help-icon-inner)}]]
+             [:div {:class (stl/css :help-text)}
+              (tr "workspace.options.add-interaction")]])
+
+          [:div {:class (stl/css :help-group)}
+           [:div {:class (stl/css :help-icon)}
+            [:> icon* {:icon-id i/interaction
+                       :size "l"
+                       :class (stl/css :help-icon-inner)}]]
+           [:div {:class (stl/css :help-text)}
+            (tr "workspace.options.select-a-shape")]]
+
+          [:div {:class (stl/css :help-group)}
+           [:div {:class (stl/css :help-icon)}
+            [:> icon* {:icon-id i/play
+                       :size "l"
+                       :class (stl/css :help-icon-inner)}]]
+           [:div {:class (stl/css :help-text)}
+            (tr "workspace.options.use-play-button")]]]]])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -43,12 +43,40 @@
   gap: var(--sp-l);
 }
 
-.empty {
+.help {
   display: flex;
   flex-direction: column;
   gap: var(--sp-xxxl);
-  margin: var(--sp-xxxl) auto;
   inline-size: $sz-200;
+  padding: var(--sp-xxxl) 0;
+  margin: 0 auto;
+}
+
+.help-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sp-m);
+}
+
+.help-text {
+  @include t.use-typography("body-small");
+  text-align: center;
+  color: var(--color-foreground-secondary);
+}
+
+.help-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: $sz-48;
+  block-size: $sz-48;
+}
+
+.help-icon-inner {
+  color: var(--color-foreground-secondary);
+  inline-size: $sz-32;
+  block-size: $sz-32;
 }
 
 .interaction-item {

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

@@ -77,7 +77,7 @@
                                                       (nil? (get values name)))
                                                 (tr "settings.multiple")
                                                 "--")
-                                 :class (stl/css :numeric-input-layout)
+                                 :class (stl/css :numeric-input-measures)
                                  :applied-token (get applied-tokens name)
                                  :tokens tokens
                                  :align align