🐛 Fix problem with flex.appendChild with naturalOrdering

The main idea behind this, is move all plugin related stuff from
app.main.data.plugins into app.plugins.* and make them more consistent.
Also the intention that put all plugins related state under specific
prefix on the state.

common/src/app/common/data.cljc

@@ -760,6 +760,21 @@
        default
        v))))
 
+(defn percent?
+  [v]
+  (str/numeric? (str/rtrim v "%")))
+
+(defn parse-percent
+  ([v]
+   (parse-percent v nil))
+  ([v default]
+   (if (str/ends-with? v "%")
+     (let [v (impl-parse-double (str/trim v "%"))]
+       (if (or (nil? v) (nan? v))
+         default
+         (/ v 100)))
+     (parse-double v default))))
+
 (defn parse-uuid
   [v]
   (try

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)]
-             (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 []))}))))
+             (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 []))})))
 
          add-undo-change-parent
          (fn [change-set id]
            (let [shape (get objects id)
                  prev-sibling (cfh/get-prev-sibling objects (:id shape))]
-             (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}))))]
+             (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})))]
 
      (-> changes
          (update :redo-changes #(reduce add-redo-change % ids))
@@ -1150,24 +1150,3 @@
   [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))))

common/src/app/common/files/tokens.cljc

@@ -31,18 +31,56 @@
 (def schema:token-value-generic
   [::sm/text {:error/fn token-value-empty-fn}])
 
+(def schema:token-value-numeric
+  [:and
+   [::sm/text {:error/fn token-value-empty-fn}]
+   [:fn {:error/fn #(tr "workspace.tokens.invalid-value" (:value %))}
+    (fn [value]
+      (if (str/numeric? value)
+        (let [n (d/parse-double value)]
+          (some? n))
+        true))]])  ;; Leave references or formulas to be checked by the resolver
+
+(def schema:token-value-percent
+  [:and
+   [::sm/text {:error/fn token-value-empty-fn}]
+   [:fn {:error/fn #(tr "workspace.tokens.value-with-percent" (:value %))}
+    (fn [value]
+      (if (d/percent? value)
+        (let [v (d/parse-percent value)]
+          (some? v))
+        true))]])  ;; Leave references or formulas to be checked by the resolver
+
 (def schema:token-value-composite-ref
   [::sm/text {:error/fn token-value-empty-fn}])
 
+(def schema:token-value-opacity
+  [:and
+   [::sm/text {:error/fn token-value-empty-fn}]
+   [:fn {:error/fn #(tr "workspace.tokens.opacity-range")}
+    (fn [opacity]
+      (if (str/numeric? opacity)
+        (let [n (d/parse-percent opacity)]
+          (and (some? n) (<= 0 n 1)))
+        true))]])  ;; Leave references or formulas to be checked by the resolver
+
 (def schema:token-value-font-family
-  [:vector ::sm/text])
+  [:or
+   [:vector ::sm/text]
+   cto/schema:token-ref])
+
+(def schema:token-value-font-weight
+  [:or
+   [:fn {:error/fn #(tr "workspace.tokens.invalid-font-weight-token-value")}
+    cto/valid-font-weight-variant]
+   ::sm/text])  ;; Leave references or formulas to be checked by the resolver
 
 (def schema:token-value-typography-map
   [:map
    [:font-family {:optional true} schema:token-value-font-family]
-   [:font-weight {:optional true} schema:token-value-generic]
-   [:font-size {:optional true} schema:token-value-generic]
-   [:line-height {:optional true} schema:token-value-generic]
+   [:font-size {:optional true} schema:token-value-numeric]
+   [:font-weight {:optional true} schema:token-value-font-weight]
+   [:line-height {:optional true} schema:token-value-percent]
    [:letter-spacing {:optional true} schema:token-value-generic]
    [:paragraph-spacing {:optional true} schema:token-value-generic]
    [:text-decoration {:optional true} schema:token-value-generic]
@@ -84,7 +122,10 @@
   [token-type]
   [:multi {:dispatch (constantly token-type)
            :title "Token Value"}
+   [:opacity schema:token-value-opacity]
    [:font-family schema:token-value-font-family]
+   [:font-size schema:token-value-numeric]
+   [:font-weight schema:token-value-font-weight]
    [:typography schema:token-value-typography]
    [:shadow schema:token-value-shadow]
    [::m/default schema:token-value-generic]])
@@ -169,7 +210,7 @@
   [tokens-lib set-id]
   [:and
    [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "errors.token-set-already-exists" (:value %))}
+   [:fn {:error/fn #(tr "errors.token-set-already-exists")}
     (fn [name]
       (or (nil? tokens-lib)
           (let [set (ctob/get-set-by-name tokens-lib name)]
@@ -196,7 +237,7 @@
   [tokens-lib name theme-id]
   [:and
    [:string {:min 0 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   [:fn {:error/fn #(tr "errors.token-theme-already-exists" (:value %))}
+   [:fn {:error/fn #(tr "errors.token-theme-already-exists")}
     (fn [group]
       (or (nil? tokens-lib)
           (let [theme (ctob/get-theme-by-name tokens-lib group name)]

common/src/app/common/types/shape_tree.cljc

@@ -115,25 +115,21 @@
 (defn get-frames
   "Retrieves all frame objects as vector"
   ([objects] (get-frames objects nil))
-  ([objects {:keys [skip-components? skip-copies? ignore-index?]
+  ([objects {:keys [skip-components? skip-copies?]
              :or {skip-components? false
-                  skip-copies? false
-                  ignore-index? false}}]
-   (let [frame-index
-         (if (and (not ignore-index?) (-> objects meta ::index-frames))
-           (-> objects meta ::index-frames)
-           (let [lookup (d/getf objects)
-                 xform  (comp (remove #(= uuid/zero %))
-                              (keep lookup)
-                              (filter cfh/frame-shape?))]
-             (->> (keys objects)
-                  (sequence xform))))]
-     (->> frame-index
-          (remove #(or (and ^boolean skip-components?
-                            ^boolean (ctk/instance-head? %))
-                       (and ^boolean skip-copies?
-                            (and ^boolean (ctk/instance-head? %)
-                                 (not ^boolean (ctk/main-instance? %))))))))))
+                  skip-copies? false}}]
+   (->> (or (-> objects meta ::index-frames)
+            (let [lookup (d/getf objects)
+                  xform  (comp (remove #(= uuid/zero %))
+                               (keep lookup)
+                               (filter cfh/frame-shape?))]
+              (->> (keys objects)
+                   (sequence xform))))
+        (remove #(or (and ^boolean skip-components?
+                          ^boolean (ctk/instance-head? %))
+                     (and ^boolean skip-copies?
+                          (and ^boolean (ctk/instance-head? %)
+                               (not ^boolean (ctk/main-instance? %)))))))))
 
 (defn get-frames-ids
   "Retrieves all frame ids as vector"

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

@@ -143,6 +143,15 @@
         :gen/gen sg/text}
    token-name-validation-regex])
 
+(def token-ref-validation-regex
+  #"^\{[a-zA-Z0-9_-][a-zA-Z0-9$_-]*(\.[a-zA-Z0-9$_-]+)*\}$")
+
+(def schema:token-ref
+  "A token reference is a token name enclosed in {}."
+  [:re {:title "TokenRef"
+        :gen/gen sg/text}
+   token-ref-validation-regex])
+
 (def schema:token-type
   [::sm/one-of {:decode/json (fn [type]
                                (if (string? type)

exporter/src/app/browser.cljs

@@ -100,12 +100,14 @@
 
 (def browser-pool-factory
   (letfn [(create []
-            (p/let [opts    #js {:args #js ["--allow-insecure-localhost" "--font-render-hinting=none"]}
-                    browser (.launch pw/chromium opts)
-                    id      (swap! pool-browser-id inc)]
-              (l/info :origin "factory" :action "create" :browser-id id)
-              (unchecked-set browser "__id" id)
-              browser))
+            (-> (p/let [opts    #js {:args #js ["--allow-insecure-localhost" "--font-render-hinting=none"]}
+                        browser (.launch pw/chromium opts)
+                        id      (swap! pool-browser-id inc)]
+                  (l/info :origin "factory" :action "create" :browser-id id)
+                  (unchecked-set browser "__id" id)
+                  browser)
+                (p/catch (fn [cause]
+                           (l/error :hint "Cannot launch the headless browser" :cause cause)))))
 
           (destroy [obj]
             (let [id (unchecked-get obj "__id")]

exporter/src/app/handlers/export_shapes.cljs

@@ -47,12 +47,13 @@
 
 (s/def ::params
   (s/keys :req-un [::exports ::profile-id]
-          :opt-un [::wait ::name ::skip-children]))
+          :opt-un [::wait ::name ::skip-children ::force-multiple]))
 
 (defn handler
-  [{:keys [:request/auth-token] :as exchange} {:keys [exports] :as params}]
+  [{:keys [:request/auth-token] :as exchange} {:keys [exports force-multiple] :as params}]
   (let [exports (prepare-exports exports auth-token)]
-    (if (and (= 1 (count exports))
+    (if (and (not force-multiple)
+             (= 1 (count exports))
              (= 1 (count (-> exports first :objects))))
       (handle-single-export exchange (-> params
                                          (assoc :export (first exports))

frontend/package.json

@@ -40,9 +40,8 @@
     "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 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: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:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\"",
     "postinstall": "(cd ../plugins/libs/plugins-runtime; pnpm install; pnpm run build)"
   },

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

@@ -0,0 +1,26 @@
+[
+  {
+    "~: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

@@ -0,0 +1,26 @@
+{
+  "~: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/render-wasm/get-file-inner-strokes-artifacts.json

@@ -1,814 +0,0 @@
-{
-    "~:features": {
-      "~#set": [
-        "fdata/path-data",
-        "plugins/runtime",
-        "design-tokens/v1",
-        "variants/v1",
-        "layout/grid",
-        "styles/v2",
-        "fdata/pointer-map",
-        "fdata/objects-map",
-        "render-wasm/v1",
-        "components/v2",
-        "fdata/shape-data-type"
-      ]
-    },
-    "~:team-id": "~ueba8fa2e-4140-8084-8005-448635d7a724",
-    "~: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": "gaps",
-    "~:revn": 79,
-    "~:modified-at": "~m1771855365377",
-    "~:vern": 0,
-    "~:id": "~ueffcbebc-b8c8-802f-8007-9a0b2e2c863f",
-    "~: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": "~ueba8fa2e-4140-8084-8005-448635da32b4",
-    "~:created-at": "~m1771591980210",
-    "~:backend": "legacy-db",
-    "~:data": {
-      "~:pages": [
-        "~ueffcbebc-b8c8-802f-8007-9a0b2e2c8640"
-      ],
-      "~:pages-index": {
-        "~ueffcbebc-b8c8-802f-8007-9a0b2e2c8640": {
-          "~:objects": {
-            "~u00000000-0000-0000-0000-000000000000": {
-              "~#shape": {
-                "~:y": 0,
-                "~:hide-fill-on-export": false,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:name": "Root Frame",
-                "~:width": 0.01,
-                "~:type": "~:frame",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 0,
-                      "~:y": 0
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 0.01,
-                      "~:y": 0
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 0.01,
-                      "~:y": 0.01
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 0,
-                      "~:y": 0.01
-                    }
-                  }
-                ],
-                "~:r2": 0,
-                "~:proportion-lock": false,
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 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,
-                "~:r4": 0,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 0,
-                    "~:y": 0,
-                    "~:width": 0.01,
-                    "~:height": 0.01,
-                    "~:x1": 0,
-                    "~:y1": 0,
-                    "~:x2": 0.01,
-                    "~:y2": 0.01
-                  }
-                },
-                "~:fills": [
-                  {
-                    "~:fill-color": "#FFFFFF",
-                    "~:fill-opacity": 1
-                  }
-                ],
-                "~:flip-x": null,
-                "~:height": 0.01,
-                "~:flip-y": null,
-                "~:shapes": [
-                  "~u36e8a3ad-2b63-8008-8007-9a0b2f24ca4e",
-                  "~ufbc43ead-a2ce-8058-8007-9a0daf843e09",
-                  "~ufbc43ead-a2ce-8058-8007-9a0dbe2f49b8",
-                  "~u5bebb998-d617-801b-8007-9a3fbd5cc804",
-                  "~u80e2fa5a-cd1c-8043-8007-9d8aaca49f40"
-                ]
-              }
-            },
-            "~ufbc43ead-a2ce-8058-8007-9a0dbe2f49b8": {
-              "~#shape": {
-                "~:y": null,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:grow-type": "~:fixed",
-                "~:content": {
-                  "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD/f5dEM2EsRAIAAAAAAAAAAAAAAAAAAAAAAAAAUhmnRABACkQCAAAAAAAAAAAAAAAAAAAAAAAAAP8/vET//01EAgAAAAAAAAAAAAAAAAAAAAAAAAD/f5dEM2EsRA=="
-                },
-                "~:name": "Path",
-                "~:width": null,
-                "~:type": "~:path",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 1212.00003372852,
-                      "~:y": 553.000012923003
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1506.00004755679,
-                      "~:y": 553.000012923003
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1506.00004755679,
-                      "~:y": 823.999993849517
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1212.00003372852,
-                      "~:y": 823.999993849517
-                    }
-                  }
-                ],
-                "~:r2": 0,
-                "~:proportion-lock": false,
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:r3": 0,
-                "~:r1": 0,
-                "~:id": "~ufbc43ead-a2ce-8058-8007-9a0dbe2f49b8",
-                "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:strokes": [
-                  {
-                    "~:stroke-alignment": "~:inner",
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1,
-                    "~:stroke-width": 10
-                  }
-                ],
-                "~:x": null,
-                "~:proportion": 1,
-                "~:shadow": [],
-                "~:r4": 0,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 1212.00003372852,
-                    "~:y": 553.000012923003,
-                    "~:width": 294.000013828278,
-                    "~:height": 270.999980926514,
-                    "~:x1": 1212.00003372852,
-                    "~:y1": 553.000012923003,
-                    "~:x2": 1506.00004755679,
-                    "~:y2": 823.999993849517
-                  }
-                },
-                "~:fills": [
-                  {
-                    "~:fill-color": "#ffffff",
-                    "~:fill-opacity": 1
-                  }
-                ],
-                "~:flip-x": null,
-                "~:height": null,
-                "~:flip-y": null
-              }
-            },
-            "~u36e8a3ad-2b63-8008-8007-9a0b2f24ca4e": {
-              "~#shape": {
-                "~:y": 122.000001761754,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:hide-in-viewer": false,
-                "~:name": "Rectangle",
-                "~:width": 463.999987447937,
-                "~:type": "~:rect",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 694.000014750112,
-                      "~:y": 122.000001761754
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1158.00000219805,
-                      "~:y": 122.000001761754
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1158.00000219805,
-                      "~:y": 499.999980116278
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 694.000014750112,
-                      "~:y": 499.999980116278
-                    }
-                  }
-                ],
-                "~:r2": 0,
-                "~:proportion-lock": false,
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:r3": 0,
-                "~:r1": 0,
-                "~:id": "~u36e8a3ad-2b63-8008-8007-9a0b2f24ca4e",
-                "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:strokes": [
-                  {
-                    "~:stroke-alignment": "~:inner",
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1,
-                    "~:stroke-width": 100
-                  },
-                  {
-                    "~:stroke-alignment": "~:outer",
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1,
-                    "~:stroke-width": 100
-                  }
-                ],
-                "~:x": 694.000014750113,
-                "~:proportion": 1,
-                "~:shadow": [],
-                "~:r4": 0,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 694.000014750113,
-                    "~:y": 122.000001761754,
-                    "~:width": 463.999987447937,
-                    "~:height": 377.999978354524,
-                    "~:x1": 694.000014750113,
-                    "~:y1": 122.000001761754,
-                    "~:x2": 1158.00000219805,
-                    "~:y2": 499.999980116278
-                  }
-                },
-                "~:fills": [
-                  {
-                    "~:fill-color": "#ffffff",
-                    "~:fill-opacity": 1
-                  }
-                ],
-                "~:flip-x": null,
-                "~:height": 377.999978354524,
-                "~:flip-y": null
-              }
-            },
-            "~ufbc43ead-a2ce-8058-8007-9a0daf843e09": {
-              "~#shape": {
-                "~:y": 262.999997589325,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:grow-type": "~:fixed",
-                "~:hide-in-viewer": false,
-                "~:name": "Ellipse",
-                "~:width": 266.000036716461,
-                "~:type": "~:circle",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 1271.00000137752,
-                      "~:y": 262.999997589325
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1537.00003809398,
-                      "~:y": 262.999997589325
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1537.00003809398,
-                      "~:y": 483.000033828949
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1271.00000137752,
-                      "~:y": 483.000033828949
-                    }
-                  }
-                ],
-                "~:r2": 0,
-                "~:proportion-lock": false,
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:r3": 0,
-                "~:r1": 0,
-                "~:id": "~ufbc43ead-a2ce-8058-8007-9a0daf843e09",
-                "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:strokes": [
-                  {
-                    "~:stroke-alignment": "~:inner",
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1,
-                    "~:stroke-width": 10
-                  }
-                ],
-                "~:x": 1271.00000137752,
-                "~:proportion": 1,
-                "~:shadow": [
-                  {
-                    "~:id": "~u9c6321b5-aeab-809f-8007-971f9e232191",
-                    "~:style": "~:drop-shadow",
-                    "~:color": {
-                      "~:color": "#000000",
-                      "~:opacity": 1
-                    },
-                    "~:offset-x": 4,
-                    "~:offset-y": 4,
-                    "~:blur": 0,
-                    "~:spread": 0,
-                    "~:hidden": true
-                  }
-                ],
-                "~:r4": 0,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 1271.00000137752,
-                    "~:y": 262.999997589325,
-                    "~:width": 266.000036716461,
-                    "~:height": 220.000036239624,
-                    "~:x1": 1271.00000137752,
-                    "~:y1": 262.999997589325,
-                    "~:x2": 1537.00003809398,
-                    "~:y2": 483.000033828949
-                  }
-                },
-                "~:fills": [
-                  {
-                    "~:fill-color": "#ffffff",
-                    "~:fill-opacity": 1
-                  }
-                ],
-                "~:flip-x": null,
-                "~:height": 220.000036239624,
-                "~:flip-y": null
-              }
-            },
-            "~u80e2fa5a-cd1c-8043-8007-9d8aaca49f40": {
-              "~#shape": {
-                "~:y": -286.999972473494,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:grow-type": "~:auto-width",
-                "~:content": {
-                  "~:type": "root",
-                  "~:key": "1srkh8oc2vd",
-                  "~:children": [
-                    {
-                      "~:type": "paragraph-set",
-                      "~:children": [
-                        {
-                          "~:line-height": "1.2",
-                          "~:font-style": "normal",
-                          "~:children": [
-                            {
-                              "~:line-height": "1.2",
-                              "~:font-style": "normal",
-                              "~:typography-ref-id": null,
-                              "~:text-transform": "none",
-                              "~:font-id": "sourcesanspro",
-                              "~:key": "170uyffw5ph",
-                              "~:font-size": "400",
-                              "~:font-weight": "400",
-                              "~:typography-ref-file": null,
-                              "~:font-variant-id": "regular",
-                              "~:text-decoration": "none",
-                              "~:letter-spacing": "0",
-                              "~:fills": [
-                                {
-                                  "~:fill-color": "#ffffff",
-                                  "~:fill-opacity": 1
-                                }
-                              ],
-                              "~:font-family": "sourcesanspro",
-                              "~:text": "HELLO"
-                            }
-                          ],
-                          "~:typography-ref-id": null,
-                          "~:text-transform": "none",
-                          "~:text-align": "left",
-                          "~:font-id": "sourcesanspro",
-                          "~:key": "psg8ayj675",
-                          "~:font-size": "400",
-                          "~:font-weight": "400",
-                          "~:typography-ref-file": null,
-                          "~:text-direction": "ltr",
-                          "~:type": "paragraph",
-                          "~:font-variant-id": "regular",
-                          "~:text-decoration": "none",
-                          "~:letter-spacing": "0",
-                          "~:fills": [
-                            {
-                              "~:fill-color": "#ffffff",
-                              "~:fill-opacity": 1
-                            }
-                          ],
-                          "~:font-family": "sourcesanspro"
-                        }
-                      ]
-                    }
-                  ],
-                  "~:vertical-align": "top"
-                },
-                "~:hide-in-viewer": false,
-                "~:name": "HELLO",
-                "~:width": 1116.00003953244,
-                "~:type": "~:text",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 545.000013504691,
-                      "~:y": -286.999972473494
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1661.00005303713,
-                      "~:y": -286.999972473494
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1661.00005303713,
-                      "~:y": 193.000017549648
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 545.000013504691,
-                      "~:y": 193.000017549648
-                    }
-                  }
-                ],
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:id": "~u80e2fa5a-cd1c-8043-8007-9d8aaca49f40",
-                "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:position-data": [
-                  {
-                    "~:y": 211.980041503906,
-                    "~:line-height": "1.2",
-                    "~:font-style": "normal",
-                    "~:text-transform": "none",
-                    "~:text-align": "left",
-                    "~:font-id": "sourcesanspro",
-                    "~:font-size": "400",
-                    "~:font-weight": "400",
-                    "~:text-direction": "ltr",
-                    "~:width": 1115.22998046875,
-                    "~:font-variant-id": "regular",
-                    "~:text-decoration": "none",
-                    "~:letter-spacing": "0",
-                    "~:x": 545,
-                    "~:fills": [
-                      {
-                        "~:fill-color": "#ffffff",
-                        "~:fill-opacity": 1
-                      }
-                    ],
-                    "~:direction": "ltr",
-                    "~:font-family": "sourcesanspro",
-                    "~:height": 517.960021972656,
-                    "~:text": "HELLO"
-                  }
-                ],
-                "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:strokes": [
-                  {
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-alignment": "~:inner",
-                    "~:stroke-width": 5,
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1
-                  }
-                ],
-                "~:x": 545.000013504691,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 545.000013504691,
-                    "~:y": -286.999972473494,
-                    "~:width": 1116.00003953244,
-                    "~:height": 479.999990023141,
-                    "~:x1": 545.000013504691,
-                    "~:y1": -286.999972473494,
-                    "~:x2": 1661.00005303713,
-                    "~:y2": 193.000017549648
-                  }
-                },
-                "~:flip-x": null,
-                "~:height": 479.999990023141,
-                "~:flip-y": null
-              }
-            },
-            "~u5bebb998-d617-801b-8007-9a3fbd5cc804": {
-              "~#shape": {
-                "~:y": 543.00001095581,
-                "~:transform": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:rotation": 0,
-                "~:hide-in-viewer": false,
-                "~:name": "Rectangle",
-                "~:width": 463.999987447937,
-                "~:type": "~:rect",
-                "~:points": [
-                  {
-                    "~#point": {
-                      "~:x": 693.999990768432,
-                      "~:y": 543.00001095581
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1157.99997821637,
-                      "~:y": 543.00001095581
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 1157.99997821637,
-                      "~:y": 920.999989310334
-                    }
-                  },
-                  {
-                    "~#point": {
-                      "~:x": 693.999990768432,
-                      "~:y": 920.999989310334
-                    }
-                  }
-                ],
-                "~:r2": 0,
-                "~:proportion-lock": false,
-                "~:transform-inverse": {
-                  "~#matrix": {
-                    "~:a": 1,
-                    "~:b": 0,
-                    "~:c": 0,
-                    "~:d": 1,
-                    "~:e": 0,
-                    "~:f": 0
-                  }
-                },
-                "~:r3": 0,
-                "~:r1": 0,
-                "~:id": "~u5bebb998-d617-801b-8007-9a3fbd5cc804",
-                "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
-                "~:strokes": [
-                  {
-                    "~:stroke-alignment": "~:inner",
-                    "~:stroke-style": "~:solid",
-                    "~:stroke-color": "#000000",
-                    "~:stroke-opacity": 1,
-                    "~:stroke-width": 100
-                  }
-                ],
-                "~:x": 693.999990768432,
-                "~:proportion": 1,
-                "~:shadow": [],
-                "~:r4": 0,
-                "~:selrect": {
-                  "~#rect": {
-                    "~:x": 693.999990768432,
-                    "~:y": 543.00001095581,
-                    "~:width": 463.999987447937,
-                    "~:height": 377.999978354524,
-                    "~:x1": 693.999990768432,
-                    "~:y1": 543.00001095581,
-                    "~:x2": 1157.99997821637,
-                    "~:y2": 920.999989310334
-                  }
-                },
-                "~:fills": [
-                  {
-                    "~:fill-color": "#ffffff",
-                    "~:fill-opacity": 1
-                  }
-                ],
-                "~:flip-x": null,
-                "~:height": 377.999978354524,
-                "~:flip-y": null
-              }
-            }
-          },
-          "~:id": "~ueffcbebc-b8c8-802f-8007-9a0b2e2c8640",
-          "~:name": "Page 1",
-          "~:background": "#000000"
-        }
-      },
-      "~:id": "~ueffcbebc-b8c8-802f-8007-9a0b2e2c863f",
-      "~:options": {
-        "~:components-v2": true,
-        "~:base-font-size": "16px"
-      }
-    }
-  }

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

@@ -1,22 +0,0 @@
-{
-  "~: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

@@ -1,131 +0,0 @@
-{
-  "~: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

@@ -1,136 +0,0 @@
-{
-    "~: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

@@ -1,135 +0,0 @@
-{
-    "~: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

@@ -1,135 +0,0 @@
-{
-    "~: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-13468-fragment.json

@@ -1,21 +0,0 @@
-{
-  "~:file-id": "~u3a4d7ec7-c391-8146-8007-9a05c41da6b9",
-  "~:id": "~u3a4d7ec7-c391-8146-8007-9dd6c998fbc4",
-  "~:created-at": "~m1771846681191",
-  "~:modified-at": "~m1771846681191",
-  "~:type": "fragment",
-  "~:backend": "db",
-  "~:data": {
-    "~:id": "~u95b23c15-79f9-81ba-8007-99d81b5290dd",
-    "~:name": "Page 1",
-    "~: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]],\"~:page-id\",\"~u95b23c15-79f9-81ba-8007-99d81b5290dd\",\"~: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\",[\"~ucfb31a9c-83c2-806f-8007-9dbf43043bdf\"]]]",
-        "~ucfb31a9c-83c2-806f-8007-9dbf43043be0": "[\"~#shape\",[\"^ \",\"~:y\",-218.99999605032087,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",5,\"~:p2\",5,\"~:p3\",5,\"~:p4\",5],\"~: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\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Container\",\"~:layout-align-items\",\"~:start\",\"~:width\",431.99994866329087,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",608.9999813066789,\"~:y\",-218.99999605032087]],[\"^J\",[\"^ \",\"~:x\",1040.9999299699698,\"~:y\",-218.99999605032087]],[\"^J\",[\"^ \",\"~:x\",1040.9999299699698,\"~:y\",-177.00001533586985]],[\"^J\",[\"^ \",\"~:x\",608.9999813066789,\"~:y\",-177.00001533586985]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u95b23c15-79f9-81ba-8007-99d81b5290dd\",\"~:layout-item-v-sizing\",\"~:auto\",\"~:layout-justify-content\",\"^C\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\",\"~:parent-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043bdf\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043bdf\",\"~:strokes\",[],\"~:x\",608.9999813066788,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",608.9999813066788,\"~:y\",-218.99999605032087,\"^D\",431.99994866329087,\"~:height\",41.99998071445103,\"~:x1\",608.9999813066788,\"~:y1\",-218.99999605032087,\"~:x2\",1040.9999299699698,\"~:y2\",-177.00001533586985]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ffc0cb\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1:\",41.99998071445103,\"~:flip-y\",null,\"~:shapes\",[\"~ucfb31a9c-83c2-806f-8007-9dbf43043be2\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be3\"]]]",
-        "~ucfb31a9c-83c2-806f-8007-9dbf43043be2": "[\"~#shape\",[\"^ \",\"~:y\",-178.00000568505413,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",false,\"~:name\",\"show / hide me\",\"~:width\",99.98206911702209,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",614.0000002576337,\"~:y\",-178.00000568505413]],[\"^:\",[\"^ \",\"~:x\",713.9820693746558,\"~:y\",-178.00000568505413]],[\"^:\",[\"^ \",\"~:x\",713.9820693746558,\"~:y\",-148.0000135081636]],[\"^:\",[\"^ \",\"~:x\",614.0000002576337,\"~:y\",-148.0000135081636]]],\"~: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]],\"~:layout-item-v-sizing\",\"^=\",\"~:r3\",0,\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:hidden\",true,\"~:id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be2\",\"~:parent-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\",\"~:frame-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\",\"~:strokes\",[],\"~:x\",614.0000002576337,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",614.0000002576337,\"~:y\",-178.00000568505413,\"^6\",99.98206911702209,\"~:height\",29.999992176890544,\"~:x1\",614.0000002576337,\"~:y1\",-178.00000568505413,\"~:x2\",713.9820693746558,\"~:y2\",-148.0000135081636]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^P\",29.999992176890544,\"~:flip-y\",null]]",
-        "~ucfb31a9c-83c2-806f-8007-9dbf43043be3": "[\"~#shape\",[\"^ \",\"~:y\",-213.99999587313152,\"~:hide-fill-on-export\",false,\"~:rx\",8,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",true,\"~:name\",\"Full width\",\"~:width\",422.00001200500014,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",613.9999939062393,\"~:y\",-213.99999587313152]],[\"^<\",[\"^ \",\"~:x\",1036.0000059112394,\"~:y\",-213.99999587313152]],[\"^<\",[\"^ \",\"~:x\",1036.0000059112394,\"~:y\",-182.00001303926604]],[\"^<\",[\"^ \",\"~:x\",613.9999939062393,\"~:y\",-182.00001303926604]]],\"~:r2\",8,\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:fix\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^4\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u95b23c15-79f9-81ba-8007-99d81b5290dd\",\"~:layout-item-v-sizing\",\"^@\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be3\",\"~:parent-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\",\"~:frame-id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\",\"~:strokes\",[],\"~:x\",613.9999939062393,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",613.9999939062393,\"~:y\",-213.99999587313152,\"^8\",422.00001200500014,\"~:height\",31.999982833865488,\"~:x1\",613.9999939062393,\"~:y1\",-213.99999587313152,\"~:x2\",1036.0000059112394,\"~:y2\",-182.00001303926604]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#212426\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^O\",31.999982833865488,\"~:flip-y\",null,\"~:shapes\",[]]]",
-        "~ucfb31a9c-83c2-806f-8007-9dbf43043bdf": "[\"~#shape\",[\"^ \",\"~:y\",-228.99999763039506,\"~: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\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Parent\",\"~:layout-align-items\",\"~:start\",\"~:width\",451.999905143128,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",599.0000149607649,\"~:y\",-228.99999763039506]],[\"^J\",[\"^ \",\"~:x\",1050.999920103893,\"~:y\",-228.99999763039506]],[\"^J\",[\"^ \",\"~:x\",1050.999920103893,\"~:y\",-167.0000160450801]],[\"^J\",[\"^ \",\"~:x\",599.0000149607649,\"~:y\",-167.0000160450801]]],\"~:r2\",0,\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:fix\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",10,\"~:column-gap\",8],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u95b23c15-79f9-81ba-8007-99d81b5290dd\",\"~:layout-item-v-sizing\",\"~:auto\",\"~:r3\",0,\"~:layout-justify-content\",\"^C\",\"~:r1\",0,\"~:id\",\"~ucfb31a9c-83c2-806f-8007-9dbf43043bdf\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",599.0000149607649,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",599.0000149607649,\"~:y\",-228.99999763039506,\"^D\",451.999905143128,\"~:height\",61.99998158531497,\"~:x1\",599.0000149607649,\"~:y1\",-228.99999763039506,\"~:x2\",1050.999920103893,\"~:y2\",-167.0000160450801]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1:\",61.99998158531497,\"~:flip-y\",null,\"~:shapes\",[\"~ucfb31a9c-83c2-806f-8007-9dbf43043be0\"]]]"
-      }
-    }
-  }
-}

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

@@ -1,131 +0,0 @@
-{
-  "~: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": "test-bug-flex",
-  "~:revn": 114,
-  "~:modified-at": "~m1771846681183",
-  "~:vern": 0,
-  "~:id": "~u3a4d7ec7-c391-8146-8007-9a05c41da6b9",
-  "~: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": "~m1771590560885",
-  "~:backend": "legacy-db",
-  "~:data": {
-    "~:pages": [
-      "~u95b23c15-79f9-81ba-8007-99d81b5290dd"
-    ],
-    "~:pages-index": {
-      "~u95b23c15-79f9-81ba-8007-99d81b5290dd": {
-        "~#penpot/pointer": [
-          "~u3a4d7ec7-c391-8146-8007-9dd6c998fbc4",
-          {
-            "~:created-at": "~m1771846681187"
-          }
-        ]
-      }
-    },
-    "~:id": "~u3a4d7ec7-c391-8146-8007-9a05c41da6b9",
-    "~:options": {
-      "~:components-v2": true,
-      "~:base-font-size": "16px"
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-[
-    {
-        "~: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

@@ -1,9 +0,0 @@
-[
-    {
-        "~: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

@@ -1,18 +0,0 @@
-{
-    "~: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,8 +1,4 @@
 export class BasePage {
-  static async init(page) {
-    await BasePage.mockConfigFlags(page, []);
-  }
-
   /**
    * Mocks multiple RPC calls in a single call.
    *
@@ -26,7 +22,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.");
     }
@@ -45,7 +41,7 @@ export class BasePage {
     return page.route(url, (route) =>
       route.fulfill({
         ...interceptConfig,
-        path: jsonFilename ? `playwright/data/${jsonFilename}` : undefined,
+        path: `playwright/data/${jsonFilename}`,
       }),
     );
   }

frontend/playwright/ui/pages/BaseWebSocketPage.js

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

frontend/playwright/ui/pages/DashboardPage.js

@@ -3,62 +3,54 @@ import { BaseWebSocketPage } from "./BaseWebSocketPage";
 
 export class DashboardPage extends BaseWebSocketPage {
   static async init(page) {
-    await super.init(page);
+    await BaseWebSocketPage.initWebSockets(page);
 
-    await super.mockConfigFlags(page, ["disable-onboarding"]);
-
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-teams",
       "logged-in-user/get-teams-default.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-font-variants?team-id=*",
       "workspace/get-font-variants-empty.json",
     );
 
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-projects?team-id=*",
       "logged-in-user/get-projects-default.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-team-members?team-id=*",
       "logged-in-user/get-team-members-your-penpot.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-team-users?team-id=*",
       "logged-in-user/get-team-users-single-user.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-unread-comment-threads?team-id=*",
       "logged-in-user/get-team-users-single-user.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-team-recent-files?team-id=*",
       "logged-in-user/get-team-recent-files-empty.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.mockRPC(
       page,
       "get-profiles-for-file-comments",
       "workspace/get-profile-for-file-comments.json",
     );
-    await super.mockRPC(
+    await BaseWebSocketPage.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,10 +1,6 @@
 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,13 +29,8 @@ export class RegisterPage extends BasePage {
     );
   }
 
-  static async init(page) {
-    await BasePage.init(page);
-  }
-
   static async initWithLoggedOutUser(page) {
-    await BasePage.init(page);
-    await BasePage.mockRPC(page, "get-profile", "get-profile-anonymous.json");
+    await this.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 super.init(page);
+    await DashboardPage.initWebSockets(page);
 
-    await super.mockRPC(
+    await DashboardPage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",

frontend/playwright/ui/pages/ViewerPage.js

@@ -4,6 +4,16 @@ 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, options) {
-    super(page, options);
+  constructor(page) {
+    super(page);
     this.canvas = page.getByTestId("canvas-wasm-shapes");
   }
 
@@ -54,19 +54,6 @@ 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,9 +35,45 @@ export class WorkspacePage extends BaseWebSocketPage {
     }
 
     async waitForEditor() {
-      const typographyInput =
-        this.workspacePage.rightSidebar.getByLabel("Font Size");
-      await expect(typographyInput).toBeVisible();
+      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);
     }
 
     async startEditing() {
@@ -45,27 +81,24 @@ export class WorkspacePage extends BaseWebSocketPage {
       return this.waitForEditor();
     }
 
-    async stopEditing() {
-      await this.page.keyboard.press("Escape");
+    stopEditing() {
+      return 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("Home");
-      await this.waitForIdle();
+      await this.page.keyboard.press("ArrowLeft");
       await this.moveToRight(offset);
     }
 
@@ -92,7 +125,7 @@ export class WorkspacePage extends BaseWebSocketPage {
       await expect(locator).toBeVisible();
       await locator.focus();
       await locator.fill(`${newValue}`);
-      await this.page.keyboard.press("Enter");
+      await locator.blur();
     }
 
     changeFontSize(newValue) {
@@ -106,10 +139,6 @@ 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)));
-    }
   };
 
   /**
@@ -119,9 +148,9 @@ export class WorkspacePage extends BaseWebSocketPage {
    * @returns
    */
   static async init(page) {
-    await super.init(page);
+    await BaseWebSocketPage.initWebSockets(page);
 
-    await super.mockRPCs(page, {
+    await BaseWebSocketPage.mockRPCs(page, {
       "get-profile": "logged-in-user/get-profile-logged-in.json",
       "get-team-users?file-id=*":
         "logged-in-user/get-team-users-single-user.json",
@@ -288,6 +317,7 @@ export class WorkspacePage extends BaseWebSocketPage {
         body,
       }),
     );
+    // await this.mockRPC(/get\-file\?/, jsonFile);
   }
 
   async mockGetAsset(regex, asset) {
@@ -361,12 +391,10 @@ 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);
     }
   }
@@ -466,23 +494,10 @@ export class WorkspacePage extends BaseWebSocketPage {
 
   async expectSelectedLayer(name) {
     await expect(
-      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);
+      this.layers
+        .getByTestId("layer-row")
+        .filter({ has: this.page.getByText(name) }),
+    ).toHaveClass(/selected/);
   }
 
   async expectHiddenToolbarOptions() {

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

@@ -243,46 +243,6 @@ test("Renders a file with a closed path shape with multiple segments using strok
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders solid shadows after select all and zoom to selected", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-solid-shadows.json");
-
-  await workspace.goToWorkspace({
-    id: "93113137-fe66-80fb-8007-99ca9fd96841",
-    pageId: "93113137-fe66-80fb-8007-99ca9fd96842",
-  });
-  await workspace.waitForFirstRender();
-
-  await workspace.viewport.click();
-  await page.keyboard.press("ControlOrMeta+A");
-  const previousRenderCount = await workspace.getRenderCount();
-  await page.keyboard.press("f");
-  await workspace.waitForNextRender(previousRenderCount);
-
-  await workspace.hideUI();
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
-test("Renders strokes with solid shadows", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-solid-strokes-shadows.json");
-
-  await workspace.goToWorkspace({
-    id: "93113137-fe66-80fb-8007-99cfd5cbf361",
-    pageId: "93113137-fe66-80fb-8007-99cfd5cbf362",
-  });
-  await workspace.waitForFirstRender();
-
-  await workspace.hideUI();
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
 test("Renders a file with paths and svg attrs", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
@@ -396,63 +356,3 @@ 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();
-});
-
-test("Check inner stroke artifacts", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-file-inner-strokes-artifacts.json");
-
-  await workspace.goToWorkspace({
-    id: "effcbebc-b8c8-802f-8007-9a0b2e2c863f",
-    pageId: "effcbebc-b8c8-802f-8007-9a0b2e2c8640",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  const previousRenderCount = await workspace.getRenderCount();
-  await page.keyboard.press("ControlOrMeta++");
-  await workspace.waitForNextRender(previousRenderCount);
-
-  // Stricter comparison: artifacts are very subtle
-  await expect(workspace.canvas).toHaveScreenshot({
-    maxDiffPixelRatio: 0,
-    threshold: 0.1,
-  });
-});

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

@@ -3,6 +3,11 @@ 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,6 +3,11 @@ 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,6 +3,11 @@ 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,7 +3,11 @@ 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,6 +3,11 @@ 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/login.spec.js

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

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 WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-variants"]);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-variants.json");
 });
 
 test.afterEach(async ({ context }) => {

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

@@ -1,5 +1,6 @@
 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);
@@ -105,37 +106,9 @@ test("BUG 11006 - Fix history panel shortcut", async ({ page }) => {
 
   await workspacePage.goToWorkspace();
 
-  await page.keyboard.press("ControlOrMeta+Alt+h");
+  await page.keyboard.press("Control+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,63 +23,4 @@ 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");
-
-});
-
-test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockGetFile("workspace/get-file-13468.json");
-
-  await workspacePage.mockRPC(
-    "get-file-fragment?file-id=*&fragment-id=*",
-    "workspace/get-file-13468-fragment.json",
-  );
-
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
-
-  await workspacePage.goToWorkspace({
-    fileId: "3a4d7ec7-c391-8146-8007-9a05c41da6b9",
-    pageId: "95b23c15-79f9-81ba-8007-99d81b5290dd",
-  });
-0
-  await workspacePage.clickToggableLayer("Parent");
-  await workspacePage.clickToggableLayer("Container");
-
-  await workspacePage.sidebar.getByRole('button', { name: 'Show' }).click();
-
-  await workspacePage.clickLeafLayer("Container");
-  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("76");
-});
-
-
+});

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

@@ -483,25 +483,3 @@ 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,6 +3,11 @@ 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,8 +2,6 @@ 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/src/app/main/data/exports/assets.cljs

@@ -195,7 +195,7 @@
             params      {:exports exports
                          :cmd cmd
                          :profile-id profile-id
-                         :wait false}
+                         :force-multiple true}
 
             progress-stream
             (->> (ws/get-rcv-stream ws-conn)

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

@@ -14,6 +14,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.notifications :as ntf]
    [app.main.store :as st]
+   [app.plugins.flags :as pflag]
    [app.plugins.register :as preg]
    [app.util.globals :as ug]
    [app.util.http :as http]
@@ -44,20 +45,6 @@
     (update [_ state]
       (update-in state [:workspace-local :open-plugins] (fnil conj #{}) id))))
 
-(defn reset-plugin-flags
-  [id]
-  (ptk/reify ::reset-plugin-flags
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-local :plugin-flags] assoc id {}))))
-
-(defn set-plugin-flag
-  [id key value]
-  (ptk/reify ::set-plugin-flag
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-local :plugin-flags id] assoc key value))))
-
 (defn remove-current-plugin
   [id]
   (ptk/reify ::remove-current-plugin
@@ -68,8 +55,8 @@
 (defn- load-plugin!
   [{:keys [plugin-id name description host code icon permissions]}]
   (try
-    (st/emit! (save-current-plugin plugin-id)
-              (reset-plugin-flags plugin-id))
+    (st/emit! (pflag/clear plugin-id)
+              (save-current-plugin plugin-id))
 
     (.ɵloadPlugin
      ^js ug/global

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

@@ -69,6 +69,10 @@
   (and (number-with-unit-symbol? v)
        (= (.-unit v) "rem")))
 
+(defn percent-number-with-unit? [v]
+  (and (number-with-unit-symbol? v)
+       (= (.-unit v) "%")))
+
 (defn rem->px [^js v]
   (* (.-value v) 16))
 
@@ -87,10 +91,12 @@
 
 (defn tokenscript-symbols->penpot-unit [^js v]
   (cond
+    (nil? v) nil
     (structured-token? v) (structured-token->penpot-map v)
     (list-symbol? v) (structured-token->penpot-map v)
     (color-symbol? v) (.-value (.to v "hex"))
     (rem-number-with-unit? v) (rem->px v)
+    (percent-number-with-unit? v) (/ (.-value v) 100)
     :else (.-value v)))
 
 ;; Processors ------------------------------------------------------------------

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

@@ -222,16 +222,9 @@
 
     ptk/UpdateEvent
     (update [_ state]
-      (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))))))
+      (-> state
+          (assoc :thumbnails thumbnails)
+          (update :files assoc file-id file)))))
 
 (defn zoom-to-frame
   []
@@ -287,197 +280,192 @@
           (wasm.api/process-object shape))))))
 
 (defn initialize-workspace
-  ([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`")
+  [team-id file-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 {})
-           ;; 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/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/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,12 +197,11 @@
              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,7 +10,6 @@
    [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]
@@ -20,7 +19,6 @@
    [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]
@@ -918,11 +916,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? original-content]
-                 :or {update-name? false name nil finalize? false save-undo? true original-content nil}}]
+  [id content & {:keys [update-name? name finalize? save-undo?]
+                 :or {update-name? false name nil finalize? false save-undo? true}}]
   (ptk/reify ::v2-update-text-shape-content
     ptk/WatchEvent
-    (watch [it state _]
+    (watch [_ state _]
       (if (features/active-feature? state "render-wasm/v1")
         (let [objects      (dsh/lookup-page-objects state)
               shape        (get objects id)
@@ -952,11 +950,11 @@
                  new-shape))
              {:save-undo? save-undo? :undo-group (when new-shape? id)})
 
-            (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)))))
+            (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 finalize?
              (rx/concat
@@ -972,13 +970,7 @@
                     {:save-undo? false}))
                  (dws/deselect-shape id)
                  (dwsh/delete-shapes #{id})))
-              (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))))))
+              (rx/of (dwt/finish-transform))))))
 
         (let [objects      (dsh/lookup-page-objects state)
               shape        (get objects id)

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

@@ -8,10 +8,11 @@
   (:require
    [app.common.json :as json]
    [app.common.path-names :as cpn]
-
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.data.notifications :as ntf]
    [app.main.data.style-dictionary :as sd]
+   [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.store :as st]
    [app.util.i18n :refer [tr]]
@@ -74,15 +75,18 @@
   (when unknown-tokens
     (st/emit! (show-unknown-types-warning unknown-tokens)))
   (try
-    (->> (ctob/get-all-tokens-map tokens-lib)
-         (sd/resolve-tokens-with-verbose-errors)
-         (rx/map (fn [_]
-                   tokens-lib))
-         (rx/catch (fn [sd-error]
-                     (let [reference-errors (extract-reference-errors sd-error)]
-                       (if reference-errors
-                         (rx/of tokens-lib)
-                         (throw (wte/error-ex-info :error.import/style-dictionary-unknown-error sd-error sd-error)))))))
+    (let [tokens-tree     (ctob/get-all-tokens-map tokens-lib)
+          resolved-tokens (if (contains? cf/flags :tokenscript)
+                            (rx/of (ts/resolve-tokens tokens-tree))
+                            (sd/resolve-tokens-with-verbose-errors tokens-tree))]
+      (->> resolved-tokens
+           (rx/map (fn [_]
+                     tokens-lib))
+           (rx/catch (fn [sd-error]
+                       (let [reference-errors (extract-reference-errors sd-error)]
+                         (if reference-errors
+                           (rx/of tokens-lib)
+                           (throw (wte/error-ex-info :error.import/style-dictionary-unknown-error sd-error sd-error))))))))
     (catch js/Error e
       (throw (wte/error-ex-info :error.import/style-dictionary-unknown-error "" e)))))
 

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

@@ -6,13 +6,16 @@
 
 (ns app.main.data.workspace.tokens.propagation
   (:require
+   [app.common.data :as d]
    [app.common.files.helpers :as cfh]
    [app.common.logging :as l]
    [app.common.time :as ct]
    [app.common.types.token :as ctt]
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.data.helpers :as dsh]
    [app.main.data.style-dictionary :as sd]
+   [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.thumbnails :as dwt]
    [app.main.data.workspace.tokens.application :as dwta]
@@ -210,10 +213,13 @@
   (ptk/reify ::propagate-workspace-tokens
     ptk/WatchEvent
     (watch [_ state _]
-      (when-let [tokens-lib (-> (dsh/lookup-file-data state)
-                                (get :tokens-lib))]
-        (->> (ctob/get-tokens-in-active-sets tokens-lib)
-             (sd/resolve-tokens)
+      (when-let [tokens-tree (-> (dsh/lookup-file-data state)
+                                 (get :tokens-lib)
+                                 (ctob/get-tokens-in-active-sets))]
+        (->> (if (contains? cf/flags :tokenscript)
+               (rx/of (-> (ts/resolve-tokens tokens-tree)
+                          (d/update-vals #(update % :resolved-value ts/tokenscript-symbols->penpot-unit))))
+               (sd/resolve-tokens tokens-tree))
              (rx/mapcat (fn [sd-tokens]
                           (let [undo-id (js/Symbol)]
                             (rx/concat

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

@@ -1173,7 +1173,8 @@
          (when add-component-to-variant?
            (rx/of (ev/event {::ev/name "add-component-to-variant"})))
          (when add-new-variant?
-           (rx/of (ev/event {::ev/name "add-new-variant" ::ev/origin "workspace:move-shapes-to-frame"}))))))))
+           (rx/of (ev/event {::ev/name "add-new-variant"
+                             ::ev/origin "workspace:move-shapes-to-frame"}))))))))
 
 (defn- get-displacement
   "Retrieve the correct displacement delta point for the

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 id)))
+              (rx/map #(dw/initialize-workspace team-id file-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 id)))
+              (rx/map #(dw/initialize-workspace team-id file-id)))
 
          (->> (rx/of 1)
               (rx/tap resolve)

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

@@ -27,28 +27,27 @@
    (resize-wasm-text-modifiers shape (:content shape)))
 
   ([{:keys [id points selrect grow-type] :as shape} content]
-   (when id
-     (wasm.api/use-shape id)
-     (wasm.api/set-shape-text-content id content)
-     (wasm.api/set-shape-text-images id content)
+   (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,9 +256,6 @@
 (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/ds/controls/utilities/input_field.cljs

@@ -84,6 +84,7 @@
                   :on-click on-icon-click}])
      (if aria-label
        [:> tooltip* {:content aria-label
+                     :class (stl/css :tooltip-wrapper)
                      :id tooltip-id}
         [:> "input" props]]
        [:> "input" props])

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

@@ -120,3 +120,7 @@
   color: var(--color-foreground-secondary);
   min-inline-size: var(--sp-l);
 }
+
+.tooltip-wrapper {
+  inline-size: 100%;
+}

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

@@ -50,7 +50,7 @@
 
 (mf/defc workspace-content*
   {::mf/private true}
-  [{:keys [file layout page wglobal file-version-id]}]
+  [{:keys [file layout page wglobal]}]
 
   (let [palete-size (mf/use-state nil)
         selected    (mf/deref refs/selected-shapes)
@@ -109,7 +109,6 @@
          :wglobal wglobal
          :selected selected
          :layout layout
-         :file-version-id file-version-id
          :palete-size
          (when (and (or colorpalette? textpalette?) (not hide-ui?))
            @palete-size)}]]]
@@ -169,7 +168,7 @@
 
 (mf/defc workspace-inner*
   {::mf/private true}
-  [{:keys [page-id file-id file layout wglobal file-version-id]}]
+  [{:keys [page-id file-id file layout wglobal]}]
   (let [page-ref (mf/with-memo [file-id page-id]
                    (make-page-ref file-id page-id))
         page     (mf/deref page-ref)]
@@ -188,8 +187,7 @@
       [:> workspace-content* {:file file
                               :page page
                               :wglobal wglobal
-                              :layout layout
-                              :file-version-id file-version-id}]
+                              :layout layout}]
       [:> workspace-loader*])))
 
 (mf/defc workspace*
@@ -201,7 +199,6 @@
 
         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))
@@ -277,8 +274,7 @@
               :file-id file-id
               :file file
               :wglobal wglobal
-              :layout layout
-              :file-version-id file-version-id}])
+              :layout layout}])
           (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/shapes/text/v2_editor.cljs

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

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

@@ -73,12 +73,12 @@
 }
 
 .grow-type-auto-width {
-  [data-itype="span"],
+  [data-itype="inline"],
   [data-itype="paragraph"] {
     white-space: nowrap;
   }
 
-  [data-itype="span"] {
+  [data-itype="inline"] {
     white-space-collapse: preserve;
   }
 }

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

@@ -84,8 +84,6 @@
             :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/options/menus/layout_item.cljs

@@ -540,7 +540,7 @@
    [:values schema:layout-item-props-schema]
    [:applied-tokens [:maybe [:map-of :keyword :string]]]
    [:ids [::sm/vec ::sm/uuid]]
-   [:v-sizing {:optional true} [:maybe [:enum :fill :fix :auto]]]])
+   [:v-sizing {:optional true} [:maybe [:= :fill]]]])
 
 (mf/defc layout-size-constraints*
   {::mf/private true

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

@@ -143,8 +143,7 @@
            (let [token-ids (set tokens-in-path-ids)
                  remaining-tokens (filter (fn [token]
                                             (not (contains? token-ids (:id token))))
-                                          selected-token-set-tokens)
-                 _ (prn "Remaining tokens:" remaining-tokens)]
+                                          selected-token-set-tokens)]
              (seq remaining-tokens))))
 
         delete-token

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs

@@ -13,8 +13,10 @@
    [app.common.types.color :as cl]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.data.style-dictionary :as sd]
    [app.main.data.tinycolor :as tinycolor]
+   [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.format :as dwtf]
    [app.main.refs :as refs]
    [app.main.ui.ds.controls.input :as ds]
@@ -70,11 +72,15 @@
             (dissoc (:name prev-token))
             (update (:name token) #(ctob/make-token (merge % prev-token token))))]
 
-    (->> tokens
-         (sd/resolve-tokens-interactive)
+    (->> (if (contains? cf/flags :tokenscript)
+           (rx/of (ts/resolve-tokens tokens))
+           (sd/resolve-tokens-interactive tokens))
          (rx/mapcat
           (fn [resolved-tokens]
-            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
+            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))
+                  resolved-value (if (contains? cf/flags :tokenscript)
+                                   (ts/tokenscript-symbols->penpot-unit resolved-value)
+                                   resolved-value)]
               (if resolved-value
                 (rx/of {:value resolved-value})
                 (rx/of {:error (first errors)}))))))))

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs

@@ -10,7 +10,9 @@
    [app.common.data :as d]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.data.style-dictionary :as sd]
+   [app.main.data.tokenscript :as ts]
    [app.main.fonts :as fonts]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.input :refer [input*]]
@@ -49,28 +51,30 @@
 ;; validate data within the form state.
 
 (defn- resolve-value
-  [tokens prev-token token-name value]
-  (let [valid-token-name?
-        (and (string? token-name)
-             (re-matches  cto/token-name-validation-regex token-name))
+  [tokens prev-token _token-name value]
+  (let [tmp-value (cto/split-font-family value)
+        tmp-name  "__PENPOT__FONT_FAMILY__PLACEHOLDER__"
 
+        ;; Create a temporary font-family token to validate the value
         token
-        {:value (cto/split-font-family value)
-         :name (if (or (not valid-token-name?) (str/blank? token-name))
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+        {:name tmp-name
+         :type :font-family
+         :value (if (= (:type prev-token) :typography)
+                  (assoc (:value prev-token) :font-family tmp-value)
+                  tmp-value)}
 
         tokens
-        (-> tokens
-            ;; Remove previous token when renaming a token
-            (dissoc (:name prev-token))
-            (update (:name token) #(ctob/make-token (merge % prev-token token))))]
+        (update tokens (:name token) #(ctob/make-token (merge % prev-token token)))]
 
-    (->> tokens
-         (sd/resolve-tokens-interactive)
+    (->> (if (contains? cf/flags :tokenscript)
+           (rx/of (ts/resolve-tokens tokens))
+           (sd/resolve-tokens-interactive tokens))
          (rx/mapcat
           (fn [resolved-tokens]
-            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
+            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))
+                  resolved-value (if (contains? cf/flags :tokenscript)
+                                   (ts/tokenscript-symbols->penpot-unit resolved-value)
+                                   resolved-value)]
               (if resolved-value
                 (rx/of {:value resolved-value})
                 (rx/of {:error (first errors)}))))))))
@@ -176,7 +180,6 @@
                                       (let [message (tr "workspace.tokens.resolved-value" value)]
                                         (swap! form update :extra-errors dissoc input-name)
                                         (reset! hint* {:message message :type "hint"})))))))]
-
         (fn []
           (rx/dispose! subs))))
 

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs

@@ -175,7 +175,10 @@
          (sd/resolve-tokens-interactive)
          (rx/mapcat
           (fn [resolved-tokens]
-            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
+            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))
+                  resolved-value (if (contains? cf/flags :tokenscript)
+                                   (ts/tokenscript-symbols->penpot-unit resolved-value)
+                                   resolved-value)]
               (if resolved-value
                 (rx/of {:value resolved-value})
                 (rx/of {:error (first errors)}))))))))

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -36,9 +36,9 @@
    [rumext.v2 :as mf]))
 
 (defn get-value-for-validator
-  [active-tab value value-subfield form-type]
+  [active-tab value value-subfield value-type]
 
-  (case form-type
+  (case value-type
     :indexed
     (if (= active-tab :reference)
       (:reference value)
@@ -62,7 +62,7 @@
            make-schema
            input-component
            initial
-           type
+           value-type
            value-subfield
            input-value-placeholder] :as props}]
 
@@ -178,13 +178,13 @@
 
         on-submit
         (mf/use-fn
-         (mf/deps validate-token token tokens token-type value-subfield type active-tab on-remap-token on-rename-token is-create)
+         (mf/deps validate-token token tokens token-type value-subfield value-type active-tab on-remap-token on-rename-token is-create)
          (fn [form _event]
            (let [name (get-in @form [:clean-data :name])
                  path (str (d/name token-type) "." name)
                  description (get-in @form [:clean-data :description])
                  value (get-in @form [:clean-data :value])
-                 value-for-validation (get-value-for-validator active-tab value value-subfield type)]
+                 value-for-validation (get-value-for-validator active-tab value value-subfield value-type)]
              (->> (validate-token {:token-value value-for-validation
                                    :token-name name
                                    :token-description description
@@ -245,7 +245,7 @@
                            :auto-focus true}]]
 
       [:div {:class (stl/css :input-row)}
-       (case type
+       (case value-type
          :indexed
          [:> input-component
           {:token          token

frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs

@@ -365,7 +365,7 @@
                                       :token-type token-type
                                       :initial initial
                                       :make-schema make-schema
-                                      :type :indexed
+                                      :value-type :indexed
                                       :value-subfield :shadow
                                       :input-component tabs-wrapper*
                                       :validator validate-shadow-token})]

frontend/src/app/main/ui/workspace/tokens/management/forms/typography.cljs

@@ -300,6 +300,6 @@
                                       :make-schema make-schema
                                       :token token
                                       :validator validate-typography-token
-                                      :type :composite
+                                      :value-type :composite
                                       :input-component tabs-wrapper*})]
     [:> generic/form* props]))

frontend/src/app/main/ui/workspace/tokens/management/forms/validators.cljs

@@ -4,7 +4,9 @@
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.data.style-dictionary :as sd]
+   [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.errors :as wte]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
@@ -36,14 +38,20 @@
 
                   :always
                   (update (:name token) #(ctob/make-token (merge % prev-token token))))]
-    (->> tokens'
-         (sd/resolve-tokens-interactive)
+
+    (->> (if (contains? cf/flags :tokenscript)
+           (rx/of (ts/resolve-tokens tokens'))
+           (sd/resolve-tokens-interactive tokens'))
          (rx/mapcat
           (fn [resolved-tokens]
-            (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
+            (let [resolved-token (cond-> (get resolved-tokens (:name token))
+                                   (contains? cf/flags :tokenscript)
+                                   (update :resolved-value ts/tokenscript-symbols->penpot-unit))]
               (cond
-                resolved-value (rx/of resolved-token)
-                :else (rx/throw {:errors (or (seq errors)
+                (:resolved-value resolved-token)
+                (rx/of resolved-token)
+
+                :else (rx/throw {:errors (or (seq (:errors resolved-token))
                                              [(wte/get-error-code :error/unknown-error)])}))))))))
 
 (defn- validate-token-with [token validators]

frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs

@@ -176,9 +176,10 @@
 (mf/defc token-pill*
   {::mf/wrap [mf/memo]}
   [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}]
-  (let [{:keys [name value errors type]} token
+  (let [{:keys [name value type]} token
 
         resolved-token (get active-theme-tokens (:name token))
+        errors         (:errors resolved-token)
 
         has-selected?  (pos? (count selected-shapes))
         is-reference?  (cfo/is-reference? token)

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

@@ -19,6 +19,7 @@
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.path :as dwdp]
    [app.main.data.workspace.specialized-panel :as-alias dwsp]
+   [app.main.data.workspace.texts :as dwt]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -49,42 +50,41 @@
    (mf/deps id blocked hidden type selected edition drawing-tool text-editing?
             node-editing? grid-editing? drawing-path? create-comment? @z? @space?
             panning read-only?)
-   (fn [event]
+   (fn [bevent]
      ;; We need to handle editor related stuff here because
      ;; handling on editor dom node does not works properly.
-     (let [target  (dom/get-target event)
+     (let [target  (dom/get-target bevent)
            editor  (txu/closest-text-editor-content target)]
        ;; Capture mouse pointer to detect the movements even if cursor
        ;; leaves the viewport or the browser itself
        ;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
        (if editor
-         (.setPointerCapture editor (.-pointerId event))
-         (.setPointerCapture target (.-pointerId event))))
+         (.setPointerCapture editor (.-pointerId bevent))
+         (.setPointerCapture target (.-pointerId bevent))))
 
-     (when (or (dom/class? (dom/get-target event) "viewport-controls")
-               (dom/class? (dom/get-target event) "viewport-selrect")
-               (dom/child? (dom/get-target event) (dom/query ".grid-layout-editor")))
+     (when (or (dom/class? (dom/get-target bevent) "viewport-controls")
+               (dom/class? (dom/get-target bevent) "viewport-selrect")
+               (dom/child? (dom/get-target bevent) (dom/query ".grid-layout-editor")))
 
-       (dom/stop-propagation event)
+       (dom/stop-propagation bevent)
 
        (when-not @z?
-         (let [native-event  (dom/event->native-event event)
-               ctrl?  (kbd/ctrl? native-event)
-               meta?  (kbd/meta? native-event)
-               shift? (kbd/shift? native-event)
-               alt?   (kbd/alt? native-event)
-               mod?   (kbd/mod? native-event)
-               off-pt (dom/get-offset-position native-event)
+         (let [event  (dom/event->native-event bevent)
+               ctrl?  (kbd/ctrl? event)
+               meta?  (kbd/meta? event)
+               shift? (kbd/shift? event)
+               alt?   (kbd/alt? event)
+               mod?   (kbd/mod? event)
 
-               left-click?   (and (not panning) (dom/left-mouse? event))
-               middle-click? (and (not panning) (dom/middle-mouse? event))]
+               left-click?   (and (not panning) (dom/left-mouse? bevent))
+               middle-click? (and (not panning) (dom/middle-mouse? bevent))]
 
            (cond
              (or middle-click? (and left-click? @space?))
              (do
-               (dom/prevent-default event)
+               (dom/prevent-default bevent)
                (if mod?
-                 (let [raw-pt   (dom/get-client-position native-event)
+                 (let [raw-pt   (dom/get-client-position event)
                        pt       (uwvv/point->viewport raw-pt)]
                    (st/emit! (dw/start-zooming pt)))
                  (st/emit! (dw/start-panning))))
@@ -94,23 +94,18 @@
                (st/emit! (mse/->MouseEvent :down ctrl? shift? alt? meta?)
                          ::dwsp/interrupt)
 
-               (when (wasm.api/text-editor-is-active?)
-                 (wasm.api/text-editor-pointer-down (.-x off-pt) (.-y off-pt)))
-
                (when (and (not= edition id) (or text-editing? grid-editing?))
                  (st/emit! (dw/clear-edition-mode))
-                 ;; FIXME: I think this is not completely correct because this
-                 ;; is going to happen even when clicking or selecting text.
                  ;; Sync and stop WASM text editor when exiting edit mode
-                 #_(when (and text-editing?
-                              (features/active-feature? @st/state "render-wasm/v1")
-                              wasm.wasm/context-initialized?)
-                     (when-let [{:keys [shape-id content]} (wasm.api/text-editor-sync-content)]
-                       (st/emit! (dwt/v2-update-text-shape-content
-                                  shape-id content
-                                  :update-name? true
-                                  :finalize? true)))
-                     (wasm.api/text-editor-stop)))
+                 (when (and text-editing?
+                            (features/active-feature? @st/state "render-wasm/v1")
+                            wasm.wasm/context-initialized?)
+                   (when-let [{:keys [shape-id content]} (wasm.api/text-editor-sync-content)]
+                     (st/emit! (dwt/v2-update-text-shape-content
+                                shape-id content
+                                :update-name? true
+                                :finalize? true)))
+                   (wasm.api/text-editor-stop)))
 
                (when (and (not text-editing?)
                           (not blocked)
@@ -192,14 +187,10 @@
              alt? (kbd/alt? event)
              meta? (kbd/meta? event)
              hovering? (some? @hover)
-             native-event (dom/event->native-event event)
-             off-pt (dom/get-offset-position native-event)
              raw-pt (dom/get-client-position event)
              pt     (uwvv/point->viewport raw-pt)]
          (st/emit! (mse/->MouseEvent :click ctrl? shift? alt? meta?))
 
-         ;; FIXME: Maybe we can transform this into a cond instead
-         ;; of multiple (when)s.
          (when (and hovering?
                     (not @space?)
                     (not edition)
@@ -207,8 +198,6 @@
                     (not drawing-tool))
            (st/emit! (dw/select-shape (:id @hover) shift?)))
 
-         ;; FIXME: Maybe we can move into a function of the kind
-         ;; "text-editor-on-click"
          ;; If clicking on a text shape and wasm render is enabled, forward cursor position
          (when (and hovering?
                     (not @space?)
@@ -219,7 +208,9 @@
              (when (and (= :text (:type hover-shape))
                         (features/active-feature? @st/state "text-editor-wasm/v1")
                         wasm.wasm/context-initialized?)
-               (wasm.api/text-editor-set-cursor-from-point (.-x off-pt) (.-y off-pt)))))
+               (let [raw-pt (dom/get-client-position event)]
+                 ;; FIXME
+                 (wasm.api/text-editor-set-cursor-from-point (.-x raw-pt) (.-y raw-pt))))))
 
          (when (and @z?
                     (not @space?)
@@ -270,12 +261,6 @@
                              wasm.wasm/context-initialized?)
                     (wasm.api/text-editor-start id)))
 
-                (and editable? (= id edition) (not read-only?)
-                     (= type :text)
-                     (features/active-feature? @st/state "text-editor-wasm/v1")
-                     wasm.wasm/context-initialized?)
-                (wasm.api/text-editor-select-all)
-
                 (some? selected-shape)
                 (do
                   (reset! hover selected-shape)
@@ -325,24 +310,20 @@
        ;; Release pointer on mouse up
        (.releasePointerCapture target (.-pointerId event)))
 
-     (let [native-event (dom/event->native-event event)
-           off-pt (dom/get-offset-position native-event)
-           ctrl? (kbd/ctrl? native-event)
-           shift? (kbd/shift? native-event)
-           alt? (kbd/alt? native-event)
-           meta? (kbd/meta? native-event)
+     (let [event (dom/event->native-event event)
+           ctrl? (kbd/ctrl? event)
+           shift? (kbd/shift? event)
+           alt? (kbd/alt? event)
+           meta? (kbd/meta? event)
 
-           left-click? (= 1 (.-which native-event))
-           middle-click? (= 2 (.-which native-event))]
+           left-click? (= 1 (.-which event))
+           middle-click? (= 2 (.-which event))]
 
        (when left-click?
-         (st/emit! (mse/->MouseEvent :up ctrl? shift? alt? meta?))
-
-         (when (wasm.api/text-editor-is-active?)
-           (wasm.api/text-editor-pointer-up (.-x off-pt) (.-y off-pt))))
+         (st/emit! (mse/->MouseEvent :up ctrl? shift? alt? meta?)))
 
        (when middle-click?
-         (dom/prevent-default native-event)
+         (dom/prevent-default event)
 
          ;; We store this so in Firefox the middle button won't do a paste of the content
          (mf/set-ref-val! disable-paste-ref true)
@@ -400,9 +381,7 @@
   (let [last-position (mf/use-var nil)]
     (mf/use-fn
      (fn [event]
-       (let [native-event (unchecked-get event "nativeEvent")
-             off-pt   (dom/get-offset-position native-event)
-             raw-pt   (dom/get-client-position event)
+       (let [raw-pt   (dom/get-client-position event)
              pt       (uwvv/point->viewport raw-pt)
 
              ;; We calculate the delta because Safari's MouseEvent.movementX/Y drop
@@ -411,12 +390,6 @@
                      (gpt/subtract raw-pt @last-position)
                      (gpt/point 0 0))]
 
-         ;; IMPORTANT! This function, right now it's called on EVERY pointermove. I think
-         ;; in the future (when we handle the UI in the render) should be better to
-         ;; have a "wasm.api/pointer-move" function that works as an entry point for
-         ;; all the pointer-move events.
-         (wasm.api/text-editor-pointer-move (.-x off-pt) (.-y off-pt))
-
          (rx/push! move-stream pt)
          (reset! last-position raw-pt)
          (st/emit! (mse/->PointerEvent :delta delta

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

@@ -242,7 +242,7 @@
   [{:keys [objects zoom selected focus is-show-artboard-names
            on-frame-enter on-frame-leave on-frame-select]}]
   (let [selected       (or selected #{})
-        shapes         (ctt/get-frames objects {:skip-copies? true :ignore-index? true})
+        shapes         (ctt/get-frames objects {:skip-copies? true})
         shapes         (if (dbg/enabled? :shape-titles)
                          (into (set shapes)
                                (map (d/getf objects))

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

@@ -73,7 +73,7 @@
         objects)))
 
 (mf/defc viewport*
-  [{:keys [selected wglobal wlocal layout file page palete-size file-version-id]}]
+  [{:keys [selected wglobal wlocal layout file page palete-size]}]
   (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
         ;; that the new parameter is sent
         {:keys [edit-path
@@ -141,7 +141,6 @@
 
         canvas-ref        (mf/use-ref nil)
         text-editor-ref   (mf/use-ref nil)
-        last-file-version-id-ref (mf/use-ref nil)
 
         ;; STATE REFS
         disable-paste-ref (mf/use-ref false)
@@ -224,9 +223,8 @@
         show-gradient-handlers?  (= (count selected) 1)
         show-grids?              (contains? layout :display-guides)
 
-        show-frame-outline?      (and (= transform :move) (not panning))
+        show-frame-outline?      (= transform :move)
         show-outlines?           (and (nil? transform)
-                                      (not panning)
                                       (not edition)
                                       (not drawing-obj)
                                       (not (#{:comments :path :curve} drawing-tool)))
@@ -346,18 +344,11 @@
       (when (and @canvas-init? preview-blend)
         (wasm.api/request-render "with-effect")))
 
-    (mf/with-effect [@canvas-init? file-version-id zoom vbox background]
-      (when @canvas-init?
-        (if (not @initialized?)
-          (do
-            (wasm.api/clear-canvas-pixels)
-            (wasm.api/initialize-viewport base-objects zoom vbox background)
-            (reset! initialized? true)
-            (mf/set-ref-val! last-file-version-id-ref file-version-id))
-          (when (and (some? file-version-id)
-                     (not= file-version-id (mf/ref-val last-file-version-id-ref)))
-            (wasm.api/initialize-viewport base-objects zoom vbox background)
-            (mf/set-ref-val! last-file-version-id-ref file-version-id)))))
+    (mf/with-effect [@canvas-init? zoom vbox background]
+      (when (and @canvas-init? (not @initialized?))
+        (wasm.api/clear-canvas-pixels)
+        (wasm.api/initialize-viewport base-objects zoom vbox background)
+        (reset! initialized? true)))
 
     (mf/with-effect [focus]
       (when (and @canvas-init? @initialized?)
@@ -562,7 +553,7 @@
            :shift? @shift?}])
 
        [:> widgets/frame-titles*
-        {:objects objects-modified
+        {:objects (with-meta objects-modified nil)
          :selected selected
          :zoom zoom
          :is-show-artboard-names show-artboard-names?

frontend/src/app/plugins/flags.cljs

@@ -6,10 +6,30 @@
 
 (ns app.plugins.flags
   (:require
-   [app.main.data.plugins :as dp]
+   [app.common.data.macros :as dm]
    [app.main.store :as st]
    [app.plugins.utils :as u]
-   [app.util.object :as obj]))
+   [app.util.object :as obj]
+   [potok.v2.core :as ptk]))
+
+(defn natural-child-ordering?
+  [plugin-id]
+  (boolean
+   (dm/get-in @st/state [:plugins :flags plugin-id :natural-child-ordering])))
+
+(defn clear
+  [id]
+  (ptk/reify ::reset
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:plugins :flags] assoc id {}))))
+
+(defn- set-flag
+  [id key value]
+  (ptk/reify ::set-flag
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:plugins :flags id] assoc key value))))
 
 (defn flags-proxy
   [plugin-id]
@@ -17,11 +37,7 @@
     :naturalChildOrdering
     {:this false
      :get
-     (fn []
-       (boolean
-        (get-in
-         @st/state
-         [:workspace-local :plugin-flags plugin-id :natural-child-ordering])))
+     (fn [] (natural-child-ordering? plugin-id))
 
      :set
      (fn [value]
@@ -30,4 +46,4 @@
          (u/display-not-valid :naturalChildOrdering value)
 
          :else
-         (st/emit! (dp/set-plugin-flag plugin-id :natural-child-ordering value))))}))
+         (st/emit! (set-flag plugin-id :natural-child-ordering value))))}))

frontend/src/app/plugins/flex.cljs

@@ -10,12 +10,12 @@
    [app.common.schema :as sm]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.shape-layout :as dwsl]
-   [app.main.data.workspace.transforms :as dwt]
+   [app.main.data.workspace.shapes :as dwsh]
    [app.main.store :as st]
+   [app.plugins.flags :refer [natural-child-ordering?]]
    [app.plugins.register :as r]
    [app.plugins.utils :as u]
-   [app.util.object :as obj]
-   [potok.v2.core :as ptk]))
+   [app.util.object :as obj]))
 
 ;; Define in `app.plugins.shape` we do this way to prevent circular dependency
 (def shape-proxy? nil)
@@ -259,10 +259,13 @@
         (u/display-not-valid :appendChild child)
 
         :else
-        (let [child-id  (obj/get child "$id")]
-          (st/emit! (dwt/move-shapes-to-frame #{child-id} id nil nil)
-                    (ptk/data-event :layout/update {:ids [id]})))))))
-
+        (let [child-id (obj/get child "$id")
+              shape (u/locate-shape file-id page-id id)
+              index
+              (if (and (natural-child-ordering? plugin-id) (not (ctl/reverse? shape)))
+                0
+                (count (:shapes shape)))]
+          (st/emit! (dwsh/relocate-shapes #{child-id} id index)))))))
 
 (defn layout-child-proxy? [p]
   (obj/type-of? p "LayoutChildProxy"))

frontend/src/app/plugins/shape.cljs

@@ -47,13 +47,13 @@
    [app.main.data.workspace.variants :as dwv]
    [app.main.repo :as rp]
    [app.main.store :as st]
+   [app.plugins.flags :refer [natural-child-ordering?]]
    [app.plugins.flex :as flex]
    [app.plugins.format :as format]
    [app.plugins.grid :as grid]
    [app.plugins.parser :as parser]
    [app.plugins.register :as r]
    [app.plugins.ruler-guides :as rg]
-   [app.plugins.state :refer [natural-child-ordering?]]
    [app.plugins.text :as text]
    [app.plugins.utils :as u]
    [app.util.http :as http]
@@ -960,9 +960,12 @@
                  (u/display-not-valid :appendChild "Plugin doesn't have 'content:write' permission")
 
                  :else
-                 (let [child-id (obj/get child "$id")
+                 (let [child-id     (obj/get child "$id")
                        is-reversed? (ctl/flex-layout? shape)
-                       index (if (and (natural-child-ordering? plugin-id) is-reversed?) 0 (count (:shapes shape)))]
+                       index
+                       (if (or (not (natural-child-ordering? plugin-id)) is-reversed?)
+                         0
+                         (count (:shapes shape)))]
                    (st/emit! (dwsh/relocate-shapes #{child-id} id index))))))
 
            :insertChild
@@ -985,7 +988,7 @@
                  (let [child-id (obj/get child "$id")
                        is-reversed? (ctl/flex-layout? shape)
                        index
-                       (if (and (natural-child-ordering? plugin-id) is-reversed?)
+                       (if (or (not (natural-child-ordering? plugin-id)) is-reversed?)
                          (- (count (:shapes shape)) index)
                          index)]
                    (st/emit! (dwsh/relocate-shapes #{child-id} id index))))))

frontend/src/app/plugins/state.cljs

@@ -1,16 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.plugins.state
-  (:require
-   [app.main.store :as st]))
-
-(defn natural-child-ordering?
-  [plugin-id]
-  (boolean
-   (get-in
-    @st/state
-    [:workspace-local :plugin-flags plugin-id :natural-child-ordering])))

frontend/src/app/plugins/tokens.cljs

@@ -8,18 +8,17 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.files.tokens :as cfo]
+   [app.common.json :as json]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
-   [app.main.data.style-dictionary :as sd]
    [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
    [app.plugins.utils :as u]
    [app.util.object :as obj]
-   [beicon.v2.core :as rx]
    [clojure.datafy :refer [datafy]]))
 
 ;; === Token
@@ -87,7 +86,7 @@
      :get
      (fn [_]
        (let [token (u/locate-token file-id set-id id)]
-         (:value token)))
+         (json/->js (:value token))))
      :schema (let [token (u/locate-token file-id set-id id)]
                (cfo/make-token-value-schema (:type token)))
      :set
@@ -260,20 +259,19 @@
      :decode/options {:key-fn identity}
      :fn (fn [attrs]
            (let [tokens-lib (u/locate-tokens-lib file-id)
-                 tokens-tree (ctob/get-tokens-in-active-sets tokens-lib)
-                 token (ctob/make-token attrs)]
-             (->> (assoc tokens-tree (:name token) token)
-                  (sd/resolve-tokens-interactive)
-                  (rx/subs!
-                   (fn [resolved-tokens]
-                     (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
-                       (if resolved-value
-                         (st/emit! (dwtl/create-token id token))
-                         (u/display-not-valid :addToken (str errors)))))))
-             ;; TODO: as the addToken function is synchronous, we must return the newly created
-             ;;       token even if the validator will throw it away if the resolution fails.
-             ;;       This will be solved with the TokenScript resolver, that is syncronous.
-             (token-proxy plugin-id file-id id (:id token))))}
+                 token (ctob/make-token attrs)
+                 tokens-tree (-> (ctob/get-tokens-in-active-sets tokens-lib)
+                                 (assoc (:name token) token))
+                 resolved-tokens (ts/resolve-tokens tokens-tree)
+
+                 {:keys [errors resolved-value] :as resolved-token}
+                 (get resolved-tokens (:name token))]
+
+             (if resolved-value
+               (do (st/emit! (dwtl/create-token id token))
+                   (token-proxy plugin-id file-id id (:id token)))
+               (do (u/display-not-valid :addToken (str errors))
+                   nil))))}
 
     :duplicate
     (fn []
@@ -354,7 +352,17 @@
       (st/emit! (dwtl/toggle-token-theme-active id)))
 
     :activeSets
-    {:this true :get (fn [_])}
+    {:this true
+     :get (fn [_]
+            (let [tokens-lib (u/locate-tokens-lib file-id)
+                  theme (u/locate-token-theme file-id id)]
+              (->> theme
+                   :sets
+                   (map #(->> %
+                              (ctob/get-set-by-name tokens-lib)
+                              (ctob/get-id)
+                              (token-set-proxy plugin-id file-id)))
+                   (apply array))))}
 
     :addSet
     {:enumerable false

frontend/src/app/render_wasm/api.cljs

@@ -87,11 +87,7 @@
 (def text-editor-start text-editor/text-editor-start)
 (def text-editor-stop text-editor/text-editor-stop)
 (def text-editor-set-cursor-from-point text-editor/text-editor-set-cursor-from-point)
-(def text-editor-pointer-down text-editor/text-editor-pointer-down)
-(def text-editor-pointer-move text-editor/text-editor-pointer-move)
-(def text-editor-pointer-up text-editor/text-editor-pointer-up)
 (def text-editor-is-active? text-editor/text-editor-is-active?)
-(def text-editor-select-all text-editor/text-editor-select-all)
 (def text-editor-sync-content text-editor/text-editor-sync-content)
 
 (def dpr
@@ -267,6 +263,22 @@
   [attrs]
   (text-editor/apply-style-to-selection attrs use-shape set-shape-text-content))
 
+(defn update-text-rect!
+  [id]
+  (when wasm/context-initialized?
+    (mw/emit!
+     {:cmd :index/update-text-rect
+      :page-id (:current-page-id @st/state)
+      :shape-id id
+      :dimensions (get-text-dimensions id)})))
+
+(defn- ensure-text-content
+  "Guarantee that the shape always sends a valid text tree to WASM. When the
+  content is nil (freshly created text) we fall back to
+  tc/default-text-content so the renderer receives typography information."
+  [content]
+  (or content (tc/v2-default-text-content)))
+
 (defn set-parent-id
   [id]
   (let [buffer (uuid/get-u32 id)]
@@ -984,22 +996,6 @@
           (render-finish)
           (perf/end-measure "set-view-box::zoom")))))
 
-(defn update-text-rect!
-  [id]
-  (when wasm/context-initialized?
-    (mw/emit!
-     {:cmd :index/update-text-rect
-      :page-id (:current-page-id @st/state)
-      :shape-id id
-      :dimensions (get-text-dimensions id)})))
-
-(defn- ensure-text-content
-  "Guarantee that the shape always sends a valid text tree to WASM. When the
-  content is nil (freshly created text) we fall back to
-  tc/default-text-content so the renderer receives typography information."
-  [content]
-  (or content (tc/v2-default-text-content)))
-
 (defn set-object
   [shape]
   (perf/begin-measure "set-object")

frontend/src/app/render_wasm/text_editor.cljs

@@ -27,21 +27,6 @@
   (when wasm/context-initialized?
     (h/call wasm/internal-module "_text_editor_set_cursor_from_point" x y)))
 
-(defn text-editor-pointer-down
-  [x y]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_pointer_down" x y)))
-
-(defn text-editor-pointer-move
-  [x y]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_pointer_move" x y)))
-
-(defn text-editor-pointer-up
-  [x y]
-  (when wasm/context-initialized?
-    (h/call wasm/internal-module "_text_editor_pointer_up" x y)))
-
 (defn text-editor-update-blink
   [timestamp-ms]
   (when wasm/context-initialized?
@@ -98,12 +83,9 @@
     (h/call wasm/internal-module "_text_editor_stop")))
 
 (defn text-editor-is-active?
-  ([id]
-   (when wasm/context-initialized?
-     (not (zero? (h/call wasm/internal-module "_text_editor_is_active_with_id" id)))))
-  ([]
-   (when wasm/context-initialized?
-     (not (zero? (h/call wasm/internal-module "_text_editor_is_active"))))))
+  []
+  (when wasm/context-initialized?
+    (not (zero? (h/call wasm/internal-module "_text_editor_is_active")))))
 
 (defn text-editor-export-content
   []

frontend/src/app/render_wasm/text_editor_input.cljs

@@ -19,8 +19,6 @@
    [rumext.v2 :as mf])
   (:import goog.events.EventType))
 
-(def caret-blink-interval-ms 250)
-
 (defn- sync-wasm-text-editor-content!
   "Sync WASM text editor content back to the shape via the standard
   commit pipeline. Called after every text-modifying input."
@@ -56,17 +54,18 @@
          (.focus node))
        js/undefined))
 
+    ;; Animation loop for cursor blink
     (mf/use-effect
      (fn []
-       (let [timeout-id (atom nil)
-             schedule-blink (fn schedule-blink []
-                              (when (text-editor/text-editor-is-active?)
-                                (wasm.api/request-render "cursor-blink"))
-                              (reset! timeout-id (js/setTimeout schedule-blink caret-blink-interval-ms)))]
-         (schedule-blink)
+       (let [raf-id (atom nil)
+             animate (fn animate []
+                       (when (text-editor/text-editor-is-active?)
+                         (wasm.api/request-render "cursor-blink")
+                         (reset! raf-id (js/requestAnimationFrame animate))))]
+         (animate)
          (fn []
-           (when @timeout-id
-             (js/clearTimeout @timeout-id))))))
+           (when @raf-id
+             (js/cancelAnimationFrame @raf-id))))))
 
     ;; Document-level keydown handler for control keys
     (mf/use-effect

frontend/text-editor/src/editor/content/dom/Color.js

@@ -76,4 +76,3 @@ export function getFills(fillStyle) {
   const [color, opacity] = getColor(fillStyle);
   return `[["^ ","~:fill-color","${color}","~:fill-opacity",${opacity}]]`;
 }
-

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -642,15 +642,13 @@ export class SelectionController extends EventTarget {
     } else {
       this.#anchorNode = anchorNode;
       this.#anchorOffset = anchorOffset;
-      this.#focusNode = focusNode;
-      this.#focusOffset = focusOffset;
-      // setPosition() collapses the selection to a single caret. We must only use it
-      // when anchorOffset === focusOffset. When both points are in the same node but
-      // offsets differ (e.g. selecting "hola" in "hola adios"), we need setBaseAndExtent()
-      // to preserve the range so we don't incorrectly collapse ranges and lose the selection.
-      if (anchorNode === focusNode && anchorOffset === focusOffset) {
+      if (anchorNode === focusNode) {
+        this.#focusNode = this.#anchorNode;
+        this.#focusOffset = this.#anchorOffset;
         this.#selection.setPosition(anchorNode, anchorOffset);
       } else {
+        this.#focusNode = focusNode;
+        this.#focusOffset = focusOffset;
         this.#selection.setBaseAndExtent(
           anchorNode,
           anchorOffset,
@@ -1958,8 +1956,6 @@ export class SelectionController extends EventTarget {
         this.startOffset === this.endOffset &&
         this.endOffset === endNode.nodeValue?.length
       ) {
-        const paragraph = this.startParagraph;
-        setParagraphStyles(paragraph, newStyles);
         const newTextSpan = createVoidTextSpan(newStyles);
         this.endTextSpan.after(newTextSpan);
         this.setSelection(newTextSpan.firstChild, 0, newTextSpan.firstChild, 0);