Merge remote-tracking branch 'origin/staging' into staging-render

🐛 Fix text boxes with auto-height don't update height when resized by dragging side handles

.github/workflows/plugins-deploy-api-doc.yml

@@ -0,0 +1,101 @@
+name: Plugins/api-doc deployer
+
+on:
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+    paths:
+      - "plugins/libs/plugin-types/index.d.ts"
+      - "plugins/libs/plugin-types/REAME.md"
+      - "plugins/tools/typedoc.css"
+      - "plugins/CHANGELOG.md"
+      - "plugins/wrangle-penpot-plugins-api-doc.toml"
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch'
+        type: choice
+        required: true
+        default: 'develop'
+        options:
+          - develop
+          - staging
+          - main
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Extract some useful variables
+        id: vars
+        run: |
+          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ steps.vars.outputs.gh_ref }}
+
+      # START: Setup Node and PNPM enabling cache
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable PNPM
+        working-directory: ./plugins
+        shell: bash
+        run: |
+          corepack enable;
+          corepack install;
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        working-directory: ./plugins
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+      # END: Setup Node and PNPM enabling cache
+
+      - name: Install deps
+        working-directory: ./plugins
+        shell: bash
+        run: |
+          pnpm install --no-frozen-lockfile;
+          pnpm add -D -w wrangler@latest;
+
+      - name: Build docs
+        working-directory: plugins
+        shell: bash
+        run: pnpm run build:doc
+
+      - name: Select Worker name
+        run: |
+          REF="${{ steps.vars.outputs.gh_ref }}"
+          case "$REF" in
+            main) echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV ;;
+            staging) echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV ;;
+            develop) echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV ;;
+            *) echo "Unsupported branch ${REF}" && exit 1 ;;
+          esac
+
+      - name: Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
+        with:
+          workingDirectory: plugins
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy --config wrangle-penpot-plugins-api-doc.toml --name ${{ env.WORKER_NAME }}

CHANGES.md

@@ -30,6 +30,9 @@
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
 - Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
+- Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
+- Fix allow negative spread values on shadow token creation [Taiga #13167](https://tree.taiga.io/project/penpot/issue/13167)
+- Fix spanish translations on import export token modal [Taiga #13171](https://tree.taiga.io/project/penpot/issue/13171)
 
 ## 2.12.1
 

backend/src/app/email.clj

@@ -124,8 +124,6 @@
       (throw (IllegalArgumentException. "invalid email body provided")))
 
     (doseq [[name content] attachments]
-
-      (prn "attachment" name)
       (let [attachment-part (MimeBodyPart.)]
         (.setFileName attachment-part ^String name)
         (.setContent attachment-part ^String content (str "text/plain; charset=" charset))

frontend/package.json

@@ -48,13 +48,13 @@
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch": "exit 0",
-    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && yarn run build:wasm && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
     "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {
     "@penpot/draft-js": "portal:./packages/draft-js",
     "@penpot/mousetrap": "portal:./packages/mousetrap",
-    "@penpot/plugins-runtime": "1.3.2",
+    "@penpot/plugins-runtime": "1.4.2",
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "portal:./text-editor",
     "@playwright/test": "1.57.0",

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

@@ -1256,6 +1256,192 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toBeEnabled();
   });
 
+    test("User creates shadow token with negative spread", async ({ page }) => {
+    const emptyNameError = "Name should be at least 1 character";
+
+    const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+      await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]});
+
+    // Open modal
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+
+    const addTokenButton = tokensTabPanel.getByRole("button", {
+      name: `Add Token: Shadow`,
+    });
+
+    await addTokenButton.click();
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    await expect(
+      tokensUpdateCreateModal.getByPlaceholder(
+        "Enter a value or alias with {alias}",
+      ),
+    ).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const colorField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Color",
+    });
+    const offsetXField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "X",
+    });
+    const offsetYField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Y",
+    });
+    const blurField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Blur",
+    });
+    const spreadField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Spread",
+    });
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+
+    // 1. Check default values
+    await expect(offsetXField).toHaveValue("4");
+    await expect(offsetYField).toHaveValue("4");
+    await expect(blurField).toHaveValue("4");
+    await expect(spreadField).toHaveValue("0");
+
+    // 2. Name filled + empty value → disabled
+    await nameField.fill("my-token");
+    await expect(submitButton).toBeDisabled();
+
+    // 3. Invalid color → disabled + error message
+    await colorField.fill("1");
+
+    await expect(
+      tokensUpdateCreateModal.getByText("Invalid color value: 1"),
+    ).toBeVisible();
+
+    await expect(submitButton).toBeDisabled();
+
+    await colorField.fill("{missing-reference}");
+
+    await expect(
+      tokensUpdateCreateModal.getByText(
+        "Missing token references: missing-reference",
+      ),
+    ).toBeVisible();
+
+    // 4. Empty name → disabled + error message
+    await nameField.fill("");
+
+    const emptyNameErrorNode =
+      tokensUpdateCreateModal.getByText(emptyNameError);
+
+    await expect(emptyNameErrorNode).toBeVisible();
+    await expect(submitButton).toBeDisabled();
+
+    //
+    // ------- SUCCESSFUL FIELDS -------
+    //
+
+    // 5. Valid color → resolved
+
+    await colorField.fill("red");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: #ff0000"),
+    ).toBeVisible();
+    const colorSwatch = tokensUpdateCreateModal.getByTestId(
+      "token-form-color-bullet",
+    );
+    await colorSwatch.click();
+    const rampSelector = tokensUpdateCreateModal.getByTestId(
+      "value-saturation-selector",
+    );
+    await expect(rampSelector).toBeVisible();
+    await rampSelector.click({ position: { x: 50, y: 50 } });
+
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value:"),
+    ).toBeVisible();
+
+    const sliderOpacity = tokensUpdateCreateModal.getByTestId("slider-opacity");
+    await sliderOpacity.click({ position: { x: 50, y: 0 } });
+    await expect(
+      tokensUpdateCreateModal.getByRole("textbox", { name: "Color" }),
+    ).toHaveValue(/rgba\s*\([^)]*\)/);
+
+    // 6. Valid offset → resolved
+    await offsetXField.fill("3 + 3");
+
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: 6"),
+    ).toBeVisible();
+
+    await offsetYField.fill("3 + 7");
+
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: 10"),
+    ).toBeVisible();
+
+    // 7. Valid blur → resolved
+
+    await blurField.fill("3 + 1");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: 4"),
+    ).toBeVisible();
+
+    // 8. Valid spread → resolved
+
+    await spreadField.fill("3 - 3");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: 0"),
+    ).toBeVisible();
+  
+       await spreadField.fill("1 - 3");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: -2"),
+    ).toBeVisible();
+
+    await nameField.fill("my-token");
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+
+    await expect(
+      tokensTabPanel.getByRole("button", { name: "my-token" }),
+    ).toBeEnabled();
+
+    //
+    // ------- SECOND TOKEN WITH VALID REFERENCE -------
+    //
+    await addTokenButton.click();
+
+    await nameField.fill("my-token-2");
+    const referenceToggle =
+      tokensUpdateCreateModal.getByTestId("reference-opt");
+    const compositeToggle =
+      tokensUpdateCreateModal.getByTestId("composite-opt");
+    await referenceToggle.click();
+
+    const referenceInput = tokensUpdateCreateModal.getByPlaceholder(
+      "Enter a token shadow alias",
+    );
+    await expect(referenceInput).toBeVisible();
+
+    await compositeToggle.click();
+    await expect(colorField).toBeVisible();
+
+    await referenceToggle.click();
+    const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
+      name: "Reference",
+    });
+    await referenceField.fill("{my-token}");
+    await expect(
+      tokensUpdateCreateModal.getByText(
+        "Resolved value: - X: 6 - Y: 10 - Blur: 4 - Spread: -2",
+      ),
+    ).toBeVisible();
+
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+    await expect(
+      tokensTabPanel.getByRole("button", { name: "my-token-2" }),
+    ).toBeEnabled();
+  });
+
   test("User creates typography token", async ({ page }) => {
     const emptyNameError = "Name should be at least 1 character";
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =

frontend/scripts/_helpers.js

@@ -174,6 +174,7 @@ export async function watch(baseDir, predicate, callback) {
   const watcher = new Watcher(baseDir, {
     persistent: true,
     recursive: true,
+    debounce: 500
   });
 
   watcher.on("change", (path) => {
@@ -181,8 +182,19 @@ export async function watch(baseDir, predicate, callback) {
       callback(path);
     }
   });
+
+
+  watcher.on("error", (cause) => {
+    console.log("WATCHER ERROR", cause);
+  });
 }
 
+export async function ensureDirectories() {
+  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
+  await fs.mkdir("./resources/public/css/", { recursive: true });
+}
+
+
 async function readManifestFile(resource) {
   const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -260,6 +272,9 @@ const markedOptions = {
 marked.use(markedOptions);
 
 export async function compileTranslations() {
+  const outputDir = "resources/public/js/";
+  await fs.mkdir(outputDir, { recursive: true });
+
   const langs = [
     "ar",
     "ca",
@@ -341,7 +356,6 @@ export async function compileTranslations() {
     }
 
     const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
-    const outputDir = "resources/public/js/";
     const outputFile = ph.join(outputDir, "translation." + lang + ".js");
     await fs.writeFile(outputFile, esm);
   }
@@ -499,17 +513,43 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
   const start = process.hrtime();
   log.info("init: compile svgsprite");
-  await generateSvgSprites();
+  let error = false;
+
+  try {
+    await generateSvgSprites();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile svgsprite", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile svgsprite", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile svgsprite", `(${ppt(end)})`);
+  }
 }
 
 export async function compileTemplates() {
   const start = process.hrtime();
+  let error = false;
   log.info("init: compile templates");
-  await generateTemplates();
+
+  try {
+    await generateTemplates();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile templates", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile templates", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile templates", `(${ppt(end)})`);
+  }
 }
 
 export async function compilePolyfills() {

frontend/scripts/_worker.js

@@ -28,14 +28,12 @@ async function compileFile(path) {
         ],
         sourceMap: false,
       });
-      // console.dir(result);
       resolve({
         inputPath: path,
         outputPath: dest,
         css: result.css,
       });
     } catch (cause) {
-      console.error(cause);
       reject(cause);
     }
   });

frontend/scripts/build-app-assets.js

@@ -1,5 +1,6 @@
 import * as h from "./_helpers.js";
 
+await h.ensureDirectories();
 await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/scripts/watch.js

@@ -12,19 +12,31 @@ let sass = null;
 
 async function compileSassAll() {
   const start = process.hrtime();
+  let error = false;
+
   log.info("init: compile styles");
 
-  sass = await h.compileSassAll(worker);
-  let output = await h.concatSass(sass);
-  await fs.writeFile("./resources/public/css/main.css", output);
+  try {
+    sass = await h.compileSassAll(worker);
+    let output = await h.concatSass(sass);
+    await fs.writeFile("./resources/public/css/main.css", output);
 
-  if (isDebug) {
-    let debugCSS = await h.compileSassDebug(worker);
-    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+    if (isDebug) {
+      let debugCSS = await h.compileSassDebug(worker);
+      await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+    }
+  } catch (cause) {
+    error = cause;
   }
 
   const end = process.hrtime(start);
-  log.info("done: compile styles", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile styles", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile styles", `(${ppt(end)})`);
+  }
 }
 
 async function compileSass(path) {
@@ -48,7 +60,7 @@ async function compileSass(path) {
   }
 }
 
-await fs.mkdir("./resources/public/css/", { recursive: true });
+await h.ensureDirectories();
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();

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

@@ -126,7 +126,7 @@
   If the `value` is not parseable and/or has missing references returns a map with `:errors`.
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
-  (let [missing-references? (seq (seq (cto/find-token-value-references value)))
+  (let [missing-references? (seq (cto/find-token-value-references value))
         parsed-value (cft/parse-token-value value)
         out-of-scope (not (<= 0 (:value parsed-value) 1))
         references (seq (cto/find-token-value-references value))]
@@ -152,15 +152,14 @@
   [value]
   (let [missing-references? (seq (cto/find-token-value-references value))
         parsed-value (cft/parse-token-value value)
-        out-of-scope (< (:value parsed-value) 0)
-        references (seq (cto/find-token-value-references value))]
+        out-of-scope (< (:value parsed-value) 0)]
     (cond
       (and parsed-value (not out-of-scope))
       parsed-value
 
-      references
-      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
-       :references references}
+      missing-references?
+      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references?)]
+       :references missing-references?}
 
       (and (not missing-references?) out-of-scope)
       {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-stroke-width value)]}
@@ -365,7 +364,7 @@
   "Parses shadow spread value (non-negative number)."
   [value]
   (let [parsed (parse-sd-token-general-value value)
-        valid? (and (:value parsed) (>= (:value parsed) 0))]
+        valid? (:value parsed)]
     (cond
       valid?
       parsed

frontend/src/app/main/refs.cljs

@@ -480,6 +480,9 @@
 (def workspace-token-sets-tree
   (l/derived (d/nilf ctob/get-set-tree) tokens-lib))
 
+(def workspace-all-tokens-map
+  (l/derived (d/nilf ctob/get-all-tokens) tokens-lib))
+
 (def workspace-active-theme-paths
   (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))
 

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

@@ -193,16 +193,15 @@
         restore-fn
         (fn [_]
           (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id (:id current-team)
+                     (with-meta {:team-id current-team-id
                                  :ids (into #{} d/xf:map-id files)}
                        {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects (:id current-team))
-                                               (dd/fetch-deleted-files (:id current-team)))
+                                               (dd/fetch-projects current-team-id)
+                                               (dd/fetch-deleted-files current-team-id))
                         :on-error #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restore-file" (:name file))))}))))
 
         on-restore-immediately
         (fn []
-          (prn files)
           (st/emit!
            (modal/show {:type :confirm
                         :title (tr "dashboard-restore-file-confirmation.title")
@@ -214,7 +213,7 @@
         on-delete-immediately
         (fn []
           (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id (:id current-team)
+                                      {:team-id current-team-id
                                        :ids (into #{} d/xf:map-id files)}))]
             (st/emit!
              (modal/show {:type :confirm
@@ -244,8 +243,7 @@
            (for [project current-projects]
              {:name (get-project-name project)
               :id (get-project-id project)
-              :handler (on-move (:id current-team)
-                                (:id project))})
+              :handler (on-move current-team-id (:id project))})
            (when (seq other-teams)
              [{:name (tr "dashboard.move-to-other-team")
                :id "move-to-other-team"

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

@@ -90,7 +90,8 @@
         instance
         (dwt/create-editor editor-node canvas-node options)
 
-        update-name? (nil? content)
+        ;; Store original content to compare name later
+        original-content content
 
         on-key-up
         (fn [event]
@@ -101,10 +102,22 @@
         on-blur
         (fn []
           (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
-            (st/emit! (dwt/v2-update-text-shape-content shape-id content
-                                                        :update-name? update-name?
-                                                        :name (gen-name instance)
-                                                        :finalize? true)))
+            (let [state @st/state
+                  objects (dsh/lookup-page-objects state)
+                  shape (get objects shape-id)
+                  current-name (:name shape)
+                  generated-name (gen-name instance)
+                  ;; Update name if: (1) it's a new shape (nil original content), or
+                  ;; (2) the current name matches the generated name from original content
+                  ;; (meaning it was never manually renamed)
+                  update-name? (or (nil? original-content)
+                                   (and (some? current-name)
+                                        (some? original-content)
+                                        (= current-name (txt/generate-shape-name (txt/content->text original-content)))))]
+              (st/emit! (dwt/v2-update-text-shape-content shape-id content
+                                                          :update-name? update-name?
+                                                          :name generated-name
+                                                          :finalize? true))))
 
           (let [container-node (mf/ref-val container-ref)]
             (dom/set-style! container-node "opacity" 0)))

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

@@ -61,7 +61,7 @@
 
 (mf/defc page-item
   {::mf/wrap-props false}
-  [{:keys [page index deletable? selected? editing? hovering?]}]
+  [{:keys [page index deletable? selected? editing? hovering? current-page-id]}]
   (let [input-ref    (mf/use-ref)
         id           (:id page)
         delete-fn    (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
@@ -72,8 +72,10 @@
         (mf/use-fn
          (mf/deps id)
          (fn []
-           ;; when using the wasm renderer, apply a blur effect to the viewport canvas
-           (if (features/active-feature? @st/state "render-wasm/v1")
+           ;; For the wasm renderer, apply a blur effect to the viewport canvas
+           ;; when we navigate to a different page.
+           (if (and (features/active-feature? @st/state "render-wasm/v1")
+                    (not= id current-page-id))
              (do
                (wasm.api/capture-canvas-pixels)
                (wasm.api/apply-canvas-blur)
@@ -203,12 +205,13 @@
 
 (mf/defc page-item-wrapper
   {::mf/wrap-props false}
-  [{:keys [page-id index deletable? selected? editing?]}]
+  [{:keys [page-id index deletable? selected? editing? current-page-id]}]
   (let [page-ref (mf/with-memo [page-id]
                    (make-page-ref page-id))
         page     (mf/deref page-ref)]
     [:& page-item {:page page
                    :index index
+                   :current-page-id current-page-id
                    :deletable? deletable?
                    :selected? selected?
                    :editing? editing?}]))
@@ -231,6 +234,7 @@
           :deletable? deletable?
           :editing? (= page-id editing-page-id)
           :selected? (= page-id current-page-id)
+          :current-page-id current-page-id
           :key page-id}])]]))
 
 ;; --- Sitemap Toolbox

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

@@ -53,10 +53,12 @@
 
 
 (defn- resolve-value
-  [tokens prev-token value]
+  [tokens prev-token token-name value]
   (let [token
         {:value value
-         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}
+         :name (if (str/blank? token-name)
+                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
+                 token-name)}
 
         tokens
         (-> tokens
@@ -131,6 +133,7 @@
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
+        token-name (get-in @form [:data :name] nil)
 
 
         touched?
@@ -140,6 +143,9 @@
         error
         (get-in @form [:errors input-name])
 
+        extra-error
+        (get-in @form [:extra-errors input-name])
+
         value
         (get-in @form [:data input-name] "")
 
@@ -247,15 +253,20 @@
                                   :hint-type (:type hint)})
 
         props
-        (if (and error touched?)
+        (cond
+          (and error touched?)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
+          (and extra-error touched?)
+          (mf/spread-props props {:hint-type "error"
+                                  :hint-message (:message extra-error)})
+          :else
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name]
+    (mf/with-effect [resolve-stream tokens token input-name token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]
@@ -301,7 +312,7 @@
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
-
+        token-name (get-in @form [:data :name] nil)
         error
         (get-in @form [:errors :value value-subfield index input-name])
 
@@ -414,10 +425,10 @@
                                   :hint-message (:message error)})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name index value-subfield]
+    (mf/with-effect [resolve-stream tokens token input-name index value-subfield token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]

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

@@ -49,10 +49,12 @@
 ;; validate data within the form state.
 
 (defn- resolve-value
-  [tokens prev-token value]
+  [tokens prev-token token-name value]
   (let [token
         {:value (cto/split-font-family value)
-         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}
+         :name (if (str/blank? token-name)
+                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
+                 token-name)}
 
         tokens
         (-> tokens
@@ -73,6 +75,7 @@
   [{:keys [token tokens name] :rest props}]
   (let [form       (mf/use-ctx fc/context)
         input-name name
+        token-name (get-in @form [:data :name] nil)
 
         touched?
         (and (contains? (:data @form) input-name)
@@ -152,10 +155,10 @@
                                   :hint-message (:message error)})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name touched?]
+    (mf/with-effect [resolve-stream tokens token input-name touched? token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]
@@ -200,7 +203,7 @@
   [{:keys [token tokens name] :rest props}]
   (let [form       (mf/use-ctx fc/context)
         input-name name
-
+        token-name (get-in @form [:data :name] nil)
         error
         (get-in @form [:errors :value input-name])
 
@@ -276,10 +279,10 @@
                                   :hint-message (:message error)})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name]
+    (mf/with-effect [resolve-stream tokens token input-name token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]

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

@@ -139,10 +139,12 @@
 
 
 (defn- resolve-value
-  [tokens prev-token value]
+  [tokens prev-token token-name value]
   (let [token
         {:value value
-         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}
+         :name (if (str/blank? token-name)
+                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
+                 token-name)}
         tokens
         (-> tokens
             ;; Remove previous token when renaming a token
@@ -163,6 +165,7 @@
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
+        token-name (get-in @form [:data :name] nil)
 
         touched?
         (and (contains? (:data @form) input-name)
@@ -206,11 +209,11 @@
                                   :hint-message (:message error)})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name]
+    (mf/with-effect [resolve-stream tokens token input-name token-name]
 
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]
@@ -252,6 +255,7 @@
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
+        token-name (get-in @form [:data :name] nil)
 
         error
         (get-in @form [:errors :value input-name])
@@ -298,10 +302,10 @@
                 (mf/spread-props props {:hint-formated true})
                 props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name name]
+    (mf/with-effect [resolve-stream tokens token input-name name token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]
@@ -365,7 +369,7 @@
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
-
+        token-name (get-in @form [:data :name] nil)
 
         error
         (get-in @form [:errors :value value-subfield index input-name])
@@ -410,10 +414,10 @@
           (mf/spread-props props {:hint-formated true})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name index value-subfield]
+    (mf/with-effect [resolve-stream tokens token input-name index value-subfield token-name]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token))
+                      (rx/mapcat (partial resolve-value tokens token token-name))
                       (rx/map (fn [result]
                                 (d/update-when result :error
                                                (fn [error]

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

@@ -14,6 +14,7 @@
    [app.main.constants :refer [max-input-length]]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.tokens.application :as dwta]
+   [app.main.data.workspace.tokens.errors :as wte]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.data.workspace.tokens.propagation :as dwtp]
    [app.main.refs :as refs]
@@ -110,8 +111,7 @@
 
         token-title (str/lower (:title token-properties))
 
-        tokens
-        (mf/deref refs/workspace-active-theme-sets-tokens)
+        tokens (mf/deref refs/workspace-all-tokens-map)
 
         tokens
         (mf/with-memo [tokens token]
@@ -207,7 +207,11 @@
                                             :value (:value valid-token)
                                             :description description}))
                       (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
+                      (modal/hide)))
+                   (fn [{:keys [errors]}]
+                     (let [error-messages (wte/humanize-errors errors)
+                           error-message (first error-messages)]
+                       (swap! form assoc-in [:extra-errors :value] {:message error-message}))))))))]
 
     [:> fc/form* {:class (stl/css :form-wrapper)
                   :form form

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

@@ -282,12 +282,7 @@
                (let [n (d/parse-double blur)]
                  (or (nil? n) (not (< n 0)))))]]]
           [:spread {:optional true}
-           [:and
-            [:maybe :string]
-            [:fn {:error/fn #(tr "workspace.tokens.shadow-token-spread-value-error")}
-             (fn [spread]
-               (let [n (d/parse-double spread)]
-                 (or (nil? n) (not (< n 0)))))]]]
+           [:maybe :string]]
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]

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

@@ -144,7 +144,7 @@
         modifiers (hooks/use-equal-memo modifiers)
         shapes    (hooks/use-equal-memo shapes)]
 
-    [:g.outlines
+    [:g.outlines.blurrable
      [:& shape-outlines-render {:shapes shapes
                                 :zoom zoom
                                 :modifiers modifiers}]]))

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

@@ -252,7 +252,7 @@
         edition        (mf/deref refs/selected-edition)
         grid-edition?  (ctl/grid-layout? objects edition)]
 
-    [:g.frame-titles
+    [:g.frame-titles.blurrable
      (for [{:keys [id parent-id] :as shape} shapes]
        (when (and
               (not= id uuid/zero)

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

@@ -424,6 +424,7 @@
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :preserveAspectRatio "xMidYMid meet"
        :key (str "viewport" page-id)
+       :id "viewport-controls"
        :view-box (utils/format-viewbox vbox)
        :ref on-viewport-ref
        :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
@@ -473,7 +474,7 @@
               :zoom zoom}]
 
             (when (ctl/any-layout? outlined-frame)
-              [:g.ghost-outline
+              [:g.ghost-outline.blurrable
                [:& outline/shape-outlines
                 {:objects base-objects
                  :selected selected

frontend/src/app/render_wasm/api.cljs

@@ -28,7 +28,6 @@
    [app.main.ui.shapes.text]
    [app.main.worker :as mw]
    [app.render-wasm.api.fonts :as f]
-   [app.render-wasm.api.shapes :as shapes]
    [app.render-wasm.api.texts :as t]
    [app.render-wasm.api.webgl :as webgl]
    [app.render-wasm.deserializers :as dr]
@@ -69,25 +68,12 @@
 (def ^:const DEBOUNCE_DELAY_MS 100)
 (def ^:const THROTTLE_DELAY_MS 10)
 
-;; Number of shapes to process before yielding to browser
-(def ^:const SHAPES_CHUNK_SIZE 100)
-;; Threshold below which we use synchronous processing (no chunking overhead)
-(def ^:const ASYNC_THRESHOLD 100)
-
 (def dpr
   (if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
 
 (def noop-fn
   (constantly nil))
 
-(defn- yield-to-browser
-  "Returns a promise that resolves after yielding to the browser's event loop.
-   Uses requestAnimationFrame for smooth visual updates during loading."
-  []
-  (p/create
-   (fn [resolve _reject]
-     (js/requestAnimationFrame (fn [_] (resolve nil))))))
-
 ;; Based on app.main.render/object-svg
 (mf/defc object-svg
   {::mf/props :obj}
@@ -134,56 +120,17 @@
               (aget buffer 3))
       (set! wasm/internal-frame-id nil))))
 
-(defn render-preview!
-  "Render a lightweight preview without tile caching.
-   Used during progressive loading for fast feedback."
-  []
-  (when (and wasm/context-initialized? (not @wasm/context-lost?))
-    (h/call wasm/internal-module "_render_preview")))
-
 
 (defonce pending-render (atom false))
-(defonce shapes-loading? (atom false))
-(defonce deferred-render? (atom false))
-
-(defn- register-deferred-render!
-  []
-  (reset! deferred-render? true))
 
 (defn request-render
   [_requester]
-  (when (and wasm/context-initialized? (not @wasm/context-lost?))
-    (if @shapes-loading?
-      (register-deferred-render!)
-      (when-not @pending-render
-        (reset! pending-render true)
-        (let [frame-id
-              (js/requestAnimationFrame
-               (fn [ts]
-                 (reset! pending-render false)
-                 (set! wasm/internal-frame-id nil)
-                 (render ts)))]
-          (set! wasm/internal-frame-id frame-id))))))
-
-(defn- begin-shapes-loading!
-  []
-  (reset! shapes-loading? true)
-  (let [frame-id wasm/internal-frame-id
-        was-pending @pending-render]
-    (when frame-id
-      (js/cancelAnimationFrame frame-id)
-      (set! wasm/internal-frame-id nil))
-    (reset! pending-render false)
-    (reset! deferred-render? was-pending)))
-
-(defn- end-shapes-loading!
-  []
-  (let [was-loading (compare-and-set! shapes-loading? true false)]
-    (reset! deferred-render? false)
-    ;; Always trigger a render after loading completes
-    ;; This ensures shapes are displayed even if no deferred render was requested
-    (when was-loading
-      (request-render "set-objects:flush"))))
+  (when (and wasm/context-initialized? (not @pending-render) (not @wasm/context-lost?))
+    (reset! pending-render true)
+    (js/requestAnimationFrame
+     (fn [ts]
+       (reset! pending-render false)
+       (render ts)))))
 
 (declare get-text-dimensions)
 
@@ -948,12 +895,24 @@
         id           (dm/get-prop shape :id)
         type         (dm/get-prop shape :type)
 
+        parent-id    (get shape :parent-id)
         masked       (get shape :masked-group)
+        selrect      (get shape :selrect)
+        constraint-h (get shape :constraints-h)
+        constraint-v (get shape :constraints-v)
+        clip-content (if (= type :frame)
+                       (not (get shape :show-content))
+                       false)
+        rotation     (get shape :rotation)
+        transform    (get shape :transform)
 
         fills        (get shape :fills)
         strokes      (if (= type :group)
                        [] (get shape :strokes))
         children     (get shape :shapes)
+        blend-mode   (get shape :blend-mode)
+        opacity      (get shape :opacity)
+        hidden       (get shape :hidden)
         content      (let [content (get shape :content)]
                        (if (= type :text)
                          (ensure-text-content content)
@@ -962,12 +921,22 @@
         grow-type    (get shape :grow-type)
         blur         (get shape :blur)
         svg-attrs    (get shape :svg-attrs)
-        shadows      (get shape :shadow)]
+        shadows      (get shape :shadow)
+        corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]
 
-    (shapes/set-shape-base-props shape)
+    (use-shape id)
+    (set-parent-id parent-id)
+    (set-shape-type type)
+    (set-shape-clip-content clip-content)
+    (set-shape-constraints constraint-h constraint-v)
 
-    ;; Remaining properties that need separate calls (variable-length or conditional)
+    (set-shape-rotation rotation)
+    (set-shape-transform transform)
+    (set-shape-blend-mode blend-mode)
+    (set-shape-opacity opacity)
+    (set-shape-hidden hidden)
     (set-shape-children children)
+    (set-shape-corners corners)
     (set-shape-blur blur)
     (when (= type :group)
       (set-masked (boolean masked)))
@@ -987,6 +956,7 @@
 
     (set-shape-layout shape)
     (set-layout-data shape)
+    (set-shape-selrect selrect)
 
     (let [pending_thumbnails (into [] (concat
                                        (set-shape-text-content id content)
@@ -1042,143 +1012,30 @@
   (let [{:keys [thumbnails full]} (set-object shape)]
     (process-pending [shape] thumbnails full noop-fn)))
 
-(defn- process-shapes-chunk
-  "Process a chunk of shapes synchronously, returning accumulated pending operations.
-   Returns {:thumbnails [...] :full [...] :next-index n}"
-  [shapes start-index chunk-size thumbnails-acc full-acc]
-  (let [total (count shapes)
-        end-index (min total (+ start-index chunk-size))]
-    (loop [index start-index
-           t-acc thumbnails-acc
-           f-acc full-acc]
-      (if (< index end-index)
-        (let [shape (nth shapes index)
-              {:keys [thumbnails full]} (set-object shape)]
-          (recur (inc index)
-                 (into t-acc thumbnails)
-                 (into f-acc full)))
-        {:thumbnails t-acc
-         :full f-acc
-         :next-index end-index}))))
-
-(defn- set-objects-async
-  "Asynchronously process shapes in chunks, yielding to the browser between chunks.
-   Returns a promise that resolves when all shapes are processed.
-   
-   Renders a preview only periodically during loading to show progress,
-   then does a full tile-based render at the end."
-  [shapes render-callback]
-  (let [total-shapes (count shapes)
-        total-chunks (mth/ceil (/ total-shapes SHAPES_CHUNK_SIZE))
-        ;; Render at 25%, 50%, 75% of loading
-        render-at-chunks (set [(mth/floor (* total-chunks 0.25))
-                               (mth/floor (* total-chunks 0.5))
-                               (mth/floor (* total-chunks 0.75))])]
-    (p/create
-     (fn [resolve _reject]
-       (letfn [(process-next-chunk [index thumbnails-acc full-acc chunk-count]
-                 (if (< index total-shapes)
-                   ;; Process one chunk
-                   (let [{:keys [thumbnails full next-index]}
-                         (process-shapes-chunk shapes index SHAPES_CHUNK_SIZE
-                                               thumbnails-acc full-acc)
-                         new-chunk-count (inc chunk-count)]
-                     ;; Only render at specific progress milestones
-                     (when (contains? render-at-chunks new-chunk-count)
-                       (render-preview!))
-
-                     ;; Yield to browser, then continue with next chunk
-                     (-> (yield-to-browser)
-                         (p/then (fn [_]
-                                   (process-next-chunk next-index thumbnails full new-chunk-count)))))
-                   ;; All chunks done - finalize
-                   (do
-                     (perf/end-measure "set-objects")
-                     (process-pending shapes thumbnails-acc full-acc noop-fn
-                                      (fn []
-                                        (end-shapes-loading!)
-                                        (if render-callback
-                                          (render-callback)
-                                          (render-finish))
-                                        (ug/dispatch! (ug/event "penpot:wasm:set-objects"))
-                                        (resolve nil))))))]
-         (process-next-chunk 0 [] [] 0))))))
-
-(defn- set-objects-sync
-  "Synchronously process all shapes (for small shape counts)."
-  [shapes render-callback]
-  (let [total-shapes (count shapes)
-        {:keys [thumbnails full]}
-        (loop [index 0 thumbnails-acc [] full-acc []]
-          (if (< index total-shapes)
-            (let [shape (nth shapes index)
-                  {:keys [thumbnails full]} (set-object shape)]
-              (recur (inc index)
-                     (into thumbnails-acc thumbnails)
-                     (into full-acc full)))
-            {:thumbnails thumbnails-acc :full full-acc}))]
-    (perf/end-measure "set-objects")
-    (process-pending shapes thumbnails full noop-fn
-                     (fn []
-                       (if render-callback
-                         (render-callback)
-                         (render-finish))
-                       (ug/dispatch! (ug/event "penpot:wasm:set-objects"))))))
-
-(defn- shapes-in-tree-order
-  "Returns shapes sorted in tree order (parents before children).
-   This ensures parent shapes are processed before their children,
-   maintaining proper shape reference consistency in WASM."
-  [objects]
-  ;; Get IDs in tree order starting from root (uuid/zero)
-  ;; If root doesn't exist (e.g., filtered thumbnail data), fall back to
-  ;; finding top-level shapes (those without a parent in objects) and
-  ;; traversing from there.
-  (if (contains? objects uuid/zero)
-    ;; Normal case: traverse from root
-    (let [ordered-ids (cfh/get-children-ids-with-self objects uuid/zero)]
-      (into []
-            (keep #(get objects %))
-            ordered-ids))
-    ;; Fallback for filtered data (thumbnails): find top-level shapes and traverse
-    (let [;; Find shapes whose parent is not in the objects map (top-level in this subset)
-          top-level-ids (->> (vals objects)
-                             (filter (fn [shape]
-                                       (not (contains? objects (:parent-id shape)))))
-                             (map :id))
-          ;; Get all children in order for each top-level shape
-          all-ordered-ids (into []
-                                (mapcat #(cfh/get-children-ids-with-self objects %))
-                                top-level-ids)]
-      (into []
-            (keep #(get objects %))
-            all-ordered-ids))))
-
 (defn set-objects
-  "Set all shape objects for rendering.
-
-   Shapes are processed in tree order (parents before children)
-   to maintain proper shape reference consistency in WASM."
   ([objects]
    (set-objects objects nil))
   ([objects render-callback]
    (perf/begin-measure "set-objects")
-   (let [shapes (shapes-in-tree-order objects)
-         total-shapes (count shapes)]
-     (if (< total-shapes ASYNC_THRESHOLD)
-       (set-objects-sync shapes render-callback)
-       (do
-         (begin-shapes-loading!)
-         (try
-           (-> (set-objects-async shapes render-callback)
-               (p/catch (fn [error]
-                          (end-shapes-loading!)
-                          (js/console.error "Async WASM shape loading failed" error))))
-           (catch :default error
-             (end-shapes-loading!)
-             (js/console.error "Async WASM shape loading failed" error)
-             (throw error)))
-         nil)))))
+   (let [shapes        (into [] (vals objects))
+         total-shapes  (count shapes)
+         ;; Collect pending operations - set-object returns {:thumbnails [...] :full [...]}
+         {:keys [thumbnails full]}
+         (loop [index 0 thumbnails-acc [] full-acc []]
+           (if (< index total-shapes)
+             (let [shape    (nth shapes index)
+                   {:keys [thumbnails full]} (set-object shape)]
+               (recur (inc index)
+                      (into thumbnails-acc thumbnails)
+                      (into full-acc full)))
+             {:thumbnails thumbnails-acc :full full-acc}))]
+     (perf/end-measure "set-objects")
+     (process-pending shapes thumbnails full noop-fn
+                      (fn []
+                        (if render-callback
+                          (render-callback)
+                          (render-finish))
+                        (ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))
 
 (defn clear-focus-mode
   []
@@ -1572,8 +1429,9 @@
 
 (defn apply-canvas-blur
   []
-  (when wasm/canvas
-    (dom/set-style! wasm/canvas "filter" "blur(4px)")))
+  (when wasm/canvas (dom/set-style! wasm/canvas "filter" "blur(4px)"))
+  (let [controls-to-blur (dom/query-all (dom/get-element "viewport-controls") ".blurrable")]
+    (run! #(dom/set-style! % "filter" "blur(4px)") controls-to-blur)))
 
 
 (defn init-wasm-module

frontend/src/app/render_wasm/api/shapes.cljs

@@ -1,193 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.render-wasm.api.shapes
-  "Batched shape property serialization for improved WASM performance.
-
-   This module provides a single WASM call to set all base shape properties,
-   replacing multiple individual calls (use_shape, set_parent, set_shape_type,
-   etc.) with one batched operation."
-  (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.common.uuid :as uuid]
-   [app.render-wasm.helpers :as h]
-   [app.render-wasm.mem :as mem]
-   [app.render-wasm.serializers :as sr]
-   [app.render-wasm.wasm :as wasm]))
-
-;; Binary layout constants matching Rust implementation:
-;;
-;; | Offset | Size | Field        | Type                              |
-;; |--------|------|--------------|-----------------------------------|
-;; | 0      | 16   | id           | UUID (4 × u32 LE)                 |
-;; | 16     | 16   | parent_id    | UUID (4 × u32 LE)                 |
-;; | 32     | 1    | shape_type   | u8                                |
-;; | 33     | 1    | flags        | u8 (bit0: clip, bit1: hidden)     |
-;; | 34     | 1    | blend_mode   | u8                                |
-;; | 35     | 1    | constraint_h | u8 (0xFF = None)                  |
-;; | 36     | 1    | constraint_v | u8 (0xFF = None)                  |
-;; | 37     | 3    | padding      | -                                 |
-;; | 40     | 4    | opacity      | f32 LE                            |
-;; | 44     | 4    | rotation     | f32 LE                            |
-;; | 48     | 24   | transform    | 6 × f32 LE (a,b,c,d,e,f)          |
-;; | 72     | 16   | selrect      | 4 × f32 LE (x1,y1,x2,y2)          |
-;; | 88     | 16   | corners      | 4 × f32 LE (r1,r2,r3,r4)          |
-;; |--------|------|--------------|-----------------------------------|
-;; | Total  | 104  |              |                                   |
-
-(def ^:const BASE-PROPS-SIZE 104)
-(def ^:const FLAG-CLIP-CONTENT 0x01)
-(def ^:const FLAG-HIDDEN 0x02)
-(def ^:const CONSTRAINT-NONE 0xFF)
-
-(defn- write-uuid-to-heap
-  "Write a UUID to the heap at the given byte offset using DataView."
-  [dview offset id]
-  (let [buffer (uuid/get-u32 id)]
-    (.setUint32 dview offset (aget buffer 0) true)
-    (.setUint32 dview (+ offset 4) (aget buffer 1) true)
-    (.setUint32 dview (+ offset 8) (aget buffer 2) true)
-    (.setUint32 dview (+ offset 12) (aget buffer 3) true)))
-
-(defn- serialize-transform
-  "Extract transform matrix values, defaulting to identity matrix."
-  [transform]
-  (if (some? transform)
-    [(dm/get-prop transform :a)
-     (dm/get-prop transform :b)
-     (dm/get-prop transform :c)
-     (dm/get-prop transform :d)
-     (dm/get-prop transform :e)
-     (dm/get-prop transform :f)]
-    [1.0 0.0 0.0 1.0 0.0 0.0])) ; identity matrix
-
-(defn- serialize-selrect
-  "Extract selrect values."
-  [selrect]
-  (if (some? selrect)
-    [(dm/get-prop selrect :x1)
-     (dm/get-prop selrect :y1)
-     (dm/get-prop selrect :x2)
-     (dm/get-prop selrect :y2)]
-    [0.0 0.0 0.0 0.0]))
-
-(defn set-shape-base-props
-  "Set all base shape properties in a single WASM call.
-
-   This replaces the following individual calls:
-   - use-shape
-   - set-parent-id
-   - set-shape-type
-   - set-shape-clip-content
-   - set-shape-rotation
-   - set-shape-transform
-   - set-shape-blend-mode
-   - set-shape-opacity
-   - set-shape-hidden
-   - set-shape-selrect
-   - set-shape-corners
-   - set-shape-constraints (clear + h + v)
-
-   Returns nil."
-  [shape]
-  (when wasm/context-initialized?
-    (let [id           (dm/get-prop shape :id)
-          parent-id    (get shape :parent-id)
-          shape-type   (dm/get-prop shape :type)
-
-          clip-content (if (= shape-type :frame)
-                         (not (get shape :show-content))
-                         false)
-          hidden       (get shape :hidden false)
-
-          flags        (cond-> 0
-                         clip-content (bit-or FLAG-CLIP-CONTENT)
-                         hidden       (bit-or FLAG-HIDDEN))
-
-          blend-mode   (sr/translate-blend-mode (get shape :blend-mode))
-          constraint-h (let [c (get shape :constraints-h)]
-                         (if (some? c)
-                           (sr/translate-constraint-h c)
-                           CONSTRAINT-NONE))
-          constraint-v (let [c (get shape :constraints-v)]
-                         (if (some? c)
-                           (sr/translate-constraint-v c)
-                           CONSTRAINT-NONE))
-
-          opacity      (d/nilv (get shape :opacity) 1.0)
-          rotation     (d/nilv (get shape :rotation) 0.0)
-
-          ;; Transform matrix
-          [ta tb tc td te tf] (serialize-transform (get shape :transform))
-
-          ;; Selrect
-          selrect (get shape :selrect)
-          [sx1 sy1 sx2 sy2] (serialize-selrect selrect)
-
-          ;; Corners
-          r1 (d/nilv (get shape :r1) 0.0)
-          r2 (d/nilv (get shape :r2) 0.0)
-          r3 (d/nilv (get shape :r3) 0.0)
-          r4 (d/nilv (get shape :r4) 0.0)
-
-          ;; Allocate buffer and get DataView
-          offset (mem/alloc BASE-PROPS-SIZE)
-          heap   (mem/get-heap-u8)
-          dview  (js/DataView. (.-buffer heap))]
-
-      ;; Write id (offset 0, 16 bytes)
-      (write-uuid-to-heap dview offset id)
-
-      ;; Write parent_id (offset 16, 16 bytes)
-      (write-uuid-to-heap dview (+ offset 16) (d/nilv parent-id uuid/zero))
-
-      ;; Write shape_type (offset 32, 1 byte)
-      (.setUint8 dview (+ offset 32) (sr/translate-shape-type shape-type))
-
-      ;; Write flags (offset 33, 1 byte)
-      (.setUint8 dview (+ offset 33) flags)
-
-      ;; Write blend_mode (offset 34, 1 byte)
-      (.setUint8 dview (+ offset 34) blend-mode)
-
-      ;; Write constraint_h (offset 35, 1 byte)
-      (.setUint8 dview (+ offset 35) constraint-h)
-
-      ;; Write constraint_v (offset 36, 1 byte)
-      (.setUint8 dview (+ offset 36) constraint-v)
-
-      ;; Padding at offset 37-39 (already zero from alloc)
-
-      ;; Write opacity (offset 40, f32)
-      (.setFloat32 dview (+ offset 40) opacity true)
-
-      ;; Write rotation (offset 44, f32)
-      (.setFloat32 dview (+ offset 44) rotation true)
-
-      ;; Write transform matrix (offset 48, 6 × f32)
-      (.setFloat32 dview (+ offset 48) ta true)
-      (.setFloat32 dview (+ offset 52) tb true)
-      (.setFloat32 dview (+ offset 56) tc true)
-      (.setFloat32 dview (+ offset 60) td true)
-      (.setFloat32 dview (+ offset 64) te true)
-      (.setFloat32 dview (+ offset 68) tf true)
-
-      ;; Write selrect (offset 72, 4 × f32)
-      (.setFloat32 dview (+ offset 72) sx1 true)
-      (.setFloat32 dview (+ offset 76) sy1 true)
-      (.setFloat32 dview (+ offset 80) sx2 true)
-      (.setFloat32 dview (+ offset 84) sy2 true)
-
-      ;; Write corners (offset 88, 4 × f32)
-      (.setFloat32 dview (+ offset 88) r1 true)
-      (.setFloat32 dview (+ offset 92) r2 true)
-      (.setFloat32 dview (+ offset 96) r3 true)
-      (.setFloat32 dview (+ offset 100) r4 true)
-
-      (h/call wasm/internal-module "_set_shape_base_props")
-
-      nil)))

frontend/src/app/render_wasm/api/webgl.cljs

@@ -151,6 +151,8 @@ void main() {
       (.clear ^js context (.-DEPTH_BUFFER_BIT ^js context))
       (.clear ^js context (.-STENCIL_BUFFER_BIT ^js context)))
     (dom/set-style! wasm/canvas "filter" "none")
+    (let [controls-to-unblur (dom/query-all (dom/get-element "viewport-controls") ".blurrable")]
+      (run! #(dom/set-style! % "filter" "none") controls-to-unblur))
     (set! wasm/canvas-pixels nil)))
 
 (defn capture-canvas-pixels

frontend/translations/es.po

@@ -7603,6 +7603,10 @@ msgstr "Error al importar: No se pudo procesar el JSON."
 msgid "workspace.tokens.export"
 msgstr "Exportar"
 
+#: src/app/main/ui/workspace/tokens/export/modal.cljs:125
+msgid "workspace.tokens.export-tokens"
+msgstr "Exportar tokens"
+
 #: src/app/main/ui/workspace/tokens/export/modal.cljs:118
 msgid "workspace.tokens.export.multiple-files"
 msgstr "Múltiples ficheros"
@@ -7647,10 +7651,26 @@ msgstr "Nombre del grupo"
 msgid "workspace.tokens.grouping-set-alert"
 msgstr "La agrupación de sets aun no está soportada."
 
+#: src/app/main/ui/workspace/tokens/import/modal.cljs:233
+msgid "workspace.tokens.import-button-prefix"
+msgstr "Importar %s"
+
 #: src/app/main/data/workspace/tokens/errors.cljs:32, src/app/main/data/workspace/tokens/errors.cljs:37
 msgid "workspace.tokens.import-error"
 msgstr "Error al importar:"
 
+#: src/app/main/ui/workspace/tokens/import/modal.cljs:273
+msgid "workspace.tokens.import-menu-folder-option"
+msgstr "Carpeta"
+
+#: src/app/main/ui/workspace/tokens/import/modal.cljs:271
+msgid "workspace.tokens.import-menu-json-option"
+msgstr "Archivo JSON único"
+
+#: src/app/main/ui/workspace/tokens/import/modal.cljs:272
+msgid "workspace.tokens.import-menu-zip-option"
+msgstr "Archivo ZIP"
+
 #: src/app/main/ui/workspace/tokens/import/modal.cljs:241
 msgid "workspace.tokens.import-multiple-files"
 msgstr ""
@@ -7665,7 +7685,7 @@ msgstr ""
 
 #: src/app/main/ui/workspace/tokens/import/modal.cljs:237
 msgid "workspace.tokens.import-tokens"
-msgstr "Import tokens"
+msgstr "Importar tokens"
 
 #: src/app/main/ui/workspace/tokens/sidebar.cljs:414, src/app/main/ui/workspace/tokens/sidebar.cljs:415
 #, unused

frontend/yarn.lock

@@ -1191,21 +1191,21 @@ __metadata:
   languageName: node
   linkType: soft
 
-"@penpot/plugin-types@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "@penpot/plugin-types@npm:1.3.2"
-  checksum: 10c0/3f624472c260721ad89bf8d944e75acf6a9c9577271a757acb77574102213914051d1a32d5ab16e6ba16ae077fff78cf7a0f6d11d18351dfc214426677a67468
+"@penpot/plugin-types@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@penpot/plugin-types@npm:1.4.2"
+  checksum: 10c0/b0972fe75c97e697eb1044c89db660393886b3c30676f8436ff4ab56c5bf0397b2c675697ae1b9c5fe40bc95a803aecf6d7ac356dbf6d3535bf8baec5d05eab1
   languageName: node
   linkType: hard
 
-"@penpot/plugins-runtime@npm:1.3.2":
-  version: 1.3.2
-  resolution: "@penpot/plugins-runtime@npm:1.3.2"
+"@penpot/plugins-runtime@npm:1.4.2":
+  version: 1.4.2
+  resolution: "@penpot/plugins-runtime@npm:1.4.2"
   dependencies:
-    "@penpot/plugin-types": "npm:^1.3.2"
+    "@penpot/plugin-types": "npm:^1.4.2"
     ses: "npm:^1.1.0"
     zod: "npm:^3.22.4"
-  checksum: 10c0/b6d2cb3a57bcbe58232db52b8224d1817495e96b34997bfa72421629b5f34a8c9cc71357c315dcab9d52ea036ed632a5efe0ac50f52e730901c02d498dfa1313
+  checksum: 10c0/af084d906cce9a6dea956fe5420111d7ea37c7620737a1e3d4f12958cb302a8f697c1229c237107c28fbb3b9f37eee308e6d16262b04ad56ae6f76c7a12f12e5
   languageName: node
   linkType: hard
 
@@ -4176,7 +4176,7 @@ __metadata:
   dependencies:
     "@penpot/draft-js": "portal:./packages/draft-js"
     "@penpot/mousetrap": "portal:./packages/mousetrap"
-    "@penpot/plugins-runtime": "npm:1.3.2"
+    "@penpot/plugins-runtime": "npm:1.4.2"
     "@penpot/svgo": "penpot/svgo#v3.2"
     "@penpot/text-editor": "portal:./text-editor"
     "@playwright/test": "npm:1.57.0"

plugins/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 1.4.2 (2026-01-21)
+
+- **plugin-types:** fix atob/btoa functions
+
+## 1.4.0 (2026-01-21)
+
+### 🚀 Features
+
+- switch component ([7d68450](https://github.com/penpot/penpot-plugins/commit/7d68450))
+- Add variants to plugins API ([04f3c26](https://github.com/penpot/penpot-plugins/commit/04f3c26))
+- format ci job ([17b5834](https://github.com/penpot/penpot-plugins/commit/17b5834))
+- fix problem with ci ([4b3c50f](https://github.com/penpot/penpot-plugins/commit/4b3c50f))
+- change in workflow ([3a69f51](https://github.com/penpot/penpot-plugins/commit/3a69f51))
+- **plugin-types:** add methods to modify the index for shapes ([4ad50af](https://github.com/penpot/penpot-plugins/commit/4ad50af))
+- **plugin-types:** change content type and added new attributes ([dbb68a5](https://github.com/penpot/penpot-plugins/commit/dbb68a5))
+- **plugins-runtime:** add data method to image data ([f077481](https://github.com/penpot/penpot-plugins/commit/f077481))
+- **plugins-runtime:** fix problem with linter ([30f4984](https://github.com/penpot/penpot-plugins/commit/30f4984))
+- **plugins-runtime:** allow openPage() to toggle opening on a new window or not ([da8288b](https://github.com/penpot/penpot-plugins/commit/da8288b))
+
+### 🩹 Fixes
+
+- package-lock.json ([d1d940a](https://github.com/penpot/penpot-plugins/commit/d1d940a))
+- fonts gdpr & switch provider ([d63231e](https://github.com/penpot/penpot-plugins/commit/d63231e))
+- missing changes ([b8fc936](https://github.com/penpot/penpot-plugins/commit/b8fc936))
+- format ci ([e0fab2e](https://github.com/penpot/penpot-plugins/commit/e0fab2e))
+- fetch main only in pr ([e48c5d4](https://github.com/penpot/penpot-plugins/commit/e48c5d4))
+
+### ❤️ Thank You
+
+- alonso.torres
+- Juanfran @juanfran
+- Michał Korczak
+- Miguel de Benito Delgado
+- Pablo Alba
+
 ## 1.3.2 (2025-07-04)
 
 ### 🩹 Fixes

plugins/docs/publish-package.md

@@ -7,6 +7,29 @@ This guide details the process of publishing `plugin-types`,
 for plugin development. Below is a walkthrough for publishing these
 packages and managing releases.
 
+**Warning**
+Before generating the release, please, check the update the changelog with
+the changes that will be released.
+
+## Problem with pnpm
+
+There is an issue with dependencies and release with pnpm. For it to work
+you need to add the following into your `.npmrc`
+
+```
+link-workspace-packages=true
+```
+
+## NPM Authentication
+
+You need to generate a temporary access token in the NPM website.
+
+Once you have the token add the following to the `.npmrc`
+
+```
+//registry.npmjs.org/:_authToken=<TOKEN>
+```
+
 ## Publishing Libraries
 
 Publishing packages enables the distribution of types and styles
@@ -35,28 +58,16 @@ pnpm run release -- --dry-run false
 
 This command will:
 
-- Update the `CHANGELOG.md`
 - Update the library's `package.json` version
 - Generate a commit
-- Create a new git tag
 - Publish to NPM with the `latest` tag
 
 Ensure everything is correct before proceeding with the git push. Once
 verified, execute the following commands:
 
 ```shell
+git commit -m ":arrow_up: Updated plugins release to X.X.X"
 git push
-git push origin vX.X.X
-```
-
-Replace `vX.X.X` with the new version number.
-
-> 📘 To update the documentation site, you must also update the `stable` branch:
-
-```shell
-git checkout stable
-git merge main
-git push origin stable
 ```
 
 For detailed information, refer to the [Nx Release

plugins/libs/plugin-types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penpot/plugin-types",
-  "version": "1.3.2",
+  "version": "1.4.2",
   "typings": "./index.d.ts",
   "type": "module"
 }

plugins/libs/plugins-runtime/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@penpot/plugins-runtime",
-  "version": "1.3.2",
+  "version": "1.4.2",
   "dependencies": {
-    "@penpot/plugin-types": "^1.3.2",
+    "@penpot/plugin-types": "^1.4.2",
     "ses": "^1.1.0",
     "zod": "^3.22.4"
   },

plugins/libs/plugins-runtime/src/lib/create-sandbox.ts

@@ -118,8 +118,8 @@ export function createSandbox(
     // Window properties
     console: ses.harden(window.console),
     devicePixelRatio: ses.harden(window.devicePixelRatio),
-    atob: ses.harden(window.atob),
-    btoa: ses.harden(window.btoa),
+    atob: ses.harden(window.atob.bind(null)),
+    btoa: ses.harden(window.btoa.bind(null)),
     structuredClone: ses.harden(window.structuredClone),
   };
 

plugins/libs/plugins-styles/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@penpot/plugin-styles",
-  "version": "1.3.2",
+  "version": "1.4.2",
   "dependencies": {}
 }

plugins/pnpm-lock.yaml

@@ -230,8 +230,8 @@ importers:
   libs/plugins-runtime:
     dependencies:
       '@penpot/plugin-types':
-        specifier: ^1.3.2
-        version: 1.3.2
+        specifier: ^1.4.2
+        version: link:../plugin-types
       ses:
         specifier: ^1.1.0
         version: 1.14.0
@@ -4200,12 +4200,6 @@ packages:
       }
     engines: { node: '>= 10.0.0' }
 
-  '@penpot/plugin-types@1.3.2':
-    resolution:
-      {
-        integrity: sha512-f0kmmZaFNs9sGtSmqmSJQYCs5Qt+KYgTD8RneUjL+Dv+zfNQnd5e4L+iHSYFJ4HWvcDvTiK7F/gya7PwMTu7WA==,
-      }
-
   '@phenomnomnominal/tsquery@5.0.1':
     resolution:
       {
@@ -13194,6 +13188,7 @@ packages:
         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
 
   tar@7.5.2:
     resolution:
@@ -13201,6 +13196,7 @@ packages:
         integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==,
       }
     engines: { node: '>=18' }
+    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
 
   terser-webpack-plugin@5.3.16:
     resolution:
@@ -18203,8 +18199,6 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
-  '@penpot/plugin-types@1.3.2': {}
-
   '@phenomnomnominal/tsquery@5.0.1(typescript@5.6.3)':
     dependencies:
       esquery: 1.6.0

plugins/tools/scripts/publish.ts

@@ -69,17 +69,6 @@ const determineArgs = async () => {
     },
   );
 
-  await releaseChangelog({
-    dryRun: args.dryRun,
-    versionData: result.projectsVersionData,
-    version: result.workspaceVersion,
-    gitCommitMessage: `chore(release): publish ${result.workspaceVersion} [skip ci]`,
-    gitCommit: true,
-    gitTag: true,
-    verbose: args.verbose,
-    firstRelease: args.firstRelease,
-  });
-
   if (!args.skipPublish) {
     await releasePublish({
       dryRun: args.dryRun,

plugins/wrangle-penpot-plugins-api-doc.toml

@@ -0,0 +1,4 @@
+name = "penpot-plugins-api-doc"
+compatibility_date = "2025-01-01"
+
+assets = { directory = "dist/doc" }

render-wasm/src/main.rs

@@ -23,7 +23,7 @@ use std::collections::HashMap;
 use utils::uuid_from_u32_quartet;
 use uuid::Uuid;
 
-pub(crate) static mut STATE: Option<Box<State>> = None;
+pub(crate) static mut STATE: Option<Box<State<'static>>> = None;
 
 #[macro_export]
 macro_rules! with_state_mut {
@@ -191,20 +191,6 @@ pub extern "C" fn render_from_cache(_: i32) {
     });
 }
 
-#[no_mangle]
-pub extern "C" fn set_preview_mode(enabled: bool) {
-    with_state_mut!(state, {
-        state.render_state.set_preview_mode(enabled);
-    });
-}
-
-#[no_mangle]
-pub extern "C" fn render_preview() {
-    with_state_mut!(state, {
-        state.render_preview(performance::get_time());
-    });
-}
-
 #[no_mangle]
 pub extern "C" fn process_animation_frame(timestamp: i32) {
     let result = std::panic::catch_unwind(|| {

render-wasm/src/render.rs

@@ -264,6 +264,7 @@ pub(crate) struct RenderState {
     pub fonts: FontStore,
     pub viewbox: Viewbox,
     pub cached_viewbox: Viewbox,
+    pub cached_target_snapshot: Option<skia::Image>,
     pub images: ImageStore,
     pub background_color: skia::Color,
     // Identifier of the current requestAnimationFrame call, if any.
@@ -293,8 +294,6 @@ pub(crate) struct RenderState {
     /// where we must render shapes without inheriting ancestor layer blurs. Toggle it through
     /// `with_nested_blurs_suppressed` to ensure it's always restored.
     pub ignore_nested_blurs: bool,
-    /// Preview render mode - when true, uses simplified rendering for progressive loading
-    pub preview_mode: bool,
 }
 
 pub fn get_cache_size(viewbox: Viewbox, scale: f32) -> skia::ISize {
@@ -344,6 +343,7 @@ impl RenderState {
             fonts,
             viewbox,
             cached_viewbox: Viewbox::new(0., 0.),
+            cached_target_snapshot: None,
             images: ImageStore::new(gpu_state.context.clone()),
             background_color: skia::Color::TRANSPARENT,
             render_request_id: None,
@@ -366,7 +366,6 @@ impl RenderState {
             focus_mode: FocusMode::new(),
             touched_ids: HashSet::default(),
             ignore_nested_blurs: false,
-            preview_mode: false,
         }
     }
 
@@ -487,10 +486,6 @@ impl RenderState {
         self.background_color = color;
     }
 
-    pub fn set_preview_mode(&mut self, enabled: bool) {
-        self.preview_mode = enabled;
-    }
-
     pub fn resize(&mut self, width: i32, height: i32) {
         let dpr_width = (width as f32 * self.options.dpr()).floor() as i32;
         let dpr_height = (height as f32 * self.options.dpr()).floor() as i32;
@@ -1092,12 +1087,15 @@ impl RenderState {
         let _start = performance::begin_timed_log!("render_from_cache");
         performance::begin_measure!("render_from_cache");
         let scale = self.get_cached_scale();
+        if let Some(snapshot) = &self.cached_target_snapshot {
+            let canvas = self.surfaces.canvas(SurfaceId::Target);
+            canvas.save();
 
-        // Check if we have a valid cached viewbox (non-zero dimensions indicate valid cache)
-        if self.cached_viewbox.area.width() > 0.0 {
             // Scale and translate the target according to the cached data
             let navigate_zoom = self.viewbox.zoom / self.cached_viewbox.zoom;
 
+            canvas.scale((navigate_zoom, navigate_zoom));
+
             let TileRect(start_tile_x, start_tile_y, _, _) =
                 tiles::get_tiles_for_viewbox_with_interest(
                     self.cached_viewbox,
@@ -1106,24 +1104,15 @@ impl RenderState {
                 );
             let offset_x = self.viewbox.area.left * self.cached_viewbox.zoom * self.options.dpr();
             let offset_y = self.viewbox.area.top * self.cached_viewbox.zoom * self.options.dpr();
-            let translate_x = (start_tile_x as f32 * tiles::TILE_SIZE) - offset_x;
-            let translate_y = (start_tile_y as f32 * tiles::TILE_SIZE) - offset_y;
-            let bg_color = self.background_color;
 
-            // Setup canvas transform
-            {
-                let canvas = self.surfaces.canvas(SurfaceId::Target);
-                canvas.save();
-                canvas.scale((navigate_zoom, navigate_zoom));
-                canvas.translate((translate_x, translate_y));
-                canvas.clear(bg_color);
-            }
+            canvas.translate((
+                (start_tile_x as f32 * tiles::TILE_SIZE) - offset_x,
+                (start_tile_y as f32 * tiles::TILE_SIZE) - offset_y,
+            ));
 
-            // Draw directly from cache surface, avoiding snapshot overhead
-            self.surfaces.draw_cache_to_target();
-
-            // Restore canvas state
-            self.surfaces.canvas(SurfaceId::Target).restore();
+            canvas.clear(self.background_color);
+            canvas.draw_image(snapshot, (0, 0), Some(&skia::Paint::default()));
+            canvas.restore();
 
             if self.options.is_debug_visible() {
                 debug::render(self);
@@ -1138,25 +1127,6 @@ impl RenderState {
         performance::end_timed_log!("render_from_cache", _start);
     }
 
-    /// Render a preview of the shapes during loading.
-    /// This rebuilds tiles for touched shapes and renders synchronously.
-    pub fn render_preview(&mut self, tree: ShapesPoolRef, timestamp: i32) -> Result<(), String> {
-        let _start = performance::begin_timed_log!("render_preview");
-        performance::begin_measure!("render_preview");
-
-        // Skip tile rebuilding during preview - we'll do it at the end
-        // Just rebuild tiles for touched shapes and render synchronously
-        self.rebuild_touched_tiles(tree);
-
-        // Use the sync render path
-        self.start_render_loop(None, tree, timestamp, true)?;
-
-        performance::end_measure!("render_preview");
-        performance::end_timed_log!("render_preview", _start);
-
-        Ok(())
-    }
-
     pub fn start_render_loop(
         &mut self,
         base_object: Option<&Uuid>,
@@ -1591,7 +1561,7 @@ impl RenderState {
                 }
             });
 
-        if let Some((mut surface, filter_scale)) = filter_result {
+        if let Some((image, filter_scale)) = filter_result {
             let drop_canvas = self.surfaces.canvas(SurfaceId::DropShadows);
             drop_canvas.save();
             drop_canvas.scale((scale, scale));
@@ -1601,26 +1571,34 @@ impl RenderState {
 
             // If we scaled down in the filter surface, we need to scale back up
             if filter_scale < 1.0 {
+                let scaled_width = bounds.width() * filter_scale;
+                let scaled_height = bounds.height() * filter_scale;
+                let src_rect = skia::Rect::from_xywh(0.0, 0.0, scaled_width, scaled_height);
+
                 drop_canvas.save();
                 drop_canvas.scale((1.0 / filter_scale, 1.0 / filter_scale));
-                drop_canvas.translate((bounds.left * filter_scale, bounds.top * filter_scale));
-                surface.draw(
-                    drop_canvas,
-                    (0.0, 0.0),
+                drop_canvas.draw_image_rect_with_sampling_options(
+                    image,
+                    Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
+                    skia::Rect::from_xywh(
+                        bounds.left * filter_scale,
+                        bounds.top * filter_scale,
+                        scaled_width,
+                        scaled_height,
+                    ),
                     self.sampling_options,
-                    Some(&drop_paint),
+                    &drop_paint,
                 );
                 drop_canvas.restore();
             } else {
-                drop_canvas.save();
-                drop_canvas.translate((bounds.left, bounds.top));
-                surface.draw(
-                    drop_canvas,
-                    (0.0, 0.0),
+                let src_rect = skia::Rect::from_xywh(0.0, 0.0, bounds.width(), bounds.height());
+                drop_canvas.draw_image_rect_with_sampling_options(
+                    image,
+                    Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
+                    bounds,
                     self.sampling_options,
-                    Some(&drop_paint),
+                    &drop_paint,
                 );
-                drop_canvas.restore();
             }
             drop_canvas.restore();
         }
@@ -1644,11 +1622,10 @@ impl RenderState {
 
             is_empty = false;
 
-            let Some(element) = tree.get(&node_id) else {
-                // The shape isn't available yet (likely still streaming in from WASM).
-                // Skip it for this pass; a subsequent render will pick it up once present.
-                continue;
-            };
+            let element = tree.get(&node_id).ok_or(format!(
+                "Error: Element with root_id {} not found in the tree.",
+                node_render_state.id
+            ))?;
             let scale = self.get_scale();
             let mut extrect: Option<Rect> = None;
 
@@ -1766,9 +1743,7 @@ impl RenderState {
                         if !matches!(element.shape_type, Type::Bool(_)) {
                             // Nested shapes shadowing - apply black shadow to child shapes too
                             for shadow_shape_id in element.children.iter() {
-                                let Some(shadow_shape) = tree.get(shadow_shape_id) else {
-                                    continue;
-                                };
+                                let shadow_shape = tree.get(shadow_shape_id).unwrap();
                                 if shadow_shape.hidden {
                                     continue;
                                 }
@@ -2093,9 +2068,11 @@ impl RenderState {
 
         self.surfaces.gc();
 
-        // Mark cache as valid for render_from_cache
+        // Cache target surface in a texture
         self.cached_viewbox = self.viewbox;
 
+        self.cached_target_snapshot = Some(self.surfaces.snapshot(SurfaceId::Cache));
+
         if self.options.is_debug_visible() {
             debug::render(self);
         }
@@ -2164,7 +2141,9 @@ impl RenderState {
     }
 
     pub fn remove_cached_tile(&mut self, tile: tiles::Tile) {
-        self.surfaces.remove_cached_tile_surface(tile);
+        let rect = self.get_aligned_tile_bounds(tile);
+        self.surfaces
+            .remove_cached_tile_surface(tile, rect, self.background_color);
     }
 
     pub fn rebuild_tiles_shallow(&mut self, tree: ShapesPoolRef) {
@@ -2185,7 +2164,7 @@ impl RenderState {
             }
         }
 
-        // Invalidate changed tiles - old content stays visible until new tiles render
+        // Update the changed tiles
         self.surfaces.remove_cached_tiles(self.background_color);
         for tile in all_tiles {
             self.remove_cached_tile(tile);
@@ -2232,7 +2211,7 @@ impl RenderState {
             }
         }
 
-        // Invalidate changed tiles - old content stays visible until new tiles render
+        // Update the changed tiles
         self.surfaces.remove_cached_tiles(self.background_color);
         for tile in all_tiles {
             self.remove_cached_tile(tile);

render-wasm/src/render/filters.rs

@@ -40,21 +40,41 @@ pub fn render_with_filter_surface<F>(
 where
     F: FnOnce(&mut RenderState, SurfaceId),
 {
-    if let Some((mut surface, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
+    if let Some((image, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
         let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
 
         // If we scaled down, we need to scale the source rect and adjust the destination
         if scale < 1.0 {
+            // The image was rendered at a smaller scale, so we need to scale it back up
+            let scaled_width = bounds.width() * scale;
+            let scaled_height = bounds.height() * scale;
+            let src_rect = skia::Rect::from_xywh(0.0, 0.0, scaled_width, scaled_height);
+
             canvas.save();
             canvas.scale((1.0 / scale, 1.0 / scale));
-            canvas.translate((bounds.left * scale, bounds.top * scale));
-            surface.draw(canvas, (0.0, 0.0), render_state.sampling_options, None);
+            canvas.draw_image_rect_with_sampling_options(
+                image,
+                Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
+                skia::Rect::from_xywh(
+                    bounds.left * scale,
+                    bounds.top * scale,
+                    scaled_width,
+                    scaled_height,
+                ),
+                render_state.sampling_options,
+                &skia::Paint::default(),
+            );
             canvas.restore();
         } else {
-            canvas.save();
-            canvas.translate((bounds.left, bounds.top));
-            surface.draw(canvas, (0.0, 0.0), render_state.sampling_options, None);
-            canvas.restore();
+            // No scaling needed, draw normally
+            let src_rect = skia::Rect::from_xywh(0.0, 0.0, bounds.width(), bounds.height());
+            canvas.draw_image_rect_with_sampling_options(
+                image,
+                Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
+                bounds,
+                render_state.sampling_options,
+                &skia::Paint::default(),
+            );
         }
         true
     } else {
@@ -73,7 +93,7 @@ pub fn render_into_filter_surface<F>(
     render_state: &mut RenderState,
     bounds: Rect,
     draw_fn: F,
-) -> Option<(skia::Surface, f32)>
+) -> Option<(skia::Image, f32)>
 where
     F: FnOnce(&mut RenderState, SurfaceId),
 {
@@ -109,6 +129,5 @@ where
 
     render_state.surfaces.canvas(filter_id).restore();
 
-    let filter_surface = render_state.surfaces.surface_clone(filter_id);
-    Some((filter_surface, scale))
+    Some((render_state.surfaces.snapshot(filter_id), scale))
 }

render-wasm/src/render/surfaces.rs

@@ -175,10 +175,6 @@ impl Surfaces {
         self.get_mut(id).canvas()
     }
 
-    pub fn surface_clone(&self, id: SurfaceId) -> skia::Surface {
-        self.get(id).clone()
-    }
-
     /// Marks a surface as having content (dirty)
     pub fn mark_dirty(&mut self, id: SurfaceId) {
         self.dirty_surfaces |= id as u32;
@@ -215,18 +211,6 @@ impl Surfaces {
         );
     }
 
-    /// Draws the cache surface directly to the target canvas.
-    /// This avoids creating an intermediate snapshot, reducing GPU stalls.
-    pub fn draw_cache_to_target(&mut self) {
-        let sampling_options = self.sampling_options;
-        self.cache.clone().draw(
-            self.target.canvas(),
-            (0.0, 0.0),
-            sampling_options,
-            Some(&skia::Paint::default()),
-        );
-    }
-
     pub fn apply_mut(&mut self, ids: u32, mut f: impl FnMut(&mut skia::Surface)) {
         performance::begin_measure!("apply_mut::flags");
         if ids & SurfaceId::Target as u32 != 0 {
@@ -321,22 +305,6 @@ impl Surfaces {
         }
     }
 
-    fn get(&self, id: SurfaceId) -> &skia::Surface {
-        match id {
-            SurfaceId::Target => &self.target,
-            SurfaceId::Filter => &self.filter,
-            SurfaceId::Cache => &self.cache,
-            SurfaceId::Current => &self.current,
-            SurfaceId::DropShadows => &self.drop_shadows,
-            SurfaceId::InnerShadows => &self.inner_shadows,
-            SurfaceId::TextDropShadows => &self.text_drop_shadows,
-            SurfaceId::Fills => &self.shape_fills,
-            SurfaceId::Strokes => &self.shape_strokes,
-            SurfaceId::Debug => &self.debug,
-            SurfaceId::UI => &self.ui,
-        }
-    }
-
     fn reset_from_target(&mut self, target: skia::Surface) {
         let dim = (target.width(), target.height());
         self.target = target;
@@ -418,22 +386,14 @@ impl Surfaces {
             self.current.height() - TILE_SIZE_MULTIPLIER * self.margins.height,
         );
 
-        let snapshot = self.current.image_snapshot();
-        let mut direct_context = self.current.direct_context();
-        let tile_image_opt = snapshot
-            .make_subset(direct_context.as_mut(), rect)
-            .or_else(|| self.current.image_snapshot_with_bounds(rect));
-
-        if let Some(tile_image) = tile_image_opt {
-            // Draw to cache first (takes reference), then move to tile cache
+        if let Some(snapshot) = self.current.image_snapshot_with_bounds(rect) {
+            self.tiles.add(tile_viewbox, tile, snapshot.clone());
             self.cache.canvas().draw_image_rect(
-                &tile_image,
+                snapshot.clone(),
                 None,
                 tile_rect,
                 &skia::Paint::default(),
             );
-
-            self.tiles.add(tile_viewbox, tile, tile_image);
         }
     }
 
@@ -441,65 +401,25 @@ impl Surfaces {
         self.tiles.has(tile)
     }
 
-    pub fn remove_cached_tile_surface(&mut self, tile: Tile) {
-        // Mark tile as invalid
-        // Old content stays visible until new tile overwrites it atomically,
-        // preventing flickering during tile re-renders.
+    pub fn remove_cached_tile_surface(&mut self, tile: Tile, rect: skia::Rect, color: skia::Color) {
+        // Clear the specific tile area in the cache surface with color
+        let mut paint = skia::Paint::default();
+        paint.set_color(color);
+        self.cache.canvas().draw_rect(rect, &paint);
         self.tiles.remove(tile);
     }
 
     pub fn draw_cached_tile_surface(&mut self, tile: Tile, rect: skia::Rect, color: skia::Color) {
-        if let Some(image) = self.tiles.get(tile) {
-            let mut paint = skia::Paint::default();
-            paint.set_color(color);
+        let image = self.tiles.get(tile).unwrap();
 
-            self.target.canvas().draw_rect(rect, &paint);
-
-            self.target
-                .canvas()
-                .draw_image_rect(&image, None, rect, &skia::Paint::default());
-        }
-    }
-
-    /// Draws the current tile directly to the target and cache surfaces without
-    /// creating a snapshot. This avoids GPU stalls from ReadPixels but doesn't
-    /// populate the tile texture cache (suitable for one-shot renders like tests).
-    pub fn draw_current_tile_direct(&mut self, tile_rect: &skia::Rect, color: skia::Color) {
-        let sampling_options = self.sampling_options;
-        let src_rect = IRect::from_xywh(
-            self.margins.width,
-            self.margins.height,
-            self.current.width() - TILE_SIZE_MULTIPLIER * self.margins.width,
-            self.current.height() - TILE_SIZE_MULTIPLIER * self.margins.height,
-        );
-        let src_rect_f = skia::Rect::from(src_rect);
-
-        // Draw background
         let mut paint = skia::Paint::default();
         paint.set_color(color);
-        self.target.canvas().draw_rect(tile_rect, &paint);
 
-        // Draw current surface directly to target (no snapshot)
-        self.current.clone().draw(
-            self.target.canvas(),
-            (
-                tile_rect.left - src_rect_f.left,
-                tile_rect.top - src_rect_f.top,
-            ),
-            sampling_options,
-            None,
-        );
+        self.target.canvas().draw_rect(rect, &paint);
 
-        // Also draw to cache for render_from_cache
-        self.current.clone().draw(
-            self.cache.canvas(),
-            (
-                tile_rect.left - src_rect_f.left,
-                tile_rect.top - src_rect_f.top,
-            ),
-            sampling_options,
-            None,
-        );
+        self.target
+            .canvas()
+            .draw_image_rect(&image, None, rect, &skia::Paint::default());
     }
 
     pub fn remove_cached_tiles(&mut self, color: skia::Color) {
@@ -572,11 +492,9 @@ impl TileTextureCache {
         }
     }
 
-    pub fn get(&mut self, tile: Tile) -> Option<&mut skia::Image> {
-        if self.removed.contains(&tile) {
-            return None;
-        }
-        self.grid.get_mut(&tile)
+    pub fn get(&mut self, tile: Tile) -> Result<&mut skia::Image, String> {
+        let image = self.grid.get_mut(&tile).unwrap();
+        Ok(image)
     }
 
     pub fn remove(&mut self, tile: Tile) {

render-wasm/src/shapes/modifiers.rs

@@ -188,10 +188,20 @@ fn propagate_transform(
         || !is_close_to(shape_bounds_before.height(), shape_bounds_after.height())
     {
         if let Type::Text(text_content) = &mut shape.shape_type.clone() {
+            let resized_selrect = math::Rect::from_xywh(
+                shape.selrect.left(),
+                shape.selrect.top(),
+                shape_bounds_after.width(),
+                shape_bounds_after.height(),
+            );
             match text_content.grow_type() {
                 GrowType::AutoHeight => {
-                    if text_content.needs_update_layout() {
-                        text_content.update_layout(shape.selrect);
+                    // For auto-height, always update layout when width changes
+                    // because the new width affects how text wraps
+                    let width_changed =
+                        !is_close_to(shape_bounds_before.width(), shape_bounds_after.width());
+                    if width_changed || text_content.needs_update_layout() {
+                        text_content.update_layout(resized_selrect);
                     }
                     let height = text_content.size.height;
                     let resize_transform = math::resize_matrix(
@@ -204,8 +214,12 @@ fn propagate_transform(
                     transform.post_concat(&resize_transform);
                 }
                 GrowType::AutoWidth => {
-                    if text_content.needs_update_layout() {
-                        text_content.update_layout(shape.selrect);
+                    // For auto-width, always update layout when height changes
+                    // because the new height affects how text flows
+                    let height_changed =
+                        !is_close_to(shape_bounds_before.height(), shape_bounds_after.height());
+                    if height_changed || text_content.needs_update_layout() {
+                        text_content.update_layout(resized_selrect);
                     }
                     let width = text_content.width();
                     let height = text_content.size.height;

render-wasm/src/state.rs

@@ -18,16 +18,16 @@ use crate::shapes::modifiers::grid_layout::grid_cell_data;
 /// It is created by [init] and passed to the other exported functions.
 /// Note that rust-skia data structures are not thread safe, so a state
 /// must not be shared between different Web Workers.
-pub(crate) struct State {
+pub(crate) struct State<'a> {
     pub render_state: RenderState,
     pub text_editor_state: TextEditorState,
     pub current_id: Option<Uuid>,
     pub current_browser: u8,
-    pub shapes: ShapesPool,
-    pub saved_shapes: Option<ShapesPool>,
+    pub shapes: ShapesPool<'a>,
+    pub saved_shapes: Option<ShapesPool<'a>>,
 }
 
-impl State {
+impl<'a> State<'a> {
     pub fn new(width: i32, height: i32) -> Self {
         State {
             render_state: RenderState::new(width, height),
@@ -223,14 +223,17 @@ impl State {
         self.render_state.rebuild_touched_tiles(&self.shapes);
     }
 
-    pub fn render_preview(&mut self, timestamp: i32) {
-        let _ = self.render_state.render_preview(&self.shapes, timestamp);
-    }
-
     pub fn rebuild_modifier_tiles(&mut self, ids: Vec<Uuid>) {
-        // Index-based storage is safe
-        self.render_state
-            .rebuild_modifier_tiles(&mut self.shapes, ids);
+        // SAFETY: We're extending the lifetime of the mutable borrow to 'a.
+        // This is safe because:
+        // 1. shapes has lifetime 'a in the struct
+        // 2. The reference won't outlive the struct
+        // 3. No other references to shapes exist during this call
+        unsafe {
+            let shapes_ptr = &mut self.shapes as *mut ShapesPool<'a>;
+            self.render_state
+                .rebuild_modifier_tiles(&mut *shapes_ptr, ids);
+        }
     }
 
     pub fn font_collection(&self) -> &FontCollection {

render-wasm/src/state/shapes_pool.rs

@@ -28,44 +28,29 @@ const SHAPES_POOL_ALLOC_MULTIPLIER: f32 = 1.3;
 /// Shapes are stored in a `Vec<Shape>`, which keeps the `Shape` instances
 /// in a contiguous memory block.
 ///
-/// # Index-based Design
-///
-/// All auxiliary HashMaps (modifiers, structure, scale_content, modified_shape_cache)
-/// use `usize` indices instead of `&'a Uuid` references. This eliminates:
-/// - Unsafe lifetime extensions
-/// - The need for `rebuild_references()` after Vec reallocation
-/// - Complex lifetime annotations
-///
-/// The `uuid_to_idx` HashMap maps `Uuid` (owned) to indices, avoiding lifetime issues.
-///
-pub struct ShapesPoolImpl {
+pub struct ShapesPoolImpl<'a> {
     shapes: Vec<Shape>,
     counter: usize,
 
-    /// Maps UUID to index in the shapes Vec. Uses owned Uuid, no lifetime needed.
-    uuid_to_idx: HashMap<Uuid, usize>,
+    shapes_uuid_to_idx: HashMap<&'a Uuid, usize>,
 
-    /// Cache for modified shapes, keyed by index
-    modified_shape_cache: HashMap<usize, OnceCell<Shape>>,
-    /// Transform modifiers, keyed by index
-    modifiers: HashMap<usize, skia::Matrix>,
-    /// Structure entries, keyed by index
-    structure: HashMap<usize, Vec<StructureEntry>>,
-    /// Scale content values, keyed by index
-    scale_content: HashMap<usize, f32>,
+    modified_shape_cache: HashMap<&'a Uuid, OnceCell<Shape>>,
+    modifiers: HashMap<&'a Uuid, skia::Matrix>,
+    structure: HashMap<&'a Uuid, Vec<StructureEntry>>,
+    scale_content: HashMap<&'a Uuid, f32>,
 }
 
-// Type aliases - no longer need lifetimes!
-pub type ShapesPool = ShapesPoolImpl;
-pub type ShapesPoolRef<'a> = &'a ShapesPoolImpl;
-pub type ShapesPoolMutRef<'a> = &'a mut ShapesPoolImpl;
+// Type aliases to avoid writing lifetimes everywhere
+pub type ShapesPool<'a> = ShapesPoolImpl<'a>;
+pub type ShapesPoolRef<'a> = &'a ShapesPoolImpl<'a>;
+pub type ShapesPoolMutRef<'a> = &'a mut ShapesPoolImpl<'a>;
 
-impl ShapesPoolImpl {
+impl<'a> ShapesPoolImpl<'a> {
     pub fn new() -> Self {
         ShapesPoolImpl {
             shapes: vec![],
             counter: 0,
-            uuid_to_idx: HashMap::default(),
+            shapes_uuid_to_idx: HashMap::default(),
 
             modified_shape_cache: HashMap::default(),
             modifiers: HashMap::default(),
@@ -77,14 +62,15 @@ impl ShapesPoolImpl {
     pub fn initialize(&mut self, capacity: usize) {
         performance::begin_measure!("shapes_pool_initialize");
         self.counter = 0;
-        self.uuid_to_idx = HashMap::with_capacity(capacity);
+        self.shapes_uuid_to_idx = HashMap::with_capacity(capacity);
 
         let additional = capacity as i32 - self.shapes.len() as i32;
         if additional <= 0 {
             return;
         }
 
-        // Reserve extra capacity to avoid future reallocations
+        // Reserve exact capacity to avoid any future reallocations
+        // This is critical because we store &'a Uuid references that would be invalidated
         let target_capacity = (capacity as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize;
         self.shapes
             .reserve_exact(target_capacity.saturating_sub(self.shapes.len()));
@@ -95,15 +81,15 @@ impl ShapesPoolImpl {
     }
 
     pub fn add_shape(&mut self, id: Uuid) -> &mut Shape {
-        if self.counter >= self.shapes.len() {
-            // We need more space
+        let did_reallocate = if self.counter >= self.shapes.len() {
+            // We need more space. Check if we'll need to reallocate the Vec.
             let current_capacity = self.shapes.capacity();
-            // Ensure we add at least 1 shape when the pool is empty
-            let additional =
-                ((self.shapes.len() as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize).max(1);
+            let additional = (self.shapes.len() as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize;
             let needed_capacity = self.shapes.len() + additional;
 
-            if needed_capacity > current_capacity {
+            let will_reallocate = needed_capacity > current_capacity;
+
+            if will_reallocate {
                 // Reserve extra space to minimize future reallocations
                 let extra_reserve = (needed_capacity as f32 * 0.5) as usize;
                 self.shapes
@@ -112,68 +98,165 @@ impl ShapesPoolImpl {
 
             self.shapes
                 .extend(iter::repeat_with(|| Shape::new(Uuid::nil())).take(additional));
-        }
+
+            will_reallocate
+        } else {
+            false
+        };
 
         let idx = self.counter;
         let new_shape = &mut self.shapes[idx];
         new_shape.id = id;
 
-        // Simply store the UUID -> index mapping. No unsafe lifetime tricks needed!
-        self.uuid_to_idx.insert(id, idx);
+        // Get a reference to the id field in the shape with lifetime 'a
+        // SAFETY: This is safe because:
+        // 1. We pre-allocate enough capacity to avoid Vec reallocation
+        // 2. The shape and its id field won't move within the Vec
+        // 3. The reference won't outlive the ShapesPoolImpl
+        let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
+
+        self.shapes_uuid_to_idx.insert(id_ref, idx);
         self.counter += 1;
 
+        // If the Vec reallocated, we need to rebuild all references in the HashMaps
+        // because the old references point to deallocated memory
+        if did_reallocate {
+            self.rebuild_references();
+        }
+
         &mut self.shapes[idx]
     }
-    // No longer needed! Index-based storage means no references to rebuild.
-    // The old rebuild_references() function has been removed entirely.
+
+    /// Rebuilds all &'a Uuid references in the HashMaps after a Vec reallocation.
+    /// This is necessary because Vec reallocation invalidates all existing references.
+    fn rebuild_references(&mut self) {
+        // Rebuild shapes_uuid_to_idx with fresh references
+        let mut new_map = HashMap::with_capacity(self.shapes_uuid_to_idx.len());
+        for (_, idx) in self.shapes_uuid_to_idx.drain() {
+            let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
+            new_map.insert(id_ref, idx);
+        }
+        self.shapes_uuid_to_idx = new_map;
+
+        // Rebuild modifiers with fresh references
+        if !self.modifiers.is_empty() {
+            let old_modifiers: Vec<(Uuid, skia::Matrix)> = self
+                .modifiers
+                .drain()
+                .map(|(uuid_ref, matrix)| (*uuid_ref, matrix))
+                .collect();
+
+            for (uuid, matrix) in old_modifiers {
+                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                    self.modifiers.insert(uuid_ref, matrix);
+                }
+            }
+        }
+
+        // Rebuild structure with fresh references
+        if !self.structure.is_empty() {
+            let old_structure: Vec<(Uuid, Vec<StructureEntry>)> = self
+                .structure
+                .drain()
+                .map(|(uuid_ref, entries)| (*uuid_ref, entries))
+                .collect();
+
+            for (uuid, entries) in old_structure {
+                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                    self.structure.insert(uuid_ref, entries);
+                }
+            }
+        }
+
+        // Rebuild scale_content with fresh references
+        if !self.scale_content.is_empty() {
+            let old_scale_content: Vec<(Uuid, f32)> = self
+                .scale_content
+                .drain()
+                .map(|(uuid_ref, scale)| (*uuid_ref, scale))
+                .collect();
+
+            for (uuid, scale) in old_scale_content {
+                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                    self.scale_content.insert(uuid_ref, scale);
+                }
+            }
+        }
+        // Rebuild modified_shape_cache with fresh references
+        if !self.modified_shape_cache.is_empty() {
+            let old_cache: Vec<(Uuid, OnceCell<Shape>)> = self
+                .modified_shape_cache
+                .drain()
+                .map(|(uuid_ref, cell)| (*uuid_ref, cell))
+                .collect();
+
+            for (uuid, cell) in old_cache {
+                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                    self.modified_shape_cache.insert(uuid_ref, cell);
+                }
+            }
+        }
+    }
 
     pub fn len(&self) -> usize {
-        self.uuid_to_idx.len()
+        self.shapes_uuid_to_idx.len()
     }
 
     pub fn has(&self, id: &Uuid) -> bool {
-        self.uuid_to_idx.contains_key(id)
+        self.shapes_uuid_to_idx.contains_key(&id)
     }
 
     pub fn get_mut(&mut self, id: &Uuid) -> Option<&mut Shape> {
-        let idx = *self.uuid_to_idx.get(id)?;
+        let idx = *self.shapes_uuid_to_idx.get(&id)?;
         Some(&mut self.shapes[idx])
     }
 
-    /// Get a shape by UUID. Returns the modified shape if modifiers/structure
-    /// are applied, otherwise returns the base shape.
-    pub fn get(&self, id: &Uuid) -> Option<&Shape> {
-        let idx = *self.uuid_to_idx.get(id)?;
+    pub fn get(&self, id: &Uuid) -> Option<&'a Shape> {
+        let idx = *self.shapes_uuid_to_idx.get(&id)?;
 
-        let shape = &self.shapes[idx];
+        // SAFETY: We're extending the lifetimes to 'a.
+        // This is safe because:
+        // 1. All internal HashMaps and the shapes Vec have fields with lifetime 'a
+        // 2. The shape at idx won't be moved or reallocated (pre-allocated Vec)
+        // 3. The id is stored in shapes[idx].id which has lifetime 'a
+        // 4. The references won't outlive the ShapesPoolImpl
+        unsafe {
+            let shape_ptr = &self.shapes[idx] as *const Shape;
+            let modifiers_ptr = &self.modifiers as *const HashMap<&'a Uuid, skia::Matrix>;
+            let structure_ptr = &self.structure as *const HashMap<&'a Uuid, Vec<StructureEntry>>;
+            let scale_content_ptr = &self.scale_content as *const HashMap<&'a Uuid, f32>;
+            let cache_ptr = &self.modified_shape_cache as *const HashMap<&'a Uuid, OnceCell<Shape>>;
 
-        // Check if this shape needs modification (has modifiers, structure changes, or is a bool)
-        let needs_modification = shape.is_bool()
-            || self.modifiers.contains_key(&idx)
-            || self.structure.contains_key(&idx)
-            || self.scale_content.contains_key(&idx);
+            // Extend the lifetime of id to 'a - safe because it's the same Uuid stored in shapes[idx].id
+            let id_ref: &'a Uuid = &*(id as *const Uuid);
 
-        if needs_modification {
-            // Check if we have a cached modified version
-            if let Some(cell) = self.modified_shape_cache.get(&idx) {
-                Some(cell.get_or_init(|| {
-                    let mut modified_shape =
-                        shape.transformed(self.modifiers.get(&idx), self.structure.get(&idx));
+            if (*shape_ptr).is_bool()
+                || (*modifiers_ptr).contains_key(&id_ref)
+                || (*structure_ptr).contains_key(&id_ref)
+                || (*scale_content_ptr).contains_key(&id_ref)
+            {
+                if let Some(cell) = (*cache_ptr).get(&id_ref) {
+                    Some(cell.get_or_init(|| {
+                        let mut shape = (*shape_ptr).transformed(
+                            (*modifiers_ptr).get(&id_ref),
+                            (*structure_ptr).get(&id_ref),
+                        );
 
-                    if self.to_update_bool(&modified_shape) {
-                        math_bools::update_bool_to_path(&mut modified_shape, self);
-                    }
+                        if self.to_update_bool(&shape) {
+                            math_bools::update_bool_to_path(&mut shape, self);
+                        }
 
-                    if let Some(scale) = self.scale_content.get(&idx) {
-                        modified_shape.scale_content(*scale);
-                    }
-                    modified_shape
-                }))
+                        if let Some(scale) = (*scale_content_ptr).get(&id_ref) {
+                            shape.scale_content(*scale);
+                        }
+                        shape
+                    }))
+                } else {
+                    Some(&*shape_ptr)
+                }
             } else {
-                Some(shape)
+                Some(&*shape_ptr)
             }
-        } else {
-            Some(shape)
         }
     }
 
@@ -192,68 +275,69 @@ impl ShapesPoolImpl {
     }
 
     pub fn set_modifiers(&mut self, modifiers: HashMap<Uuid, skia::Matrix>) {
-        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
-        // Initialize the cache cells for affected shapes
+        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
+        // Initialize the cache cells because later we don't want to have the mutable pointer
 
         let mut ids = Vec::<Uuid>::new();
-        let mut modifiers_with_idx = HashMap::with_capacity(modifiers.len());
 
+        let mut modifiers_with_refs = HashMap::with_capacity(modifiers.len());
         for (uuid, matrix) in modifiers {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                modifiers_with_idx.insert(idx, matrix);
-                ids.push(uuid);
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                // self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
+                modifiers_with_refs.insert(uuid_ref, matrix);
+                ids.push(*uuid_ref);
             }
         }
-        self.modifiers = modifiers_with_idx;
+        self.modifiers = modifiers_with_refs;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                self.modified_shape_cache.insert(idx, OnceCell::new());
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
             }
         }
     }
 
     pub fn set_structure(&mut self, structure: HashMap<Uuid, Vec<StructureEntry>>) {
-        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
-        // Initialize the cache cells for affected shapes
-        let mut structure_with_idx = HashMap::with_capacity(structure.len());
+        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
+        // Initialize the cache cells because later we don't want to have the mutable pointer
+        let mut structure_with_refs = HashMap::with_capacity(structure.len());
         let mut ids = Vec::<Uuid>::new();
 
         for (uuid, entries) in structure {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                structure_with_idx.insert(idx, entries);
-                ids.push(uuid);
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                structure_with_refs.insert(uuid_ref, entries);
+                ids.push(*uuid_ref);
             }
         }
-        self.structure = structure_with_idx;
+        self.structure = structure_with_refs;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                self.modified_shape_cache.insert(idx, OnceCell::new());
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
             }
         }
     }
 
     pub fn set_scale_content(&mut self, scale_content: HashMap<Uuid, f32>) {
-        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
-        // Initialize the cache cells for affected shapes
-        let mut scale_content_with_idx = HashMap::with_capacity(scale_content.len());
+        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
+        // Initialize the cache cells because later we don't want to have the mutable pointer
+        let mut scale_content_with_refs = HashMap::with_capacity(scale_content.len());
         let mut ids = Vec::<Uuid>::new();
 
         for (uuid, value) in scale_content {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                scale_content_with_idx.insert(idx, value);
-                ids.push(uuid);
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                scale_content_with_refs.insert(uuid_ref, value);
+                ids.push(*uuid_ref);
             }
         }
-        self.scale_content = scale_content_with_idx;
+        self.scale_content = scale_content_with_refs;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
-                self.modified_shape_cache.insert(idx, OnceCell::new());
+            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
+                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
             }
         }
     }
@@ -265,33 +349,47 @@ impl ShapesPoolImpl {
         self.scale_content = HashMap::default();
     }
 
-    pub fn subtree(&self, id: &Uuid) -> ShapesPoolImpl {
+    /// Get a reference to the Uuid stored in a shape, if it exists
+    pub fn get_uuid_ref(&self, id: &Uuid) -> Option<&'a Uuid> {
+        let idx = *self.shapes_uuid_to_idx.get(&id)?;
+        // SAFETY: We're returning a reference with lifetime 'a to a Uuid stored
+        // in the shapes Vec. This is safe because the Vec is stable (pre-allocated)
+        // and won't be reallocated.
+        unsafe { Some(&*(&self.shapes[idx].id as *const Uuid)) }
+    }
+
+    pub fn subtree(&self, id: &Uuid) -> ShapesPoolImpl<'a> {
         let Some(shape) = self.get(id) else {
             panic!("Subtree not found");
         };
 
         let mut shapes = vec![];
-        let mut new_idx = 0;
-        let mut uuid_to_idx = HashMap::default();
+        let mut idx = 0;
+        let mut shapes_uuid_to_idx = HashMap::default();
 
-        for child_id in shape.all_children_iter(self, true, true) {
-            let Some(child_shape) = self.get(&child_id) else {
+        for id in shape.all_children_iter(self, true, true) {
+            let Some(shape) = self.get(&id) else {
                 panic!("Not found");
             };
-            shapes.push(child_shape.clone());
-            uuid_to_idx.insert(child_id, new_idx);
-            new_idx += 1;
+            shapes.push(shape.clone());
+
+            let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
+            shapes_uuid_to_idx.insert(id_ref, idx);
+            idx += 1;
         }
 
-        ShapesPoolImpl {
+        let mut result = ShapesPoolImpl {
             shapes,
-            counter: new_idx,
-            uuid_to_idx,
+            counter: idx,
+            shapes_uuid_to_idx,
             modified_shape_cache: HashMap::default(),
             modifiers: HashMap::default(),
             structure: HashMap::default(),
             scale_content: HashMap::default(),
-        }
+        };
+        result.rebuild_references();
+
+        result
     }
 
     fn to_update_bool(&self, shape: &Shape) -> bool {
@@ -300,21 +398,11 @@ impl ShapesPoolImpl {
         }
 
         let default = &Matrix::default();
-
-        // Get parent modifier by index
-        let parent_idx = self.uuid_to_idx.get(&shape.id);
-        let parent_modifier = parent_idx
-            .and_then(|idx| self.modifiers.get(idx))
-            .unwrap_or(default);
+        let parent_modifier = self.modifiers.get(&shape.id).unwrap_or(default);
 
         // Returns true if the transform of any child is different to the parent's
-        shape.all_children_iter(self, true, false).any(|child_id| {
-            let child_modifier = self
-                .uuid_to_idx
-                .get(&child_id)
-                .and_then(|idx| self.modifiers.get(idx))
-                .unwrap_or(default);
-            !math::is_close_matrix(parent_modifier, child_modifier)
+        shape.all_children_iter(self, true, false).any(|id| {
+            !math::is_close_matrix(parent_modifier, self.modifiers.get(&id).unwrap_or(default))
         })
     }
 }

render-wasm/src/wasm/layouts.rs

@@ -3,7 +3,7 @@ use crate::{with_current_shape_mut, STATE};
 use macros::ToJs;
 
 mod align;
-pub mod constraints;
+mod constraints;
 mod flex;
 mod grid;
 

render-wasm/src/wasm/shapes.rs

@@ -1,5 +1,3 @@
-mod base_props;
-
 use macros::ToJs;
 
 use crate::shapes::{Bool, Frame, Group, Path, Rect, SVGRaw, TextContent, Type};

render-wasm/src/wasm/shapes/base_props.rs

@@ -1,173 +0,0 @@
-use crate::mem;
-use crate::shapes::{BlendMode, ConstraintH, ConstraintV};
-use crate::utils::uuid_from_u32_quartet;
-use crate::uuid::Uuid;
-use crate::wasm::blend::RawBlendMode;
-use crate::wasm::layouts::constraints::{RawConstraintH, RawConstraintV};
-use crate::{with_state_mut, STATE};
-
-use super::RawShapeType;
-
-/// Binary layout for batched shape base properties:
-///
-/// | Offset | Size | Field        | Type                              |
-/// |--------|------|--------------|-----------------------------------|
-/// | 0      | 16   | id           | UUID (4 × u32 LE)                 |
-/// | 16     | 16   | parent_id    | UUID (4 × u32 LE)                 |
-/// | 32     | 1    | shape_type   | u8                                |
-/// | 33     | 1    | flags        | u8 (bit0: clip, bit1: hidden)     |
-/// | 34     | 1    | blend_mode   | u8                                |
-/// | 35     | 1    | constraint_h | u8 (0xFF = None)                  |
-/// | 36     | 1    | constraint_v | u8 (0xFF = None)                  |
-/// | 37     | 3    | padding      | -                                 |
-/// | 40     | 4    | opacity      | f32 LE                            |
-/// | 44     | 4    | rotation     | f32 LE                            |
-/// | 48     | 24   | transform    | 6 × f32 LE (a,b,c,d,e,f)          |
-/// | 72     | 16   | selrect      | 4 × f32 LE (x1,y1,x2,y2)          |
-/// | 88     | 16   | corners      | 4 × f32 LE (r1,r2,r3,r4)          |
-/// |--------|------|--------------|-----------------------------------|
-/// | Total  | 104  |              |                                   |
-pub const BASE_PROPS_SIZE: usize = 104;
-
-const FLAG_CLIP_CONTENT: u8 = 0b0000_0001;
-const FLAG_HIDDEN: u8 = 0b0000_0010;
-const CONSTRAINT_NONE: u8 = 0xFF;
-
-/// Reads a f32 from a byte slice at the given offset (little-endian)
-#[inline]
-fn read_f32_le(bytes: &[u8], offset: usize) -> f32 {
-    f32::from_le_bytes([
-        bytes[offset],
-        bytes[offset + 1],
-        bytes[offset + 2],
-        bytes[offset + 3],
-    ])
-}
-
-/// Reads a u32 from a byte slice at the given offset (little-endian)
-#[inline]
-fn read_u32_le(bytes: &[u8], offset: usize) -> u32 {
-    u32::from_le_bytes([
-        bytes[offset],
-        bytes[offset + 1],
-        bytes[offset + 2],
-        bytes[offset + 3],
-    ])
-}
-
-/// Parses UUID from bytes at given offset
-#[inline]
-fn read_uuid(bytes: &[u8], offset: usize) -> Uuid {
-    uuid_from_u32_quartet(
-        read_u32_le(bytes, offset),
-        read_u32_le(bytes, offset + 4),
-        read_u32_le(bytes, offset + 8),
-        read_u32_le(bytes, offset + 12),
-    )
-}
-
-#[no_mangle]
-pub extern "C" fn set_shape_base_props() {
-    let bytes = mem::bytes();
-
-    if bytes.len() < BASE_PROPS_SIZE {
-        return;
-    }
-
-    // Parse all fields from the buffer
-    let id = read_uuid(&bytes, 0);
-    let parent_id = read_uuid(&bytes, 16);
-    let shape_type = bytes[32];
-    let flags = bytes[33];
-    let blend_mode = bytes[34];
-    let constraint_h = bytes[35];
-    let constraint_v = bytes[36];
-    // bytes[37..40] are padding
-
-    let opacity = read_f32_le(&bytes, 40);
-    let rotation = read_f32_le(&bytes, 44);
-
-    // Transform matrix (a, b, c, d, e, f)
-    let transform_a = read_f32_le(&bytes, 48);
-    let transform_b = read_f32_le(&bytes, 52);
-    let transform_c = read_f32_le(&bytes, 56);
-    let transform_d = read_f32_le(&bytes, 60);
-    let transform_e = read_f32_le(&bytes, 64);
-    let transform_f = read_f32_le(&bytes, 68);
-
-    // Selrect (x1, y1, x2, y2)
-    let selrect_x1 = read_f32_le(&bytes, 72);
-    let selrect_y1 = read_f32_le(&bytes, 76);
-    let selrect_x2 = read_f32_le(&bytes, 80);
-    let selrect_y2 = read_f32_le(&bytes, 84);
-
-    // Corners (r1, r2, r3, r4)
-    let corner_r1 = read_f32_le(&bytes, 88);
-    let corner_r2 = read_f32_le(&bytes, 92);
-    let corner_r3 = read_f32_le(&bytes, 96);
-    let corner_r4 = read_f32_le(&bytes, 100);
-
-    // Decode flags
-    let clip_content = (flags & FLAG_CLIP_CONTENT) != 0;
-    let hidden = (flags & FLAG_HIDDEN) != 0;
-
-    // Convert raw enum values
-    let shape_type_enum = RawShapeType::from(shape_type);
-    let blend_mode_enum: BlendMode = RawBlendMode::from(blend_mode).into();
-
-    let constraint_h_opt: Option<ConstraintH> = if constraint_h == CONSTRAINT_NONE {
-        None
-    } else {
-        Some(RawConstraintH::from(constraint_h).into())
-    };
-
-    let constraint_v_opt: Option<ConstraintV> = if constraint_v == CONSTRAINT_NONE {
-        None
-    } else {
-        Some(RawConstraintV::from(constraint_v).into())
-    };
-
-    with_state_mut!(state, {
-        // Select/create the shape
-        state.use_shape(id);
-
-        // Set parent relationship
-        state.set_parent_for_current_shape(parent_id);
-
-        // Mark shape as touched
-        state.touch_current();
-
-        // Apply all properties to the current shape
-        if let Some(shape) = state.current_shape_mut() {
-            // Type
-            shape.set_shape_type(shape_type_enum.into());
-
-            // Boolean flags
-            shape.set_clip(clip_content);
-            shape.set_hidden(hidden);
-
-            // Blend mode and opacity
-            shape.set_blend_mode(blend_mode_enum);
-            shape.set_opacity(opacity);
-
-            // Constraints
-            shape.set_constraint_h(constraint_h_opt);
-            shape.set_constraint_v(constraint_v_opt);
-
-            // Transform
-            shape.set_rotation(rotation);
-            shape.set_transform(
-                transform_a,
-                transform_b,
-                transform_c,
-                transform_d,
-                transform_e,
-                transform_f,
-            );
-
-            // Geometry
-            shape.set_selrect(selrect_x1, selrect_y1, selrect_x2, selrect_y2);
-            shape.set_corners((corner_r1, corner_r2, corner_r3, corner_r4));
-        }
-    });
-}