⚡ Memoize variant props on layer-item

⚡ Reduce watchers for layer-item rename mechanism
⚡ Add micro optimizations to layer-item component
2026-02-05 20:22:15 -05:00 · 2026-02-05 15:00:06 +01:00 · 2026-02-05 14:47:10 +01:00 · 2026-02-05 14:12:03 +01:00 · 2026-02-05 13:25:17 +01:00 · 2026-02-05 13:19:08 +01:00
39 changed files with 552 additions and 2337 deletions
--- a/backend/src/app/migrations/clj/migration_0023.clj
+++ b/backend/src/app/migrations/clj/migration_0023.clj
@@ -58,4 +58,3 @@
      (when (nil? (:data file))
        (migrate-file conn file)))
    (db/exec-one! conn ["drop table page cascade;"])))
-
--- a/common/src/app/common/files/tokens.cljc
+++ b/common/src/app/common/files/tokens.cljc
@@ -39,12 +39,12 @@
       (into {})))

 (defn remove-attributes-for-token
-  "Removes applied tokens with `token-name` for the given `attributes` set from `applied-tokens`."
-  [attributes token-name applied-tokens]
+  "Removes applied tokens with `token-id` for the given `attributes` set from `applied-tokens`."
+  [attributes token applied-tokens]
  (let [attr? (set attributes)]
    (->> (remove (fn [[k v]]
                   (and (attr? k)
-                        (= v token-name)))
+                        (= v (or (token-identifier token) token))))
                 applied-tokens)
         (into {}))))

--- a/common/src/app/common/flags.cljc
+++ b/common/src/app/common/flags.cljc
@@ -124,7 +124,6 @@
    :token-base-font-size
    :token-color
    :token-shadow
-    :token-tokenscript
    :transit-readable-response
    :user-feedback
    ;; TODO: remove this flag.
--- a/docker/images/files/nginx-resolvers.conf.template
+++ b/docker/images/files/nginx-resolvers.conf.template
@@ -1 +1 @@
-resolver $PENPOT_INTERNAL_RESOLVER valid=10s;
+resolver $PENPOT_INTERNAL_RESOLVER ipv6=off valid=10s;
--- a/docker/images/files/nginx.conf.template
+++ b/docker/images/files/nginx.conf.template
@@ -73,7 +73,6 @@ http {

    server {
        listen 8080 default_server;
-        listen [::]:8080 default_server;
        server_name _;

        client_max_body_size $PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE;
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,7 +47,6 @@
  "devDependencies": {
    "@penpot/draft-js": "workspace:./packages/draft-js",
    "@penpot/mousetrap": "workspace:./packages/mousetrap",
-    "@penpot/tokenscript": "workspace:./packages/tokenscript",
    "@penpot/plugins-runtime": "1.4.2",
    "@penpot/svgo": "penpot/svgo#v3.2",
    "@penpot/text-editor": "workspace:./text-editor",
--- a/frontend/packages/tokenscript/.gitignore
+++ b/frontend/packages/tokenscript/.gitignore
@@ -1,3 +0,0 @@
-node_modules
-*.sublime-workspace
-/.yarn
--- a/frontend/packages/tokenscript/index.js
+++ b/frontend/packages/tokenscript/index.js
@@ -1,2 +0,0 @@
-export * from "./schemas.js";
-export * from "@tokens-studio/tokenscript-interpreter";
--- a/frontend/packages/tokenscript/package.json
+++ b/frontend/packages/tokenscript/package.json
@@ -1,13 +0,0 @@
-{
-  "name": "@penpot/tokenscript",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "type": "module",
-  "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
-  "author": "Andrey Antukh",
-  "license": "MPL-2.0",
-  "dependencies": {
-    "@tokens-studio/tokenscript-interpreter": "^0.23.1"
-  }
-}
--- a/frontend/packages/tokenscript/schemas.js
+++ b/frontend/packages/tokenscript/schemas.js
--- a/frontend/playwright/ui/specs/tokens/apply.spec.js
+++ b/frontend/playwright/ui/specs/tokens/apply.spec.js
@@ -774,7 +774,7 @@ test.describe("Tokens: Apply token", () => {
    await workspace.layers
      .getByTestId("layer-row")
      .nth(1)
-      .getByTestId("toggle-content")
+      .getByRole("button", { name: "Toggle layer" })
      .click();

    await workspace.layers.getByTestId("layer-row").nth(2).click();
@@ -831,102 +831,15 @@ test.describe("Tokens: Apply token", () => {
    });
    await detachButton.click();
    await expect(marginPillXL).not.toBeVisible();
-    const horizontalMarginInput = layoutItemSectionSidebar.getByText(
-      "Horizontal marginOpen token",
-    );
+    const horizontalMarginInput = layoutItemSectionSidebar.getByText('Horizontal marginOpen token');
    await expect(horizontalMarginInput).toBeVisible();

-    const tokenDropdown = horizontalMarginInput.getByRole("button", {
-      name: "Open token list",
-    });
+    const tokenDropdown = horizontalMarginInput.getByRole('button', { name: 'Open token list' });
    await tokenDropdown.click();

    await expect(dimensionTokenOptionXl).toBeVisible();
    await dimensionTokenOptionXl.click();
-
+    
    await expect(marginPillXL).toBeVisible();
  });
 });
-
-test.describe("Tokens: Detach token", () => {
-  test("User applies border-radius token to a shape from sidebar", async ({
-    page,
-  }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
-
-    // Open tokens sections on left sidebar
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    // Unfold border radius tokens
-    await page.getByRole("button", { name: "Border Radius 3" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius" }),
-    ).toBeVisible();
-    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
-    ).toBeVisible();
-
-    // Apply border radius token from token panels
-    await tokensSidebar
-      .getByRole("button", { name: "borderRadius.sm" })
-      .click();
-
-    // Check if border radius sections is visible on right sidebar
-    const borderRadiusSection = page.getByRole("region", {
-      name: "border-radius-section",
-    });
-    await expect(borderRadiusSection).toBeVisible();
-
-    // Check if token pill is visible on design tab on right sidebar
-    const brTokenPillSM = borderRadiusSection.getByRole("button", {
-      name: "borderRadius.sm",
-    });
-    await expect(brTokenPillSM).toBeVisible();
-    await brTokenPillSM.click();
-
-    // Rename token
-    await tokensSidebar
-      .getByRole("button", { name: "borderRadius.sm" })
-      .click({ button: "right" });
-    await expect(page.getByText("Edit token")).toBeVisible();
-    await page.getByText("Edit token").click();
-    const editModal = page.getByTestId("token-update-create-modal");
-    await expect(editModal).toBeVisible();
-    await expect(
-      editModal.getByRole("textbox", { name: "Name" }),
-    ).toBeVisible();
-    await editModal
-      .getByRole("textbox", { name: "Name" })
-      .fill("BorderRadius.smBis");
-    const submitButton = editModal.getByRole("button", { name: "Save" });
-    await expect(submitButton).toBeEnabled();
-    await submitButton.click();
-    await expect(page.getByText("Don't remap")).toBeVisible();
-    await page.getByText("Don't remap").click();
-    const brokenPill = borderRadiusSection.getByRole("button", {
-      name: "This token is not in any",
-    });
-    await expect(brokenPill).toBeVisible();
-
-    // Detach broken token
-    const detachButton = borderRadiusSection.getByRole("button", {
-      name: "Detach token",
-    });
-    await detachButton.click();
-    await expect(brokenPill).not.toBeVisible();
-
-    //De-select and select shape again to double check token is detached
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers.getByTestId("layer-row").nth(0).click();
-    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
-    await expect(brokenPill).not.toBeVisible();
-  });
-});
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -28,9 +28,6 @@ importers:
      '@penpot/text-editor':
        specifier: workspace:./text-editor
        version: link:text-editor
-      '@penpot/tokenscript':
-        specifier: workspace:./packages/tokenscript
-        version: link:packages/tokenscript
      '@playwright/test':
        specifier: 1.58.0
        version: 1.58.0
@@ -251,12 +248,6 @@ importers:

  packages/mousetrap: {}

-  packages/tokenscript:
-    dependencies:
-      '@tokens-studio/tokenscript-interpreter':
-        specifier: ^0.23.1
-        version: 0.23.1
-
  text-editor:
    devDependencies:
      '@playwright/test':
@@ -308,12 +299,6 @@ packages:
    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
    engines: {node: '>=6.0.0'}

-  '@ark/schema@0.56.0':
-    resolution: {integrity: sha512-ECg3hox/6Z/nLajxXqNhgPtNdHWC9zNsDyskwO28WinoFEnWow4IsERNz9AnXRhTZJnYIlAJ4uGn3nlLk65vZA==}
-
-  '@ark/util@0.56.0':
-    resolution: {integrity: sha512-BghfRC8b9pNs3vBoDJhcta0/c1J1rsoS1+HgVUreMFPdhz/CRAKReAu57YEllNaSy98rWAdY1gE+gFup7OXpgA==}
-
  '@asamuzakjp/css-color@4.1.1':
    resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}

@@ -939,42 +924,36 @@ packages:
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm-musl@2.5.1':
    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-arm64-glibc@2.5.1':
    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm64-musl@2.5.1':
    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-x64-glibc@2.5.1':
    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-x64-musl@2.5.1':
    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-win32-arm64@2.5.1':
    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -1056,28 +1035,24 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@resvg/resvg-js-linux-arm64-musl@2.6.2':
    resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@resvg/resvg-js-linux-x64-gnu@2.6.2':
    resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@resvg/resvg-js-linux-x64-musl@2.6.2':
    resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
    resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
@@ -1174,145 +1149,121 @@ packages:
    resolution: {integrity: sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-gnueabihf@4.56.0':
    resolution: {integrity: sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.54.0':
    resolution: {integrity: sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm-musleabihf@4.56.0':
    resolution: {integrity: sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.54.0':
    resolution: {integrity: sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-gnu@4.56.0':
    resolution: {integrity: sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.54.0':
    resolution: {integrity: sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-musl@4.56.0':
    resolution: {integrity: sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loong64-gnu@4.54.0':
    resolution: {integrity: sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-loong64-gnu@4.56.0':
    resolution: {integrity: sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-loong64-musl@4.56.0':
    resolution: {integrity: sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==}
    cpu: [loong64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-ppc64-gnu@4.54.0':
    resolution: {integrity: sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.56.0':
    resolution: {integrity: sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-ppc64-musl@4.56.0':
    resolution: {integrity: sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==}
    cpu: [ppc64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-riscv64-gnu@4.54.0':
    resolution: {integrity: sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.56.0':
    resolution: {integrity: sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.54.0':
    resolution: {integrity: sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-riscv64-musl@4.56.0':
    resolution: {integrity: sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.54.0':
    resolution: {integrity: sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-s390x-gnu@4.56.0':
    resolution: {integrity: sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.54.0':
    resolution: {integrity: sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.56.0':
    resolution: {integrity: sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.54.0':
    resolution: {integrity: sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-x64-musl@4.56.0':
    resolution: {integrity: sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-openbsd-x64@4.56.0':
    resolution: {integrity: sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==}
@@ -1485,11 +1436,6 @@ packages:
    peerDependencies:
      style-dictionary: '>=4.3.0 < 6'

-  '@tokens-studio/tokenscript-interpreter@0.23.1':
-    resolution: {integrity: sha512-aIcJprCkHIyckl0Knn78Sn7ef3U3IXLjNv9MOePdNR0Mz3Z4PleerldtfLmr1DdXUXiroVSyJROyJrO3TfB2Gg==}
-    engines: {node: '>=16.0.0'}
-    hasBin: true
-
  '@tokens-studio/types@0.5.2':
    resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==}

@@ -1728,12 +1674,6 @@ packages:
    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
    engines: {node: '>= 0.4'}

-  arkregex@0.0.5:
-    resolution: {integrity: sha512-ncYjBdLlh5/QnVsAA8De16Tc9EqmYM7y/WU9j+236KcyYNUXogpz3sC4ATIZYzzLxwI+0sEOaQLEmLmRleaEXw==}
-
-  arktype@2.1.29:
-    resolution: {integrity: sha512-jyfKk4xIOzvYNayqnD8ZJQqOwcrTOUbIU4293yrzAjA3O1dWh61j71ArMQ6tS/u4pD7vabSPe7nG3RCyoXW6RQ==}
-
  array-buffer-byte-length@1.0.2:
    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
    engines: {node: '>= 0.4'}
@@ -1842,9 +1782,6 @@ packages:
  buffer-builder@0.2.0:
    resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}

-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
  buffer-from@1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}

@@ -2015,10 +1952,6 @@ packages:
    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
    engines: {node: '>=18'}

-  commander@14.0.2:
-    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
-    engines: {node: '>=20'}
-
  commander@7.2.0:
    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
    engines: {node: '>= 10'}
@@ -3427,9 +3360,6 @@ packages:
    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
    engines: {node: '>= 14.16'}

-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@@ -3707,10 +3637,6 @@ packages:
    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
    engines: {node: '>= 14.18.0'}

-  readline-sync@1.4.10:
-    resolution: {integrity: sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==}
-    engines: {node: '>= 0.8.0'}
-
  recast@0.23.11:
    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
    engines: {node: '>= 4'}
@@ -3858,56 +3784,48 @@ packages:
    engines: {node: '>=14.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: glibc

  sass-embedded-linux-arm@1.97.1:
    resolution: {integrity: sha512-48VxaTUApLyx1NXFdZhKqI/7FYLmz8Ju3Ki2V/p+mhn5raHgAiYeFgn8O1WGxTOh+hBb9y3FdSR5a8MNTbmKMQ==}
    engines: {node: '>=14.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: glibc

  sass-embedded-linux-musl-arm64@1.97.1:
    resolution: {integrity: sha512-kD35WSD9o0279Ptwid3Jnbovo1FYnuG2mayYk9z4ZI4mweXEK6vTu+tlvCE/MdF/zFKSj11qaxaH+uzXe2cO5A==}
    engines: {node: '>=14.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: musl

  sass-embedded-linux-musl-arm@1.97.1:
    resolution: {integrity: sha512-FUFs466t3PVViVOKY/60JgLLtl61Pf7OW+g5BeEfuqVcSvYUECVHeiYHtX1fT78PEVa0h9tHpM6XpWti+7WYFA==}
    engines: {node: '>=14.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: musl

  sass-embedded-linux-musl-riscv64@1.97.1:
    resolution: {integrity: sha512-ZgpYps5YHuhA2+KiLkPukRbS5298QObgUhPll/gm5i0LOZleKCwrFELpVPcbhsSBuxqji2uaag5OL+n3JRBVVg==}
    engines: {node: '>=14.0.0'}
    cpu: [riscv64]
    os: [linux]
-    libc: musl

  sass-embedded-linux-musl-x64@1.97.1:
    resolution: {integrity: sha512-wcAigOyyvZ6o1zVypWV7QLZqpOEVnlBqJr9MbpnRIm74qFTSbAEmShoh8yMXBymzuVSmEbThxAwW01/TLf62tA==}
    engines: {node: '>=14.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: musl

  sass-embedded-linux-riscv64@1.97.1:
    resolution: {integrity: sha512-9j1qE1ZrLMuGb+LUmBzw93Z4TNfqlRkkxjPVZy6u5vIggeSfvGbte7eRoYBNWX6SFew/yBCL90KXIirWFSGrlQ==}
    engines: {node: '>=14.0.0'}
    cpu: [riscv64]
    os: [linux]
-    libc: glibc

  sass-embedded-linux-x64@1.97.1:
    resolution: {integrity: sha512-7nrLFYMH/UgvEgXR5JxQJ6y9N4IJmnFnYoDxN0nw0jUp+CQWQL4EJ4RqAKTGelneueRbccvt2sEyPK+X0KJ9Jg==}
    engines: {node: '>=14.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: glibc

  sass-embedded-unknown-all@1.97.1:
    resolution: {integrity: sha512-oPSeKc7vS2dx3ZJHiUhHKcyqNq0GWzAiR8zMVpPd/kVMl5ZfVyw+5HTCxxWDBGkX02lNpou27JkeBPCaneYGAQ==}
@@ -4238,7 +4156,6 @@ packages:
  tar@6.2.1:
    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
    engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me

  tdigest@0.1.2:
    resolution: {integrity: sha512-+G0LLgjjo9BZX2MfdvPfH+MKLCrxlXSYec5DaPYP1fe6Iyhf0/fSmJ0bFiZ1F8BT6cGXl2LpltQptzjXKWEkKA==}
@@ -4760,10 +4677,6 @@ packages:
    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
    engines: {node: '>=12'}

-  yauzl@3.2.0:
-    resolution: {integrity: sha512-Ow9nuGZE+qp1u4JIPvg+uCiUr7xGQWdff7JQSk5VGYTAZMDe2q8lxJ10ygv10qmSj031Ty/6FNJpLO4o1Sgc+w==}
-    engines: {node: '>=12'}
-
  yocto-queue@1.2.2:
    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
    engines: {node: '>=12.20'}
@@ -4782,12 +4695,6 @@ snapshots:
      '@jridgewell/gen-mapping': 0.3.13
      '@jridgewell/trace-mapping': 0.3.31

-  '@ark/schema@0.56.0':
-    dependencies:
-      '@ark/util': 0.56.0
-
-  '@ark/util@0.56.0': {}
-
  '@asamuzakjp/css-color@4.1.1':
    dependencies:
      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -5701,13 +5608,6 @@ snapshots:
      is-mergeable-object: 1.1.1
      style-dictionary: 5.0.0-rc.1

-  '@tokens-studio/tokenscript-interpreter@0.23.1':
-    dependencies:
-      arktype: 2.1.29
-      commander: 14.0.2
-      readline-sync: 1.4.10
-      yauzl: 3.2.0
-
  '@tokens-studio/types@0.5.2': {}

  '@trysound/sax@0.2.0': {}
@@ -6001,16 +5901,6 @@ snapshots:

  aria-query@5.3.2: {}

-  arkregex@0.0.5:
-    dependencies:
-      '@ark/util': 0.56.0
-
-  arktype@2.1.29:
-    dependencies:
-      '@ark/schema': 0.56.0
-      '@ark/util': 0.56.0
-      arkregex: 0.0.5
-
  array-buffer-byte-length@1.0.2:
    dependencies:
      call-bound: 1.0.4
@@ -6150,8 +6040,6 @@ snapshots:

  buffer-builder@0.2.0: {}

-  buffer-crc32@0.2.13: {}
-
  buffer-from@1.1.2: {}

  buffer@5.7.1:
@@ -6324,8 +6212,6 @@ snapshots:

  commander@12.1.0: {}

-  commander@14.0.2: {}
-
  commander@7.2.0: {}

  component-emitter@2.0.0: {}
@@ -7849,8 +7735,6 @@ snapshots:

  pathval@2.0.1: {}

-  pend@1.2.0: {}
-
  picocolors@1.1.1: {}

  picomatch@2.3.1: {}
@@ -8145,8 +8029,6 @@ snapshots:

  readdirp@4.1.2: {}

-  readline-sync@1.4.10: {}
-
  recast@0.23.11:
    dependencies:
      ast-types: 0.16.1
@@ -9313,11 +9195,6 @@ snapshots:
      y18n: 5.0.8
      yargs-parser: 21.1.1

-  yauzl@3.2.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      pend: 1.2.0
-
  yocto-queue@1.2.2: {}

  zod@3.25.76: {}
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -6,5 +6,4 @@ shamefullyHoist: true
 packages:
  - "packages/draft-js"
  - "packages/mousetrap"
-  - "packages/tokenscript"
  - "text-editor"
--- a/frontend/src/app/main/data/style_dictionary.cljs
+++ b/frontend/src/app/main/data/style_dictionary.cljs
@@ -14,9 +14,7 @@
   [app.common.time :as ct]
   [app.common.types.token :as cto]
   [app.common.types.tokens-lib :as ctob]
-   [app.config :as cf]
   [app.main.data.tinycolor :as tinycolor]
-   [app.main.data.tokenscript :as ts]
   [app.main.data.workspace.tokens.errors :as wte]
   [app.main.data.workspace.tokens.warnings :as wtw]
   [beicon.v2.core :as rx]
@@ -588,25 +586,22 @@
    ;; FIXME: this with effect with trigger all the time because
    ;; `config` will be always a different instance
    (mf/with-effect [tokens config]
-      (when-not (contains? cf/flags :tokenscript)
-        (let [cached (get @cache-atom tokens)]
-          (cond
-            (nil? tokens) nil
-            ;; The tokens are already processing somewhere
-            (rx/observable? cached) (rx/sub! cached #(reset! tokens-state %))
-            ;; Get the cached entry
-            (some? cached) (reset! tokens-state cached)
-            ;; No cached entry, start processing
-            :else (let [resolved-tokens-s (if interactive?
-                                            (resolve-tokens-interactive tokens)
-                                            (resolve-tokens tokens))]
-                    (swap! cache-atom assoc tokens resolved-tokens-s)
-                    (rx/sub! resolved-tokens-s (fn [resolved-tokens]
-                                                 (swap! cache-atom assoc tokens resolved-tokens)
-                                                 (reset! tokens-state resolved-tokens))))))))
-    (if (contains? cf/flags :tokenscript)
-      (ts/resolve-tokens tokens)
-      @tokens-state)))
+      (let [cached (get @cache-atom tokens)]
+        (cond
+          (nil? tokens) nil
+          ;; The tokens are already processing somewhere
+          (rx/observable? cached) (rx/sub! cached #(reset! tokens-state %))
+          ;; Get the cached entry
+          (some? cached) (reset! tokens-state cached)
+          ;; No cached entry, start processing
+          :else (let [resolved-tokens-s (if interactive?
+                                          (resolve-tokens-interactive tokens)
+                                          (resolve-tokens tokens))]
+                  (swap! cache-atom assoc tokens resolved-tokens-s)
+                  (rx/sub! resolved-tokens-s (fn [resolved-tokens]
+                                               (swap! cache-atom assoc tokens resolved-tokens)
+                                               (reset! tokens-state resolved-tokens)))))))
+    @tokens-state))

 (defn use-resolved-tokens*
  "This hook will return the unresolved tokens as state until they are
@@ -617,19 +612,16 @@
  [tokens & {:keys [interactive?]}]
  (let [state* (mf/use-state tokens)]
    (mf/with-effect [tokens interactive?]
-      (when-not (contains? cf/flags :tokenscript)
-        (if (seq tokens)
-          (let [tpoint  (ct/tpoint-ms)
-                tokens-s  (if interactive?
-                            (resolve-tokens-interactive tokens)
-                            (resolve-tokens tokens))]
+      (if (seq tokens)
+        (let [tpoint  (ct/tpoint-ms)
+              tokens-s  (if interactive?
+                          (resolve-tokens-interactive tokens)
+                          (resolve-tokens tokens))]

-            (-> tokens-s
-                (rx/sub! (fn [resolved-tokens]
-                           (let [elapsed (tpoint)]
-                             (l/dbg :hint "use-resolved-tokens*" :elapsed elapsed)
-                             (reset! state* resolved-tokens))))))
-          (reset! state* tokens))))
-    (if (contains? cf/flags :tokenscript)
-      (ts/resolve-tokens tokens)
-      @state*)))
+          (-> tokens-s
+              (rx/sub! (fn [resolved-tokens]
+                         (let [elapsed (tpoint)]
+                           (l/dbg :hint "use-resolved-tokens*" :elapsed elapsed)
+                           (reset! state* resolved-tokens))))))
+        (reset! state* tokens)))
+    @state*))
--- a/frontend/src/app/main/data/tokenscript.cljs
+++ b/frontend/src/app/main/data/tokenscript.cljs
@@ -1,164 +0,0 @@
-(ns app.main.data.tokenscript
-  (:require
-   ["@penpot/tokenscript" :refer [BaseSymbolType
-                                  ColorSymbol
-                                  ListSymbol NumberSymbol
-                                  NumberWithUnitSymbol
-                                  ProcessorError
-                                  processTokens
-                                  TokenSymbol
-                                  makeConfig]]
-   [app.common.logging :as l]
-   [app.common.time :as ct]
-   [app.main.data.workspace.tokens.errors :as wte]))
-
-(l/set-level! :debug)
-
-;; Config ----------------------------------------------------------------------
-
-(def config (makeConfig))
-
-;; Class predicates ------------------------------------------------------------
-;; Predicates to get information about the tokenscript interpreter symbol type
-;; Or to determine the error
-
-(defn tokenscript-symbol? [v]
-  (instance? BaseSymbolType v))
-
-(defn structured-token? [v]
-  (instance? TokenSymbol v))
-
-(defn structured-record-token? [^js v]
-  (and (structured-token? v) (instance? js/Map (.-value v))))
-
-(defn structured-array-token? [^js v]
-  (and (structured-token? v) (instance? js/Array (.-value v))))
-
-(defn number-with-unit-symbol? [v]
-  (instance? NumberWithUnitSymbol v))
-
-(defn number-symbol? [v]
-  (instance? NumberSymbol v))
-
-(defn list-symbol? [v]
-  (instance? ListSymbol v))
-
-(defn color-symbol? [v]
-  (instance? ColorSymbol v))
-
-(defn processor-error? [err]
-  (instance? ProcessorError err))
-
-;; Conversion Tools ------------------------------------------------------------
-;; Helpers to convert tokenscript symbols to penpot accepted formats
-
-(defn color-symbol->hex-string [^js v]
-  (when (color-symbol? v)
-    (.toString (.to v "hex"))))
-
-(defn color-alpha [^js v]
-  (if (.isHex v)
-    1
-    (or (.getAttribute v "alpha") 1)))
-
-(defn color-symbol->penpot-color [^js v]
-  {:color (color-symbol->hex-string v)
-   :opacity (color-alpha v)})
-
-(defn rem-number-with-unit? [v]
-  (and (number-with-unit-symbol? v)
-       (= (.-unit v) "rem")))
-
-(defn rem->px [^js v]
-  (* (.-value v) 16))
-
-(declare tokenscript-symbols->penpot-unit)
-
-(defn structured-token->penpot-map
-  "Converts structured token (record or array) to penpot map format.
-  Structured tokens are non-primitive token types like `typography` or `box-shadow`."
-  [^js token-symbol]
-  (if (instance? js/Array (.-value token-symbol))
-    (mapv structured-token->penpot-map (.-value token-symbol))
-    (let [entries (es6-iterator-seq (.entries (.-value token-symbol)))]
-      (into {} (map (fn [[k v :as V]]
-                      [(keyword k) (tokenscript-symbols->penpot-unit v)])
-                    entries)))))
-
-(defn tokenscript-symbols->penpot-unit [^js v]
-  (cond
-    (structured-token? v) (structured-token->penpot-map v)
-    (list-symbol? v) (tokenscript-symbols->penpot-unit (.nth 1 v))
-    (color-symbol? v) (.-value (.to v "hex"))
-    (rem-number-with-unit? v) (rem->px v)
-    :else (.-value v)))
-
-;; Processors ------------------------------------------------------------------
-;; The processor resolves tokens
-;; resolved/error tokens get put back into a clojure structure directly during build time
-;; For updating tokens we use the `TokenResolver` crud methods from the processing result
-;; The `TokenResolver` has detailed information for each tokens dependency graph
-
-(defn create-token-builder
-  "Collects resolved tokens during build time into a clojure structure.
-   Returns Tokenscript Symbols in `:resolved-value` key."
-  [tokens]
-  (let [output (volatile! tokens)
-
-        ;; When a token is resolved (No parsing / reference errors) we assing `:resolved-value` for the original token
-        on-resolve
-        (fn [^js/String token-name ^js/Symbol resolved-symbol]
-          (vswap! output assoc-in [token-name :resolved-value] resolved-symbol))
-
-        ;; When a token contains any errors we assing `:errors` for the original token
-        on-error
-        (fn [^js/String token-name ^js/Error _error ^js/String _original-value]
-          (let [value (get tokens token-name)
-                default-error [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]]
-            (vswap! output assoc-in [token-name :errors] default-error)))
-
-        ;; Extract the atom value
-        get-result
-        (fn [] @output)]
-    #js {:onResolve on-resolve
-         :onError on-error
-         :getResult get-result}))
-
-(defn clj->token->tokenscript-token
-  "Convert penpot token into a format that tokenscript can handle."
-  [{:keys [type value]}]
-  #js {"$type" (name type)
-       "$value" (clj->js value)})
-
-(defn clj-tokens->tokenscript-tokens
-  "Convert penpot map of tokens into tokenscript map structure.
-  tokenscript accepts a map of [token-name {\"$type\": string, \"$value\": any}]"
-  [tokens]
-  (let [token-map (js/Map.)]
-    (doseq [[k token] tokens]
-      (.set token-map k (clj->token->tokenscript-token token)))
-    token-map))
-
-(defn process-tokens
-  "Builds tokens using `tokenscript`."
-  [tokens]
-  (let [input (clj-tokens->tokenscript-tokens tokens)
-        result (processTokens input #js {:config config
-                                         :builder (create-token-builder tokens)})]
-    result))
-
-(defn update-token
-  [tokens token]
-  (let [result (process-tokens tokens)
-        resolver (.-resolver result)]
-    (.updateToken resolver #js {:tokenPath (:name token)
-                                :tokenData (clj->token->tokenscript-token token)})))
-
-;; Main ------------------------------------------------------------------------
-
-(defn resolve-tokens [tokens]
-  (let [tpoint (ct/tpoint-ms)
-        result (process-tokens tokens)
-        elapsed (tpoint)]
-    (l/dbg :hint "tokenscript/resolve-tokens" :elapsed elapsed)
-    (.-output result)))
--- a/frontend/src/app/main/data/workspace/tokens/application.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/application.cljs
@@ -18,13 +18,11 @@
   [app.common.types.tokens-lib :as ctob]
   [app.common.types.typography :as cty]
   [app.common.uuid :as uuid]
-   [app.config :as cf]
   [app.main.data.event :as ev]
   [app.main.data.helpers :as dsh]
   [app.main.data.notifications :as ntf]
   [app.main.data.style-dictionary :as sd]
   [app.main.data.tinycolor :as tinycolor]
-   [app.main.data.tokenscript :as ts]
   [app.main.data.workspace :as udw]
   [app.main.data.workspace.colors :as wdc]
   [app.main.data.workspace.shape-layout :as dwsl]
@@ -629,9 +627,7 @@
          (when-let [tokens (some-> (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))
-                   (sd/resolve-tokens tokens))
+            (->> (sd/resolve-tokens tokens)
                 (rx/mapcat
                  (fn [resolved-tokens]
                    (let [undo-id (js/Symbol)
@@ -649,9 +645,6 @@
                          any-variant? (->> shapes vals (some ctk/is-variant?) boolean)

                          resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
-                          resolved-value (if (contains? cf/flags :tokenscript)
-                                           (ts/tokenscript-symbols->penpot-unit resolved-value)
-                                           resolved-value)
                          tokenized-attributes (cft/attributes-map attributes token)
                          type (:type token)]
                      (rx/concat
@@ -706,18 +699,17 @@
  "Removes `attributes` that match `token` for `shape-ids`.

  Doesn't update shape attributes."
-  [{:keys [attributes token-name shape-ids] :as _props}]
+  [{:keys [attributes token shape-ids] :as _props}]
  (ptk/reify ::unapply-token
    ptk/WatchEvent
    (watch [_ _ _]
      (rx/of
-       (let [remove-token #(when % (cft/remove-attributes-for-token attributes token-name %))]
+       (let [remove-token #(when % (cft/remove-attributes-for-token attributes token %))]
         (dwsh/update-shapes
          shape-ids
          (fn [shape]
            (update shape :applied-tokens remove-token))))))))

-
 (defn toggle-token
  [{:keys [token attrs shape-ids expand-with-children]}]
  (ptk/reify ::on-toggle-token
@@ -747,7 +739,7 @@
        (if unapply-tokens?
          (rx/of
           (unapply-token {:attributes (or attrs all-attributes attributes)
-                           :token-name (:name token)
+                           :token token
                           :shape-ids shape-ids}))
          (rx/of
           (cond
--- a/frontend/src/app/main/data/workspace/tokens/color.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/color.cljs
@@ -7,9 +7,7 @@
 (ns app.main.data.workspace.tokens.color
  (:require
   [app.common.files.tokens :as cft]
-   [app.config :as cf]
-   [app.main.data.tinycolor :as tinycolor]
-   [app.main.data.tokenscript :as ts]))
+   [app.main.data.tinycolor :as tinycolor]))

 (defn color-bullet-color [token-color-value]
  (when-let [tc (tinycolor/valid-color token-color-value)]
@@ -19,8 +17,5 @@
      (tinycolor/->hex-string tc))))

 (defn resolved-token-bullet-color [{:keys [resolved-value] :as token}]
-  (if (contains? cf/flags :tokenscript)
-    (when (and resolved-value (ts/color-symbol? resolved-value))
-      (ts/color-symbol->penpot-color resolved-value))
-    (when (and resolved-value (cft/color-token? token))
-      (color-bullet-color resolved-value))))
+  (when (and resolved-value (cft/color-token? token))
+    (color-bullet-color resolved-value)))
--- a/frontend/src/app/main/data/workspace/tokens/format.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/format.cljs
@@ -1,6 +1,5 @@
 (ns app.main.data.workspace.tokens.format
  (:require
-   [app.main.data.tokenscript :as ts]
   [cuerdas.core :as str]))

 (def category-dictionary
@@ -24,52 +23,14 @@
   :color "Color"
   :inset "Inner Shadow"})

-(declare format-token-value)
-
-(defn- format-map-entries
-  "Formats a sequence of [k v] entries into a formatted string."
-  [entries]
-  (->> entries
-       (map (fn [[k v]]
-              (str "- " (category-dictionary (keyword k)) ": " (format-token-value v))))
-       (str/join "\n")
-       (str "\n")))
-
-(defn- format-structured-token
-  "Formats tokenscript Token"
-  [token-symbol]
-  (->> (.-value token-symbol)
-       (.entries)
-       (es6-iterator-seq)
-       (format-map-entries)))
-
-(defn format-tokenscript-symbol
-  [^js tokenscript-symbol]
-  (cond
-    (ts/rem-number-with-unit? tokenscript-symbol)
-    (str (ts/rem->px tokenscript-symbol) "px")
-
-    (ts/color-symbol? tokenscript-symbol)
-    (ts/color-symbol->hex-string tokenscript-symbol)
-
-    (ts/structured-record-token? tokenscript-symbol)
-    (format-structured-token tokenscript-symbol)
-
-    (ts/structured-array-token? tokenscript-symbol)
-    (str/join "\n" (map format-tokenscript-symbol (.-value tokenscript-symbol)))
-
-    :else
-    (.toString tokenscript-symbol)))
-
 (defn format-token-value
  "Converts token value of any shape to a string."
  [token-value]
  (cond
-    (ts/tokenscript-symbol? token-value)
-    (format-tokenscript-symbol token-value)
-
    (map? token-value)
-    (format-map-entries token-value)
+    (->> (map (fn [[k v]] (str "- " (category-dictionary k) ": " (format-token-value v))) token-value)
+         (str/join "\n")
+         (str "\n"))

    (and (sequential? token-value) (every? map? token-value))
    (str/join "\n" (map format-token-value token-value))
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -183,9 +183,6 @@
  [id]
  (l/derived #(contains? % id) selected-shapes))

-(def highlighted-shapes
-  (l/derived :highlighted workspace-local))
-
 (def export-in-progress?
  (l/derived :export-in-progress? export))

--- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs
@@ -564,17 +564,18 @@
        (mf/use-fn
         (mf/deps on-detach tokens disabled token-applied)
         (fn [event]
-           (when-not disabled
-             (dom/prevent-default event)
-             (dom/stop-propagation event)
-             (reset! token-applied* nil)
-             (reset! selected-id* nil)
-             (reset! focused-id* nil)
-             (when on-detach
-               (on-detach token-applied))
-             (ts/schedule-on-idle
-              (fn []
-                (dom/focus! (mf/ref-val ref)))))))
+           (let [token (get-token-op tokens token-applied)]
+             (when-not disabled
+               (dom/prevent-default event)
+               (dom/stop-propagation event)
+               (reset! token-applied* nil)
+               (reset! selected-id* nil)
+               (reset! focused-id* nil)
+               (when on-detach
+                 (on-detach token))
+               (ts/schedule-on-idle
+                (fn []
+                  (dom/focus! (mf/ref-val ref))))))))

        on-token-key-down
        (mf/use-fn
--- a/frontend/src/app/main/ui/inspect/left_sidebar.cljs
+++ b/frontend/src/app/main/ui/inspect/left_sidebar.cljs
@@ -12,7 +12,7 @@
   [app.common.types.component :as ctk]
   [app.main.data.viewer :as dv]
   [app.main.store :as st]
-   [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]]
+   [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner*]]
   [app.util.dom :as dom]
   [app.util.keyboard :as kbd]
   [okulary.core :as l]
@@ -26,7 +26,6 @@
 (mf/defc layer-item
  [{:keys [item selected objects  depth component-child? hide-toggle?] :as props}]
  (let [id        (:id item)
-        hidden?   (:hidden item)
        selected? (contains? selected id)
        item-ref  (mf/use-ref nil)
        depth     (+ depth 1)
@@ -68,18 +67,17 @@
       (when (and (= (count selected) 1) selected?)
         (dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true))))

-    [:& layer-item-inner
+    [:> layer-item-inner*
     {:ref item-ref
      :item item
      :depth depth
-      :read-only? true
-      :highlighted? false
-      :selected? selected?
-      :component-tree? component-tree?
-      :hidden? hidden?
-      :filtered? false
-      :expanded? expanded?
-      :hide-toggle? hide-toggle?
+      :is-read-only true
+      :is-highlighted false
+      :is-selected selected?
+      :is-component-tree component-tree?
+      :is-filtered false
+      :is-expanded expanded?
+      :hide-toggle hide-toggle?
      :on-select-shape select-shape
      :on-toggle-collapse toggle-collapse}

--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -9,15 +9,10 @@
  (:require
   [app.common.data.macros :as dm]
   [app.common.types.tokens-lib :as ctob]
-   [app.config :as cf]
-   [app.main.constants :refer [left-sidebar-default-max-width
-                               left-sidebar-default-width
-                               right-sidebar-default-max-width
-                               right-sidebar-default-width]]
+   [app.main.constants :refer [right-sidebar-default-width right-sidebar-default-max-width left-sidebar-default-max-width left-sidebar-default-width]]
   [app.main.data.common :as dcm]
   [app.main.data.event :as ev]
   [app.main.data.style-dictionary :as sd]
-   [app.main.data.tokenscript :as ts]
   [app.main.data.workspace :as dw]
   [app.main.features :as features]
   [app.main.refs :as refs]
@@ -374,12 +369,6 @@
            (ctob/get-tokens-in-active-sets tokens-lib)
            {}))

-        tokenscript? (contains? cf/flags :tokenscript)
-
-        tokenscript-resolved-active-tokens
-        (mf/with-memo [tokens-lib tokenscript?]
-          (when tokenscript? (ts/resolve-tokens active-tokens)))
-
        resolved-active-tokens
        (sd/use-resolved-tokens* active-tokens)]

@@ -391,9 +380,7 @@
                          :page-id page-id
                          :tokens-lib tokens-lib
                          :active-tokens active-tokens
-                          :resolved-active-tokens (if (contains? cf/flags :tokenscript)
-                                                    tokenscript-resolved-active-tokens
-                                                    resolved-active-tokens)}])
+                          :resolved-active-tokens resolved-active-tokens}])
     [:> right-sidebar* {:section section
                         :selected selected
                         :drawing-tool drawing-tool
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -10,11 +10,13 @@
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.files.helpers :as cfh]
+   [app.common.math :as mth]
   [app.common.types.component :as ctk]
   [app.common.types.components-list :as ctkl]
   [app.common.types.container :as ctn]
   [app.common.types.shape.layout :as ctl]
   [app.common.uuid :as uuid]
+   [app.common.weak :as weak]
   [app.main.data.workspace :as dw]
   [app.main.data.workspace.collapse :as dwc]
   [app.main.refs :as refs]
@@ -37,6 +39,8 @@
 (defonce ^:private sidebar-hover-queue (atom {:enter #{} :leave #{}}))
 (defonce ^:private sidebar-hover-pending? (atom false))

+(def ^:const default-chunk-size 50)
+
 (defn- schedule-sidebar-hover-flush []
  (when (compare-and-set! sidebar-hover-pending? false true)
    (ts/raf
@@ -48,12 +52,11 @@
         (when (seq enter)
           (apply st/emit! (map dw/highlight-shape enter))))))))

-(mf/defc layer-item-inner
-  {::mf/wrap-props false}
-  [{:keys [item depth parent-size name-ref children ref style
+(mf/defc layer-item-inner*
+  [{:keys [item depth parent-size name-ref children ref style rename-id
           ;; Flags
-           read-only? highlighted? selected? component-tree?
-           filtered? expanded? dnd-over? dnd-over-top? dnd-over-bot? hide-toggle?
+           is-read-only is-highlighted is-selected is-component-tree
+           is-filtered is-expanded dnd-over dnd-over-top dnd-over-bot hide-toggle
           ;; Callbacks
           on-select-shape on-context-menu on-pointer-enter on-pointer-leave on-zoom-to-selected
           on-toggle-collapse on-enable-drag on-disable-drag on-toggle-visibility on-toggle-blocking]}]
@@ -64,7 +67,7 @@
        hidden?               (:hidden item)
        has-shapes?           (-> item :shapes seq boolean)
        touched?              (-> item :touched seq boolean)
-        parent-board?         (and (cfh/frame-shape? item)
+        root-board?           (and (cfh/frame-shape? item)
                                   (= uuid/zero (:parent-id item)))
        absolute?             (ctl/item-absolute? item)
        is-variant?           (ctk/is-variant? item)
@@ -73,9 +76,12 @@
        variant-name          (when is-variant? (:variant-name item))
        variant-error         (when is-variant? (:variant-error item))

-        data                  (deref refs/workspace-data)
-        component             (ctkl/get-component data (:component-id item))
-        variant-properties    (:variant-properties component)
+        component-id          (get item :component-id)
+        variant-properties    (mf/with-memo [component-id]
+                                ;; We use non-reactive deref explicitly here
+                                (let [data (deref refs/workspace-data)]
+                                  (-> (ctkl/get-component data component-id)
+                                      (get :variant-properties))))
        icon-shape            (usi/get-shape-icon item)]

    [:*
@@ -86,27 +92,27 @@
            :data-testid "layer-row"
            :class (stl/css-case
                    :layer-row true
-                    :highlight highlighted?
+                    :highlight is-highlighted
                    :component (ctk/instance-head? item)
                    :masked (:masked-group item)
-                    :selected selected?
+                    :selected is-selected
                    :type-frame (cfh/frame-shape? item)
                    :type-bool (cfh/bool-shape? item)
-                    :type-comp (or component-tree? is-variant-container?)
+                    :type-comp (or is-component-tree is-variant-container?)
                    :hidden hidden?
-                    :dnd-over dnd-over?
-                    :dnd-over-top dnd-over-top?
-                    :dnd-over-bot dnd-over-bot?
-                    :root-board parent-board?)
+                    :dnd-over dnd-over
+                    :dnd-over-top dnd-over-top
+                    :dnd-over-bot dnd-over-bot
+                    :root-board root-board?)
            :style style}
      [:span {:class (stl/css-case
                      :tab-indentation true
-                      :filtered filtered?)
+                      :filtered is-filtered)
              :style {"--depth" depth}}]
      [:div {:class (stl/css-case
                     :element-list-body true
-                     :filtered filtered?
-                     :selected selected?
+                     :filtered is-filtered
+                     :selected is-selected
                     :icon-layer (= (:type item) :icon))
             :style {"--depth" depth}
             :on-pointer-enter on-pointer-enter
@@ -115,12 +121,12 @@

       (if (< 0 (count (:shapes item)))
         [:div {:class (stl/css :button-content)}
-          (when (and (not hide-toggle?) (not filtered?))
+          (when (and (not hide-toggle) (not is-filtered))
            [:button {:class (stl/css-case
                              :toggle-content true
-                              :inverse expanded?)
+                              :inverse is-expanded)
                      :data-testid "toggle-content"
-                      :aria-expanded expanded?
+                      :aria-expanded is-expanded
                      :on-click on-toggle-collapse}
             deprecated-icon/arrow])

@@ -131,7 +137,7 @@
           [:> icon* {:icon-id icon-shape :size "s" :data-testid (str "icon-" icon-shape)}]]]

         [:div {:class (stl/css :button-content)}
-          (when (not ^boolean filtered?)
+          (when (not ^boolean is-filtered)
            [:span {:class (stl/css :toggle-content)}])
          [:div {:class (stl/css :icon-shape)
                 :on-double-click on-zoom-to-selected}
@@ -140,25 +146,26 @@
           [:> icon* {:icon-id icon-shape :size "s" :data-testid (str "icon-" icon-shape)}]]])

       [:> layer-name* {:ref name-ref
+                        :rename-id rename-id
                        :shape-id id
                        :shape-name name
                        :is-shape-touched touched?
-                        :disabled-double-click read-only?
+                        :disabled-double-click is-read-only
                        :on-start-edit on-disable-drag
                        :on-stop-edit on-enable-drag
                        :depth depth
                        :is-blocked blocked?
                        :parent-size parent-size
-                        :is-selected selected?
-                        :type-comp (or component-tree? is-variant-container?)
+                        :is-selected is-selected
+                        :type-comp (or is-component-tree is-variant-container?)
                        :type-frame (cfh/frame-shape? item)
                        :variant-id variant-id
                        :variant-name variant-name
                        :variant-properties variant-properties
                        :variant-error variant-error
-                        :component-id (:id component)
+                        :component-id component-id
                        :is-hidden hidden?}]]
-      (when (not read-only?)
+      (when (not ^boolean is-read-only)
        [:div {:class (stl/css-case
                       :element-actions true
                       :is-parent has-shapes?
@@ -183,41 +190,87 @@

     children]))

-;; Memoized for performance
-(mf/defc layer-item
-  {::mf/props :obj
-   ::mf/wrap [mf/memo]}
-  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted style render-children?]
-    :or {render-children? true}}]
-  (let [id                (:id item)
-        blocked?          (:blocked item)
-        hidden?           (:hidden item)
+(mf/defc layer-item*
+  {::mf/wrap [mf/memo]}
+  [{:keys [index item selected objects objects-ref rename-id
+           is-sortable is-filtered depth is-component-child
+           highlighted style render-children parent-size]
+    :or {render-children true}}]
+  (let [id                (get item :id)
+        blocked?          (get item :blocked)
+        hidden?           (get item :hidden)
+
+        shapes            (get item :shapes)
+        shapes            (mf/with-memo [shapes]
+                            (loop [counter 0
+                                   shapes (seq shapes)
+                                   result (list)]
+
+                              (if-let [id (first shapes)]
+                                (if-let [obj (-> (mf/ref-val objects-ref)
+                                                 (get id))]
+                                  (do
+                                    ;; NOTE: this is a bit hacky, but reduces substantially
+                                    ;; the allocation; If we use enumeration, we allocate
+                                    ;; new sequence and add one iteration on each render,
+                                    ;; independently if objects are changed or not. If we
+                                    ;; store counter on metadata, we still need to create a
+                                    ;; new allocation for each shape; with this method we
+                                    ;; bypass this by mutating a private property on the
+                                    ;; object removing extra allocation and extra iteration
+                                    ;; on every request.
+                                    (unchecked-set obj "__$__counter" counter)
+                                    (recur (inc counter)
+                                           (rest shapes)
+                                           (conj result obj)))
+                                  (recur (inc counter)
+                                         (rest shapes)
+                                         result))
+
+                                (-> result vec not-empty))))

        drag-disabled*    (mf/use-state false)
        drag-disabled?    (deref drag-disabled*)

-        scroll-to-middle? (mf/use-var true)
+        scroll-middle-ref (mf/use-ref true)
        expanded-iref     (mf/with-memo [id]
-                            (-> (l/in [:expanded id])
-                                (l/derived refs/workspace-local)))
-        expanded?         (mf/deref expanded-iref)
+                            (l/derived #(dm/get-in % [:expanded :id]) refs/workspace-local))
+        is-expanded       (mf/deref expanded-iref)

-        selected?         (contains? selected id)
-        highlighted?      (contains? highlighted id)
+        is-selected       (contains? selected id)
+        is-highlighted    (contains? highlighted id)

        container?        (or (cfh/frame-shape? item)
                              (cfh/group-shape? item))

-        read-only?        (mf/use-ctx ctx/workspace-read-only?)
-        parent-board?     (and (cfh/frame-shape? item)
+        is-read-only      (mf/use-ctx ctx/workspace-read-only?)
+        root-board?       (and (cfh/frame-shape? item)
                               (= uuid/zero (:parent-id item)))

+        name-node-ref     (mf/use-ref)
+
+        depth             (+ depth 1)
+
+        is-component-tree (or ^boolean is-component-child
+                              ^boolean (ctk/instance-root? item)
+                              ^boolean (ctk/instance-head? item))
+
+        enable-drag       (mf/use-fn #(reset! drag-disabled* false))
+        disable-drag      (mf/use-fn #(reset! drag-disabled* true))
+
+        ;; Lazy loading of child elements via IntersectionObserver
+        children-count*   (mf/use-state 0)
+        children-count    (deref children-count*)
+
+        lazy-ref          (mf/use-ref nil)
+        observer-ref      (mf/use-ref nil)
+
        toggle-collapse
        (mf/use-fn
-         (mf/deps expanded?)
+         (mf/deps is-expanded)
         (fn [event]
           (dom/stop-propagation event)
-           (if (and expanded? (kbd/shift? event))
+           (if (and is-expanded (kbd/shift? event))
             (st/emit! (dwc/collapse-all))
             (st/emit! (dwc/toggle-collapse id)))))

@@ -242,15 +295,16 @@

        select-shape
        (mf/use-fn
-         (mf/deps id filtered? objects)
+         (mf/deps id is-filtered)
         (fn [event]
           (dom/prevent-default event)
-           (reset! scroll-to-middle? false)
+           (mf/set-ref-val! scroll-middle-ref false)
           (cond
             (kbd/shift? event)
-             (if filtered?
-               (st/emit! (dw/shift-select-shapes id objects))
-               (st/emit! (dw/shift-select-shapes id)))
+             (let [objects (mf/ref-val objects-ref)]
+               (if is-filtered
+                 (st/emit! (dw/shift-select-shapes id objects))
+                 (st/emit! (dw/shift-select-shapes id))))

             (kbd/mod? event)
             (st/emit! (dw/select-shape id true))
@@ -283,11 +337,11 @@

        on-context-menu
        (mf/use-fn
-         (mf/deps item read-only?)
+         (mf/deps item is-read-only)
         (fn [event]
           (dom/prevent-default event)
           (dom/stop-propagation event)
-           (when-not read-only?
+           (when-not is-read-only
             (let [pos (dom/get-client-position event)]
               (st/emit! (dw/show-shape-context-menu {:position pos :shape item}))))))

@@ -300,9 +354,10 @@

        on-drop
        (mf/use-fn
-         (mf/deps id index objects expanded? selected)
+         (mf/deps id index is-expanded selected)
         (fn [side _data]
-           (let [single? (= (count selected) 1)
+           (let [objects (mf/ref-val objects-ref)
+                 single? (= (count selected) 1)
                 same?   (and single? (= (first selected) id))]
             (when-not same?
               (let [files (deref refs/files)
@@ -313,28 +368,32 @@
                       (= side :center)
                       id

-                       (and expanded? (= side :bot) (d/not-empty? (:shapes shape)))
+                       (and is-expanded (= side :bot) (d/not-empty? (:shapes shape)))
                       id

                       :else
                       (cfh/get-parent-id objects id))

-                     [parent-id _] (ctn/find-valid-parent-and-frame-ids parent-id objects (map #(get objects %) selected) false files)
+                     [parent-id _]
+                     (ctn/find-valid-parent-and-frame-ids parent-id objects (map #(get objects %) selected) false files)

-                     parent    (get objects parent-id)
+                     parent
+                     (get objects parent-id)
+
+                     to-index
+                     (cond
+                       (= side :center) 0
+                       (and is-expanded (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
+                       (= side :top) (inc index)
+                       :else index)]

-                     to-index  (cond
-                                 (= side :center) 0
-                                 (and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
-                                 (= side :top) (inc index)
-                                 :else index)]
                 (st/emit! (dw/relocate-selected-shapes parent-id to-index)))))))

        on-hold
        (mf/use-fn
-         (mf/deps id expanded?)
+         (mf/deps id is-expanded)
         (fn []
-           (when-not expanded?
+           (when-not is-expanded
             (st/emit! (dwc/toggle-collapse id)))))

        zoom-to-selected
@@ -355,116 +414,114 @@
         :data {:id (:id item)
                :index index
                :name (:name item)}
-         :draggable? (and
-                      sortable?
-                      (not read-only?)
-                      (not (ctn/has-any-copy-parent? objects item)))) ;; We don't want to change the structure of component copies
+         ;; We don't want to change the structure of component copies
+         :draggable? (and ^boolean is-sortable
+                          ^boolean (not is-read-only)
+                          ^boolean (not (ctn/has-any-copy-parent? objects item))))]

-        ref             (mf/use-ref)
-        depth           (+ depth 1)
-        component-tree? (or component-child? (ctk/instance-root? item) (ctk/instance-head? item))
-
-        enable-drag      (mf/use-fn #(reset! drag-disabled* false))
-        disable-drag     (mf/use-fn #(reset! drag-disabled* true))
-
-        ;; Lazy loading of child elements via IntersectionObserver
-        children-count*  (mf/use-state 0)
-        children-count   (deref children-count*)
-        lazy-ref         (mf/use-ref nil)
-        observer-var     (mf/use-var nil)
-        chunk-size       50]
-
-    (mf/with-effect [selected? selected]
+    (mf/with-effect [is-selected selected]
      (let [single? (= (count selected) 1)
-            node (mf/ref-val ref)
-            scroll-node (dom/get-parent-with-data node "scroll-container")
-            parent-node (dom/get-parent-at node 2)
-            first-child-node (dom/get-first-child parent-node)
+            node              (mf/ref-val name-node-ref)
+            scroll-node       (dom/get-parent-with-data node "scroll-container")
+            parent-node       (dom/get-parent-at node 2)
+            first-child-node  (dom/get-first-child parent-node)
+            scroll-to-middle? (mf/ref-val scroll-middle-ref)

            subid
-            (when (and single? selected? @scroll-to-middle?)
+            (when (and ^boolean single?
+                       ^boolean is-selected
+                       ^boolean scroll-to-middle?)
              (ts/schedule
               100
               #(when (and node scroll-node)
                  (let [scroll-distance-ratio (dom/get-scroll-distance-ratio node scroll-node)
                        scroll-behavior (if (> scroll-distance-ratio 1) "instant" "smooth")]
                    (dom/scroll-into-view-if-needed! first-child-node #js {:block "center" :behavior scroll-behavior :inline "start"})
-                    (reset! scroll-to-middle? true)))))]
+                    (mf/set-ref-val! scroll-middle-ref true)))))]

        #(when (some? subid)
           (rx/dispose! subid))))

    ;; Setup scroll-driven lazy loading when expanded
    ;; and ensures selected children are loaded immediately
-    (mf/with-effect [expanded? (:shapes item) selected]
-      (let [shapes-vec (:shapes item)
-            total (count shapes-vec)]
-        (if expanded?
+    (mf/with-effect [is-expanded shapes selected]
+      (let [total (count shapes)]
+        (if ^boolean is-expanded
          (let [;; Children are rendered in reverse order, so index 0 in render = last in shapes-vec
                ;; Find if any selected id is a direct child and get its render index
                selected-child-render-idx
-                (when (and (> total chunk-size) (seq selected))
-                  (let [shapes-reversed (vec (reverse shapes-vec))]
-                    (some (fn [sel-id]
-                            (let [idx (.indexOf shapes-reversed sel-id)]
-                              (when (>= idx 0) idx)))
-                          selected)))
+                (when (> total default-chunk-size)
+                  (some (fn [sel-id]
+                          (let [idx (.indexOf shapes sel-id)]
+                            (when (>= idx 0) idx)))
+                        selected))
+
                ;; Load at least enough to include the selected child plus extra
                ;; for context (so it can be centered in the scroll view)
-                min-count (if selected-child-render-idx
-                            (+ selected-child-render-idx chunk-size)
-                            chunk-size)
-                current @children-count*
-                new-count (min total (max current chunk-size min-count))]
+                min-count
+                (if selected-child-render-idx
+                  (+ selected-child-render-idx default-chunk-size)
+                  default-chunk-size)
+
+                current-count
+                @children-count*
+
+                new-count
+                (mth/min total (mth/max current-count default-chunk-size min-count))]
+
            (reset! children-count* new-count))
-          (reset! children-count* 0)))
-      (fn []
-        (when-let [obs ^js @observer-var]
-          (.disconnect obs)
-          (reset! observer-var nil))))
+
+          (reset! children-count* 0))
+
+        (fn []
+          (when-let [obs (mf/ref-val observer-ref)]
+            (.disconnect obs)
+            (mf/set-ref-val! obs nil)))))

    ;; Re-observe sentinel whenever children-count changes (sentinel moves)
    ;; and (shapes item) to reconnect observer after shape changes
-    (mf/with-effect [children-count expanded? (:shapes item)]
-      (let [total (count (:shapes item))
-            node (mf/ref-val ref)
-            scroll-node (dom/get-parent-with-data node "scroll-container")
-            lazy-node (mf/ref-val lazy-ref)]
+    (mf/with-effect [children-count is-expanded shapes]
+      (let [total       (count shapes)
+            name-node   (mf/ref-val name-node-ref)
+            scroll-node (dom/get-parent-with-data name-node "scroll-container")
+            lazy-node   (mf/ref-val lazy-ref)]
+
        ;; Disconnect previous observer
-        (when-let [obs ^js @observer-var]
+        (when-let [obs (mf/ref-val observer-ref)]
          (.disconnect obs)
-          (reset! observer-var nil))
+          (mf/set-ref-val! observer-ref nil))
+
        ;; Setup new observer if there are more children to load
-        (when (and expanded?
-                   (< children-count total)
-                   scroll-node
-                   lazy-node)
+        (when (and ^boolean is-expanded
+                   ^boolean (< children-count total)
+                   ^boolean scroll-node
+                   ^boolean lazy-node)
          (let [cb (fn [entries]
-                     (when (and (seq entries)
-                                (.-isIntersecting (first entries)))
+                     (when (and (pos? (alength entries))
+                                (.-isIntersecting ^js (aget entries 0)))
                       ;; Load next chunk when sentinel intersects
-                       (let [current @children-count*
-                             next-count (min total (+ current chunk-size))]
+                       (let [next-count (mth/min total (+ children-count default-chunk-size))]
                         (reset! children-count* next-count))))
                observer (js/IntersectionObserver. cb #js {:root scroll-node})]
            (.observe observer lazy-node)
-            (reset! observer-var observer)))))
+            (mf/set-ref-val! observer-ref observer)))))

-    [:& layer-item-inner
+    [:> layer-item-inner*
     {:ref dref
      :item item
      :depth depth
      :parent-size parent-size
-      :name-ref ref
-      :read-only? read-only?
-      :highlighted? highlighted?
-      :selected? selected?
-      :component-tree? component-tree?
-      :filtered? filtered?
-      :expanded? expanded?
-      :dnd-over? (= (:over dprops) :center)
-      :dnd-over-top? (= (:over dprops) :top)
-      :dnd-over-bot? (= (:over dprops) :bot)
+      :name-ref name-node-ref
+      :rename-id rename-id
+      :is-read-only is-read-only
+      :is-highlighted is-highlighted
+      :is-selected is-selected
+      :is-component-tree is-component-tree
+      :is-filtered is-filtered
+      :is-expanded is-expanded
+      :dnd-over (= (:over dprops) :center)
+      :dnd-over-top (= (:over dprops) :top)
+      :dnd-over-bot (= (:over dprops) :bot)
      :on-select-shape select-shape
      :on-context-menu on-context-menu
      :on-pointer-enter on-pointer-enter
@@ -477,29 +534,29 @@
      :on-toggle-blocking toggle-blocking
      :style style}

-     (when (and render-children?
-                (:shapes item)
-                expanded?)
+     (when (and ^boolean render-children
+                ^boolean shapes
+                ^boolean is-expanded)
       [:div {:class (stl/css-case
                      :element-children true
-                      :parent-selected selected?
-                      :sticky-children parent-board?)
+                      :parent-selected is-selected
+                      :sticky-children root-board?)
              :data-testid (dm/str "children-" id)}
-        (let [all-children (reverse (d/enumerate (:shapes item)))
-              visible      (take children-count all-children)]
-          (for [[index id] visible]
-            (when-let [item (get objects id)]
-              [:& layer-item
-               {:item item
-                :highlighted highlighted
-                :selected selected
-                :index index
-                :objects objects
-                :key (dm/str id)
-                :sortable? sortable?
-                :depth depth
-                :parent-size parent-size
-                :component-child? component-tree?}])))
-        (when (< children-count (count (:shapes item)))
+        (for [item (take children-count shapes)]
+          [:> layer-item*
+           {:item item
+            :rename-id rename-id
+            :highlighted highlighted
+            :selected selected
+            :index (unchecked-get item "__$__counter")
+            :objects objects
+            :objects-ref objects-ref
+            :key (weak/weak-key item)
+            :is-sortable is-sortable
+            :depth depth
+            :parent-size parent-size
+            :is-component-child is-component-tree}])
+
+        (when (< children-count (count shapes))
          [:div {:ref lazy-ref
                 :style {:min-height 1}}])])]))
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
@@ -16,39 +16,35 @@
   [app.util.dom :as dom]
   [app.util.keyboard :as kbd]
   [cuerdas.core :as str]
-   [okulary.core :as l]
   [rumext.v2 :as mf]))

-(def ^:private space-for-icons 110)
-
-(def lens:shape-for-rename
-  (-> (l/in [:workspace-local :shape-for-rename])
-      (l/derived st/state)))
+(def ^:private ^:const space-for-icons 110)

 (mf/defc layer-name*
-  {::mf/wrap-props false
-   ::mf/forward-ref true}
-  [{:keys [shape-id shape-name is-shape-touched disabled-double-click
+  [{:keys [shape-id rename-id shape-name is-shape-touched disabled-double-click
           on-start-edit on-stop-edit depth parent-size is-selected
           type-comp type-frame component-id is-hidden is-blocked
-           variant-id variant-name variant-properties variant-error]} external-ref]
+           variant-id variant-name variant-properties variant-error ref]}]
+
  (let [edition*         (mf/use-state false)
        edition?         (deref edition*)

        local-ref        (mf/use-ref)
-        ref              (d/nilv external-ref local-ref)
+        ref              (d/nilv ref local-ref)

-        shape-for-rename (mf/deref lens:shape-for-rename)
+        shape-name
+        (if variant-id
+          (d/nilv variant-error variant-name)
+          shape-name)

-        shape-name       (if variant-id
-                           (d/nilv variant-error variant-name)
-                           shape-name)
+        default-value
+        (mf/with-memo [variant-id variant-error variant-properties]
+          (if variant-id
+            (or variant-error (ctv/properties-map->formula variant-properties))
+            shape-name))

-        default-value    (if variant-id
-                           (or variant-error (ctv/properties-map->formula variant-properties))
-                           shape-name)
-
-        has-path?        (str/includes? shape-name "/")
+        has-path?
+        (str/includes? shape-name "/")

        start-edit
        (mf/use-fn
@@ -85,10 +81,11 @@
           (when (kbd/enter? event) (accept-edit))
           (when (kbd/esc? event) (cancel-edit))))

-        parent-size (dm/str (- parent-size space-for-icons) "px")]
+        parent-size
+        (dm/str (- parent-size space-for-icons) "px")]

-    (mf/with-effect [shape-for-rename edition? start-edit shape-id]
-      (when (and (= shape-for-rename shape-id)
+    (mf/with-effect [rename-id edition? start-edit shape-id]
+      (when (and (= rename-id shape-id)
                 (not ^boolean edition?))
        (start-edit)))

@@ -110,21 +107,24 @@
        :auto-focus true
        :id (dm/str "layer-name-" shape-id)
        :default-value (d/nilv default-value "")}]
+
      [:*
-       [:span
-        {:class (stl/css-case
-                 :element-name true
-                 :left-ellipsis has-path?
-                 :selected is-selected
-                 :hidden is-hidden
-                 :type-comp type-comp
-                 :type-frame type-frame)
-         :id (dm/str "layer-name-" shape-id)
-         :style {"--depth" depth "--parent-size" parent-size}
-         :ref ref
-         :on-double-click start-edit}
-        (if (dbg/enabled? :show-ids)
-          (str (d/nilv shape-name "") " | " (str/slice (str shape-id) 24))
+       [:span {:class (stl/css-case
+                       :element-name true
+                       :left-ellipsis has-path?
+                       :selected is-selected
+                       :hidden is-hidden
+                       :type-comp type-comp
+                       :type-frame type-frame)
+               :id (dm/str "layer-name-" shape-id)
+               :style {"--depth" depth "--parent-size" parent-size}
+               :ref ref
+               :on-double-click start-edit}
+
+        (if ^boolean (dbg/enabled? :show-ids)
+          (dm/str (d/nilv shape-name "") " | " (str/slice (str shape-id) 24))
          (d/nilv shape-name ""))]
-       (when (and (dbg/enabled? :show-touched) ^boolean is-shape-touched)
+
+       (when (and ^boolean (dbg/enabled? :show-touched)
+                  ^boolean is-shape-touched)
         [:span {:class (stl/css :element-name-touched)} "*"])])))
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -12,6 +12,7 @@
   [app.common.files.helpers :as cfh]
   [app.common.types.shape :as cts]
   [app.common.uuid :as uuid]
+   [app.common.weak :as weak]
   [app.main.data.workspace :as dw]
   [app.main.refs :as refs]
   [app.main.store :as st]
@@ -21,7 +22,7 @@
   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
   [app.main.ui.hooks :as hooks]
   [app.main.ui.notifications.badge :refer [badge-notification]]
-   [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
+   [app.main.ui.workspace.sidebar.layer-item :refer [layer-item*]]
   [app.util.dom :as dom]
   [app.util.globals :as globals]
   [app.util.i18n :as i18n :refer [tr]]
@@ -31,92 +32,173 @@
   [beicon.v2.core :as rx]
   [cuerdas.core :as str]
   [goog.events :as events]
-   [rumext.v2 :as mf])
-  (:import
-   goog.events.EventType))
+   [okulary.core :as l]
+   [rumext.v2 :as mf]))
+
+(def ^:private ref:highlighted-shapes
+  (l/derived (fn [local]
+               (-> local
+                   (get :highlighted)
+                   (not-empty)))
+             refs/workspace-local))
+
+(def ^:private ref:shape-for-rename
+  (l/derived (l/key :shape-for-rename) refs/workspace-local))
+
+(defn- use-selected-shapes
+  "A convencience hook wrapper for get selected shapes"
+  []
+  (let [selected (mf/deref refs/selected-shapes)]
+    (hooks/use-equal-memo selected)))

 ;; This components is a piece for sharding equality check between top
 ;; level frames and try to avoid rerender frames that are does not
 ;; affected by the selected set.
-(mf/defc frame-wrapper
-  {::mf/props :obj}
+(mf/defc frame-wrapper*
  [{:keys [selected] :as props}]
-  (let [pending-selected (mf/use-var selected)
-        current-selected (mf/use-state selected)
-        props            (mf/spread-object props {:selected @current-selected})
+  (let [pending-selected-ref
+        (mf/use-ref selected)
+
+        current-selected
+        (mf/use-state selected)
+
+        props
+        (mf/spread-object props {:selected @current-selected})

        set-selected
-        (mf/use-memo
-         (fn []
-           (throttle-fn
-            50
-            #(when-let [pending-selected @pending-selected]
-               (reset! current-selected pending-selected)))))]
+        (mf/with-memo []
+          (throttle-fn 50 #(when-let [pending-selected (mf/ref-val pending-selected-ref)]
+                             (reset! current-selected pending-selected))))]

    (mf/with-effect [selected set-selected]
-      (reset! pending-selected selected)
-      (set-selected)
+      (mf/set-ref-val! pending-selected-ref selected)
+      (^function set-selected)
      (fn []
-        (reset! pending-selected nil)
-        #(rx/dispose! set-selected)))
+        (mf/set-ref-val! pending-selected-ref nil)
+        (rx/dispose! set-selected)))

-    [:> layer-item props]))
+    [:> layer-item* props]))
+
+(mf/defc layers-tree*
+  {::mf/wrap [mf/memo]}
+  [{:keys [objects is-filtered parent-size] :as props}]
+  (let [selected    (use-selected-shapes)
+        highlighted (mf/deref ref:highlighted-shapes)
+        root        (get objects uuid/zero)
+
+        rename-id   (mf/deref ref:shape-for-rename)
+
+        shapes      (get root :shapes)
+        shapes      (mf/with-memo [shapes objects]
+                      (loop [counter 0
+                             shapes (seq shapes)
+                             result (list)]
+
+                        (if-let [id (first shapes)]
+                          (if-let [obj (get objects id)]
+                            (do
+                              ;; NOTE: this is a bit hacky, but reduces substantially
+                              ;; the allocation; If we use enumeration, we allocate
+                              ;; new sequence and add one iteration on each render,
+                              ;; independently if objects are changed or not. If we
+                              ;; store counter on metadata, we still need to create a
+                              ;; new allocation for each shape; with this method we
+                              ;; bypass this by mutating a private property on the
+                              ;; object removing extra allocation and extra iteration
+                              ;; on every request.
+                              (unchecked-set obj "__$__counter" counter)
+                              (recur (inc counter)
+                                     (rest shapes)
+                                     (conj result obj)))
+                            (recur (inc counter)
+                                   (rest shapes)
+                                   result))
+                          result)))
+
+        ;; We pass objects just for trigger rerender but we internally use objects-ref
+        ;; for make all callbacks and memoized blocks do not depen strictly on objects
+        ;; and do not perform calculation if the local related shapes are not
+        ;; changed. For this purpose we created a single objects-ref var for not doing
+        ;; this on each layer item.
+        objects-ref (mf/use-ref objects)]
+
+    (mf/with-effect [objects]
+      (mf/set-ref-val! objects-ref objects))

-(mf/defc layers-tree
-  {::mf/wrap [mf/memo #(mf/throttle % 200)]
-   ::mf/wrap-props false}
-  [{:keys [objects filtered? parent-size] :as props}]
-  (let [selected       (mf/deref refs/selected-shapes)
-        selected       (hooks/use-equal-memo selected)
-        highlighted    (mf/deref refs/highlighted-shapes)
-        highlighted    (hooks/use-equal-memo highlighted)
-        root           (get objects uuid/zero)]
    [:div {:class (stl/css :element-list) :data-testid "layer-item"}
     [:> hooks/sortable-container* {}
-      (for [[index id] (reverse (d/enumerate (:shapes root)))]
-        (when-let [obj (get objects id)]
-          (if (cfh/frame-shape? obj)
-            [:& frame-wrapper
-             {:item obj
-              :selected selected
-              :highlighted highlighted
-              :index index
-              :objects objects
-              :key id
-              :sortable? true
-              :filtered? filtered?
-              :parent-size parent-size
-              :depth -1}]
-            [:& layer-item
-             {:item obj
-              :selected selected
-              :highlighted highlighted
-              :index index
-              :objects objects
-              :key id
-              :sortable? true
-              :filtered? filtered?
-              :depth -1
-              :parent-size parent-size}])))]]))
+      (for [obj shapes]
+        (if (cfh/frame-shape? obj)
+          [:> frame-wrapper*
+           {:item obj
+            :rename-id rename-id
+            :selected selected
+            :highlighted highlighted
+            :index (unchecked-get obj "__$__counter")
+            :objects objects
+            :objects-ref objects-ref
+            :key (weak/weak-key obj)
+            :is-sortable true
+            :is-filtered is-filtered
+            :parent-size parent-size
+            :depth -1}]
+          [:> layer-item*
+           {:item obj
+            :rename-id rename-id
+            :selected selected
+            :highlighted highlighted
+            :index (unchecked-get obj "__$__counter")
+            :objects objects
+            :objects-ref objects-ref
+            :key (weak/weak-key obj)
+            :is-sortable true
+            :is-filtered is-filtered
+            :depth -1
+            :parent-size parent-size}]))]]))

-(mf/defc filters-tree
-  {::mf/wrap [mf/memo #(mf/throttle % 200)]
-   ::mf/wrap-props false}
+(mf/defc layers-tree-wrapper*
+  {::mf/private true}
+  [{:keys [objects] :as props}]
+  ;; This is a performance sensitive componet, so we use lower-level primitives for
+  ;; reduce residual allocation for this specific case
+  (let [state-tmp   (mf/useState objects)
+        objects'    (aget state-tmp 0)
+        set-objects (aget state-tmp 1)
+
+        subject-s   (mf/with-memo []
+                      (rx/subject))
+        changes-s   (mf/with-memo [subject-s]
+                      (->> subject-s
+                           (rx/debounce 500)))
+
+        props     (mf/spread-props props {:objects objects'})]
+
+    (mf/with-effect [objects subject-s]
+      (rx/push! subject-s objects))
+
+    (mf/with-effect [changes-s]
+      (let [sub (rx/subscribe changes-s set-objects)]
+        #(rx/dispose! sub)))
+
+    [:> layers-tree* props]))
+
+(mf/defc filters-tree*
+  {::mf/wrap [mf/memo #(mf/throttle % 300)]
+   ::mf/private true}
  [{:keys [objects parent-size]}]
-  (let [selected       (mf/deref refs/selected-shapes)
-        selected       (hooks/use-equal-memo selected)
-        root           (get objects uuid/zero)]
+  (let [selected (use-selected-shapes)
+        root     (get objects uuid/zero)]
    [:ul {:class (stl/css :element-list)}
     (for [[index id] (d/enumerate (:shapes root))]
       (when-let [obj (get objects id)]
-         [:& layer-item
+         [:> layer-item*
          {:item obj
           :selected selected
           :index index
           :objects objects
           :key id
-           :sortable? false
-           :filtered? true
+           :is-sortable false
+           :is-filtered true
           :depth -1
           :parent-size parent-size}]))]))

@@ -132,6 +214,7 @@
             keys
             (filter #(not= uuid/zero %))
             vec)]
+
    (update reparented-objects uuid/zero assoc :shapes reparented-shapes)))

 ;; --- Layers Toolbox
@@ -277,9 +360,11 @@
             (swap! state* update :num-items + 100))))]

    (mf/with-effect []
-      (let [keys [(events/listen globals/document EventType.KEYDOWN on-key-down)
-                  (events/listen globals/document EventType.CLICK hide-menu)]]
-        (fn [] (doseq [key keys] (events/unlistenByKey key)))))
+      (let [key1 (events/listen globals/document "keydown" on-key-down)
+            key2 (events/listen globals/document "click" hide-menu)]
+        (fn []
+          (events/unlistenByKey key1)
+          (events/unlistenByKey key2))))

    [filtered-objects
     handle-show-more
@@ -463,6 +548,8 @@
  {::mf/wrap [mf/memo]}
  [{:keys [size-parent]}]
  (let [page           (mf/deref refs/workspace-page)
+        page-id        (get page :id)
+
        focus          (mf/deref refs/workspace-focus-selected)

        objects        (hooks/with-focus-objects (:objects page) focus)
@@ -472,7 +559,8 @@
        observer-var   (mf/use-var nil)
        lazy-load-ref  (mf/use-ref nil)

-        [filtered-objects show-more filter-component] (use-search page objects)
+        [filtered-objects show-more filter-component]
+        (use-search page objects)

        intersection-callback
        (fn [entries]
@@ -518,9 +606,9 @@
        [:div {:class (stl/css :tool-window-content)
               :data-scroll-container true
               :ref on-render-container}
-         [:& filters-tree {:objects filtered-objects
-                           :key (dm/str (:id page))
-                           :parent-size size-parent}]
+         [:> filters-tree* {:objects filtered-objects
+                            :key (dm/str page-id)
+                            :parent-size size-parent}]
         [:div {:ref lazy-load-ref
                :style {:min-height 16}}]]
        [:div {:on-scroll on-scroll
@@ -528,16 +616,16 @@
               :data-scroll-container true
               :style {:display (when (some? filtered-objects) "none")}}

-         [:& layers-tree {:objects filtered-objects
-                          :key (dm/str (:id page))
-                          :filtered? true
-                          :parent-size size-parent}]]]
+         [:> layers-tree-wrapper* {:objects filtered-objects
+                                   :key (dm/str page-id)
+                                   :is-filtered true
+                                   :parent-size size-parent}]]]

       [:div {:on-scroll on-scroll
              :class (stl/css :tool-window-content)
              :data-scroll-container true
              :style {:display (when (some? filtered-objects) "none")}}
-        [:& layers-tree {:objects objects
-                         :key (dm/str (:id page))
-                         :filtered? false
-                         :parent-size size-parent}]])]))
+        [:> layers-tree-wrapper* {:objects objects
+                                  :key (dm/str page-id)
+                                  :is-filtered false
+                                  :parent-size size-parent}]])]))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
@@ -60,8 +60,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
@@ -152,9 +152,9 @@
        on-detach-token
        (mf/use-fn
         (mf/deps token-colors groups)
-         (fn [token-name]
+         (fn [token]
           (let [prev-colors (mf/ref-val prev-colors-ref)
-                 token-color (some #(when (= (:token-name %) token-name) %) token-colors)
+                 token-color (some #(when (= (:token-name %) (:name token)) %) token-colors)

                 [color-operations _] (retrieve-color-operations groups token-color prev-colors)]
             (doseq [op color-operations]
@@ -166,8 +166,8 @@
                               (d/without-nils))]
                 (mf/set-ref-val! prev-colors-ref
                                  (conj prev-colors color))
-                 (st/emit! (dwta/unapply-token {:token-name token-name
-                                                :attributes attr
+                 (st/emit! (dwta/unapply-token {:attributes attr
+                                                :token token
                                                :shape-ids [(:shape-id op)]})))))))

        select-only
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -74,6 +74,7 @@

        render-wasm?   (feat/use-feature "render-wasm/v1")

+
        ^boolean
        multiple?      (= :multiple fills)

@@ -182,9 +183,9 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name]
-           (st/emit! (dwta/unapply-token {:token-name token-name
-                                          :attributes #{:fill}
+         (fn [token]
+           (st/emit! (dwta/unapply-token {:attributes #{:fill}
+                                          :token token
                                          :shape-ids ids}))))]

    (mf/with-layout-effect [hide-on-export]
@@ -214,8 +215,7 @@
     (when open?
       [:div {:class (stl/css :fill-content)}
        (cond
-          (or (= :multiple fills)
-              (= :multiple fill-token-applied))
+          (= :multiple fills)
          [:div {:class (stl/css :fill-multiple)}
           [:div {:class (stl/css :fill-multiple-label)}
            (tr "settings.multiple")]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
@@ -72,8 +72,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

@@ -229,13 +229,13 @@
         :property (tr "workspace.options.opacity")
         :applied-token (get applied-tokens :opacity)
         :placeholder (if (or (= :multiple (get applied-tokens :opacity))
-                              (= :multiple (or (get values :opacity) 1)))
+                              (= :multiple (or (get values name) 1)))
                        (tr "settings.multiple")
                        "--")
         :align :right
         :class (stl/css :numeric-input-wrapper)
         :value (* 100
-                   (or (get values :opacity) 1))}]
+                   (or (get values name) 1))}]

       [:div {:class (stl/css :input)
              :title (tr "workspace.options.opacity")}
@@ -248,6 +248,7 @@
          :max 100
          :className (stl/css :numeric-input)}]])

+
     [:div {:class (stl/css :actions)}
      (cond
        (or (= :multiple hidden?) (not hidden?))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -339,8 +339,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

@@ -475,7 +475,7 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token-name token
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

@@ -722,7 +722,7 @@
        (mf/use-fn
         (mf/deps ids)
         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token-name token
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -97,8 +97,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

@@ -220,8 +220,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

@@ -550,8 +550,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -319,8 +319,8 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attr]
-           (st/emit! (dwta/unapply-token {:token-name token-name
+         (fn [token attr]
+           (st/emit! (dwta/unapply-token {:token (first token)
                                          :attributes #{attr}
                                          :shape-ids ids}))))

--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -171,9 +171,9 @@
        on-detach-token
        (mf/use-fn
         (mf/deps ids)
-         (fn [token-name attrs]
-           (st/emit! (dwta/unapply-token {:token-name token-name
-                                          :attributes attrs
+         (fn [token attrs]
+           (st/emit! (dwta/unapply-token {:attributes attrs
+                                          :token token
                                          :shape-ids ids}))))]

    [:section {:class (stl/css :stroke-section)
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -85,14 +85,14 @@
        (mf/use-fn
         (mf/deps detach-token token applied-token-name)
         (fn []
-           (let [token-name (or (:name token) applied-token-name)]
-             (detach-token token-name))))
+           (let [token (or token applied-token-name)]
+             (detach-token token))))

        has-errors (some? (:errors token))
        token-name (:name token)
        resolved (:resolved-value token)
-        not-active (or (empty? active-tokens)
-                       (nil? token))
+        not-active (and (empty? active-tokens)
+                        (nil? token))
        id (dm/str (:id token) "-name")
        swatch-tooltip-content (cond
                                 not-active
@@ -344,6 +344,7 @@
    (mf/with-effect [color prev-color disable-picker]
      (when (and (not disable-picker) (not= prev-color color))
        (modal/update-props! :colorpicker {:data (parse-color color)})))
+
    [:div {:class [class row-class]}
     ;; Drag handler
     (when (some? on-reorder)
--- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs
@@ -64,17 +64,14 @@
           (let [selected? (selected-pred attribute)
                 props {:attributes #{attribute}
                        :token token
-                        :shape-ids shape-ids}
-                 unnaply-props {:token-name (:name token)
-                                :attributes #{attribute}
-                                :shape-ids shape-ids}]
+                        :shape-ids shape-ids}]

             {:title title
              :hint hint
              :selected? selected?
              :action (fn []
                        (if selected?
-                          (st/emit! (dwta/unapply-token unnaply-props))
+                          (st/emit! (dwta/unapply-token props))
                          (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
         allowed-attributes)))

@@ -85,15 +82,12 @@
          {:keys [all-selected? selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)
          all-action (let [props {:attributes attributes
                                  :token token
-                                  :shape-ids shape-ids}
-                           unnaply-props {:token-name (:name token)
-                                          :attributes attributes
-                                          :shape-ids shape-ids}]
+                                  :shape-ids shape-ids}]
                       {:title (tr "labels.all")
                        :selected? all-selected?
                        :hint hint
                        :action #(if all-selected?
-                                   (st/emit! (dwta/unapply-token unnaply-props))
+                                   (st/emit! (dwta/unapply-token props))
                                   (st/emit! (dwta/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
          single-actions (map (fn [[attr title]]
                                (let [selected? (selected-pred attr)]
@@ -102,13 +96,10 @@
                                   :action #(let [props {:attributes #{attr}
                                                         :token token
                                                         :shape-ids shape-ids}
-                                                  unnaply-props {:token-name (:name token)
-                                                                 :attributes  #{attr}
-                                                                 :shape-ids shape-ids}
                                                  event (cond
                                                          all-selected? (-> (assoc props :attributes-to-remove attributes)
                                                                            (dwta/apply-token))
-                                                          selected? (dwta/unapply-token unnaply-props)
+                                                          selected? (dwta/unapply-token props)
                                                          :else (-> (assoc props :on-update-shape on-update-shape)
                                                                    (dwta/apply-token)))]
                                              (st/emit! event))}))
@@ -132,12 +123,9 @@
                      :action (fn []
                                (let [props {:attributes attrs
                                             :token token
-                                             :shape-ids shape-ids}
-                                      unnaply-props {:token-name (:name token)
-                                                     :attributes  attrs
-                                                     :shape-ids shape-ids}]
+                                             :shape-ids shape-ids}]
                                  (if all-selected?
-                                    (st/emit! (dwta/unapply-token unnaply-props))
+                                    (st/emit! (dwta/unapply-token props))
                                    (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape))))))}
                     {:title "Horizontal"
                      :selected? horizontal-selected?
@@ -177,13 +165,10 @@
                               :action #(let [props {:attributes #{attr}
                                                     :token token
                                                     :shape-ids shape-ids}
-                                              unnaply-props {:token-name (:name token)
-                                                             :attributes  #{attr}
-                                                             :shape-ids shape-ids}
                                              event (cond
                                                      all-selected? (-> (assoc props :attributes-to-remove attrs)
                                                                        (dwta/apply-token))
-                                                      selected? (dwta/unapply-token unnaply-props)
+                                                      selected? (dwta/unapply-token props)
                                                      :else (-> (assoc props :on-update-shape on-update-shape)
                                                                (dwta/apply-token)))]
                                          (st/emit! event))}))
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
@@ -10,10 +10,7 @@
   [app.common.files.tokens :as cft]
   [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]
   [app.main.data.workspace.tokens.format :as dwtf]
   [app.main.ui.ds.controls.input :as ds]
   [app.main.ui.forms :as fc]
@@ -142,18 +139,6 @@
 ;; -----------------------------------------------------------------------------


-(defn- resolve-value-tokenscript
-  [tokens prev-token value]
-  (let [result (ts/update-token tokens (assoc prev-token :value value))
-        token-result (.-resolved result)]
-    (rx/of
-     (cond
-       (ts/processor-error? token-result) {:error (wte/error-with-value :error.style-dictionary/missing-reference (some->> (.-dependencyChain token-result)
-                                                                                                                           (seq)
-                                                                                                                           (rest)))}
-       (instance? js/Error token-result) {:error (wte/error-with-value :error.style-dictionary/invalid-token-value value)}
-       :else {:value token-result}))))
-
 (defn- resolve-value
  [tokens prev-token token-name value]
  (let [valid-token-name?
@@ -231,10 +216,7 @@

    (mf/with-effect [resolve-stream tokens token input-name token-name]

-      (let [resolve-value (if (contains? cf/flags :tokenscript)
-                            resolve-value-tokenscript
-                            resolve-value)
-            subs (->> resolve-stream
+      (let [subs (->> resolve-stream
                      (rx/debounce 300)
                      (rx/mapcat (partial resolve-value tokens token token-name))
                      (rx/map (fn [result]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@@ -25,6 +25,7 @@
   [app.main.ui.ds.buttons.button :refer [button*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
   [app.main.ui.forms :as fc]
   [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
   [app.main.ui.workspace.tokens.management.forms.validators :refer [default-validate-token]]
@@ -142,6 +143,10 @@
        (fm/use-form :schema schema
                     :initial initial)

+        warning-name-change?
+        (not= (get-in @form [:data :name])
+              (:name initial))
+
        on-toggle-tab
        (mf/use-fn
         (mf/deps form)
@@ -271,7 +276,12 @@
                           :max-length max-input-length
                           :variant "comfortable"
                           :trim true
-                           :auto-focus true}]]
+                           :auto-focus true}]
+
+       (when (and warning-name-change? (= action "edit"))
+         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
+          [:> context-notification*
+           {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]

      [:div {:class (stl/css :input-row)}
       (case type
--- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
@@ -13,7 +13,6 @@
   [app.common.files.tokens :as cft]
   [app.common.path-names :as cpn]
   [app.common.types.token :as ctt]
-   [app.config :as cf]
   [app.main.data.workspace.tokens.application :as dwta]
   [app.main.data.workspace.tokens.color :as dwtc]
   [app.main.data.workspace.tokens.format :as dwtf]
@@ -178,8 +177,6 @@
  [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}]
  (let [{:keys [name value errors type]} token

-        resolved-token (get active-theme-tokens (:name token))
-
        has-selected?  (pos? (count selected-shapes))
        is-reference?  (cft/is-reference? token)
        contains-path? (str/includes? name ".")
@@ -212,10 +209,8 @@
        is-viewer? (not can-edit?)

        ref-not-in-active-set
-        (if (contains? cf/flags :tokenscript)
-          (seq (:errors resolved-token))
-          (and is-reference?
-               (not (contains-reference-value? value active-theme-tokens))))
+        (and is-reference?
+             (not (contains-reference-value? value active-theme-tokens)))

        no-valid-value (seq errors)

@@ -225,8 +220,9 @@

        color
        (when (cft/color-token? token)
-          (or (dwtc/resolved-token-bullet-color resolved-token)
-              (dwtc/resolved-token-bullet-color token)))
+          (let [theme-token (get active-theme-tokens name)]
+            (or (dwtc/resolved-token-bullet-color theme-token)
+                (dwtc/resolved-token-bullet-color token))))

        status-icon? (contains? token-types-with-status-icon type)

--- a/frontend/test/frontend_tests/logic/components_and_tokens.cljs
+++ b/frontend/test/frontend_tests/logic/components_and_tokens.cljs
@@ -177,7 +177,7 @@
          ;; ==== Action
          events [(dwta/unapply-token {:shape-ids [(cthi/id :frame1)]
                                       :attributes #{:r1 :r2 :r3 :r4}
-                                       :token-name "test-token-1"})]
+                                       :token (toht/get-token file "test-token-1")})]

          step2 (fn [_]
                  (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@@ -289,7 +289,7 @@
          ;; ==== Action
          events [(dwta/unapply-token {:shape-ids [(cthi/id :c-frame1)]
                                       :attributes #{:r1 :r2 :r3 :r4}
-                                       :token-name  "test-token-1"})
+                                       :token (toht/get-token file "test-token-1")})
                  (dwta/apply-token {:shape-ids [(cthi/id :frame1)]
                                     :attributes #{:r1 :r2 :r3 :r4}
                                     :token (toht/get-token file "test-token-3")
Author	SHA1	Message	Date
Andrey Antukh	96c04cd818	⚡ Memoize variant props on layer-item	2026-02-05 15:00:06 +01:00
Andrey Antukh	d8843f6d58	⚡ Reduce watchers for layer-item rename mechanism	2026-02-05 14:47:10 +01:00
Andrey Antukh	70042c5bdf	⚡ Add micro optimizations to layer-item component	2026-02-05 14:12:03 +01:00
Andrey Antukh	d5344ce86d	💄 Add minor cosmetic changes to filters-tree component	2026-02-05 13:25:17 +01:00
Andrey Antukh	3c6714972f	⚡ Add more selective debouncing for layers-tree	2026-02-05 13:19:08 +01:00
Andrey Antukh	b539f1dc6b	⚡ Reduce allocation on layers-tree component	2026-02-05 12:43:06 +01:00
Andrey Antukh	d630b67ab1	💄 Add minor cosmetic changes on event listening	2026-02-05 12:43:06 +01:00
Andrey Antukh	954f149372	💄 Fix component naming style related to layer-item	2026-02-05 12:43:06 +01:00
Andrey Antukh	d25d338cca	💄 Change props naming on layer-item and related components	2026-02-05 11:26:29 +01:00
Andrey Antukh	e19d80ffe0	⚡ Remove usage of use-var on layer-item Focus on use more basic primitves on performance sensitive components.	2026-02-05 11:02:57 +01:00