🐛 Fix stroke artifacts

🔧 Always mock config.js in Playwright

CHANGES.md

@@ -2,12 +2,6 @@
 
 ## 2.14.0 (Unreleased)
 
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
 ### :sparkles: New features & Enhancements
 
 - Access to design tokens in Penpot Plugins [Taiga #8990](https://tree.taiga.io/project/penpot/us/8990)
@@ -35,12 +29,18 @@
 - Fix viewer can update library [Taiga #13186](https://tree.taiga.io/project/penpot/issue/13186)
 - Fix remove fill affects different element than selected [Taiga #13128](https://tree.taiga.io/project/penpot/issue/13128)
 
+## 2.13.3
+
+### :bug: Bugs fixed
+
+- Revert yetti (http server) update, because that caused a regression on multipart uploads
+
 ## 2.13.2
 
 ### :bug: Bugs fixed
 
 - Fix modifying shapes by apply negative tokens to border radius [Taiga #13317](https://tree.taiga.io/project/penpot/issue/13317)
-- Fix security issue (Path Traversal Vulnerability) on fonts related RPC method
+- Fix arbitrary file read security issue on create-font-variant rpc method (https://github.com/penpot/penpot/security/advisories/GHSA-xp3f-g8rq-9px2)
 
 
 ## 2.13.1

backend/deps.edn

@@ -28,8 +28,8 @@
   com.google.guava/guava {:mvn/version "33.4.8-jre"}
 
   funcool/yetti
-  {:git/tag "v11.9"
-   :git/sha "5fad7a9"
+  {:git/tag "v11.8"
+   :git/sha "1d1b33f"
    :git/url "https://github.com/funcool/yetti.git"
    :exclusions [org.slf4j/slf4j-api]}
 

common/src/app/common/files/changes_builder.cljc

@@ -605,31 +605,31 @@
          add-undo-change-shape
          (fn [change-set id]
            (let [shape (get objects id)]
-             (conj
-              change-set
-              {:type :add-obj
-               :id id
-               :page-id page-id
-               :parent-id (:parent-id shape)
-               :frame-id (:frame-id shape)
-               :index (cfh/get-position-on-parent objects id)
-               :obj (cond-> shape
-                      (contains? shape :shapes)
-                      (assoc :shapes []))})))
+             (cond-> change-set
+               (some? shape)
+               (conj {:type :add-obj
+                      :id id
+                      :page-id page-id
+                      :parent-id (:parent-id shape)
+                      :frame-id (:frame-id shape)
+                      :index (cfh/get-position-on-parent objects id)
+                      :obj (cond-> shape
+                             (contains? shape :shapes)
+                             (assoc :shapes []))}))))
 
          add-undo-change-parent
          (fn [change-set id]
            (let [shape (get objects id)
                  prev-sibling (cfh/get-prev-sibling objects (:id shape))]
-             (conj
-              change-set
-              {:type :mov-objects
-               :page-id page-id
-               :parent-id (:parent-id shape)
-               :shapes [id]
-               :after-shape prev-sibling
-               :index 0
-               :ignore-touched true})))]
+             (cond-> change-set
+               (some? shape)
+               (conj {:type :mov-objects
+                      :page-id page-id
+                      :parent-id (:parent-id shape)
+                      :shapes [id]
+                      :after-shape prev-sibling
+                      :index 0
+                      :ignore-touched true}))))]
 
      (-> changes
          (update :redo-changes #(reduce add-redo-change % ids))
@@ -1150,3 +1150,24 @@
   [changes]
   (::page-id (meta changes)))
 
+
+(defn set-text-content
+  [changes id content prev-content]
+  (assert-page-id! changes)
+  (let [page-id (::page-id (meta changes))
+
+        redo-change
+        {:type :mod-obj
+         :page-id page-id
+         :id id
+         :operations [{:type :set :attr :content :val content}]}
+
+        undo-change
+        {:type :mod-obj
+         :page-id page-id
+         :id id
+         :operations [{:type :set :attr :content :val prev-content}]}]
+
+    (-> changes
+        (update :redo-changes conj redo-change)
+        (update :undo-changes conj undo-change))))

docker/images/Dockerfile.exporter

@@ -5,7 +5,8 @@ ENV LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8 \
     NODE_VERSION=v22.22.0 \
     DEBIAN_FRONTEND=noninteractive \
-    PATH=/opt/node/bin:/opt/imagick/bin:$PATH
+    PATH=/opt/node/bin:/opt/imagick/bin:$PATH \
+    PLAYWRIGHT_BROWSERS_PATH=/opt/penpot/browsers
 
 RUN set -ex; \
     useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot; \

exporter/scripts/build

@@ -15,6 +15,7 @@ pnpm run build;
 
 cp pnpm-lock.yaml target/;
 cp package.json target/;
+touch target/pnpm-workspace.yaml;
 
 cat <<EOF | tee target/setup
 #/usr/bin/env bash
@@ -22,7 +23,7 @@ set -e;
 corepack enable;
 corepack install;
 pnpm install
-pnpx playwright install chromium;
+pnpm exec playwright install chromium;
 EOF
 
 chmod +x target/setup;

frontend/package.json

@@ -40,8 +40,9 @@
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
+    "clear:wasm": "cargo clean --manifest-path ../render-wasm/Cargo.toml",
     "watch": "exit 0",
-    "watch:app": "pnpm run clear:shadow-cache && pnpm run build:wasm && concurrently --kill-others-on-fail \"pnpm run watch:app:assets\" \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
+    "watch:app": "pnpm run clear:shadow-cache && pnpm run clear:wasm && pnpm run build:wasm && concurrently --kill-others-on-fail \"pnpm run watch:app:assets\" \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
     "watch:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {

frontend/playwright/data/get-teams-variants.json

@@ -1,26 +0,0 @@
-[
-  {
-    "~:features": {
-      "~#set": [
-        "variants/v1",
-        "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
-    },
-    "~:name": "Default",
-    "~:modified-at": "~m1713533116375",
-    "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
-    "~:created-at": "~m1713533116375",
-    "~:is-default": true
-  }
-]

frontend/playwright/data/logged-in-user/get-profile-logged-in-no-onboarding.json

@@ -1,26 +0,0 @@
-{
-  "~:email": "foo@example.com",
-  "~:is-demo": false,
-  "~:auth-backend": "penpot",
-  "~:fullname": "Princesa Leia",
-  "~:modified-at": "~m1713533116365",
-  "~:is-active": true,
-  "~:default-project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
-  "~:id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
-  "~:is-muted": false,
-  "~:default-team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d",
-  "~:created-at": "~m1713533116365",
-  "~:is-blocked": false,
-  "~:props": {
-    "~:nudge": {
-      "~:big": 10,
-      "~:small": 1
-    },
-    "~:v2-info-shown": true,
-    "~:viewed-tutorial?": false,
-    "~:viewed-walkthrough?": false,
-    "~:onboarding-viewed": true,
-    "~:builtin-templates-collapsed-status":
-        true
-  }
-}

frontend/playwright/data/workspace/get-file-13382-fragment.json

@@ -0,0 +1,22 @@
+{
+  "~:file-id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+  "~:id": "~u4173a29d-4020-80b4-8007-96527ba9d8af",
+  "~:created-at": "~m1771342236330",
+  "~:modified-at": "~m1771342236330",
+  "~:type": "fragment",
+  "~:backend": "db",
+  "~:data": {
+    "~:id": "~uecb0cfd0-0f0b-81f7-8007-950628f9665b",
+    "~:name": "Page 1",
+    "~:objects": {
+      "~#penpot/objects-map/v2": {
+        "~ude9c6736-45ce-80a1-8007-950643da554d": "[\"~#shape\",[\"^ \",\"~:y\",383.99998939037323,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"R1\",\"~:width\",74,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",383.99998939037323]],[\"^<\",[\"^ \",\"~:x\",905.999992787838,\"~:y\",383.99998939037323]],[\"^<\",[\"^ \",\"~:x\",905.999992787838,\"~:y\",429.99998664855957]],[\"^<\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",429.99998664855957]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-950643da554d\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:strokes\",[],\"~:x\",831.999992787838,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",383.99998939037323,\"^8\",74,\"~:height\",45.99999725818634,\"~:x1\",831.999992787838,\"~:y1\",383.99998939037323,\"~:x2\",905.999992787838,\"~:y2\",429.99998664855957]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",45.99999725818634,\"~:flip-y\",null]]",
+        "~ude9c6736-45ce-80a1-8007-95065b4599ea": "[\"~#shape\",[\"^ \",\"~:y\",439.999969256975,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"R2\",\"~:width\",300.00007388362076,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",832.0000015918991,\"~:y\",439.99996925697496]],[\"^<\",[\"^ \",\"~:x\",1132.00007547552,\"~:y\",439.99996925697496]],[\"^<\",[\"^ \",\"~:x\",1132.00007547552,\"~:y\",589.9999658711585]],[\"^<\",[\"^ \",\"~:x\",832.0000015918991,\"~:y\",589.9999658711585]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:fix\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"^?\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95065b4599ea\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:strokes\",[],\"~:x\",832.0000015918993,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",832.0000015918993,\"~:y\",439.999969256975,\"^8\",300.00007388362076,\"~:height\",149.9999966141835,\"~:x1\",832.0000015918993,\"~:y1\",439.999969256975,\"~:x2\",1132.0000754755201,\"~:y2\",589.9999658711586]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",149.9999966141835,\"~:flip-y\",null]]",
+        "~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]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~: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,\"^6\",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,\"^I\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95062aa41d6b": "[\"~#shape\",[\"^ \",\"~:y\",342.0000208153068,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",false,\"~:name\",\"A\",\"~:layout-align-items\",\"~:start\",\"~:width\",392.9999889135361,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",342.0000208153068]],[\"^L\",[\"^ \",\"~:x\",1180.9999653100967,\"~:y\",342.0000208153068]],[\"^L\",[\"^ \",\"~:x\",1180.9999653100967,\"~:y\",704.000018450968]],[\"^L\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",704.000018450968]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",787.9999763965607,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",342.0000208153068,\"^F\",392.9999889135361,\"~:height\",361.9999976356612,\"~:x1\",787.9999763965607,\"~:y1\",342.0000208153068,\"~:x2\",1180.9999653100967,\"~:y2\",704.000018450968]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^19\",361.9999976356612,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95062fafbb88\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95063a202e52": "[\"~#shape\",[\"^ \",\"~:y\",374.00001145409465,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",10,\"~:p2\",10,\"~:p3\",10,\"~:p4\",10],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"C\",\"~:layout-align-items\",\"~:start\",\"~:width\",320.00009969013945,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",374.0000114540946]],[\"^L\",[\"^ \",\"~:x\",1142.0000912532628,\"~:y\",374.0000114540946]],[\"^L\",[\"^ \",\"~:x\",1142.0000912532628,\"~:y\",600.0000518384436]],[\"^L\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",600.0000518384436]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",10,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"^O\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:strokes\",[[\"^ \",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#000000\",\"~:stroke-opacity\",1,\"~:stroke-width\",1]],\"~:x\",821.9999915631233,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",374.00001145409465,\"^F\",320.00009969013945,\"~:height\",226.000040384349,\"~:x1\",821.9999915631233,\"~:y1\",374.00001145409465,\"~:x2\",1142.0000912532628,\"~:y2\",600.0000518384436]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1A\",226.000040384349,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95065b4599ea\",\"~ude9c6736-45ce-80a1-8007-950643da554d\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95062fafbb88": "[\"~#shape\",[\"^ \",\"~:y\",342.0000083402533,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",31.999953508377075,\"~:p2\",34.000026052944804,\"~:p3\",31.999953508377075,\"~:p4\",34.000026052944804],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"B\",\"~:layout-align-items\",\"~:start\",\"~:width\",392.9999979687366,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",342.00000834025326]],[\"^L\",[\"^ \",\"~:x\",1181.0000275138177,\"~:y\",342.00000834025326]],[\"^L\",[\"^ \",\"~:x\",1181.0000275138177,\"~:y\",631.9999659712]],[\"^L\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",631.9999659712]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"~:auto\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:strokes\",[[\"^ \",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#000000\",\"~:stroke-opacity\",1,\"~:stroke-width\",1]],\"~:x\",788.0000295450811,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",342.0000083402533,\"^F\",392.9999979687366,\"~:height\",289.99995763094677,\"~:x1\",788.0000295450811,\"~:y1\",342.0000083402533,\"~:x2\",1181.0000275138177,\"~:y2\",631.9999659712]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1B\",289.99995763094677,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95063a202e52\"]]]"
+      }
+    }
+  }
+}

frontend/playwright/data/workspace/get-file-13382.json

@@ -0,0 +1,131 @@
+{
+  "~:features": {
+    "~#set": [
+      "fdata/path-data",
+      "design-tokens/v1",
+      "variants/v1",
+      "layout/grid",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:team-id": "~ud715d0a5-a44e-8056-8005-a79999e18b64",
+  "~: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 flex",
+  "~:revn": 33,
+  "~:modified-at": "~m1771342236324",
+  "~:vern": 0,
+  "~:id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+  "~: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",
+      "0005-deprecate-image-type",
+      "0006-fix-old-texts-fills",
+      "0008-fix-library-colors-v4",
+      "0009-clean-library-colors",
+      "0009-add-partial-text-touched-flags",
+      "0010-fix-swap-slots-pointing-non-existent-shapes",
+      "0011-fix-invalid-text-touched-flags",
+      "0012-fix-position-data",
+      "0013-fix-component-path",
+      "0013-clear-invalid-strokes-and-fills",
+      "0014-fix-tokens-lib-duplicate-ids",
+      "0014-clear-components-nil-objects",
+      "0015-fix-text-attrs-blank-strings",
+      "0015-clean-shadow-color",
+      "0016-copy-fills-from-position-data-to-text-node"
+    ]
+  },
+  "~:version": 67,
+  "~:project-id": "~u76eab896-accf-81a5-8007-2b264ebe7817",
+  "~:created-at": "~m1771255281717",
+  "~:backend": "legacy-db",
+  "~:data": {
+    "~:pages": [
+      "~uecb0cfd0-0f0b-81f7-8007-950628f9665b"
+    ],
+    "~:pages-index": {
+      "~uecb0cfd0-0f0b-81f7-8007-950628f9665b": {
+        "~#penpot/pointer": [
+          "~u4173a29d-4020-80b4-8007-96527ba9d8af",
+          {
+            "~:created-at": "~m1771342236327"
+          }
+        ]
+      }
+    },
+    "~:id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+    "~:options": {
+      "~:components-v2": true,
+      "~:base-font-size": "16px"
+    }
+  }
+}

frontend/playwright/data/workspace/get-file-13385-2.json

@@ -0,0 +1,136 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~: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 13385",
+    "~:revn": 3,
+    "~:modified-at": "~m1771254407745",
+    "~:vern": 1173241426,
+    "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+    "~: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",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771254391625",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44"
+        ],
+        "~:pages-index": {
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~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]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~: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,\"^6\",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,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~ue0e81bed-4dc2-805c-8007-95036c27428b\"]]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036a4a3131": "[\"~#shape\",[\"^ \",\"~:y\",252,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",177,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",156,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",156,\"~:y\",389]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",156,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",156,\"~:y\",252,\"^8\",177,\"~:height\",137,\"~:x1\",156,\"~:y1\",252,\"~:x2\",333,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",137,\"~:flip-y\",null]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036c27428b": "[\"~#shape\",[\"^ \",\"~:y\",250,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Ellipse\",\"~:width\",148,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",362,\"~:y\",250]],[\"^<\",[\"^ \",\"~:x\",510,\"~:y\",250]],[\"^<\",[\"^ \",\"~:x\",510,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",362,\"~:y\",389]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036c27428b\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",362,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",362,\"~:y\",250,\"^8\",148,\"~:height\",139,\"~:x1\",362,\"~:y1\",250,\"~:x2\",510,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^F\",139,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e44",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-13385.json

@@ -0,0 +1,135 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~: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 13385",
+    "~:revn": 2,
+    "~:modified-at": "~m1771254464312",
+    "~:vern": 0,
+    "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+    "~: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",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771254391625",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44"
+        ],
+        "~:pages-index": {
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~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]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~: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,\"^6\",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,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\"]]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036a4a3131": "[\"~#shape\",[\"^ \",\"~:y\",252,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",177,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",156,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",156,\"~:y\",389]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",156,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",156,\"~:y\",252,\"^8\",177,\"~:height\",137,\"~:x1\",156,\"~:y1\",252,\"~:x2\",333,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",137,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e44",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-13415.json

@@ -0,0 +1,135 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~: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 13415",
+    "~:revn": 14,
+    "~:modified-at": "~m1771334256704",
+    "~:vern": 0,
+    "~:id": "~u0472abff-2573-8186-8007-961793e53f45",
+    "~: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",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771326794644",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u0472abff-2573-8186-8007-961793e53f46"
+        ],
+        "~:pages-index": {
+            "~u0472abff-2573-8186-8007-961793e53f46": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~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]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~: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,\"^6\",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,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~uaef184da-e9c1-80f8-8007-961cf253d534\"]]]",
+                        "~uaef184da-e9c1-80f8-8007-961cf253d534": "[\"~#shape\",[\"^ \",\"~:y\",286,\"~:layout-grid-columns\",[[\"^ \",\"~:type\",\"~:flex\",\"~:value\",1],[\"^ \",\"^2\",\"^3\",\"^4\",1]],\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:grid\",\"~:hide-in-viewer\",false,\"~:name\",\"Board\",\"~:layout-align-items\",\"~:start\",\"~:width\",298,\"~:layout-grid-cells\",[\"^ \",\"~uaef184da-e9c1-80f8-8007-961cf50d67b4\",[\"^ \",\"~:justify-self\",\"~:auto\",\"~:column\",1,\"~:id\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b4\",\"~:position\",\"^L\",\"~:column-span\",1,\"~:align-self\",\"^L\",\"~:row\",1,\"~:row-span\",1,\"~:shapes\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b5\",[\"^ \",\"^K\",\"^L\",\"^M\",2,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b5\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",1,\"^S\",1,\"^T\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b6\",[\"^ \",\"^K\",\"^L\",\"^M\",1,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b6\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",2,\"^S\",1,\"^T\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b7\",[\"^ \",\"^K\",\"^L\",\"^M\",2,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b7\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",2,\"^S\",1,\"^T\",[]]],\"~:layout-padding-type\",\"~:simple\",\"^2\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",322,\"~:y\",286]],[\"^10\",[\"^ \",\"~:x\",620,\"~:y\",286]],[\"^10\",[\"^ \",\"~:x\",620,\"~:y\",552]],[\"^10\",[\"^ \",\"~:x\",322,\"~:y\",552]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^>\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:layout-justify-content\",\"~:stretch\",\"~:r1\",0,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf253d534\",\"~:layout-justify-items\",\"^G\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-align-content\",\"^19\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",322,\"~:proportion\",1,\"~:r4\",0,\"~:layout-grid-rows\",[[\"^ \",\"^2\",\"^3\",\"^4\",1],[\"^ \",\"^2\",\"^3\",\"^4\",1]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",322,\"~:y\",286,\"^H\",298,\"~:height\",266,\"~:x1\",322,\"~:y1\",286,\"~:x2\",620,\"~:y2\",552]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:layout-grid-dir\",\"^R\",\"~:flip-x\",null,\"^1E\",266,\"~:flip-y\",null,\"^T\",[]]]"
+                    }
+                },
+                "~:id": "~u0472abff-2573-8186-8007-961793e53f46",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u0472abff-2573-8186-8007-961793e53f45",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-snapshots-13385.json

@@ -0,0 +1,23 @@
+[
+    {
+        "~:id": "~u3ea49ce0-9d99-8197-8007-95037190405b",
+        "~:label": "Version 000",
+        "~:revn": 1,
+        "~:version": 67,
+        "~:created-at": "~m1771254407745",
+        "~:modified-at": "~m1771254407745",
+        "~:created-by": "user",
+        "~:profile-id": "~u99e49e93-362f-80ef-8007-3450ea5204aa"
+    },
+    {
+        "~:revn": 0,
+        "~:modified-at": "~m1771254406526",
+        "~:deleted-at": "~m1771340806524",
+        "~:created-by": "system",
+        "~:label": "internal/snapshot/0",
+        "~:id": "~u3ea49ce0-9d99-8197-8007-9503705f8b9b",
+        "~:profile-id": "~u99e49e93-362f-80ef-8007-3450ea5204aa",
+        "~:version": 67,
+        "~:created-at": "~m1771254406526"
+    }
+]

frontend/playwright/data/workspace/get-profiles-for-file-comments-13385.json

@@ -0,0 +1,9 @@
+[
+    {
+        "~:id": "~u99e49e93-362f-80ef-8007-3450ea5204aa",
+        "~:email": "belen@example.com",
+        "~:name": "Belén Albeza",
+        "~:fullname": "Belén Albeza",
+        "~:is-active": true
+    }
+]

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

@@ -0,0 +1,18 @@
+{
+    "~:revn": 14,
+    "~:lagged": [
+        {
+            "~:id": "~u0472abff-2573-8186-8007-96347d525f65",
+            "~:revn": 15,
+            "~:file-id": "~u0472abff-2573-8186-8007-961793e53f45",
+            "~:session-id": "~uf25e6d2f-d10c-8021-8007-96344433f08d",
+            "~:changes": [
+                {
+                    "~:type": "~:del-obj",
+                    "~:page-id": "~u0472abff-2573-8186-8007-961793e53f46",
+                    "~:id": "~uaef184da-e9c1-80f8-8007-961cf253d534"
+                }
+            ]
+        }
+    ]
+}

frontend/playwright/ui/pages/BasePage.js

@@ -1,4 +1,8 @@
 export class BasePage {
+  static async init(page) {
+    await BasePage.mockConfigFlags(page, []);
+  }
+
   /**
    * Mocks multiple RPC calls in a single call.
    *
@@ -22,7 +26,7 @@ export class BasePage {
    * @param {*} options
    * @returns {Promise<void>}
    */
-  static async mockRPC(page, path, jsonFilename, options) {
+  static async mockRPC(page, path, jsonFilename = "", options = {}) {
     if (!page) {
       throw new TypeError("Invalid page argument. Must be a Playwright page.");
     }
@@ -41,7 +45,7 @@ export class BasePage {
     return page.route(url, (route) =>
       route.fulfill({
         ...interceptConfig,
-        path: `playwright/data/${jsonFilename}`,
+        path: jsonFilename ? `playwright/data/${jsonFilename}` : undefined,
       }),
     );
   }

frontend/playwright/ui/pages/BaseWebSocketPage.js

@@ -2,13 +2,8 @@ import { MockWebSocketHelper } from "../../helpers/MockWebSocketHelper";
 import BasePage from "./BasePage";
 
 export class BaseWebSocketPage extends BasePage {
-  /**
-   * This should be called on `test.beforeEach`.
-   *
-   * @param {Page} page
-   * @returns
-   */
-  static async initWebSockets(page) {
+  static async init(page) {
+    await super.init(page);
     await MockWebSocketHelper.init(page);
   }
 

frontend/playwright/ui/pages/DashboardPage.js

@@ -3,54 +3,62 @@ import { BaseWebSocketPage } from "./BaseWebSocketPage";
 
 export class DashboardPage extends BaseWebSocketPage {
   static async init(page) {
-    await BaseWebSocketPage.initWebSockets(page);
+    await super.init(page);
 
-    await BaseWebSocketPage.mockRPC(
+    await super.mockConfigFlags(page, ["disable-onboarding"]);
+
+    await super.mockRPC(
       page,
       "get-teams",
       "logged-in-user/get-teams-default.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-font-variants?team-id=*",
       "workspace/get-font-variants-empty.json",
     );
 
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-projects?team-id=*",
       "logged-in-user/get-projects-default.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-team-members?team-id=*",
       "logged-in-user/get-team-members-your-penpot.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-team-users?team-id=*",
       "logged-in-user/get-team-users-single-user.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-unread-comment-threads?team-id=*",
       "logged-in-user/get-team-users-single-user.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-team-recent-files?team-id=*",
       "logged-in-user/get-team-recent-files-empty.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-profiles-for-file-comments",
       "workspace/get-profile-for-file-comments.json",
     );
-    await BaseWebSocketPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-builtin-templates",
       "logged-in-user/get-built-in-templates-empty.json",
     );
+
+    await super.mockRPC(
+      page,
+      "get-profile",
+      "logged-in-user/get-profile-logged-in.json",
+    );
   }
 
   static anyTeamId = "c7ce0794-0992-8105-8004-38e630f40f6d";

frontend/playwright/ui/pages/LoginPage.js

@@ -1,6 +1,10 @@
 import { BasePage } from "./BasePage";
 
 export class LoginPage extends BasePage {
+  static async init(page) {
+    await super.init(page);
+  }
+
   constructor(page) {
     super(page);
     this.loginButton = page.getByRole("button", { name: "Continue" });

frontend/playwright/ui/pages/RegisterPage.js

@@ -29,8 +29,13 @@ export class RegisterPage extends BasePage {
     );
   }
 
+  static async init(page) {
+    await BasePage.init(page);
+  }
+
   static async initWithLoggedOutUser(page) {
-    await this.mockRPC(page, "get-profile", "get-profile-anonymous.json");
+    await BasePage.init(page);
+    await BasePage.mockRPC(page, "get-profile", "get-profile-anonymous.json");
   }
 }
 

frontend/playwright/ui/pages/SubscriptionProfilePage.js

@@ -3,9 +3,9 @@ import { DashboardPage } from "./DashboardPage";
 
 export class SubscriptionProfilePage extends DashboardPage {
   static async init(page) {
-    await DashboardPage.initWebSockets(page);
+    await super.init(page);
 
-    await DashboardPage.mockRPC(
+    await super.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",

frontend/playwright/ui/pages/ViewerPage.js

@@ -4,16 +4,6 @@ export class ViewerPage extends BaseWebSocketPage {
   static anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
   static anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
 
-  /**
-   * This should be called on `test.beforeEach`.
-   *
-   * @param {Page} page
-   * @returns
-   */
-  static async init(page) {
-    await BaseWebSocketPage.initWebSockets(page);
-  }
-
   async setupLoggedInUser() {
     await this.mockRPC(
       "get-profile",

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -35,8 +35,8 @@ export class WasmWorkspacePage extends WorkspacePage {
     return WasmWorkspacePage.mockConfigFlags(this.page, flags);
   }
 
-  constructor(page) {
-    super(page);
+  constructor(page, options) {
+    super(page, options);
     this.canvas = page.getByTestId("canvas-wasm-shapes");
   }
 
@@ -54,6 +54,19 @@ export class WasmWorkspacePage extends WorkspacePage {
     await this.hideUI();
   }
 
+  async getRenderCount() {
+    return this.page.evaluate(() => window.wasmRenderCount || 0);
+  }
+
+  async waitForNextRender(previousCount = null) {
+    const baseCount =
+      previousCount === null ? await this.getRenderCount() : previousCount;
+    await this.page.waitForFunction(
+      (count) => (window.wasmRenderCount || 0) > count,
+      baseCount,
+    );
+  }
+
   async hideUI() {
     await this.page.keyboard.press("\\");
     await expect(this.pageName).not.toBeVisible();

frontend/playwright/ui/pages/WorkspacePage.js

@@ -35,45 +35,9 @@ export class WorkspacePage extends BaseWebSocketPage {
     }
 
     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="span"]');
-      }
-      return this.page.waitForSelector(
-        `[data-itype="span"]: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);
+      const typographyInput =
+        this.workspacePage.rightSidebar.getByLabel("Font Size");
+      await expect(typographyInput).toBeVisible();
     }
 
     async startEditing() {
@@ -81,24 +45,27 @@ export class WorkspacePage extends BaseWebSocketPage {
       return this.waitForEditor();
     }
 
-    stopEditing() {
-      return this.page.keyboard.press("Escape");
+    async stopEditing() {
+      await this.page.keyboard.press("Escape");
     }
 
     async moveToLeft(amount = 0) {
       for (let i = 0; i < amount; i++) {
         await this.page.keyboard.press("ArrowLeft");
       }
+      await this.waitForIdle();
     }
 
     async moveToRight(amount = 0) {
       for (let i = 0; i < amount; i++) {
         await this.page.keyboard.press("ArrowRight");
       }
+      await this.waitForIdle();
     }
 
     async moveFromStart(offset = 0) {
-      await this.page.keyboard.press("ArrowLeft");
+      await this.page.keyboard.press("Home");
+      await this.waitForIdle();
       await this.moveToRight(offset);
     }
 
@@ -125,7 +92,7 @@ export class WorkspacePage extends BaseWebSocketPage {
       await expect(locator).toBeVisible();
       await locator.focus();
       await locator.fill(`${newValue}`);
-      await locator.blur();
+      await this.page.keyboard.press("Enter");
     }
 
     changeFontSize(newValue) {
@@ -139,6 +106,10 @@ export class WorkspacePage extends BaseWebSocketPage {
     changeLetterSpacing(newValue) {
       return this.changeNumericInput(this.letterSpacing, newValue);
     }
+
+    async waitForIdle() {
+      await this.page.evaluate(() => new Promise((resolve) => globalThis.requestIdleCallback(resolve)));
+    }
   };
 
   /**
@@ -148,9 +119,9 @@ export class WorkspacePage extends BaseWebSocketPage {
    * @returns
    */
   static async init(page) {
-    await BaseWebSocketPage.initWebSockets(page);
+    await super.init(page);
 
-    await BaseWebSocketPage.mockRPCs(page, {
+    await super.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",
@@ -198,10 +169,10 @@ export class WorkspacePage extends BaseWebSocketPage {
       `[id="shape-00000000-0000-0000-0000-000000000000"]`,
     );
     this.toolbarOptions = page.getByTestId("toolbar-options");
-    this.rectShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Rectangle" });
-    this.ellipseShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Ellipse" });
-    this.moveButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Move" });
-    this.boardButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Board" });
+    this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.ellipseShapeButton = page.getByRole("button", { name: "Ellipse (E)" });
+    this.moveButton = page.getByRole("button", { name: "Move (V)" });
+    this.boardButton = page.getByRole("button", { name: "Board (B)" });
     this.toggleToolbarButton = page.getByRole("button", {
       name: "Toggle toolbar",
     });
@@ -317,7 +288,6 @@ export class WorkspacePage extends BaseWebSocketPage {
         body,
       }),
     );
-    // await this.mockRPC(/get\-file\?/, jsonFile);
   }
 
   async mockGetAsset(regex, asset) {
@@ -391,10 +361,12 @@ export class WorkspacePage extends BaseWebSocketPage {
     const timeToWait = options?.timeToWait ?? 100;
     await this.page.keyboard.press("T");
     await this.page.waitForTimeout(timeToWait);
+
+    const layersCountBefore = await this.layers.getByTestId("layer-row").count();
     await this.clickAndMove(x1, y1, x2, y2);
-    await expect(this.page.getByTestId("text-editor")).toBeVisible();
 
     if (initialText) {
+      await this.waitForSelectedShapeName("Text");
       await this.page.keyboard.type(initialText);
     }
   }
@@ -494,10 +466,23 @@ export class WorkspacePage extends BaseWebSocketPage {
 
   async expectSelectedLayer(name) {
     await expect(
-      this.layers
-        .getByTestId("layer-row")
-        .filter({ has: this.page.getByText(name) }),
-    ).toHaveClass(/selected/);
+      this.layers.getByRole("checkbox", { name, checked: true }),
+    ).toBeVisible();
+  }
+
+  async getSelectedShapeName() {
+    const selectedLayer = this.layers
+      .getByRole("checkbox", { checked: true })
+      .first();
+    await selectedLayer.waitFor({ state: "visible" });
+    return (await selectedLayer.innerText()).trim();
+  }
+
+  async waitForSelectedShapeName(expectedName) {
+    const selectedLayer = this.layers
+      .getByRole("checkbox", { checked: true })
+      .first();
+    await expect(selectedLayer).toHaveText(expectedName);
   }
 
   async expectHiddenToolbarOptions() {

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

@@ -356,3 +356,39 @@ test("Renders shapes with multiple fills and blur", async ({
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
+
+test("Keeps component visible when focusing after creating it", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
+  await workspace.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspace.goToWorkspace({
+    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+  });
+  await workspace.waitForFirstRender();
+
+  await workspace.clickLayers();
+  await workspace.clickLeafLayer("Rectangle");
+  await page.keyboard.press("ControlOrMeta+k");
+
+  const componentLayer = workspace.layers
+    .getByTestId("layer-row")
+    .filter({ has: page.getByTestId("icon-component") })
+    .first();
+  await expect(componentLayer).toBeVisible();
+  await componentLayer.click();
+
+  const previousRenderCount = await workspace.getRenderCount();
+  await page.keyboard.press("f");
+  await workspace.waitForNextRender(previousRenderCount);
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
+});

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

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test.describe("Dashboard Deleted Page", () => {

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

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test("BUG 10421 - Fix libraries context menu", async ({ page }) => {

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

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test("BUG 12359 - Selected invitations count is not pluralized", async ({

frontend/playwright/ui/specs/dashboard-viewer-role.spec.js

@@ -3,11 +3,7 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
+
   await DashboardPage.mockRPC(
     page,
     "get-teams",

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

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test("Dashboad page has title ", async ({ page }) => {

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

@@ -189,8 +189,8 @@ test("BUG 7760 - Layout losing properties when changing parents", async ({
   await workspacePage.clickLeafLayer("Flex Board");
 
   // Move the first board into the second
-  const hAuto = await workspacePage.page.getByTestId("behaviour-h-auto");
-  const vAuto = await workspacePage.page.getByTestId("behaviour-v-auto");
+  const hAuto = await workspacePage.page.getByTitle("Fit content (Horizontal)");
+  const vAuto = await workspacePage.page.getByTitle("Fit content (Vertical)");
 
   await expect(vAuto.locator("input")).toBeChecked();
   await expect(hAuto.locator("input")).toBeChecked();

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

@@ -2,6 +2,8 @@ import { test, expect } from "@playwright/test";
 import { LoginPage } from "../pages/LoginPage";
 
 test.beforeEach(async ({ page }) => {
+  await LoginPage.init(page);
+
   const login = new LoginPage(page);
   await login.initWithLoggedOutUser();
 

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

@@ -4,6 +4,7 @@ import OnboardingPage from "../pages/OnboardingPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
+  await DashboardPage.mockConfigFlags(page, ["enable-onboarding"]);
   await DashboardPage.mockRPC(
     page,
     "get-profile",

frontend/playwright/ui/specs/profile-menu.spec.js

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test("Navigate to penpot changelog from profile menu", async ({ page }) => {

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

@@ -1,14 +1,12 @@
 import { test, expect } from "@playwright/test";
 import { Clipboard } from "../../helpers/Clipboard";
-import { WorkspacePage } from "../pages/WorkspacePage";
-
-const timeToWait = 100;
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page, context }) => {
   await Clipboard.enable(context, Clipboard.Permission.ALL);
 
-  await WorkspacePage.init(page);
-  await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
 });
 
 test.afterEach(async ({ context }) => {
@@ -17,39 +15,36 @@ test.afterEach(async ({ context }) => {
 
 test("Create a new text shape", async ({ page }) => {
   const initialText = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(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();
+
+  await workspace.waitForSelectedShapeName(initialText);
 });
 
 test("Create a new text shape from pasting text", async ({ page, context }) => {
   const textToPaste = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
   await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
   await workspace.goToWorkspace();
+  await workspace.moveButton.click();
 
   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();
+
+  await expect(workspace.layers.getByText(textToPaste)).toBeVisible();
 });
 
 test("Create a new text shape from pasting text using context menu", async ({
@@ -57,27 +52,26 @@ test("Create a new text shape from pasting text using context menu", async ({
   context,
 }) => {
   const textToPaste = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
   await workspace.goToWorkspace();
+  await workspace.moveButton.click();
 
   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();
+
+  await expect(workspace.layers.getByText(textToPaste)).toBeVisible();
 });
 
 test("Update an already created text shape by appending text", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -87,15 +81,14 @@ test("Update an already created text shape by appending text", async ({
   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();
+  await workspace.waitForSelectedShapeName("Lorem ipsum dolor sit amet");
 });
 
 test("Update an already created text shape by prepending text", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -105,15 +98,14 @@ test("Update an already created text shape by prepending text", async ({
   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();
+  await workspace.waitForSelectedShapeName("Dolor sit amet Lorem ipsum");
 });
 
 test.skip("Update an already created text shape by inserting text in between", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -123,9 +115,8 @@ test.skip("Update an already created text shape by inserting text in between", a
   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();
+  await workspace.waitForSelectedShapeName("Lorem dolor sit amet ipsum");
 });
 
 test("Update a new text shape appending text by pasting text", async ({
@@ -133,7 +124,7 @@ test("Update a new text shape appending text by pasting text", async ({
   context,
 }) => {
   const textToPaste = " dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -146,9 +137,8 @@ test("Update a new text shape appending text by pasting text", async ({
   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();
+  await workspace.waitForSelectedShapeName("Lorem ipsum dolor sit amet");
 });
 
 test.skip("Update a new text shape prepending text by pasting text", async ({
@@ -156,7 +146,7 @@ test.skip("Update a new text shape prepending text by pasting text", async ({
   context,
 }) => {
   const textToPaste = "Dolor sit amet ";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -169,16 +159,17 @@ test.skip("Update a new text shape prepending text by pasting text", async ({
   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();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test("Update a new text shape replacing (starting) text with pasted text", async ({
   page,
 }) => {
   const textToPaste = "Dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -192,17 +183,15 @@ test("Update a new text shape replacing (starting) text with pasted text", async
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Dolor sit amet ipsum");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Dolor sit amet ipsum");
 });
 
 test("Update a new text shape replacing (ending) text with pasted text", async ({
   page,
 }) => {
   const textToPaste = "dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -216,17 +205,15 @@ test("Update a new text shape replacing (ending) text with pasted text", async (
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem dolor sit amet");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lorem dolor sit amet");
 });
 
 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, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -240,16 +227,14 @@ test("Update a new text shape replacing (in between) text with pasted text", asy
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lordolor sit ametsum");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lordolor sit ametsum");
 });
 
 test("Update text font size selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -260,18 +245,16 @@ test("Update text font size selecting a part of it (starting)", async ({
   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();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test.skip("Update text line height selecting a part of it (starting)", async ({
+test("Update text line height selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -281,24 +264,17 @@ test.skip("Update text line height selecting a part of it (starting)", async ({
   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.changeLineHeight(4.4);
   await workspace.textEditor.stopEditing();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test.skip("Update text letter spacing selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -309,16 +285,14 @@ test.skip("Update text letter spacing selecting a part of it (starting)", async
   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();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("text-editor/get-file-11552.json");
   await workspace.mockRPC(

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

@@ -1493,10 +1493,8 @@ test.describe("Tokens - creation", () => {
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
     await nameField.fill(newTokenTitle);
 
-    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Use a reference",
-    });
-    referenceTabButton.click();
+    const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+    await referenceTabButton.click();
 
     const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
       name: "Reference",

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

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { WasmWorkspacePage  } from "../pages/WasmWorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 import { BaseWebSocketPage } from "../pages/BaseWebSocketPage";
 import { Clipboard } from "../../helpers/Clipboard";
 
@@ -7,7 +7,7 @@ test.beforeEach(async ({ page, context }) => {
   await Clipboard.enable(context, Clipboard.Permission.ALL);
 
   await WasmWorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-variants.json");
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-variants"]);
 });
 
 test.afterEach(async ({ context }) => {

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

@@ -1,6 +1,5 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
-import { presenceFixture } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
@@ -106,9 +105,37 @@ test("BUG 11006 - Fix history panel shortcut", async ({ page }) => {
 
   await workspacePage.goToWorkspace();
 
-  await page.keyboard.press("Control+Alt+h");
+  await page.keyboard.press("ControlOrMeta+Alt+h");
 
   await expect(
     workspacePage.rightSidebar.getByText("There are no versions yet"),
   ).toBeVisible();
 });
+
+test("BUG 13385 - Fix viewport not updating when restoring version", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockGetFile("workspace/get-file-13385.json");
+  await workspacePage.mockRPC("get-profiles-for-file-comments?file-id=*", "workspace/get-profiles-for-file-comments-13385.json");
+
+  // navigate to workspace and check that the circle shape is not there
+  await workspacePage.goToWorkspace();
+  await expect(workspacePage.layers.getByText("Ellipse")).not.toBeVisible();
+
+  // mock network requests to restore the version
+  await workspacePage.mockGetFile("workspace/get-file-13385-2.json");
+  await workspacePage.mockRPC("get-file-snapshots?file-id=*", "workspace/get-file-snapshots-13385.json");
+  await workspacePage.mockRPC("restore-file-snapshot", "", {
+    status: 204,
+  });
+
+  // request to restore the version
+  await workspacePage.rightSidebar.getByRole("button", { name: "History" }).click();
+  await workspacePage.rightSidebar.getByRole("button", { name: "Open version menu" }).click();
+  await workspacePage.rightSidebar.getByRole("button", { name: "Restore" }).click();
+  // confirm modal
+  await workspacePage.page.getByRole("button", { name: /Restore/i }).click();
+
+  // assert that the circle shape exists
+  await expect(workspacePage.layers.getByText("Ellipse")).toBeVisible();
+});

frontend/playwright/ui/specs/workspace-modifers.spec.js

@@ -23,4 +23,35 @@ test("BUG 13305 - Fix resize board to fit content", async ({ page }) => {
   await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("630");
   await expect(workspacePage.rightSidebar.getByTitle("X axis").getByRole("textbox")).toHaveValue("110");
   await expect(workspacePage.rightSidebar.getByTitle("Y axis").getByRole("textbox")).toHaveValue("110");
-});
+});
+
+test("BUG 13382 - Fix problem with flex layout", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockGetFile("workspace/get-file-13382.json");
+
+  await workspacePage.mockRPC(
+    "get-file-fragment?file-id=*&fragment-id=*",
+    "workspace/get-file-13382-fragment.json",
+  );
+
+  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+
+  await workspacePage.goToWorkspace({
+    fileId: "52c4e771-3853-8190-8007-9506c70e8100",
+    pageId: "ecb0cfd0-0f0b-81f7-8007-950628f9665b",
+  });
+
+  await workspacePage.clickToggableLayer("A");
+  await workspacePage.clickToggableLayer("B");
+  await workspacePage.clickToggableLayer("C");
+  await workspacePage.clickLeafLayer("R2");
+
+  const heightText = workspacePage.rightSidebar.getByTitle("Height").getByPlaceholder('--');
+  await heightText.fill("200");
+  await heightText.press("Enter");
+
+  await workspacePage.clickLeafLayer("B");
+  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("340");
+
+});

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

@@ -353,33 +353,24 @@ test("Copy/paste properties", async ({ page, context }) => {
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Rectangle")
-    .first()
-    .click({ button: "right" });
+  await page.getByText("Rectangle").first().click({ button: "right" });
+  await page.getByText("Copy/Paste as").hover();
+  await page.getByText("Paste properties").click();
+
+  await page.getByText("Board").nth(2).click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
   await page
     .getByTestId("layer-item")
-    .getByText("Board")
+    .locator("div")
+    .filter({ hasText: "Path" })
     .nth(1)
     .click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Path")
-    .click({ button: "right" });
-  await page.getByText("Copy/Paste as").hover();
-  await page.getByText("Paste properties").click();
-
-  await page
-    .getByTestId("layer-item")
-    .getByText("Ellipse")
-    .click({ button: "right" });
+  await page.getByText("Ellipse").click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 });
@@ -492,3 +483,25 @@ test("Bug 8371 - Flatten option is not visible in context menu", async ({
       .filter({ visible: true }),
   ).toBeVisible();
 });
+
+test("BUG 13415 - Grid layout overlay is not removed when deleting a board", async ({
+  page,
+}) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.mockGetFile("workspace/get-file-13415.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-13415.json",
+  );
+
+  await workspacePage.goToWorkspace();
+  await workspacePage.clickLeafLayer("Board");
+
+  const currentRenderCount = await workspacePage.getRenderCount();
+  await workspacePage.page.keyboard.press("Delete");
+
+  await workspacePage.waitForNextRender(currentRenderCount);
+  await workspacePage.hideUI();
+  await expect(workspacePage.canvas).toHaveScreenshot();
+});

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

@@ -3,11 +3,6 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
-  await DashboardPage.mockRPC(
-    page,
-    "get-profile",
-    "logged-in-user/get-profile-logged-in-no-onboarding.json",
-  );
 });
 
 test("User goes to an empty dashboard", async ({ page }) => {

frontend/playwright/ui/visual-specs/visual-login.spec.js

@@ -2,6 +2,8 @@ import { test, expect } from "@playwright/test";
 import { LoginPage } from "../pages/LoginPage";
 
 test.beforeEach(async ({ page }) => {
+  await LoginPage.init(page);
+
   const login = new LoginPage(page);
   await login.initWithLoggedOutUser();
   await login.page.goto("/#/auth/login");

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -244,6 +244,13 @@
   --assets-component-second-border-selected: var(--color-background-primary);
   --assets-component-hightlight: var(--color-accent-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-quaternary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-quaternary);
+
   --library-name-foreground-color: var(--color-foreground-primary);
   --library-content-foreground-color: var(--color-foreground-secondary);
 
@@ -416,6 +423,13 @@
   --tab-border-color: var(--color-background-tertiary);
   --tab-border-color-selected: var(--color-background-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-primary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-secondary);
+
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 

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

@@ -222,9 +222,16 @@
 
     ptk/UpdateEvent
     (update [_ state]
-      (-> state
-          (assoc :thumbnails thumbnails)
-          (update :files assoc file-id file)))))
+      (let [pending-version-id (:workspace-pending-file-version-id state)
+            state (-> state
+                      (assoc :thumbnails thumbnails)
+                      (update :files assoc file-id file)
+                      (dissoc :workspace-pending-file-version-id))]
+        (cond-> state
+          (some? pending-version-id)
+          (assoc :workspace-file-version-id pending-version-id)
+          (nil? pending-version-id)
+          (dissoc :workspace-file-version-id))))))
 
 (defn zoom-to-frame
   []
@@ -280,192 +287,197 @@
           (wasm.api/process-object shape))))))
 
 (defn initialize-workspace
-  [team-id file-id]
-  (assert (uuid? team-id) "expected valud uuid for `team-id`")
-  (assert (uuid? file-id) "expected valud uuid for `file-id`")
+  ([team-id file-id]
+   (initialize-workspace team-id file-id nil))
+  ([team-id file-id version-id]
+   (assert (uuid? team-id) "expected valud uuid for `team-id`")
+   (assert (uuid? file-id) "expected valud uuid for `file-id`")
 
-  (ptk/reify ::initialize-workspace
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (assoc :recent-colors (:recent-colors storage/user))
-          (assoc :recent-fonts (:recent-fonts storage/user))
-          (assoc :current-file-id file-id)
-          (assoc :workspace-presence {})))
+   (ptk/reify ::initialize-workspace
+     ptk/UpdateEvent
+     (update [_ state]
+       (-> state
+           (assoc :recent-colors (:recent-colors storage/user))
+           (assoc :recent-fonts (:recent-fonts storage/user))
+           (assoc :current-file-id file-id)
+           (assoc :workspace-presence {})
+           ;; Store pending version-id; bundle-fetched will set workspace-file-version-id
+           ;; when the new bundle is applied so the viewport re-inits with new data
+           (assoc :workspace-pending-file-version-id version-id)))
 
-    ptk/WatchEvent
-    (watch [_ state stream]
-      (let [stoper-s     (rx/filter (ptk/type? ::finalize-workspace) stream)
-            rparams      (rt/get-params state)
-            features     (features/get-enabled-features state team-id)
-            render-wasm? (contains? features "render-wasm/v1")]
+     ptk/WatchEvent
+     (watch [_ state stream]
+       (let [stoper-s     (rx/filter (ptk/type? ::finalize-workspace) stream)
+             rparams      (rt/get-params state)
+             features     (features/get-enabled-features state team-id)
+             render-wasm? (contains? features "render-wasm/v1")]
 
-        (log/debug :hint "initialize-workspace"
-                   :team-id (dm/str team-id)
-                   :file-id (dm/str file-id))
+         (log/debug :hint "initialize-workspace"
+                    :team-id (dm/str team-id)
+                    :file-id (dm/str file-id))
 
-        (->> (rx/merge
-              (rx/concat
-               ;; Fetch all essential data that should be loaded before the file
-               (rx/merge
-                (if ^boolean render-wasm?
-                  (->> (rx/from @wasm/module)
-                       (rx/filter true?)
-                       (rx/tap (fn [_]
-                                 (let [event (ug/event "penpot:wasm:loaded")]
-                                   (ug/dispatch! event))))
-                       (rx/ignore))
-                  (rx/empty))
+         (->> (rx/merge
+               (rx/concat
+                ;; Fetch all essential data that should be loaded before the file
+                (rx/merge
+                 (if ^boolean render-wasm?
+                   (->> (rx/from @wasm/module)
+                        (rx/filter true?)
+                        (rx/tap (fn [_]
+                                  (let [event (ug/event "penpot:wasm:loaded")]
+                                    (ug/dispatch! event))))
+                        (rx/ignore))
+                   (rx/empty))
 
-                (->> stream
-                     (rx/filter (ptk/type? ::df/fonts-loaded))
-                     (rx/take 1)
-                     (rx/ignore))
+                 (->> stream
+                      (rx/filter (ptk/type? ::df/fonts-loaded))
+                      (rx/take 1)
+                      (rx/ignore))
 
-                (rx/of (ntf/hide)
-                       (dcmt/retrieve-comment-threads file-id)
-                       (dcmt/fetch-profiles)
-                       (df/fetch-fonts team-id)))
+                 (rx/of (ntf/hide)
+                        (dcmt/retrieve-comment-threads file-id)
+                        (dcmt/fetch-profiles)
+                        (df/fetch-fonts team-id)))
 
-               ;; Once the essential data is fetched, lets proceed to
-               ;; fetch teh file bunldle
-               (rx/of (fetch-bundle file-id features)))
+                ;; Once the essential data is fetched, lets proceed to
+                ;; fetch teh file bunldle
+                (rx/of (fetch-bundle file-id features)))
 
-              (->> stream
-                   (rx/filter (ptk/type? ::bundle-fetched))
-                   (rx/take 1)
-                   (rx/map deref)
-                   (rx/mapcat
-                    (fn [{:keys [file]}]
-                      (log/debug :hint "bundle fetched"
-                                 :team-id (dm/str team-id)
-                                 :file-id (dm/str file-id))
+               (->> stream
+                    (rx/filter (ptk/type? ::bundle-fetched))
+                    (rx/take 1)
+                    (rx/map deref)
+                    (rx/mapcat
+                     (fn [{:keys [file]}]
+                       (log/debug :hint "bundle fetched"
+                                  :team-id (dm/str team-id)
+                                  :file-id (dm/str file-id))
 
-                      (rx/of (dpj/initialize-project (:project-id file))
-                             (dwn/initialize team-id file-id)
-                             (dwsl/initialize-shape-layout)
-                             (fetch-libraries file-id features)
-                             (-> (workspace-initialized file-id)
-                                 (with-meta {:team-id team-id
-                                             :file-id file-id}))))))
+                       (rx/of (dpj/initialize-project (:project-id file))
+                              (dwn/initialize team-id file-id)
+                              (dwsl/initialize-shape-layout)
+                              (fetch-libraries file-id features)
+                              (-> (workspace-initialized file-id)
+                                  (with-meta {:team-id team-id
+                                              :file-id file-id}))))))
 
-              ;; Install dev perf observers once the workspace is ready
-              (when (contains? cf/flags :perf-logs)
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/take 1)
-                     (rx/tap (fn [_] (perf/setup)))))
+               ;; Install dev perf observers once the workspace is ready
+               (when (contains? cf/flags :perf-logs)
+                 (->> stream
+                      (rx/filter (ptk/type? ::workspace-initialized))
+                      (rx/take 1)
+                      (rx/tap (fn [_] (perf/setup)))))
 
-              (->> stream
-                   (rx/filter (ptk/type? ::dps/persistence-notification))
-                   (rx/take 1)
-                   (rx/map dwc/set-workspace-visited))
+               (->> stream
+                    (rx/filter (ptk/type? ::dps/persistence-notification))
+                    (rx/take 1)
+                    (rx/map dwc/set-workspace-visited))
 
-              (when-let [component-id (some-> rparams :component-id uuid/parse)]
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/observe-on :async)
-                     (rx/take 1)
-                     (rx/map #(dwl/go-to-local-component :id component-id :update-layout? (:update-layout rparams)))))
+               (when-let [component-id (some-> rparams :component-id uuid/parse)]
+                 (->> stream
+                      (rx/filter (ptk/type? ::workspace-initialized))
+                      (rx/observe-on :async)
+                      (rx/take 1)
+                      (rx/map #(dwl/go-to-local-component :id component-id :update-layout? (:update-layout rparams)))))
 
-              (when (:board-id rparams)
-                (->> stream
-                     (rx/filter (ptk/type? ::dwv/initialize-viewport))
-                     (rx/take 1)
-                     (rx/map zoom-to-frame)))
+               (when (:board-id rparams)
+                 (->> stream
+                      (rx/filter (ptk/type? ::dwv/initialize-viewport))
+                      (rx/take 1)
+                      (rx/map zoom-to-frame)))
 
-              (when-let [comment-id (some-> rparams :comment-id uuid/parse)]
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/observe-on :async)
-                     (rx/take 1)
-                     (rx/map #(dwcm/navigate-to-comment-id comment-id))))
+               (when-let [comment-id (some-> rparams :comment-id uuid/parse)]
+                 (->> stream
+                      (rx/filter (ptk/type? ::workspace-initialized))
+                      (rx/observe-on :async)
+                      (rx/take 1)
+                      (rx/map #(dwcm/navigate-to-comment-id comment-id))))
 
-              (when render-wasm?
-                (->> stream
-                     (rx/filter dch/commit?)
-                     (rx/map deref)
-                     (rx/mapcat
-                      (fn [{:keys [redo-changes]}]
-                        (let [added (->> redo-changes
-                                         (filter #(= (:type %) :add-obj))
-                                         (map :id))]
-                          (->> (rx/from added)
-                               (rx/map process-wasm-object)))))))
+               (when render-wasm?
+                 (->> stream
+                      (rx/filter dch/commit?)
+                      (rx/map deref)
+                      (rx/mapcat
+                       (fn [{:keys [redo-changes]}]
+                         (let [added (->> redo-changes
+                                          (filter #(= (:type %) :add-obj))
+                                          (map :id))]
+                           (->> (rx/from added)
+                                (rx/map process-wasm-object)))))))
 
-              (when render-wasm?
-                (let [local-commits-s
-                      (->> stream
-                           (rx/filter dch/commit?)
-                           (rx/map deref)
-                           (rx/filter #(and (= :local (:source %))
-                                            (not (contains? (:tags %) :position-data))))
-                           (rx/filter (complement empty?)))
+               (when render-wasm?
+                 (let [local-commits-s
+                       (->> stream
+                            (rx/filter dch/commit?)
+                            (rx/map deref)
+                            (rx/filter #(and (= :local (:source %))
+                                             (not (contains? (:tags %) :position-data))))
+                            (rx/filter (complement empty?)))
 
-                      notifier-s
-                      (rx/merge
-                       (->> local-commits-s (rx/debounce 1000))
-                       (->> stream (rx/filter dps/force-persist?)))
+                       notifier-s
+                       (rx/merge
+                        (->> local-commits-s (rx/debounce 1000))
+                        (->> stream (rx/filter dps/force-persist?)))
 
-                      objects-s
-                      (rx/from-atom refs/workspace-page-objects {:emit-current-value? true})
+                       objects-s
+                       (rx/from-atom refs/workspace-page-objects {:emit-current-value? true})
 
-                      current-page-id-s
-                      (rx/from-atom refs/current-page-id {:emit-current-value? true})]
+                       current-page-id-s
+                       (rx/from-atom refs/current-page-id {:emit-current-value? true})]
 
-                  (->> local-commits-s
-                       (rx/buffer-until notifier-s)
-                       (rx/with-latest-from objects-s)
-                       (rx/map
-                        (fn [[commits objects]]
-                          (->> commits
-                               (mapcat :redo-changes)
-                               (filter #(contains? #{:mod-obj :add-obj} (:type %)))
-                               (filter #(cfh/text-shape? objects (:id %)))
-                               (map #(vector
-                                      (:id %)
-                                      (wasm.api/calculate-position-data (get objects (:id %))))))))
+                   (->> local-commits-s
+                        (rx/buffer-until notifier-s)
+                        (rx/with-latest-from objects-s)
+                        (rx/map
+                         (fn [[commits objects]]
+                           (->> commits
+                                (mapcat :redo-changes)
+                                (filter #(contains? #{:mod-obj :add-obj} (:type %)))
+                                (filter #(cfh/text-shape? objects (:id %)))
+                                (map #(vector
+                                       (:id %)
+                                       (wasm.api/calculate-position-data (get objects (:id %))))))))
 
-                       (rx/with-latest-from current-page-id-s)
-                       (rx/map
-                        (fn [[text-position-data page-id]]
-                          (let [changes
-                                (->> text-position-data
-                                     (mapv (fn [[id position-data]]
-                                             {:type :mod-obj
-                                              :id id
-                                              :page-id page-id
-                                              :operations
-                                              [{:type :set
-                                                :attr :position-data
-                                                :val position-data
-                                                :ignore-touched true
-                                                :ignore-geometry true}]})))]
-                            (when (d/not-empty? changes)
-                              (dch/commit-changes
-                               {:redo-changes changes :undo-changes []
-                                :save-undo? false
-                                :tags #{:position-data}})))))
-                       (rx/take-until stoper-s))))
+                        (rx/with-latest-from current-page-id-s)
+                        (rx/map
+                         (fn [[text-position-data page-id]]
+                           (let [changes
+                                 (->> text-position-data
+                                      (mapv (fn [[id position-data]]
+                                              {:type :mod-obj
+                                               :id id
+                                               :page-id page-id
+                                               :operations
+                                               [{:type :set
+                                                 :attr :position-data
+                                                 :val position-data
+                                                 :ignore-touched true
+                                                 :ignore-geometry true}]})))]
+                             (when (d/not-empty? changes)
+                               (dch/commit-changes
+                                {:redo-changes changes :undo-changes []
+                                 :save-undo? false
+                                 :tags #{:position-data}})))))
+                        (rx/take-until stoper-s))))
 
-              (->> stream
-                   (rx/filter dch/commit?)
-                   (rx/map deref)
-                   (rx/mapcat
-                    (fn [{:keys [save-undo? undo-changes redo-changes undo-group tags stack-undo?]}]
-                      (if (and save-undo? (seq undo-changes))
-                        (let [entry {:undo-changes undo-changes
-                                     :redo-changes redo-changes
-                                     :undo-group undo-group
-                                     :tags tags}]
-                          (rx/of (dwu/append-undo entry stack-undo?)))
-                        (rx/empty))))))
-             (rx/take-until stoper-s))))
+               (->> stream
+                    (rx/filter dch/commit?)
+                    (rx/map deref)
+                    (rx/mapcat
+                     (fn [{:keys [save-undo? undo-changes redo-changes undo-group tags stack-undo?]}]
+                       (if (and save-undo? (seq undo-changes))
+                         (let [entry {:undo-changes undo-changes
+                                      :redo-changes redo-changes
+                                      :undo-group undo-group
+                                      :tags tags}]
+                           (rx/of (dwu/append-undo entry stack-undo?)))
+                         (rx/empty))))))
+              (rx/take-until stoper-s))))
 
-    ptk/EffectEvent
-    (effect [_ _ _]
-      (let [name (dm/str "workspace-" file-id)]
-        (unchecked-set ug/global "name" name)))))
+     ptk/EffectEvent
+     (effect [_ _ _]
+       (let [name (dm/str "workspace-" file-id)]
+         (unchecked-set ug/global "name" name))))))
 
 (defn finalize-workspace
   [_team-id file-id]

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

@@ -197,11 +197,12 @@
              objects       (:objects page)
 
              undo-id (or (:undo-id options) (js/Symbol))
-             [all-parents changes] (-> (pcb/empty-changes it (:id page))
-                                       (cls/generate-delete-shapes fdata page objects ids
-                                                                   {:ignore-touched (:allow-altering-copies options)
-                                                                    :undo-group (:undo-group options)
-                                                                    :undo-id undo-id}))]
+             [all-parents changes]
+             (-> (pcb/empty-changes it (:id page))
+                 (cls/generate-delete-shapes fdata page objects ids
+                                             {:ignore-touched (:allow-altering-copies options)
+                                              :undo-group (:undo-group options)
+                                              :undo-id undo-id}))]
 
          (rx/of (dwu/start-undo-transaction undo-id)
                 (dc/detach-comment-thread ids)

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

@@ -10,6 +10,7 @@
    [app.common.attrs :as attrs]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
@@ -19,6 +20,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.common.types.text :as txt]
    [app.common.uuid :as uuid]
+   [app.main.data.changes :as dch]
    [app.main.data.event :as ev]
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.common :as dwc]
@@ -916,11 +918,11 @@
       (update-in state [:workspace-text-modifier shape-id] {:position-data position-data}))))
 
 (defn v2-update-text-shape-content
-  [id content & {:keys [update-name? name finalize? save-undo?]
-                 :or {update-name? false name nil finalize? false save-undo? true}}]
+  [id content & {:keys [update-name? name finalize? save-undo? original-content]
+                 :or {update-name? false name nil finalize? false save-undo? true original-content nil}}]
   (ptk/reify ::v2-update-text-shape-content
     ptk/WatchEvent
-    (watch [_ state _]
+    (watch [it state _]
       (if (features/active-feature? state "render-wasm/v1")
         (let [objects      (dsh/lookup-page-objects state)
               shape        (get objects id)
@@ -950,11 +952,11 @@
                  new-shape))
              {:save-undo? save-undo? :undo-group (when new-shape? id)})
 
-            (let [modifiers (dwwt/resize-wasm-text-modifiers shape content)
-                  options {:undo-group (when new-shape? id)}]
-              (if (and (not= :fixed (:grow-type shape)) finalize?)
-                (dwm/apply-wasm-modifiers modifiers options)
-                (dwm/set-wasm-modifiers modifiers options))))
+            (when-let [modifiers (dwwt/resize-wasm-text-modifiers shape content)]
+              (let [options {:undo-group (when new-shape? id)}]
+                (if (and (not= :fixed (:grow-type shape)) finalize?)
+                  (dwm/apply-wasm-modifiers modifiers options)
+                  (dwm/set-wasm-modifiers modifiers options)))))
 
            (when finalize?
              (rx/concat
@@ -970,7 +972,13 @@
                     {:save-undo? false}))
                  (dws/deselect-shape id)
                  (dwsh/delete-shapes #{id})))
-              (rx/of (dwt/finish-transform))))))
+              (rx/of
+               ;; This commit is necesary for undo and component propagation
+               ;; on finalization
+               (dch/commit-changes
+                (-> (pcb/empty-changes it (:current-page-id state))
+                    (pcb/set-text-content id content original-content)))
+               (dwt/finish-transform))))))
 
         (let [objects      (dsh/lookup-page-objects state)
               shape        (get objects id)

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

@@ -108,7 +108,7 @@
               (rx/take 1)
               (rx/mapcat #(rp/cmd! :restore-file-snapshot {:file-id file-id :id id}))
               (rx/tap #(th/clear-queue!))
-              (rx/map #(dw/initialize-workspace team-id file-id)))
+              (rx/map #(dw/initialize-workspace team-id file-id id)))
          (case origin
            :version
            (rx/of (ptk/event ::ev/event {::ev/name "restore-pin-version"}))
@@ -231,7 +231,7 @@
               (rx/filter #(or (nil? %) (= :saved %)))
               (rx/take 1)
               (rx/mapcat #(rp/cmd! :restore-file-snapshot {:file-id file-id :id id}))
-              (rx/map #(dw/initialize-workspace team-id file-id)))
+              (rx/map #(dw/initialize-workspace team-id file-id id)))
 
          (->> (rx/of 1)
               (rx/tap resolve)

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

@@ -27,27 +27,28 @@
    (resize-wasm-text-modifiers shape (:content shape)))
 
   ([{:keys [id points selrect grow-type] :as shape} content]
-   (wasm.api/use-shape id)
-   (wasm.api/set-shape-text-content id content)
-   (wasm.api/set-shape-text-images id content)
+   (when id
+     (wasm.api/use-shape id)
+     (wasm.api/set-shape-text-content id content)
+     (wasm.api/set-shape-text-images id content)
 
-   (let [dimension (wasm.api/get-text-dimensions)
-         width-scale (if (#{:fixed :auto-height} grow-type)
-                       1.0
-                       (/ (:width dimension) (:width selrect)))
-         height-scale (if (= :fixed grow-type)
-                        1.0
-                        (/ (:height dimension) (:height selrect)))
-         resize-v  (gpt/point width-scale height-scale)
-         origin    (first points)]
+     (let [dimension (wasm.api/get-text-dimensions)
+           width-scale (if (#{:fixed :auto-height} grow-type)
+                         1.0
+                         (/ (:width dimension) (:width selrect)))
+           height-scale (if (= :fixed grow-type)
+                          1.0
+                          (/ (:height dimension) (:height selrect)))
+           resize-v  (gpt/point width-scale height-scale)
+           origin    (first points)]
 
-     {id
-      {:modifiers
-       (ctm/resize-modifiers
-        resize-v
-        origin
-        (:transform shape (gmt/matrix))
-        (:transform-inverse shape (gmt/matrix)))}})))
+       {id
+        {:modifiers
+         (ctm/resize-modifiers
+          resize-v
+          origin
+          (:transform shape (gmt/matrix))
+          (:transform-inverse shape (gmt/matrix)))}}))))
 
 (defn resize-wasm-text
   "Resize a single text shape (auto-width/auto-height) by id.

frontend/src/app/main/refs.cljs

@@ -256,6 +256,9 @@
 (def workspace-layout
   (l/derived :workspace-layout st/state))
 
+(def workspace-file-version-id
+  (l/derived :workspace-file-version-id st/state))
+
 (def snap-pixel?
   (l/derived #(contains? % :snap-pixel-grid) workspace-layout))
 

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

@@ -10,9 +10,9 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(mf/defc file-uploader*
+(mf/defc file-uploader
   {::mf/forward-ref true}
-  [{:keys [accept multi label-text label-class input-id on-selected data-testid]} input-ref]
+  [{:keys [accept multi label-text label-class input-id on-selected data-testid] :as props} input-ref]
   (let [opt-pick-one #(if multi % (first %))
 
         on-files-selected

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

@@ -0,0 +1,107 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.components.radio-buttons
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.formats :as fmt]
+   [app.util.dom :as dom]
+   [rumext.v2 :as mf]))
+
+(def context
+  (mf/create-context nil))
+
+(mf/defc radio-button
+  {::mf/props :obj}
+  [{:keys [icon id value disabled title icon-class type]}]
+  (let [context     (mf/use-ctx context)
+        allow-empty (unchecked-get context "allow-empty")
+        type        (if ^boolean type
+                      type
+                      (if ^boolean allow-empty
+                        "checkbox"
+                        "radio"))
+
+        on-change   (unchecked-get context "on-change")
+        selected    (unchecked-get context "selected")
+        name        (unchecked-get context "name")
+
+        encode-fn   (unchecked-get context "encode-fn")
+        checked?    (= selected value)
+
+        value       (encode-fn value)]
+
+
+    [:label {:html-for id
+             :data-testid id
+             :title title
+             :class (stl/css-case
+                     :radio-icon true
+                     :checked checked?
+                     :disabled disabled)}
+
+     (if (some? icon)
+       [:> icon* {:icon-id icon :class icon-class :aria-hidden true}]
+       [:span {:class (stl/css :title-name)} value])
+
+     [:input {:id id
+              :on-change on-change
+              :type type
+              :name name
+              :disabled disabled
+              :value value
+              :default-checked checked?}]]))
+
+(mf/defc radio-buttons
+  {::mf/props :obj}
+  [{:keys [name children on-change selected class wide encode-fn decode-fn allow-empty] :as props}]
+  (let [encode-fn (d/nilv encode-fn identity)
+        decode-fn (d/nilv decode-fn identity)
+        nitems    (if (array? children)
+                    (count (keep identity children))
+                    1)
+        ;; FIXME: we should handle this with CSS
+        width     (mf/with-memo [nitems]
+                    (if (= wide true)
+                      "unset"
+                      (fmt/format-pixels
+                       (+ (* 4 (- nitems 1))
+                          (* 32 nitems)))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps selected on-change)
+         (fn [event]
+           (let [input (dom/get-target event)
+                 value (dom/get-target-val event)
+
+                 ;; Only allow null values when the "allow-empty" prop is true
+                 value (when (or (not allow-empty)
+                                 (not= value selected)) value)]
+             (when (fn? on-change)
+               (on-change (decode-fn value) event))
+             (dom/blur! input))))
+
+        context-value
+        (mf/spread-object props
+                          ;; We pass a special metadata for disable
+                          ;; key casing transformation in this
+                          ;; concrete case, because this component
+                          ;; uses legacy mode and props are in
+                          ;; kebab-case style
+                          ^{::mf/transform false}
+                          {:on-change on-change'
+                           :encode-fn encode-fn
+                           :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
+            :style {:width  width}
+            :key (dm/str name "-" selected)}
+      children]]))

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

@@ -0,0 +1,79 @@
+// 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;
+
+.radio-btn-wrapper {
+  @include deprecated.flexCenter;
+  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
+  background-color: var(--input-background-color);
+  gap: deprecated.$s-4;
+}
+
+.radio-icon {
+  --radio-icon-border-color: var(--radio-btn-border-color);
+
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
+  @include deprecated.focusRadio;
+  height: deprecated.$s-32;
+  flex-grow: 1;
+  border-radius: deprecated.$s-8;
+  box-sizing: border-box;
+  border: deprecated.$br-2 solid var(--radio-icon-border-color);
+
+  input {
+    display: none;
+  }
+  svg {
+    @extend .button-icon;
+    stroke: var(--radio-btn-foreground-color);
+  }
+  .title-name {
+    @include deprecated.uppercaseTitleTipography;
+    color: var(--radio-btn-foreground-color);
+  }
+  &:hover {
+    svg {
+      stroke: var(--radio-btn-foreground-color-selected);
+    }
+  }
+}
+
+.checked {
+  --radio-icon-border-color: var(--radio-btn-border-color-selected);
+
+  background-color: var(--radio-btn-background-color-selected);
+  svg {
+    stroke: var(--radio-btn-foreground-color-selected);
+  }
+  .title-name {
+    color: var(--radio-btn-foreground-color-selected);
+  }
+}
+
+.disabled {
+  cursor: default;
+  background-color: transparent;
+  border: deprecated.$s-2 solid transparent;
+  svg {
+    stroke: var(--button-foreground-color-disabled);
+  }
+  .title-name {
+    color: var(--button-foreground-color-disabled);
+  }
+  &:hover {
+    background-color: transparent;
+    border: deprecated.$s-2 solid transparent;
+    svg {
+      stroke: var(--button-foreground-color-disabled);
+    }
+    .title-name {
+      color: var(--button-foreground-color-disabled);
+    }
+  }
+}

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

@@ -17,7 +17,7 @@
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -184,11 +184,11 @@
                  :on-click on-click
                  :tab-index "0"}
         [:span (tr "labels.add-custom-font")]
-        [:> file-uploader* {:input-id "font-upload"
-                            :accept accept-font-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-selected}]]
+        [:& file-uploader {:input-id "font-upload"
+                           :accept accept-font-types
+                           :multi true
+                           :ref input-ref
+                           :on-selected on-selected}]]
 
        (when-let [url cf/terms-of-service-uri]
          [:& context-notification {:content (tr "dashboard.fonts.hero-text2" url)

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

@@ -16,7 +16,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.notifications :as ntf]
    [app.main.store :as st]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -58,10 +58,10 @@
   [{:keys [project-id on-finish-import]} external-ref]
   (let [on-file-selected (use-import-file project-id on-finish-import)]
     [:form.import-file {:aria-hidden "true"}
-     [:> file-uploader* {:accept ".penpot,.zip"
-                         :multi true
-                         :ref external-ref
-                         :on-selected on-file-selected}]]))
+     [:& file-uploader {:accept ".penpot,.zip"
+                        :multi true
+                        :ref external-ref
+                        :on-selected on-file-selected}]]))
 
 (defn- update-entry-name
   [entries file-id new-name]

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

@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.dashboard.change-owner]
    [app.main.ui.dashboard.subscription :refer [members-cta*
@@ -1315,10 +1315,10 @@
          [:img {:class (stl/css :team-image)
                 :src (cfg/resolve-team-photo-url team)}]
          (when can-edit
-           [:> file-uploader* {:accept "image/jpeg,image/png"
-                               :multi false
-                               :ref finput
-                               :on-selected on-file-selected}])]
+           [:& file-uploader {:accept "image/jpeg,image/png"
+                              :multi false
+                              :ref finput
+                              :on-selected on-file-selected}])]
         [:div {:class (stl/css :block-label)}
          (tr "dashboard.team-info")]
         [:div {:class (stl/css :block-text)}

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

@@ -11,10 +11,8 @@
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as k]
@@ -99,11 +97,8 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)} title]
-       [:> icon-button* {:variant "ghost"
-                         :class (stl/css :modal-close-btn)
-                         :icon i/close
-                         :aria-label (tr "labels.close")
-                         :on-click cancel-fn}]]
+       [:button {:class (stl/css :modal-close-btn)
+                 :on-click cancel-fn} deprecated-icon/close]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? subtitle) (not= subtitle ""))
@@ -129,10 +124,14 @@
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
         (when-not (= cancel-label :omit)
-          [:> button* {:variant "secondary"
-                       :on-click cancel-fn}
-           cancel-label])
+          [:input {:class (stl/css :cancel-button)
+                   :type "button"
+                   :value cancel-label
+                   :on-click cancel-fn}])
 
-        [:> button* {:variant (if (= accept-style :danger) "destructive" "primary")
-                     :on-click accept-fn}
-         accept-label]]]]]))
+        [:input {:class (stl/css-case :accept-btn true
+                                      :danger (= accept-style :danger)
+                                      :primary (= accept-style :primary))
+                 :type "button"
+                 :value accept-label
+                 :on-click accept-fn}]]]]]))

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

@@ -33,9 +33,7 @@
 }
 
 .modal-close-btn {
-  position: absolute;
-  top: var(--sp-s);
-  right: var(--sp-s);
+  @extend .modal-close-btn-base;
 }
 
 .modal-content {
@@ -55,6 +53,17 @@
   @extend .modal-action-btns;
 }
 
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+
+.accept-btn {
+  @extend .modal-accept-btn;
+  &.danger {
+    @extend .modal-danger-btn;
+  }
+}
+
 .modal-scd-msg {
   margin-block: 0;
 }

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

@@ -15,7 +15,6 @@
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   column-gap: var(--sp-xs);
 }
 

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

@@ -208,7 +208,7 @@
 ;; FIXME: deprecated, should be refactored in two components and use
 ;; the generic progress reporter
 
-(mf/defc progress-widget*
+(mf/defc progress-widget
   {::mf/wrap [mf/memo]}
   []
   (let [state             (mf/deref refs/export)

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

@@ -19,10 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.components.copy-button :refer [copy-button*]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
@@ -263,9 +260,8 @@
     [:div {:class (stl/css-case :element-options true
                                 :viewer-code-block (= :viewer from))}
      [:div {:class (stl/css :attributes-block)}
-      [:> button* {:variant "secondary"
-                   :class (stl/css :download-button)
-                   :on-click handle-copy-all-code}
+      [:button {:class (stl/css :download-button)
+                :on-click handle-copy-all-code}
        "Copy all code"]]
 
      #_[:div.attributes-block
@@ -292,10 +288,10 @@
        ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-css-fn
                           :class (stl/css :css-copy-btn)
                           :on-copied on-style-copied}]]]
@@ -322,21 +318,21 @@
                         :rotated collapsed-markup?)}
          deprecated-icon/arrow]]
 
-       [:> radio-buttons* {:selected markup-type
-                           :on-change set-markup
-                           :name "listing-style"
-                           :options [{:id "html"
-                                      :label "HTML"
-                                      :value "html"}
-                                     {:id "svg"
-                                      :label "SVG"
-                                      :value "svg"}]}]
+       [:& radio-buttons {:selected markup-type
+                          :on-change set-markup
+                          :class (stl/css :code-lang-options)
+                          :wide true
+                          :name "listing-style"}
+        [:& radio-button {:value "html"
+                          :id :html}]
+        [:& radio-button {:value "svg"
+                          :id :svg}]]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-html-fn
                           :class (stl/css :html-copy-btn)
                           :on-copied on-markup-copied}]]]

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

@@ -17,18 +17,16 @@
   padding-inline: var(--sp-m);
 }
 
-.attributes-block {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-}
-
 .viewer-code-block {
   height: calc(100vh - #{deprecated.$s-108}); // TODO: Fix this hardcoded value
 }
 
 .download-button {
-  margin: var(--sp-s) 0;
+  @extend .button-secondary;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-32;
+  width: 100%;
+  margin: deprecated.$s-8 0;
 }
 
 .code-block {
@@ -75,6 +73,7 @@
   gap: deprecated.$s-4;
 }
 
+.expand-button,
 .css-copy-btn,
 .html-copy-btn {
   @extend .button-tertiary;
@@ -86,6 +85,9 @@
   }
 }
 
+.code-lang-options {
+  max-width: deprecated.$s-108;
+}
 .code-lang-select {
   @include deprecated.uppercaseTitleTipography;
   width: deprecated.$s-72;

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

@@ -14,7 +14,7 @@
    [app.main.data.profile :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -110,11 +110,11 @@
       [:span {:class (stl/css :update-overlay)
               :on-click on-image-click} (tr "labels.update")]
       [:img {:src photo}]
-      [:> file-uploader* {:accept "image/jpeg,image/png"
-                          :multi false
-                          :ref input-ref
-                          :on-selected on-file-selected
-                          :data-testid "profile-image-input"}]]]))
+      [:& file-uploader {:accept "image/jpeg,image/png"
+                         :multi false
+                         :ref input-ref
+                         :on-selected on-file-selected
+                         :data-testid "profile-image-input"}]]]))
 
 ;; --- Profile Page
 

frontend/src/app/main/ui/viewer/comments.cljs

@@ -27,8 +27,9 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(mf/defc comments-menu*
-  {::mf/memo true}
+(mf/defc comments-menu
+  {::mf/props :obj
+   ::mf/memo true}
   []
   (let [state           (mf/deref refs/comments-local)
         cmode           (:mode state)

frontend/src/app/main/ui/viewer/header.cljs

@@ -14,13 +14,10 @@
    [app.main.data.viewer.shortcuts :as sc]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.exports.assets :refer [progress-widget*]]
+   [app.main.ui.exports.assets :refer [progress-widget]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.viewer.comments :refer [comments-menu*]]
+   [app.main.ui.viewer.comments :refer [comments-menu]]
    [app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -36,12 +33,20 @@
   []
   (modal/show! :login-register {}))
 
-(mf/defc zoom-widget*
-  {::mf/memo true}
-  [{:keys [zoom on-increase on-decrease on-zoom-reset on-fullscreen on-zoom-fit on-zoom-fill]}]
-  (let [open* (mf/use-state false)
-        open? (deref open*)
+(mf/defc zoom-widget
+  {::mf/memo true
+   ::mf/props :obj}
+  [{:keys [zoom
+           on-increase
+           on-decrease
+           on-zoom-reset
+           on-fullscreen
+           on-zoom-fit
+           on-zoom-fill]
+    :as props}]
 
+  (let [open*           (mf/use-state false)
+        open?           (deref open*)
         open-dropdown
         (mf/use-fn
          (fn [event]
@@ -70,7 +75,7 @@
 
     [:div {:class (stl/css-case :zoom-widget true
                                 :selected open?)
-           :on-click (if open? close-dropdown open-dropdown)
+           :on-click open-dropdown
            :title (tr "workspace.header.zoom")}
      [:span {:class (stl/css :label)} (fmt/format-percent zoom)]
      [:& dropdown {:show open?
@@ -78,18 +83,18 @@
       [:ul {:class (stl/css :dropdown)}
        [:li  {:class (stl/css :basic-zoom-bar)}
         [:span {:class (stl/css :zoom-btns)}
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "shortcuts.decrease-zoom")
-                           :on-click on-decrease
-                           :icon i/remove}]
-         [:p {:class (stl/css :zoom-text)}
+         [:button {:class (stl/css :zoom-btn)
+                   :on-click on-decrease}
+          [:span {:class (stl/css :zoom-icon)}
+           deprecated-icon/remove-icon]]
+         [:p  {:class (stl/css :zoom-text)}
           (fmt/format-percent zoom)]
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "shortcuts.increase-zoom")
-                           :on-click on-increase
-                           :icon i/add}]]
-        [:> button* {:variant "ghost"
-                     :on-click on-zoom-reset}
+         [:button {:class (stl/css :zoom-btn)
+                   :on-click on-increase}
+          [:span {:class (stl/css :zoom-icon)}
+           deprecated-icon/add]]]
+        [:button {:class (stl/css :reset-btn)
+                  :on-click on-zoom-reset}
          (tr "workspace.header.reset-zoom")]]
 
        [:li {:class (stl/css :zoom-option)
@@ -114,7 +119,7 @@
            [:span {:class (stl/css :shortcut-key)
                    :key (dm/str "zoom-fullscreen-" sc)} sc])]]]]]))
 
-(mf/defc header-options*
+(mf/defc header-options
   [{:keys [section zoom page file index permissions interactions-mode share]}]
   (let [fullscreen?    (mf/deref fullscreen-ref)
 
@@ -154,7 +159,6 @@
         handle-zoom-fit
         (mf/use-fn
          #(st/emit! dv/zoom-to-fit))]
-
     (mf/with-effect [permissions share]
       (when (and
              (:in-team permissions)
@@ -163,7 +167,7 @@
         (open-share-dialog)))
 
     [:div {:class (stl/css :options-zone)}
-     [:> progress-widget*]
+     [:& progress-widget]
 
      (case section
        :interactions [:*
@@ -171,41 +175,40 @@
                         [:> flows-menu* {:page page :index index}])
                       [:> interactions-menu*
                        {:interactions-mode interactions-mode}]]
-       :comments [:> comments-menu*]
+       :comments [:& comments-menu]
        [:div {:class (stl/css :view-options)}])
 
-     [:> zoom-widget* {:zoom zoom
-                       :on-increase handle-increase
-                       :on-decrease handle-decrease
-                       :on-zoom-reset handle-zoom-reset
-                       :on-zoom-fill handle-zoom-fill
-                       :on-zoom-fit  handle-zoom-fit
-                       :on-fullscreen toggle-fullscreen}]
+     [:& zoom-widget
+      {:zoom zoom
+       :on-increase handle-increase
+       :on-decrease handle-decrease
+       :on-zoom-reset handle-zoom-reset
+       :on-zoom-fill handle-zoom-fill
+       :on-zoom-fit  handle-zoom-fit
+       :on-fullscreen toggle-fullscreen}]
 
      (when (:in-team permissions)
-       [:> icon-button* {:variant "ghost"
-                         :aria-label (tr "viewer.header.edit-in-workspace")
-                         :on-click go-to-workspace
-                         :icon i/curve}])
+       [:span {:on-click go-to-workspace
+               :class (stl/css :edit-btn)}
+        deprecated-icon/curve])
 
-     [:> icon-button* {:variant "ghost"
-                       :aria-pressed fullscreen?
-                       :aria-label (tr "viewer.header.fullscreen")
-                       :on-click toggle-fullscreen
-                       :icon i/expand}]
+     [:span {:title (tr "viewer.header.fullscreen")
+             :class (stl/css-case :fullscreen-btn true
+                                  :selected fullscreen?)
+             :on-click toggle-fullscreen}
+      deprecated-icon/expand]
 
      (when (:in-team permissions)
-       [:> button* {:variant "primary"
-                    :class (stl/css :share-btn)
-                    :on-click open-share-dialog}
+       [:button {:on-click open-share-dialog
+                 :class (stl/css :share-btn)}
         (tr "labels.share")])
 
      (when-not (:is-logged permissions)
        [:span {:on-click open-login-dialog
                :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]))
 
-(mf/defc header-sitemap*
-  [{:keys [project file page frame toggle-thumbnails]}]
+(mf/defc header-sitemap
+  [{:keys [project file page frame toggle-thumbnails] :as props}]
   (let [project-name   (:name project)
         file-name      (:name file)
         page-name      (:name page)
@@ -314,44 +317,44 @@
                    :pointer-events (when-not (:in-team permissions) "none")}}
        penpot-logo-icon]
 
-      [:> header-sitemap* {:project project
-                           :file file
-                           :page page
-                           :frame frame
-                           :toggle-thumbnails toggle-thumbnails
-                           :index index}]]
+      [:& header-sitemap {:project project
+                          :file file
+                          :page page
+                          :frame frame
+                          :toggle-thumbnails toggle-thumbnails
+                          :index index}]]
 
      [:div {:class (stl/css :mode-zone)}
-      [:> icon-button* {:variant "ghost"
-                        :aria-pressed (= section :interactions)
-                        :aria-label (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))
-                        :data-value "interactions"
-                        :on-click navigate
-                        :icon i/play}]
+      [:button {:on-click navigate
+                :data-value "interactions"
+                :class (stl/css-case :mode-zone-btn true
+                                     :selected (= section :interactions))
+                :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
+       deprecated-icon/play]
 
       (when (or (:in-team permissions)
                 (= (:who-comment permissions) "all"))
-        [:> icon-button* {:variant "ghost"
-                          :aria-pressed (= section :comments)
-                          :aria-label (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))
-                          :data-value "comments"
-                          :on-click navigate
-                          :icon i/comments}])
+        [:button {:on-click navigate
+                  :data-value "comments"
+                  :class (stl/css-case :mode-zone-btn true
+                                       :selected (= section :comments))
+                  :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
+         deprecated-icon/comments])
 
       (when (or (:in-team permissions)
                 (and (= (:type permissions) :share-link)
                      (= (:who-inspect permissions) "all")))
-        [:> icon-button* {:variant "ghost"
-                          :aria-pressed (= section :inspect)
-                          :aria-label (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))
-                          :on-click go-to-inspect
-                          :icon i/code}])]
+        [:button {:on-click go-to-inspect
+                  :class (stl/css-case :mode-zone-btn true
+                                       :selected (= section :inspect))
+                  :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
+         deprecated-icon/code])]
 
-     [:> header-options* {:section section
-                          :permissions permissions
-                          :page page
-                          :file file
-                          :index index
-                          :zoom zoom
-                          :interactions-mode interactions-mode
-                          :share share}]]))
+     [:& header-options {:section section
+                         :permissions permissions
+                         :page page
+                         :file file
+                         :index index
+                         :zoom zoom
+                         :interactions-mode interactions-mode
+                         :share share}]]))

frontend/src/app/main/ui/viewer/header.scss

@@ -12,7 +12,7 @@
   grid-column: 1 / span 1;
   grid-row: 1 / span 1;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr deprecated.$s-92 1fr;
   justify-content: space-between;
   align-items: center;
   height: deprecated.$s-48;
@@ -130,9 +130,23 @@
 
 // SECTION BUTTONS
 .mode-zone {
-  display: flex;
-  flex-direction: row;
-  gap: var(--sp-xs);
+  @include deprecated.flexRow;
+  height: 100%;
+}
+
+.mode-zone-btn {
+  @extend .button-tertiary;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
+  padding: 0;
+  svg {
+    @extend .button-icon;
+  }
+}
+
+.selected {
+  @extend .button-icon-selected;
 }
 
 // OPTION AREA
@@ -151,8 +165,33 @@
   cursor: pointer;
 }
 
+.fullscreen-btn {
+  @extend .button-tertiary;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
 .share-btn {
-  margin-left: var(--sp-xs);
+  @extend .button-primary;
+  height: deprecated.$s-32;
+  min-width: deprecated.$s-72;
+  margin-left: deprecated.$s-4;
+}
+
+.edit-btn {
+  @extend .button-tertiary;
+  @include deprecated.flexCenter;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
 }
 
 .go-log-btn {
@@ -206,15 +245,43 @@
   display: flex;
 }
 
+.zoom-btn {
+  @extend .button-tertiary;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+  border-radius: deprecated.$br-8;
+  .zoom-icon {
+    @include deprecated.flexCenter;
+    width: deprecated.$s-24;
+    height: deprecated.$s-32;
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+    }
+  }
+  &:hover {
+    .zoom-icon svg {
+      stroke: var(--button-tertiary-foreground-color-hover);
+    }
+  }
+}
+
 .zoom-text {
   @include deprecated.flexCenter;
   height: 100%;
-  min-width: deprecated.$s-48;
+  min-width: deprecated.$s-64;
   padding: 0;
   margin: 0 deprecated.$s-2;
   color: var(--modal-title-foreground-color);
 }
 
+.reset-btn {
+  @extend .button-tertiary;
+  color: var(--button-tertiary-foreground-color-hover);
+  height: deprecated.$s-28;
+  border-radius: deprecated.$br-8;
+}
+
 .zoom-option {
   @extend .menu-item-base;
   .shortcuts {

frontend/src/app/main/ui/viewer/share_link.cljs

@@ -20,9 +20,6 @@
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.clipboard :as clipboard]
    [app.util.dom :as dom]
@@ -174,11 +171,10 @@
       [:div {:class (stl/css :share-link-header)}
        [:h2 {:class (stl/css :share-link-title)}
         (tr "common.share-link.title")]
-       [:> icon-button* {:variant "ghost"
-                         :class (stl/css :modal-close-button)
-                         :aria-label (tr "labels.close")
-                         :on-click on-close
-                         :icon i/close}]]
+       [:button {:class (stl/css :modal-close-button)
+                 :on-click on-close
+                 :title (tr "labels.close")}
+        deprecated-icon/close]]
       [:div {:class (stl/css :modal-content)}
        [:div {:class (stl/css :share-link-section)}
         (when (and (not confirm?) (some? current-link))
@@ -189,10 +185,10 @@
                     :placeholder (tr "common.share-link.placeholder")
                     :read-only true}]
 
-           [:> icon-button* {:variant "ghost"
-                             :aria-label (tr "viewer.header.share.copy-link")
-                             :on-click copy-link
-                             :icon i/clipboard}]])
+           [:button {:class (stl/css :copy-button)
+                     :title (tr "viewer.header.share.copy-link")
+                     :on-click copy-link}
+            deprecated-icon/clipboard]])
 
         [:div {:class (stl/css :hint-wrapper)}
          (when (not ^boolean confirm?)
@@ -203,22 +199,28 @@
             [:div {:class (stl/css :description)}
              (tr "common.share-link.confirm-deletion-link-description")]
             [:div {:class (stl/css :actions)}
-             [:> button* {:variant "secondary"
-                          :on-click #(reset! confirm* false)}
-              (tr "labels.cancel")]
-             [:> button* {:variant "destructive"
-                          :on-click delete-link}
-              (tr "common.share-link.destroy-link")]]]
+             [:input  {:type "button"
+                       :class (stl/css :button-cancel)
+                       :on-click #(reset! confirm* false)
+                       :value (tr "labels.cancel")}]
+             [:input {:type "button"
+                      :class (stl/css :button-danger)
+                      :on-click delete-link
+                      :value (tr "common.share-link.destroy-link")}]]]
 
            (some? current-link)
-           [:> button* {:variant "destructive"
-                        :on-click try-delete-link}
-            (tr "common.share-link.destroy-link")]
+           [:input
+            {:type "button"
+             :class (stl/css :button-danger)
+             :on-click try-delete-link
+             :value (tr "common.share-link.destroy-link")}]
 
            :else
-           [:> button* {:variant "primary"
-                        :on-click create-link}
-            (tr "common.share-link.get-link")])]]
+           [:input
+            {:type "button"
+             :class (stl/css :button-active)
+             :on-click create-link
+             :value (tr "common.share-link.get-link")}])]]
 
 
        (when (not ^boolean confirm?)
@@ -303,7 +305,6 @@
                  :options [{:value "team" :label (tr "common.share-link.team-members")}
                            {:value "all" :label (tr "common.share-link.all-users")}]
                  :on-change on-comment-change}]]]
-
              [:div {:class (stl/css :inspect-mode)}
               [:div {:class (stl/css :subtitle)}
                (tr "common.share-link.permissions-can-inspect")]
@@ -314,3 +315,6 @@
                  :options [{:value "team" :label (tr "common.share-link.team-members")}
                            {:value "all" :label (tr "common.share-link.all-users")}]
                  :on-change on-inspect-change}]]]])])]]]))
+
+
+

frontend/src/app/main/ui/viewer/share_link.scss

@@ -30,9 +30,7 @@
 }
 
 .modal-close-button {
-  position: absolute;
-  top: var(--sp-s);
-  right: var(--sp-s);
+  @extend .modal-close-btn-base;
 }
 
 .modal-content {
@@ -76,6 +74,18 @@
   }
 }
 
+.copy-button {
+  @extend .button-secondary;
+  @include deprecated.flexRow;
+  gap: deprecated.$s-8;
+  height: deprecated.$s-32;
+  width: deprecated.$s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground-hover);
+  }
+}
+
 .description {
   @include deprecated.bodySmallTypography;
   color: var(--modal-text-foreground-color);
@@ -87,6 +97,18 @@
   justify-content: flex-end;
 }
 
+.button-active {
+  @extend .modal-accept-btn;
+}
+
+.button-cancel {
+  @extend .modal-cancel-btn;
+}
+
+.button-danger {
+  @extend .modal-danger-btn;
+}
+
 .permissions-section {
   @include deprecated.flexColumn;
   gap: deprecated.$s-8;

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

@@ -50,7 +50,7 @@
 
 (mf/defc workspace-content*
   {::mf/private true}
-  [{:keys [file layout page wglobal]}]
+  [{:keys [file layout page wglobal file-version-id]}]
 
   (let [palete-size (mf/use-state nil)
         selected    (mf/deref refs/selected-shapes)
@@ -109,6 +109,7 @@
          :wglobal wglobal
          :selected selected
          :layout layout
+         :file-version-id file-version-id
          :palete-size
          (when (and (or colorpalette? textpalette?) (not hide-ui?))
            @palete-size)}]]]
@@ -168,7 +169,7 @@
 
 (mf/defc workspace-inner*
   {::mf/private true}
-  [{:keys [page-id file-id file layout wglobal]}]
+  [{:keys [page-id file-id file layout wglobal file-version-id]}]
   (let [page-ref (mf/with-memo [file-id page-id]
                    (make-page-ref file-id page-id))
         page     (mf/deref page-ref)]
@@ -187,7 +188,8 @@
       [:> workspace-content* {:file file
                               :page page
                               :wglobal wglobal
-                              :layout layout}]
+                              :layout layout
+                              :file-version-id file-version-id}]
       [:> workspace-loader*])))
 
 (mf/defc workspace*
@@ -199,6 +201,7 @@
 
         layout           (mf/deref refs/workspace-layout)
         wglobal          (mf/deref refs/workspace-global)
+        file-version-id (mf/deref refs/workspace-file-version-id)
 
         team-ref         (mf/with-memo [team-id]
                            (make-team-ref team-id))
@@ -274,7 +277,8 @@
               :file-id file-id
               :file file
               :wglobal wglobal
-              :layout layout}])
+              :layout layout
+              :file-version-id file-version-id}])
           (when (or (not (and file-loaded? page-id))
                     ;; in wasm renderer, extend the pixel loader until the first frame is rendered
                     ;; but do not apply it when switching pages

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

@@ -25,11 +25,10 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.hooks :as hooks]
@@ -416,25 +415,24 @@
              :on-change handle-change-mode}]])
 
         (when (and (= origin :sidebar) show-tokens? token-color)
-          [:> radio-buttons* {:selected color-style
-                              :on-change toggle-token-color
-                              :name "color-style"
-                              :options [{:id "swap-opt-list"
-                                         :icon i/swatches
-                                         :label (tr "labels.color")
-                                         :value :direct-color}
-                                        {:id "swap-opt-grid"
-                                         :icon i/tokens
-                                         :label (tr "workspace.colorpicker.color-tokens")
-                                         :value :token-color}]}])]
+          [:& radio-buttons {:selected color-style
+                             :on-change toggle-token-color
+                             :name "color-style"}
+           [:& radio-button {:icon i/swatches
+                             :value :direct-color
+                             :title (tr "labels.color")
+                             :id "opt-color"}]
+           [:& radio-button {:icon i/tokens
+                             :value :token-color
+                             :title (tr "workspace.colorpicker.color-tokens")
+                             :id "opt-token-color"}]])]
 
        (when (and (not= selected-mode :image)
                   (= color-style :direct-color))
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.colorpicker.get-color")
-                           :aria-pressed picking-color?
-                           :on-click handle-click-picker
-                           :icon i/picker}])
+         [:button {:class (stl/css-case :picker-btn true
+                                        :selected picking-color?)
+                   :on-click handle-click-picker}
+          deprecated-icon/picker])
 
        (when (= color-style :token-color)
          [:div {:class (stl/css :token-color-title)}
@@ -485,11 +483,12 @@
                 :aria-label (tr "media.choose-image")
                 :on-click on-fill-image-click}
                (tr "media.choose-image")
-               [:> file-uploader* {:input-id "fill-image-upload"
-                                   :accept "image/jpeg,image/png"
-                                   :multi false
-                                   :ref fill-image-ref
-                                   :on-selected on-fill-image-selected}]]])
+               [:& file-uploader
+                {:input-id "fill-image-upload"
+                 :accept "image/jpeg,image/png"
+                 :multi false
+                 :ref fill-image-ref
+                 :on-selected on-fill-image-selected}]]])
 
            [:*
             [:div {:class (stl/css :colorpicker-tabs)}

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

@@ -46,6 +46,52 @@
   width: px2rem(68);
 }
 
+// TODO: change to DS button component
+.picker-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: $br-8;
+  background-color: transparent;
+  border: $b-1 solid transparent;
+  height: var(--sp-xl);
+  width: var(--sp-xl);
+  border-radius: $br-4;
+  padding: 0;
+  margin-top: var(--sp-xs);
+  svg {
+    @extend .button-icon;
+    stroke: var(--button-tertiary-foreground-color-rest);
+  }
+  &:hover {
+    svg {
+      stroke: var(--button-tertiary-foreground-color-focus);
+    }
+  }
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    svg {
+      stroke: var(--button-secondary-foreground-color-hover);
+    }
+  }
+  &:active {
+    outline: none;
+    border: $b-1 solid transparent;
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+  &.selected {
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+}
+
 .gradient-buttons {
   display: flex;
   align-items: center;

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

@@ -30,7 +30,6 @@
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.ds.buttons.button :refer [button*]]
    [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*]]
@@ -45,6 +44,12 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
+(def ^:private close-icon
+  (deprecated-icon/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private add-icon
+  (deprecated-icon/icon-xref :add (stl/css :add-icon)))
+
 (defn- get-library-summary
   "Given a library data return a summary representation of this library"
   [data]
@@ -163,10 +168,12 @@
     [:div {:class (stl/css :sample-library-item)
            :key (dm/str id)}
      [:div {:class (stl/css :sample-library-item-name)} (:name library)]
-     [:> button* {:variant "secondary"
-                  :on-click import-library
-                  :disabled (some? importing?)}
-      (if (= importing? id) (tr "labels.adding") (tr "labels.add"))]]))
+     [:input {:class (stl/css-case :sample-library-button true
+                                   :sample-library-add (nil? importing?)
+                                   :sample-library-adding (some? importing?))
+              :type "button"
+              :value (if (= importing? id) (tr "labels.adding") (tr "labels.add"))
+              :on-click import-library}]]))
 
 (defn- empty-library?
   "Check if currentt library summary has elements or not"
@@ -315,12 +322,14 @@
           [:> library-description* {:summary summary}]]]
 
         (if ^boolean is-shared
-          [:> button* {:variant "secondary"
-                       :on-click unpublish}
-           (tr "common.unpublish")]
-          [:> button* {:variant "primary"
-                       :on-click publish}
-           (tr "common.publish")])]
+          [:input {:class (stl/css :item-unpublish)
+                   :type "button"
+                   :value (tr "common.unpublish")
+                   :on-click unpublish}]
+          [:input {:class (stl/css :item-publish)
+                   :type "button"
+                   :value (tr "common.publish")
+                   :on-click publish}])]
 
        (for [{:keys [id name data connected-to connected-to-names] :as library} linked-libraries]
          (let [disabled? (some #(contains? linked-libraries-ids %) connected-to)]
@@ -368,11 +377,12 @@
               (let [summary (-> (:library-summary library)
                                 (adapt-backend-summary))]
                 [:> library-description* {:summary summary}])]]
-            [:> icon-button* {:variant "secondary"
-                              :aria-label (tr "workspace.libraries.shared-library-btn")
-                              :icon i/add
-                              :data-library-id (dm/str id)
-                              :on-click link-library}]])]
+
+            [:button {:class (stl/css :item-button-shared)
+                      :data-library-id (dm/str id)
+                      :title (tr "workspace.libraries.shared-library-btn")
+                      :on-click link-library}
+             add-icon]])]
 
         (when (empty? shared-libraries)
           [:div {:class (stl/css :section-list-empty)}
@@ -637,13 +647,11 @@
            :on-click close-dialog-outside
            :data-testid "libraries-modal"}
      [:div {:class (stl/css :modal-dialog)}
-      [:> icon-button* {:variant "ghost"
-                        :class (stl/css :close-btn)
-                        :icon i/close
-                        :aria-label (tr "labels.close")
-                        :data-testid "close-libraries"
-                        :on-click close-dialog}]
-
+      [:button {:class (stl/css :close-btn)
+                :on-click close-dialog
+                :aria-label (tr "labels.close")
+                :data-testid "close-libraries"}
+       close-icon]
       [:div {:class (stl/css :modal-title)}
        (tr "workspace.libraries.libraries")]
 

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

@@ -33,7 +33,7 @@
   background-color: var(--modal-background-color);
   border: $b-2 solid var(--modal-border-color);
   display: grid;
-  grid-template-rows: 0 auto 1fr;
+  grid-template-rows: auto 1fr;
   min-width: $sz-364;
   min-height: $sz-192;
   height: $sz-520;
@@ -42,10 +42,21 @@
   max-width: $sz-712;
 }
 
+// TODO: Remove this extended creating modal component
 .close-btn {
-  position: absolute;
-  top: var(--sp-s);
-  right: var(--sp-s);
+  @extend .modal-close-btn-base;
+}
+
+.close-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: $sz-16;
+  width: $sz-16;
+  color: transparent;
+  fill: none;
+  stroke-width: $b-1;
+  stroke: var(--icon-foreground);
 }
 
 .modal-title {
@@ -109,6 +120,46 @@
   height: fit-content;
 }
 
+.item-publish,
+.item-unpublish {
+  // TODO: remove this extended by using DS button component
+  @extend .button-primary;
+  @include t.use-typography("headline-small");
+  height: $sz-32;
+  min-width: px2rem(92);
+  padding: var(--sp-s) var(--sp-xxl);
+  margin: 0;
+  border-radius: $br-8;
+}
+
+.item-unpublish {
+  // TODO: remove this extended by using DS button component
+  @extend .button-secondary;
+}
+
+.item-button,
+.item-button-shared {
+  // TODO: remove this extended by using DS button component
+  @extend .button-secondary;
+  height: $sz-32;
+  width: $sz-32;
+  margin-inline-start: var(--sp-xxs);
+  padding: var(--sp-s);
+}
+
+.detach-icon,
+.add-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: $sz-16;
+  width: $sz-16;
+  color: transparent;
+  fill: none;
+  stroke-width: $b-1;
+  stroke: var(--icon-foreground);
+}
+
 .section-list-shared {
   max-height: px2rem(272);
 }
@@ -119,6 +170,26 @@
   color: var(--title-foreground-color);
 }
 
+.search-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: px2rem(20);
+  padding: 0 0 0 var(--sp-s);
+
+  svg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: transparent;
+    fill: none;
+    height: px2rem(12);
+    width: px2rem(12);
+    stroke-width: 1.33px;
+    stroke: var(--icon-foreground);
+  }
+}
+
 // empty state
 .section-list-empty {
   display: grid;
@@ -357,3 +428,24 @@
   text-overflow: ellipsis;
   max-width: px2rem(232);
 }
+
+// TODO: Remove this extended using a DS component
+.sample-library-add {
+  @extend .button-secondary;
+}
+
+// TODO: Remove this extended using a DS component
+.sample-library-adding {
+  @extend .button-disabled;
+}
+
+.sample-library-button {
+  @include t.use-typography("headline-small");
+  height: $sz-32;
+  width: px2rem(80);
+  margin: 0;
+  border-radius: $br-8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -853,9 +853,8 @@
 
     [:*
      [:> icon-button* {:variant "ghost"
-                       :aria-pressed show-menu?
                        :aria-label (tr "shortcut-subsection.main-menu")
-                       :on-click (if show-menu? close-all-menus open-menu)
+                       :on-click open-menu
                        :icon i/menu}]
 
      [:> dropdown-menu* {:show show-menu?

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

@@ -18,10 +18,9 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [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.hooks :as h]
    [app.main.ui.hooks.resize :as r]
+   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.color-palette :refer [color-palette*]]
    [app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu*]]
    [app.main.ui.workspace.text-palette :refer [text-palette]]
@@ -179,27 +178,27 @@
         [:ul {:class (dm/str size-classname " " (stl/css-case :palette-btn-list true
                                                               :hidden-bts hide-palettes?))}
          [:li {:class (stl/css :palette-item)}
-          [:> icon-button* {:variant "ghost"
-                            :aria-pressed (some? color-palette?)
-                            :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
-                            :on-click on-select-color-palette
-                            :icon i/drop}]]
+          [:button {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
+                    :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
+                    :class (stl/css-case :palette-btn true
+                                         :selected color-palette?)
+                    :on-click on-select-color-palette}
+           deprecated-icon/drop-icon]]
+
          [:li {:class (stl/css :palette-item)}
-          [:> icon-button* {:variant "ghost"
-                            :aria-pressed (some? text-palette?)
-                            :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
-                            :on-click on-select-text-palette
-                            :icon i/text-palette}]]]
+          [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
+                    :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
+                    :class (stl/css-case :palette-btn true
+                                         :selected text-palette?)
+                    :on-click on-select-text-palette}
+           deprecated-icon/text-palette]]]
+
 
         (if any-palette?
           [:*
-           [:div {:class (stl/css :menu-btn)}
-            [:> icon-button* {:variant "ghost"
-                              :aria-pressed show-menu?
-                              :aria-label (tr "labels.options")
-                              :on-click #(swap! state* update :show-menu not)
-                              :icon i/menu}]]
-
+           [:button {:class (stl/css :palette-actions)
+                     :on-click #(swap! state* update :show-menu not)}
+            deprecated-icon/menu]
            [:div {:class (stl/css :palette)
                   :ref container}
             (when text-palette?

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

@@ -49,6 +49,7 @@
   &.wide {
     width: 100%;
   }
+
   .resize-area {
     grid-area: resize;
     height: deprecated.$s-8;
@@ -71,22 +72,49 @@
     &.small-palette {
       display: flex;
     }
+    .palette-item {
+      @include deprecated.flexCenter;
+      border-radius: deprecated.$br-8;
+      opacity: deprecated.$op-10;
+      transition: opacity 1s ease;
+      .palette-btn {
+        @extend .button-tertiary;
+        height: deprecated.$s-32;
+        width: deprecated.$s-32;
+        border-radius: deprecated.$br-8;
+        background-clip: padding-box;
+        padding: 0;
+        svg {
+          @extend .button-icon-small;
+          stroke: var(--icon-foreground);
+        }
+        &.selected {
+          @extend .button-icon-selected;
+        }
+      }
+    }
+  }
+
+  .palette-actions {
+    @extend .button-tertiary;
+    grid-area: actions;
+    height: calc(var(--height) - deprecated.$s-16);
+    width: deprecated.$s-32;
+    padding: 0;
+    margin-left: deprecated.$s-4;
+    border-radius: deprecated.$br-8;
+    background-color: var(--palette-background-color);
+    z-index: deprecated.$z-index-2;
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+    }
   }
   .palette {
     grid-area: palette;
     width: 100%;
     min-width: 0;
   }
-  .palette-item {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.menu-btn {
-  display: flex;
-  align-items: center;
-  margin-left: var(--sp-s);
 }
 
 .handler {

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

@@ -29,7 +29,7 @@
             :style {:background-color color}
             :src (cfg/resolve-profile-photo-url profile)}]]))
 
-(mf/defc active-sessions*
+(mf/defc active-sessions
   {::mf/memo true}
   []
   (let [profiles     (mf/deref refs/profiles)

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

@@ -20,19 +20,23 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
    [app.main.ui.dashboard.team]
-   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.exports.assets :refer [progress-widget*]]
+   [app.main.ui.exports.assets :refer [progress-widget]]
    [app.main.ui.formats :as fmt]
-   [app.main.ui.workspace.presence :refer [active-sessions*]]
+   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.workspace.presence :refer [active-sessions]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+(def ref:persistence-status
+  (l/derived :status refs/persistence))
+
 ;; --- Zoom Widget
 
-(mf/defc zoom-widget-workspace*
+(mf/defc zoom-widget-workspace
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}]
@@ -68,12 +72,11 @@
         zoom (fmt/format-percent zoom {:precision 0})]
 
     [:*
-     [:div {:on-click (if open? close-dropdown open-dropdown)
+     [:div {:on-click open-dropdown
             :class (stl/css-case :zoom-widget true
                                  :selected open?)
             :title (tr "workspace.header.zoom")}
       [:span {:class (stl/css :label)} zoom]]
-
      [:& dropdown {:show open? :on-close close-dropdown}
       [:ul {:class (stl/css :dropdown)}
        [:li {:class (stl/css :basic-zoom-bar)}
@@ -87,10 +90,9 @@
                            :aria-label (tr "shortcuts.increase-zoom")
                            :on-click on-increase
                            :icon i/add}]]
-        [:> button* {:variant "ghost"
-                     :on-click on-zoom-reset}
+        [:button {:class (stl/css :reset-btn)
+                  :on-click on-zoom-reset}
          (tr "workspace.header.reset-zoom")]]
-
        [:li {:class (stl/css :zoom-option)
              :on-click on-zoom-fit}
         (tr "workspace.header.zoom-fit-all")
@@ -98,7 +100,6 @@
          (for [sc (scd/split-sc (sc/get-tooltip :fit-all))]
            [:span {:class (stl/css :shortcut-key)
                    :key (str "zoom-fit-" sc)} sc])]]
-
        [:li {:class (stl/css :zoom-option)
              :on-click on-zoom-selected}
         (tr "workspace.header.zoom-selected")
@@ -197,43 +198,51 @@
 
     [:div {:class (stl/css :workspace-header-right)}
      [:div {:class (stl/css :users-section)}
-      [:> active-sessions*]]
+      [:& active-sessions]]
 
-     [:> progress-widget*]
+     [:& progress-widget]
 
      [:div {:class (stl/css :separator)}]
 
      [:div {:class (stl/css :zoom-section)}
-      [:> zoom-widget-workspace* {:zoom zoom
-                                  :on-increase on-increase
-                                  :on-decrease on-decrease
-                                  :on-zoom-reset on-zoom-reset
-                                  :on-zoom-fit on-zoom-fit
-                                  :on-zoom-selected on-zoom-selected}]]
+      [:& zoom-widget-workspace
+       {:zoom zoom
+        :on-increase on-increase
+        :on-decrease on-decrease
+        :on-zoom-reset on-zoom-reset
+        :on-zoom-fit on-zoom-fit
+        :on-zoom-selected on-zoom-selected}]]
 
-     [:div {:class (stl/css :comments-button-wrapper)}
-      [:> icon-button* {:variant "ghost"
-                        :aria-pressed (= selected-drawtool :comments)
-                        :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
-                        :on-click toggle-comments
-                        :icon i/comments}]
-      (when ^boolean has-unread-comments?
-        [:div {:class (stl/css :unread)}])]
+     [:div {:class (stl/css :comments-section)}
+      [:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
+                :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
+                :class (stl/css-case :comments-btn true
+                                     :selected (= selected-drawtool :comments))
+                :on-click toggle-comments
+                :data-tool "comments"
+                :style {:position "relative"}}
+       deprecated-icon/comments
+       (when ^boolean has-unread-comments?
+         [:div {:class (stl/css :unread)}])]]
 
      (when-not ^boolean read-only?
-       [:> icon-button* {:variant "ghost"
-                         :aria-pressed (contains? layout :document-history)
-                         :aria-label (tr "workspace.sidebar.history")
-                         :on-click toggle-history
-                         :icon i/history}])
+       [:div {:class (stl/css :history-section)}
+        [:button
+         {:title (tr "workspace.sidebar.history")
+          :aria-label (tr "workspace.sidebar.history")
+          :class (stl/css-case :selected (contains? layout :document-history)
+                               :history-button true)
+          :on-click toggle-history}
+         deprecated-icon/history]])
 
      (when display-share-button?
-       [:> icon-button* {:variant "ghost"
-                         :aria-label (tr "workspace.header.share")
-                         :on-click open-share-dialog
-                         :icon i/to-corner}])
+       [:a {:class (stl/css :viewer-btn)
+            :title (tr "workspace.header.share")
+            :on-click open-share-dialog}
+        deprecated-icon/share])
+
+     [:a {:class (stl/css :viewer-btn)
+          :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
+          :on-click nav-to-viewer}
+      deprecated-icon/play]]))
 
-     [:> icon-button* {:variant "ghost"
-                       :aria-label (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
-                       :on-click nav-to-viewer
-                       :icon i/play}]]))

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

@@ -11,8 +11,8 @@
   justify-content: space-between;
   align-items: center;
   min-width: deprecated.$s-256;
-  padding: deprecated.$s-8 deprecated.$s-12;
-  gap: deprecated.$s-4;
+  padding: deprecated.$s-8;
+  gap: deprecated.$s-8;
   background-color: var(--panel-background-color);
 }
 
@@ -28,14 +28,19 @@
 }
 
 .zoom-widget {
+  @include deprecated.buttonStyle;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: deprecated.$s-28;
+  max-width: deprecated.$s-48;
   width: deprecated.$s-48;
-  height: deprecated.$s-32;
+  border-radius: deprecated.$br-8;
 
   .label {
     @include deprecated.bodySmallTypography;
+    height: 100%;
+    padding: deprecated.$s-8 0;
     color: var(--button-tertiary-foreground-color-rest);
   }
 
@@ -79,6 +84,13 @@
   color: var(--modal-title-foreground-color);
 }
 
+.reset-btn {
+  @extend .button-tertiary;
+  color: var(--button-tertiary-foreground-color-hover);
+  height: deprecated.$s-28;
+  border-radius: deprecated.$br-8;
+}
+
 .zoom-option {
   @extend .menu-item-base;
 
@@ -101,11 +113,127 @@
   }
 }
 
-.comments-button-wrapper {
-  position: relative;
+.comments-btn {
+  @extend .button-tertiary;
+  border-radius: deprecated.$br-8;
+  margin: 0;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+  border: none;
+
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+  }
+
+  &:hover {
+    background-color: transparent;
+    border: none;
+  }
+
+  &.selected {
+    background-color: var(--button-tertiary-background-color-selected);
+
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
 }
 
-.comments-button-unread {
+.history-button {
+  @extend .button-tertiary;
+  border-radius: deprecated.$br-8;
+  margin: 0;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+  border: none;
+
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+  }
+
+  &:hover {
+    background-color: transparent;
+    border: none;
+  }
+
+  &.selected {
+    background-color: var(--button-tertiary-background-color-selected);
+
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+}
+
+.persistence-status-widget {
+  @include deprecated.flexCenter;
+  width: deprecated.$s-28;
+  height: deprecated.$s-28;
+}
+
+.status-icon {
+  @include deprecated.flexCenter;
+  width: deprecated.$s-24;
+  height: deprecated.$s-24;
+  margin: 0;
+  border-radius: deprecated.$br-circle;
+
+  svg {
+    @extend .button-icon;
+    stroke: var(--status-widget-icon-foreground-color);
+  }
+}
+
+.pending-status {
+  background-color: var(--status-widget-background-color-warning);
+}
+
+.saving-status {
+  background-color: var(--status-widget-background-color-pending);
+
+  svg {
+    animation: spin-animation 1s infinite;
+    animation-timing-function: linear;
+  }
+}
+
+.saved-status {
+  background-color: var(--status-widget-background-color-success);
+}
+
+.error-status {
+  background-color: var(--status-widget-background-color-error);
+}
+
+.share-btn,
+.viewer-btn {
+  @extend .button-tertiary;
+  border-radius: deprecated.$br-8;
+  margin: 0;
+  width: deprecated.$s-28;
+  height: deprecated.$s-28;
+  border: none;
+
+  svg {
+    @extend .button-icon;
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+    stroke: var(--icon-foreground);
+  }
+
+  &:hover {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.unread {
   position: absolute;
   width: 8px;
   height: 8px;

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

@@ -118,7 +118,8 @@
                                                           :update-name? update-name?
                                                           :name generated-name
                                                           :finalize? true
-                                                          :save-undo? false))))
+                                                          :save-undo? false
+                                                          :original-content original-content))))
 
           (let [container-node (mf/ref-val container-ref)]
             (dom/set-style! container-node "opacity" 0)))

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

@@ -17,9 +17,8 @@
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library*]]
    [app.util.dom :as dom]
@@ -162,40 +161,43 @@
             :id      "typographies"
             :handler on-section-filter-change}])]
 
-    [:article {:class (stl/css :assets-bar)}
+    [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
         (if (and (= num-libs 1) (empty? components))
-          [:> button* {:variant "primary"
-                       :on-click show-libraries-dialog
-                       :data-testid "libraries"}
+          [:button {:class (stl/css :add-library-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
            (tr "workspace.assets.add-library")]
-          [:> button* {:variant "secondary"
-                       :on-click show-libraries-dialog
-                       :data-testid "libraries"}
+
+          [:button {:class (stl/css :libraries-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
            (tr "workspace.assets.manage-library")]))
 
+
       [:div {:class (stl/css :search-wrapper)}
        [:> search-bar* {:on-change on-search-term-change
                         :value term
                         :placeholder (tr "workspace.assets.search")}
-        [:> icon-button* {:variant "secondary"
-                          :icon i/filter
-                          :class (stl/css :filter-button)
-                          :aria-pressed menu-open?
-                          :aria-label (tr "workspace.assets.filter")
-                          :on-click on-open-menu}]]
+        [:button
+         {:on-click on-open-menu
+          :title (tr "workspace.assets.filter")
+          :class (stl/css-case :section-button true
+                               :opened menu-open?)}
+         deprecated-icon/filter-icon]]
 
-       [:> context-menu* {:on-close on-menu-close
-                          :selectable true
-                          :selected section
-                          :show menu-open?
-                          :fixed true
-                          :min-width true
-                          :width size
-                          :top 158
-                          :left 18
-                          :options options}]
+       [:> context-menu*
+        {:on-close on-menu-close
+         :selectable true
+         :selected section
+         :show menu-open?
+         :fixed true
+         :min-width true
+         :width size
+         :top 158
+         :left 18
+         :options options}]
 
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.assets.sort")

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

@@ -17,14 +17,89 @@
   padding-top: deprecated.$s-8;
 }
 
-.assets-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xxs);
+.libraries-button {
+  @extend .button-secondary;
+  @include deprecated.uppercaseTitleTipography;
+  gap: deprecated.$s-2;
+  height: deprecated.$s-32;
+  width: 100%;
+  margin-bottom: deprecated.$s-4;
+  border-radius: deprecated.$s-8;
+
+  &:hover {
+    background-color: var(--button-secondary-background-color-hover);
+    color: var(--button-secondary-foreground-color-hover);
+    border: deprecated.$s-1 solid var(--button-secondary-border-color-hover);
+  }
+
+  &:focus {
+    background-color: var(--button-secondary-background-color-focus);
+    color: var(--button-secondary-foreground-color-focus);
+    border: deprecated.$s-1 solid var(--button-secondary-border-color-focus);
+  }
 }
 
-.filter-button {
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+.add-library-button {
+  @extend .button-primary;
+  @include deprecated.uppercaseTitleTipography;
+  gap: deprecated.$s-2;
+  height: deprecated.$s-32;
+  width: 100%;
+  margin-bottom: deprecated.$s-4;
+  border-radius: deprecated.$s-8;
+}
+
+.section-button {
+  @include deprecated.flexCenter;
+  @include deprecated.buttonStyle;
+  height: deprecated.$s-32;
+  width: deprecated.$s-32;
+  margin: 0;
+  border: deprecated.$s-1 solid var(--input-border-color-rest);
+  border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
+  background-color: var(--input-background-color-rest);
+
+  svg {
+    height: deprecated.$s-16;
+    width: deprecated.$s-16;
+    stroke: var(--icon-foreground);
+  }
+
+  &:focus {
+    border: deprecated.$s-1 solid var(--input-border-color-focus);
+    outline: 0;
+    background-color: var(--input-background-color-focus);
+    color: var(--input-foreground-color-focus);
+
+    svg {
+      background-color: var(--input-background-color-focus);
+    }
+  }
+
+  &:hover {
+    border: deprecated.$s-1 solid var(--input-border-color-hover);
+    background-color: var(--input-background-color-hover);
+
+    svg {
+      background-color: var(--input-background-color-hover);
+      stroke: var(--button-foreground-hover);
+    }
+
+    &:focus {
+      border: deprecated.$s-1 solid var(--input-border-color-focus);
+      outline: 0;
+      background-color: var(--input-background-color-focus);
+      color: var(--input-foreground-color-focus);
+
+      svg {
+        background-color: var(--input-background-color-focus);
+      }
+    }
+  }
+
+  &.opened {
+    @extend .button-icon-selected;
+  }
 }
 
 .sections-container {
@@ -50,6 +125,10 @@
   border-radius: deprecated.$br-8;
 }
 
+.section-btn {
+  @include deprecated.buttonStyle;
+}
+
 .assets-header {
   padding: 0 0 deprecated.$s-24 deprecated.$s-12;
 }

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

@@ -22,10 +22,10 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-label :refer [editable-label*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -563,27 +563,27 @@
      [:> cmm/asset-section-block* {:role :title-button}
       (when ^boolean is-open
         [:div
-         [:> radio-buttons* {:selected (if is-listing-thumbs "grid" "list")
-                             :on-change toggle-list-style
-                             :name "listing-style"
-                             :options [{:id "opt-list"
-                                        :icon i/view-as-list
-                                        :label (tr "workspace.assets.list-view")
-                                        :value "list"}
-                                       {:id "opt-grid"
-                                        :icon i/flex-grid
-                                        :label (tr "workspace.assets.grid-view")
-                                        :value "grid"}]}]])
+         [:& radio-buttons {:selected (if is-listing-thumbs "grid" "list")
+                            :on-change toggle-list-style
+                            :name "listing-style"}
+          [:& radio-button {:icon i/view-as-list
+                            :value "list"
+                            :title (tr "workspace.assets.list-view")
+                            :id "opt-list"}]
+          [:& radio-button {:icon i/flex-grid
+                            :value "grid"
+                            :title (tr "workspace.assets.grid-view")
+                            :id "opt-grid"}]]])
 
       (when (and (not read-only?) is-local)
         [:> icon-button* {:variant "ghost"
                           :aria-label (tr "workspace.assets.components.add-component")
                           :on-click add-component
                           :icon i/add}
-         [:> file-uploader* {:accept dwm/accept-image-types
-                             :multi true
-                             :ref input-ref
-                             :on-selected on-file-selected}]])]
+         [:& file-uploader {:accept dwm/accept-image-types
+                            :multi true
+                            :ref input-ref
+                            :on-selected on-file-selected}]])]
 
      [:> cmm/asset-section-block* {:role :content}
       (when ^boolean is-open

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

@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.groups :as grp]
-   [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry*]]
+   [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -113,17 +113,18 @@
            :on-drag-over dom/prevent-default
            :on-drop on-drop}
 
-     [:> typography-entry* {:file-id file-id
-                            :typography typography
-                            :local? local?
-                            :selected? (contains? selected typography-id)
-                            :on-click on-asset-click
-                            :on-change handle-change
-                            :on-context-menu on-context-menu
-                            :editing? editing?
-                            :renaming? renaming?
-                            :focus-name? rename?
-                            :external-open* open*}]
+     [:& typography-entry
+      {:file-id file-id
+       :typography typography
+       :local? local?
+       :selected? (contains? selected typography-id)
+       :on-click on-asset-click
+       :on-change handle-change
+       :on-context-menu on-context-menu
+       :editing? editing?
+       :renaming? renaming?
+       :focus-name? rename?
+       :external-open* open*}]
      (when ^boolean dragging?
        [:div {:class (stl/css :dragging)}])]))
 

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

@@ -84,6 +84,8 @@
             :on-click on-select-shape
             :on-context-menu on-context-menu
             :data-testid "layer-row"
+            :role "checkbox"
+            :aria-checked selected?
             :class (stl/css-case
                     :layer-row true
                     :highlight highlighted?

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

@@ -291,12 +291,13 @@
                             :value current-search
                             :on-clear clear-search-text
                             :placeholder (tr "workspace.sidebar.layers.search")}
-            [:> icon-button* {:variant "secondary"
-                              :class (stl/css :filter-button)
-                              :aria-pressed show-menu?
-                              :aria-label (tr "workspace.sidebar.layers.filter")
-                              :on-click on-toggle-filters-click
-                              :icon i/filter}]]
+            [:button {:on-click on-toggle-filters-click
+                      :class (stl/css-case
+                              :filter-button true
+                              :opened show-menu?
+                              :active active?)}
+             [:> icon* {:icon-id i/filter}]]]
+
            [:> icon-button* {:variant "ghost"
                              :aria-label (tr "labels.close")
                              :on-click toggle-search

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

@@ -19,7 +19,39 @@
     padding: 0 deprecated.$s-12 0 deprecated.$s-8;
     gap: deprecated.$s-4;
     .filter-button {
-      border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+      @include deprecated.flexCenter;
+      @include deprecated.buttonStyle;
+      height: deprecated.$s-32;
+      width: deprecated.$s-32;
+      margin: 0;
+      border: deprecated.$s-1 solid var(--color-background-tertiary);
+      border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
+      background-color: var(--color-background-tertiary);
+      svg {
+        height: deprecated.$s-16;
+        width: deprecated.$s-16;
+        stroke: var(--icon-foreground);
+      }
+      &:focus {
+        border: deprecated.$s-1 solid var(--input-border-color-focus);
+        outline: 0;
+        background-color: var(--input-background-color-active);
+        color: var(--input-foreground-color-active);
+        svg {
+          background-color: var(--input-background-color-active);
+        }
+      }
+      &:hover {
+        border: deprecated.$s-1 solid var(--input-border-color-hover);
+        background-color: var(--input-background-color-hover);
+        svg {
+          background-color: var(--input-background-color-hover);
+          stroke: var(--button-foreground-hover);
+        }
+      }
+      &.opened {
+        @extend .button-icon-selected;
+      }
     }
   }
 }
@@ -111,7 +143,7 @@
 .filters-container {
   @extend .menu-dropdown;
   position: absolute;
-  left: deprecated.$s-16;
+  left: deprecated.$s-20;
   width: deprecated.$s-192;
   .filter-menu-item {
     @include deprecated.bodySmallTypography;

frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs

@@ -12,7 +12,7 @@
    [app.main.data.workspace.drawing :as dwd]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
@@ -95,15 +95,15 @@
                (when preset-match
                  [:span {:class (stl/css :check-icon)} deprecated-icon/tick])])))]]]
 
-     [:> radio-buttons* {:class (stl/css :radio-buttons)
-                         :selected (or (d/name orientation) "")
-                         :on-change on-orientation-change
-                         :name "frame-orientation"
-                         :options [{:id "size-vertical"
-                                    :icon i/size-vertical
-                                    :label (tr "workspace.options.orientation.vertical")
-                                    :value "vertical"}
-                                   {:id "size-horizontal"
-                                    :icon i/size-horizontal
-                                    :label (tr "workspace.options.orientation.horizontal")
-                                    :value "horizontal"}]}]]))
+     [:& radio-buttons {:selected (or (d/name orientation) "")
+                        :on-change on-orientation-change
+                        :name "frame-orientation"
+                        :wide true
+                        :class (stl/css :radio-buttons)}
+      [:& radio-button {:icon i/size-vertical
+                        :value "vertical"
+                        :id "size-vertical"}]
+      [:& radio-button {:icon i/size-horizontal
+                        :value "horizontal"
+                        :id "size-horizontal"}]]]))
+

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

@@ -10,8 +10,7 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -43,59 +42,68 @@
     (when-not (and disabled-align disabled-distribute)
       [:div {:class (stl/css :align-options)}
        [:div {:class (stl/css :align-group-horizontal)}
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-left
-                          :aria-label (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
-                          :on-click align-objects
-                          :data-value "hleft"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
+                  :data-value "hleft"
+                  :on-click align-objects}
+         deprecated-icon/align-left]
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-horizontal-center
-                          :aria-label (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
-                          :on-click align-objects
-                          :data-value "hcenter"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
+                  :data-value "hcenter"
+                  :on-click align-objects}
+         deprecated-icon/align-horizontal-center]
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-right
-                          :aria-label (tr "workspace.align.hright" (sc/get-tooltip :align-right))
-                          :on-click align-objects
-                          :data-value "hright"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
+                  :data-value "hright"
+                  :on-click align-objects}
+         deprecated-icon/align-right]
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/distribute-horizontally
-                          :aria-label (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
-                          :on-click distribute-objects
-                          :data-value "horizontal"
-                          :disabled disabled-distribute}]]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-distribute)
+                  :disabled disabled-distribute
+                  :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
+                  :data-value "horizontal"
+                  :on-click distribute-objects}
+         deprecated-icon/distribute-horizontally]]
 
        [:div {:class (stl/css :align-group-vertical)}
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-top
-                          :aria-label (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
-                          :on-click align-objects
-                          :data-value "vtop"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
+                  :data-value "vtop"
+                  :on-click  align-objects}
+         deprecated-icon/align-top]
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-vertical-center
-                          :aria-label (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
-                          :on-click align-objects
-                          :data-value "vcenter"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
+                  :data-value "vcenter"
+                  :on-click  align-objects}
+         deprecated-icon/align-vertical-center]
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/align-bottom
-                          :aria-label (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
-                          :on-click align-objects
-                          :data-value "vbottom"
-                          :disabled disabled-align}]
+        [:button {:class (stl/css-case :align-button true
+                                       :disabled disabled-align)
+                  :disabled disabled-align
+                  :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
+                  :data-value "vbottom"
+                  :on-click  align-objects}
+         deprecated-icon/align-bottom]
+
+        [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
+                  :class (stl/css-case :align-button true
+                                       :disabled disabled-distribute)
+                  :disabled disabled-distribute
+                  :data-value "vertical"
+                  :on-click distribute-objects}
+         deprecated-icon/distribute-vertical-spacing]]])))
 
-        [:> icon-button* {:variant "ghost"
-                          :icon i/distribute-vertical-spacing
-                          :aria-label (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
-                          :on-click distribute-objects
-                          :data-value "vertical"
-                          :disabled disabled-distribute}]]])))

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

@@ -4,10 +4,12 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .align-options {
   @include sidebar.option-grid-structure;
+  height: deprecated.$s-32;
 }
 .align-group-horizontal,
 .align-group-vertical {
@@ -24,3 +26,27 @@
 .align-group-vertical {
   grid-column: 5 / span 4;
 }
+
+.align-button {
+  @extend .button-tertiary;
+  height: deprecated.$s-32;
+  width: deprecated.$s-32;
+  padding: 0;
+  border-radius: deprecated.$br-8;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+  &.disabled {
+    cursor: default;
+    svg {
+      stroke: var(--button-foreground-color-disabled);
+    }
+    &:hover {
+      background-color: var(--panel-background-color);
+      svg {
+        stroke: var(--button-foreground-color-disabled);
+      }
+    }
+  }
+}

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

@@ -15,6 +15,7 @@
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -102,12 +103,10 @@
         [:div {:class (stl/css-case :first-row true
                                     :hidden hidden?)}
          [:div {:class (stl/css :blur-info)}
-          [:> icon-button* {:variant "secondary"
-                            :class (stl/css :show-more)
-                            :aria-label (tr "labels.options")
-                            :aria-pressed more-options?
-                            :on-click toggle-more-options
-                            :icon i/menu}]
+          [:button {:class (stl/css-case :show-more true
+                                         :selected more-options?)
+                    :on-click toggle-more-options}
+           deprecated-icon/menu]
           [:span {:class (stl/css :label)}
            (tr "workspace.options.blur-options.title")]]
          [:div {:class (stl/css :actions)}

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

@@ -37,7 +37,21 @@
     border-radius: deprecated.$br-8;
     background-color: var(--input-details-color);
     .show-more {
+      @extend .button-secondary;
+      height: deprecated.$s-32;
+      width: deprecated.$s-28;
       border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+      box-sizing: border-box;
+      border: deprecated.$s-1 solid var(--button-secondary-background-color-rest);
+      svg {
+        @extend .button-icon;
+      }
+      &.selected {
+        background-color: var(--button-radio-background-color-active);
+        svg {
+          stroke: var(--button-radio-foreground-color-active);
+        }
+      }
     }
     .label {
       @include deprecated.bodySmallTypography;

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

@@ -15,12 +15,15 @@
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.features :as features]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(def ^:private flatten-icon
+  (deprecated-icon/icon-xref :boolean-flatten (stl/css :flatten-icon)))
+
 (mf/defc bool-options*
   [{:keys [total-selected shapes shapes-with-children]}]
   (let [head      (first shapes)
@@ -67,40 +70,41 @@
                  (st/emit! (dwb/change-bool-type head-id bool-type)))))))
 
         flatten-objects
-        (mf/use-fn
-         #(st/emit! (dwps/convert-selected-to-path)))]
+        (mf/use-fn  #(st/emit! (dwps/convert-selected-to-path)))]
 
     (when (not (and disabled-bool-btns disabled-flatten))
       [:div {:class (stl/css :boolean-options)}
-       [:div {:class (stl/css :boolean-group)}
-        [:> radio-buttons* {:class (stl/css :boolean-radio-btn)
-                            :variant "ghost"
-                            :selected (d/name head-bool-type)
-                            :on-change on-change
-                            :name "bool-options"
-                            :options [{:id "bool-opt-union"
-                                       :icon i/boolean-union
-                                       :label (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
-                                       :value "union"
-                                       :disabled disabled-bool-btns}
-                                      {:id "bool-opt-differente"
-                                       :icon i/boolean-difference
-                                       :label (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
-                                       :value "difference"
-                                       :disabled disabled-bool-btns}
-                                      {:id "bool-opt-intersection"
-                                       :icon i/boolean-intersection
-                                       :label (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
-                                       :value "intersection"
-                                       :disabled disabled-bool-btns}
-                                      {:id "bool-opt-exclude"
-                                       :icon i/boolean-exclude
-                                       :label (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")
-                                       :value "exclude"
-                                       :disabled disabled-bool-btns}]}]]
+       [:div {:class (stl/css :bool-group)}
+        [:& radio-buttons {:selected (d/name head-bool-type)
+                           :class (stl/css :boolean-radio-btn)
+                           :on-change on-change
+                           :name "bool-options"}
+         [:& radio-button {:icon i/boolean-union
+                           :value "union"
+                           :disabled disabled-bool-btns
+                           :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
+                           :id "bool-opt-union"}]
+         [:& radio-button {:icon i/boolean-difference
+                           :value "difference"
+                           :disabled disabled-bool-btns
+                           :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
+                           :id "bool-opt-differente"}]
+         [:& radio-button {:icon i/boolean-intersection
+                           :value "intersection"
+                           :disabled disabled-bool-btns
+                           :title (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
+                           :id "bool-opt-intersection"}]
+         [:& radio-button {:icon i/boolean-exclude
+                           :value "exclude"
+                           :disabled disabled-bool-btns
+                           :title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")
+                           :id "bool-opt-exclude"}]]]
 
-       [:> icon-button* {:variant "ghost"
-                         :icon i/boolean-flatten
-                         :aria-label (tr "workspace.shape.menu.flatten")
-                         :on-click flatten-objects
-                         :disabled disabled-flatten}]])))
+       [:button
+        {:title (tr "workspace.shape.menu.flatten")
+         :class (stl/css-case
+                 :flatten-button true
+                 :disabled disabled-flatten)
+         :disabled disabled-flatten
+         :on-click flatten-objects}
+        flatten-icon]])))