🐛 Fix token not being highlight when applied in wasm

frontend/playwright/data/tokens/get-file-13302.json

@@ -0,0 +1,206 @@
+{
+  "~: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 13302 - Token highlight",
+  "~:revn": 13,
+  "~:modified-at": "~m1770721633482",
+  "~:vern": 0,
+  "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
+  "~: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": "~m1770719668044",
+  "~:backend": "legacy-db",
+  "~:data": {
+    "~:pages": [
+      "~u6886b62b-1979-8195-8007-8d0b92d3116b"
+    ],
+    "~:pages-index": {
+      "~u6886b62b-1979-8195-8007-8d0b92d3116b": {
+        "~: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\",[\"~ud601cd4c-f774-802c-8007-8d0c13228bba\"]]]",
+            "~ud601cd4c-f774-802c-8007-8d0c13228bba": "[\"~#shape\",[\"^ \",\"~:y\",79.00000276416532,\"~: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\",100.00000353902578,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",178.9999994188543]],[\"^<\",[\"^ \",\"~:x\",0,\"~:y\",178.9999994188543]]],\"~: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\",\"~ud601cd4c-f774-802c-8007-8d0c13228bba\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:applied-tokens\",[\"^ \"],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",79.00000276416532,\"^8\",100.00000353902578,\"~:height\",99.99999665468899,\"~:x1\",0,\"~:y1\",79.00000276416532,\"~:x2\",100.00000353902578,\"~:y2\",178.99999941885432]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",99.99999665468899,\"~:flip-y\",null]]"
+          }
+        },
+        "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+        "~:name": "Page 1"
+      }
+    },
+    "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
+    "~:options": {
+      "~:components-v2": true,
+      "~:base-font-size": "16px"
+    },
+    "~:tokens-lib": {
+      "~#penpot/tokens-lib": {
+        "~:sets": {
+          "~#ordered-map": [
+            [
+              "S-Global",
+              {
+                "~#penpot/token-set": {
+                  "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31bd9d9",
+                  "~:name": "Global",
+                  "~:description": "",
+                  "~:modified-at": "~m1770719731235",
+                  "~:tokens": {
+                    "~#ordered-map": [
+                      [
+                        "any-dimensions-token",
+                        {
+                          "~#penpot/token": {
+                            "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31b8a10",
+                            "~:name": "any-dimensions-token",
+                            "~:type": "~:dimensions",
+                            "~:value": "256",
+                            "~:description": "",
+                            "~:modified-at": "~m1770719731235"
+                          }
+                        }
+                      ]
+                    ]
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        "~:themes": {
+          "~#ordered-map": [
+            [
+              "",
+              {
+                "~#ordered-map": [
+                  [
+                    "__PENPOT__HIDDEN__TOKEN__THEME__",
+                    {
+                      "~#penpot/token-theme": {
+                        "~:id": "~u00000000-0000-0000-0000-000000000000",
+                        "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__",
+                        "~:group": "",
+                        "~:description": "",
+                        "~:is-source": false,
+                        "~:external-id": "",
+                        "~:modified-at": "~m1770719704149",
+                        "~:sets": {
+                          "~#set": [
+                            "Global"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                ]
+              }
+            ]
+          ]
+        },
+        "~:active-themes": {
+          "~#set": [
+            "/__PENPOT__HIDDEN__TOKEN__THEME__"
+          ]
+        }
+      }
+    }
+  }
+}

frontend/playwright/data/tokens/update-file-13302.json

@@ -0,0 +1,338 @@
+{
+  "~:revn": 11,
+  "~:lagged": [
+    {
+      "~:id": "~u6886b62b-1979-8195-8007-8d12e2ccd0f1",
+      "~:revn": 11,
+      "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
+      "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
+      "~:changes": [
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:width",
+              "~:val": 100.00000353902578,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:points",
+              "~:val": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 79.00000333786011
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 100.00000353902578,
+                    "~:y": 79.00000333786011
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 100.00000353902578,
+                    "~:y": 335.00001430511475
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 335.00001430511475
+                  }
+                }
+              ],
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:selrect",
+              "~:val": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 79.00000333786011,
+                  "~:width": 100.00000353902578,
+                  "~:height": 256.00001096725464,
+                  "~:x1": 0,
+                  "~:y1": 79.00000333786011,
+                  "~:x2": 100.00000353902578,
+                  "~:y2": 335.00001430511475
+                }
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            }
+          ]
+        },
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:applied-tokens",
+              "~:val": {
+                "~:height": "any-dimensions-token"
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            }
+          ]
+        },
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:y",
+              "~:val": 79.00000276416532,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:points",
+              "~:val": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 79.0000027641653
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 100.00000353902578,
+                    "~:y": 79.0000027641653
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 100.00000353902578,
+                    "~:y": 178.9999994188543
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 178.9999994188543
+                  }
+                }
+              ],
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:selrect",
+              "~:val": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 79.00000276416532,
+                  "~:width": 100.00000353902578,
+                  "~:height": 99.99999665468899,
+                  "~:x1": 0,
+                  "~:y1": 79.00000276416532,
+                  "~:x2": 100.00000353902578,
+                  "~:y2": 178.99999941885432
+                }
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:height",
+              "~:val": 99.99999665468899,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            }
+          ]
+        },
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:applied-tokens",
+              "~:val": {},
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "~:id": "~u6886b62b-1979-8195-8007-8d12e996895c",
+      "~:revn": 12,
+      "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
+      "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
+      "~:changes": [
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:applied-tokens",
+              "~:val": {
+                "~:width": "any-dimensions-token",
+                "~:height": "any-dimensions-token"
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": false
+            }
+          ]
+        },
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:width",
+              "~:val": 256.0000033378599,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:points",
+              "~:val": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 79.0000027641653
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 256.0000033378599,
+                    "~:y": 79.0000027641653
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 256.0000033378599,
+                    "~:y": 178.9999994188543
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 178.9999994188543
+                  }
+                }
+              ],
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:selrect",
+              "~:val": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 79.00000276416532,
+                  "~:width": 256.0000033378599,
+                  "~:height": 99.99999665468899,
+                  "~:x1": 0,
+                  "~:y1": 79.00000276416532,
+                  "~:x2": 256.0000033378599,
+                  "~:y2": 178.99999941885432
+                }
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            }
+          ]
+        },
+        {
+          "~:type": "~:mod-obj",
+          "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
+          "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
+          "~:operations": [
+            {
+              "~:type": "~:set",
+              "~:attr": "~:y",
+              "~:val": 79.00000826835657,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:points",
+              "~:val": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 79.00000826835657
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 256.0000033378599,
+                    "~:y": 79.00000826835657
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 256.0000033378599,
+                    "~:y": 335.0000178241718
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 335.0000178241718
+                  }
+                }
+              ],
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:selrect",
+              "~:val": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 79.00000826835657,
+                  "~:width": 256.0000033378599,
+                  "~:height": 256.0000095558152,
+                  "~:x1": 0,
+                  "~:y1": 79.00000826835657,
+                  "~:x2": 256.0000033378599,
+                  "~:y2": 335.0000178241718
+                }
+              },
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            },
+            {
+              "~:type": "~:set",
+              "~:attr": "~:height",
+              "~:val": 256.0000095558152,
+              "~:ignore-geometry": false,
+              "~:ignore-touched": true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -10,7 +10,7 @@ export const WASM_FLAGS = [
 export class WasmWorkspacePage extends WorkspacePage {
   static async init(page) {
     await super.init(page);
-    await WorkspacePage.mockConfigFlags(page, WASM_FLAGS);
+    await WasmWorkspacePage.mockConfigFlags(page, WASM_FLAGS);
 
     await page.addInitScript(() => {
       document.addEventListener("penpot:wasm:loaded", () => {
@@ -27,6 +27,14 @@ export class WasmWorkspacePage extends WorkspacePage {
     });
   }
 
+  static async mockConfigFlags(page, flags) {
+    await super.mockConfigFlags(page, [...WASM_FLAGS, ...flags]);
+  }
+
+  async mockConfigFlags(flags) {
+    return WasmWorkspacePage.mockConfigFlags(this.page, flags);
+  }
+
   constructor(page) {
     super(page);
     this.canvas = page.getByTestId("canvas-wasm-shapes");

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

@@ -0,0 +1,38 @@
+// FIXME: This is to be merged with tokens.spec.js once that file has been migrated
+// to use the new WasmWorkspacePage page.
+
+import { test, expect } from "@playwright/test";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-design-tokens-v1"]);
+});
+
+test("BUG 13302 - Dimension token not being highlighted after applying it", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+
+  await workspacePage.mockGetFile("tokens/get-file-13302.json");
+  await workspacePage.mockRPC("update-file?id=*", "tokens/update-file-13302.json");
+
+  await workspacePage.goToWorkspace({
+    fileId: "6886b62b-1979-8195-8007-8d0b92d3116a",
+    pageId: "6886b62b-1979-8195-8007-8d0b92d3116b",
+  });
+
+  await workspacePage.clickLeafLayer("Rectangle");
+
+  await workspacePage.sidebar.getByRole("tab", { name: "Tokens" }).click();
+
+  await workspacePage.tokensSidebar
+    .getByRole("button", { name: "Dimensions 1" })
+    .click();
+
+  const token = workspacePage.tokensSidebar.getByRole("checkbox", { name: "any-dimensions-token" });
+  await token.click();
+
+  // FIXME: this is a bug somewhere else in tokens, this should be fully applied
+  // for a dimensions token
+  await expect(token).toBeChecked({ indeterminate: true });
+});

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

@@ -7,6 +7,9 @@ test.beforeEach(async ({ page }) => {
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });
 
+// FIXME: Looks like we could benefit from splitting this large file into multiple
+// specs files, and have a TokensPage that extends WasmWorkspacePage to deal
+// with the shared code.
 const setupEmptyTokensFile = async (page, options = {}) => {
   const { flags = [] } = options;
 
@@ -220,7 +223,7 @@ async function testTokenCreationFlow(
   await submitButton.click();
 
   await expect(
-    tokensTabPanel.getByRole("button", { name: "my-token" }),
+    tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
   ).toBeEnabled();
 
   //
@@ -240,7 +243,7 @@ async function testTokenCreationFlow(
   await submitButton.click();
 
   await expect(
-    tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+    tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
   ).toBeEnabled();
 }
 
@@ -472,7 +475,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", {
+      tokensTabPanel.getByRole("checkbox", {
         name: "color.primary",
       }),
     ).toBeEnabled();
@@ -495,14 +498,14 @@ test.describe("Tokens: Tokens Tab", () => {
     await nameField.press("Enter");
 
     await expect(
-      tokensTabPanel.getByRole("button", {
+      tokensTabPanel.getByRole("checkbox", {
         name: "color.secondary",
       }),
     ).toBeEnabled();
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
     await expect(
-      tokensTabPanel.getByRole("button", { name: "#ff0000" }),
+      tokensTabPanel.getByRole("checkbox", { name: "#ff0000" }),
     ).toHaveCount(2);
 
     // Global set has been auto created and is active
@@ -643,7 +646,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -684,7 +687,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
 
     //
@@ -701,7 +704,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-3" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }),
     ).toBeEnabled();
   });
 
@@ -797,7 +800,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -817,7 +820,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
 
     //
@@ -837,7 +840,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-3" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }),
     ).toBeEnabled();
   });
 
@@ -933,7 +936,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -953,7 +956,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
   });
 
@@ -1051,7 +1054,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -1071,7 +1074,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
   });
 
@@ -1079,7 +1082,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]});
+      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1215,7 +1218,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -1252,15 +1255,15 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
   });
 
-    test("User creates shadow token with negative spread", async ({ page }) => {
+  test("User creates shadow token with negative spread", async ({ page }) => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]});
+      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1390,8 +1393,8 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(
       tokensUpdateCreateModal.getByText("Resolved value: 0"),
     ).toBeVisible();
-  
-       await spreadField.fill("1 - 3");
+
+    await spreadField.fill("1 - 3");
     await expect(
       tokensUpdateCreateModal.getByText("Resolved value: -2"),
     ).toBeVisible();
@@ -1401,7 +1404,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -1438,7 +1441,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
   });
 
@@ -1645,7 +1648,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await submitButton.click();
 
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token" }),
     ).toBeEnabled();
 
     //
@@ -1686,7 +1689,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(submitButton).toBeEnabled();
     await submitButton.click();
     await expect(
-      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+      tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }),
     ).toBeEnabled();
   });
 
@@ -1709,7 +1712,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensColorGroup).toBeVisible();
     await tokensColorGroup.click();
 
-    const colorToken = tokensSidebar.getByRole("button", {
+    const colorToken = tokensSidebar.getByRole("checkbox", {
       name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
@@ -1727,7 +1730,7 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-    const colorTokenChanged = tokensSidebar.getByRole("button", {
+    const colorTokenChanged = tokensSidebar.getByRole("checkbox", {
       name: "colors.blue.100.changed",
     });
     await expect(colorTokenChanged).toBeVisible();
@@ -1947,7 +1950,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensColorGroup).toBeVisible();
     await tokensColorGroup.click();
 
-    const colorToken = tokensSidebar.getByRole("button", {
+    const colorToken = tokensSidebar.getByRole("checkbox", {
       name: "colors.blue.100",
     });
 
@@ -1958,7 +1961,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokenContextMenuForToken).not.toBeVisible();
 
     await expect(
-      tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
+      tokensSidebar.getByRole("checkbox", { name: "colors.blue.100-copy" }),
     ).toBeVisible();
   });
 
@@ -1975,7 +1978,7 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await tokensColorGroup.click();
 
-    const colorToken = tokensSidebar.getByRole("button", {
+    const colorToken = tokensSidebar.getByRole("checkbox", {
       name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
@@ -2000,7 +2003,7 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensColorGroup).toBeVisible();
     await tokensColorGroup.click();
 
-    const colorToken = tokensSidebar.getByRole("button", {
+    const colorToken = tokensSidebar.getByRole("checkbox", {
       name: "colors.blue.100",
     });
     await expect(colorToken).toBeVisible();
@@ -2410,7 +2413,7 @@ test.describe("Tokens: Apply token", () => {
       .click();
 
     await tokensSidebar
-      .getByRole("button", { name: "colors.black" })
+      .getByRole("checkbox", { name: "colors.black" })
       .click({ button: "right" });
     await tokenContextMenuForToken.getByText("Fill").click();
 
@@ -2438,7 +2441,7 @@ test.describe("Tokens: Apply token", () => {
       .filter({ hasText: "Typography" })
       .click();
 
-    await tokensSidebar.getByRole("button", { name: "Full" }).click();
+    await tokensSidebar.getByRole("checkbox", { name: "Full" }).click();
 
     const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
       name: "Font Size",
@@ -2459,7 +2462,7 @@ test.describe("Tokens: Apply token", () => {
       .click();
 
     // Open edit modal for "Full" typography token
-    const token = tokensSidebar.getByRole("button", { name: "Full" });
+    const token = tokensSidebar.getByRole("checkbox", { name: "Full" });
     await token.click({ button: "right" });
     await page.getByText("Edit token").click();
 
@@ -2620,7 +2623,7 @@ test.describe("Tokens: Apply token", () => {
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
-    const newToken = tokensSidebar.getByRole("button", {
+    const newToken = tokensSidebar.getByRole("checkbox", {
       name: newTokenTitle,
     });
 
@@ -2896,7 +2899,7 @@ test.describe("Tokens: Apply token", () => {
       await expect(tokensUpdateCreateModal).not.toBeVisible();
 
       // Verify token appears in sidebar
-      const shadowToken = tokensSidebar.getByRole("button", {
+      const shadowToken = tokensSidebar.getByRole("checkbox", {
         name: "shadow.primary",
       });
       await expect(shadowToken).toBeEnabled();

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

@@ -409,7 +409,7 @@
              modif-tree (dwm/build-modif-tree ids objects get-modifier)]
 
          (if (features/active-feature? state "render-wasm/v1")
-           (rx/of (dwm/apply-wasm-modifiers modif-tree {:ignore-snap-pixel true}))
+           (rx/of (dwm/apply-wasm-modifiers modif-tree (assoc options :ignore-snap-pixel true)))
 
            (let [modif-tree (gm/set-objects-modifiers modif-tree objects)]
              (rx/of (dwm/apply-modifiers* objects modif-tree nil options)))))))))

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

@@ -70,7 +70,7 @@
 
         on-click
         (mf/use-fn
-         (mf/deps id)
+         (mf/deps id current-page-id)
          (fn []
            ;; For the wasm renderer, apply a blur effect to the viewport canvas
            ;; when we navigate to a different page.

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

@@ -285,6 +285,10 @@
                       :token-pill-invalid-applied-viewer (and is-viewer?
                                                               (and full-applied? errors?)))
               :type "button"
+              :role "checkbox"
+              :aria-checked (cond full-applied? "true"
+                                  half-applied? "mixed"
+                                  :else "false")
               :on-focus on-hover
 
               :on-click on-click

frontend/text-editor/src/editor/TextEditor.js

@@ -702,7 +702,8 @@ export function isEmpty(instance) {
   if (isTextEditor(instance)) {
     return instance.isEmpty;
   }
-  throw new TypeError('Instance is not a TextEditor');
+  return null;
+  // throw new TypeError('Instance is not a TextEditor');
 }
 
 /**
@@ -716,7 +717,8 @@ export function getRoot(instance) {
   if (isTextEditor(instance)) {
     return instance.root;
   }
-  throw new TypeError("Instance is not a TextEditor");
+  return null;
+  // throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -729,9 +731,10 @@ export function getRoot(instance) {
 export function setRoot(instance, root) {
   if (isTextEditor(instance)) {
     instance.root = root;
-    return instance;
+    // return instance;
   }
-  throw new TypeError("Instance is not a TextEditor");
+  return instance;
+  // throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -756,7 +759,8 @@ export function getCurrentStyle(instance) {
   if (isTextEditor(instance)) {
     return instance.currentStyle;
   }
-  throw new TypeError("Instance is not a TextEditor");
+  // throw new TypeError("Instance is not a TextEditor");
+  return null;
 }
 
 /**
@@ -771,7 +775,8 @@ export function applyStylesToSelection(instance, styles) {
   if (isTextEditor(instance)) {
     return instance.applyStylesToSelection(styles);
   }
-  throw new TypeError("Instance is not a TextEditor");
+  // throw new TypeError("Instance is not a TextEditor");
+  return null;
 }
 
 /**
@@ -785,7 +790,8 @@ export function dispose(instance) {
   if (isTextEditor(instance)) {
     return instance.dispose();
   }
-  throw new TypeError("Instance is not a TextEditor");
+  // throw new TypeError("Instance is not a TextEditor");
+  return null;
 }
 
 export default TextEditor;

render-wasm/src/render.rs

@@ -1240,8 +1240,6 @@ impl RenderState {
         if self.render_in_progress {
             if tree.len() != 0 {
                 self.render_shape_tree_partial(base_object, tree, timestamp, true)?;
-            } else {
-                println!("Empty tree");
             }
             self.flush_and_submit();
 
@@ -1264,8 +1262,6 @@ impl RenderState {
     ) -> Result<(), String> {
         if tree.len() != 0 {
             self.render_shape_tree_partial(base_object, tree, timestamp, false)?;
-        } else {
-            println!("Empty tree");
         }
         self.flush_and_submit();