WIP

🐛 Fix broken selection on duplicated shapes on new pages
Merge remote-tracking branch 'origin/staging' into staging-render
2026-01-22 13:20:23 -05:00 · 2026-01-22 16:47:30 +01:00 · 2026-01-21 10:32:13 +01:00 · 2026-01-21 10:17:22 +01:00 · 2026-01-20 12:56:02 +01:00 · 2026-01-20 12:54:45 +01:00
70 changed files with 3769 additions and 1776 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -29,7 +29,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - 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 unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
+- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)

 ## 2.12.1

--- a/backend/src/app/email.clj
+++ b/backend/src/app/email.clj
@@ -124,6 +124,8 @@
      (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))
--- a/common/src/app/common/files/helpers.cljc
+++ b/common/src/app/common/files/helpers.cljc
@@ -526,20 +526,25 @@
          ids))

 (defn clean-loops
-  "Clean a list of ids from circular references."
+  "Clean a list of ids from circular references. Optimized fast-path for single selections."
  [objects ids]
-  (let [parent-selected?
-        (fn [id]
-          (let [parents (get-parent-ids objects id)]
-            (some ids parents)))
+  (if (<= (count ids) 1)
+    ;; For single selection, there can't be circularity; return as ordered-set.
+    (into (d/ordered-set) ids)
+    (let [ids-set (if (set? ids) ids (set ids))
+          parent-selected?
+          (fn [id]
+            ;; Stop early as soon as we find any selected parent
+            (let [parents (get-parent-ids objects id)]
+              (some #(contains? ids-set %) parents)))

-        add-element
-        (fn [result id]
-          (cond-> result
-            (not (parent-selected? id))
-            (conj id)))]
+          add-element
+          (fn [result id]
+            (cond-> result
+              (not (parent-selected? id))
+              (conj id)))]

-    (reduce add-element (d/ordered-set) ids)))
+      (reduce add-element (d/ordered-set) ids))))

 (defn- indexed-shapes
  "Retrieves a vector with the indexes for each element in the layer
--- a/exporter/src/app/renderer/bitmap.cljs
+++ b/exporter/src/app/renderer/bitmap.cljs
@@ -58,7 +58,8 @@
                    :share-id share-id
                    :object-id (mapv :id objects)
                    :route "objects"
-                    :skip-children skip-children}
+                    :skip-children skip-children
+                    :wasm "true"}
            uri    (-> (cf/get :public-uri)
                       (assoc :path "/render.html")
                       (assoc :query (u/map->query-string params)))]
--- a/frontend/package.json
+++ b/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 && 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: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: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.4.2",
+    "@penpot/plugins-runtime": "1.3.2",
    "@penpot/svgo": "penpot/svgo#v3.2",
    "@penpot/text-editor": "portal:./text-editor",
    "@playwright/test": "1.57.0",
--- a/frontend/playwright/data/render-wasm/get-file-frame-nested-clipping.json
+++ b/frontend/playwright/data/render-wasm/get-file-frame-nested-clipping.json
--- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-nested-clipping-frames-1.png
+++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-nested-clipping-frames-1.png
--- a/frontend/resources/wasm-playground/clips.html
+++ b/frontend/resources/wasm-playground/clips.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill,
--- a/frontend/resources/wasm-playground/masks.html
+++ b/frontend/resources/wasm-playground/masks.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent
--- a/frontend/resources/wasm-playground/paths.html
+++ b/frontend/resources/wasm-playground/paths.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, draw_star,
--- a/frontend/resources/wasm-playground/plus.html
+++ b/frontend/resources/wasm-playground/plus.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, allocBytes,
--- a/frontend/resources/wasm-playground/rects.html
+++ b/frontend/resources/wasm-playground/rects.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill
--- a/frontend/resources/wasm-playground/texts.html
+++ b/frontend/resources/wasm-playground/texts.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, assignCanvas, setupInteraction, useShape, setShapeChildren, addTextShape, hexToU32ARGB,getRandomInt, getRandomColor, getRandomFloat, addShapeSolidFill, addShapeSolidStrokeFill
    } from './js/lib.js';
@@ -102,4 +102,4 @@
    });
  </script>
 </body>
-</html>
+</html>
--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -174,7 +174,6 @@ export async function watch(baseDir, predicate, callback) {
  const watcher = new Watcher(baseDir, {
    persistent: true,
    recursive: true,
-    debounce: 500
  });

  watcher.on("change", (path) => {
@@ -182,19 +181,8 @@ 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" });
@@ -272,9 +260,6 @@ const markedOptions = {
 marked.use(markedOptions);

 export async function compileTranslations() {
-  const outputDir = "resources/public/js/";
-  await fs.mkdir(outputDir, { recursive: true });
-
  const langs = [
    "ar",
    "ca",
@@ -356,6 +341,7 @@ 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);
  }
@@ -513,43 +499,17 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
  const start = process.hrtime();
  log.info("init: compile svgsprite");
-  let error = false;
-
-  try {
-    await generateSvgSprites();
-  } catch (cause) {
-    error = cause;
-  }
-
+  await generateSvgSprites();
  const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile svgsprite", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile svgsprite", `(${ppt(end)})`);
-  }
+  log.info("done: compile svgsprite", `(${ppt(end)})`);
 }

 export async function compileTemplates() {
  const start = process.hrtime();
-  let error = false;
  log.info("init: compile templates");
-
-  try {
-    await generateTemplates();
-  } catch (cause) {
-    error = cause;
-  }
-
+  await generateTemplates();
  const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile templates", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile templates", `(${ppt(end)})`);
-  }
+  log.info("done: compile templates", `(${ppt(end)})`);
 }

 export async function compilePolyfills() {
--- a/frontend/scripts/_worker.js
+++ b/frontend/scripts/_worker.js
@@ -28,12 +28,14 @@ async function compileFile(path) {
        ],
        sourceMap: false,
      });
+      // console.dir(result);
      resolve({
        inputPath: path,
        outputPath: dest,
        css: result.css,
      });
    } catch (cause) {
+      console.error(cause);
      reject(cause);
    }
  });
--- a/frontend/scripts/build-app-assets.js
+++ b/frontend/scripts/build-app-assets.js
@@ -1,6 +1,5 @@
 import * as h from "./_helpers.js";

-await h.ensureDirectories();
 await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();
--- a/frontend/scripts/watch.js
+++ b/frontend/scripts/watch.js
@@ -12,31 +12,19 @@ let sass = null;

 async function compileSassAll() {
  const start = process.hrtime();
-  let error = false;
-
  log.info("init: compile styles");

-  try {
-    sass = await h.compileSassAll(worker);
-    let output = await h.concatSass(sass);
-    await fs.writeFile("./resources/public/css/main.css", output);
+  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);
-    }
-  } catch (cause) {
-    error = cause;
+  if (isDebug) {
+    let debugCSS = await h.compileSassDebug(worker);
+    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
  }

  const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile styles", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile styles", `(${ppt(end)})`);
-  }
+  log.info("done: compile styles", `(${ppt(end)})`);
 }

 async function compileSass(path) {
@@ -60,7 +48,7 @@ async function compileSass(path) {
  }
 }

-await h.ensureDirectories();
+await fs.mkdir("./resources/public/css/", { recursive: true });
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();
--- a/frontend/src/app/main/data/event.cljs
+++ b/frontend/src/app/main/data/event.cljs
@@ -61,6 +61,11 @@
 ;; Def micro-benchmark iterations
 (def micro-benchmark-iterations 1e6)

+;; Performance logs
+(defonce ^:private longtask-observer* (atom nil))
+(defonce ^:private stall-timer* (atom nil))
+(defonce ^:private current-op* (atom nil))
+
 ;; --- CONTEXT

 (defn- collect-context
@@ -464,3 +469,72 @@
 (defn event
  [props]
  (ptk/data-event ::event props))
+
+;; --- DEVTOOLS PERF LOGGING
+
+(defn install-long-task-observer! []
+  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
+    (let [observer (js/PerformanceObserver.
+                    (fn [list _]
+                      (doseq [entry (.getEntries list)]
+                        (let [dur (.-duration entry)
+                              start (.-startTime entry)
+                              attrib (.-attribution entry)
+                              attrib-count (when attrib (.-length attrib))
+                              first-attrib (when (and attrib-count (> attrib-count 0)) (aget attrib 0))
+                              attrib-name (when first-attrib (.-name first-attrib))
+                              attrib-ctype (when first-attrib (.-containerType first-attrib))
+                              attrib-cid (when first-attrib (.-containerId first-attrib))
+                              attrib-csrc (when first-attrib (.-containerSrc first-attrib))]
+
+                          (.warn js/console (str "[perf] long task " (Math/round dur) "ms at " (Math/round start) "ms"
+                                                 (when first-attrib
+                                                   (str " attrib:name=" attrib-name
+                                                        " ctype=" attrib-ctype
+                                                        " cid=" attrib-cid
+                                                        " csrc=" attrib-csrc))))))))]
+      (.observe observer #js{:entryTypes #js["longtask"]})
+      (reset! longtask-observer* observer))))
+
+(defn start-event-loop-stall-logger!
+  "Log event loop stalls by measuring setInterval drift.
+  interval-ms: base interval
+  threshold-ms: drift over which we report"
+  [interval-ms threshold-ms]
+  (when (nil? @stall-timer*)
+    (let [last (atom (.now js/performance))
+          id (js/setInterval
+              (fn []
+                (let [now (.now js/performance)
+                      expected (+ @last interval-ms)
+                      drift (- now expected)
+                      current-op @current-op*
+                      measures (.getEntriesByType js/performance "measure")
+                      mlen (.-length measures)
+                      last-measure (when (> mlen 0) (aget measures (dec mlen)))
+                      meas-name (when last-measure (.-name last-measure))
+                      meas-detail (when last-measure (.-detail last-measure))
+                      meas-count (when meas-detail (unchecked-get meas-detail "count"))]
+                  (reset! last now)
+                  (when (> drift threshold-ms)
+                    (.warn js/console
+                           (str "[perf] event loop stall: " (Math/round drift) "ms"
+                                (when current-op (str " op=" current-op))
+                                (when meas-name (str " last=" meas-name))
+                                (when meas-count (str " count=" meas-count)))))))
+              interval-ms)]
+      (reset! stall-timer* id))))
+
+(defn init!
+  "Install perf observers in dev builds. Safe to call multiple times."
+  []
+  (when (and ^boolean js/goog.DEBUG *assert* false)
+    (install-long-task-observer!)
+    (start-event-loop-stall-logger! 50 100)
+    ;; Expose simple API on window for manual control in devtools
+    (let [api #js {:reset (fn []
+                            (try
+                              (.clearMarks js/performance)
+                              (.clearMeasures js/performance)
+                              (catch :default _ nil)))}]
+      (aset js/window "PenpotPerf" api))))
--- a/frontend/src/app/main/data/style_dictionary.cljs
+++ b/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 (cto/find-token-value-references value))
+  (let [missing-references? (seq (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,14 +152,15 @@
  [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)]
+        out-of-scope (< (:value parsed-value) 0)
+        references (seq (cto/find-token-value-references value))]
    (cond
      (and parsed-value (not out-of-scope))
      parsed-value

-      missing-references?
-      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references?)]
-       :references missing-references?}
+      references
+      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
+       :references references}

      (and (not missing-references?) out-of-scope)
      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-stroke-width value)]}
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -347,6 +347,12 @@
                                 (with-meta {:team-id team-id
                                             :file-id file-id}))))))

+              ;; Install dev perf observers once the workspace is ready
+              (->> stream
+                   (rx/filter (ptk/type? ::workspace-initialized))
+                   (rx/take 1)
+                   (rx/map (fn [_] (ev/init!))))
+
              (->> stream
                   (rx/filter (ptk/type? ::dps/persistence-notification))
                   (rx/take 1)
--- a/frontend/src/app/main/data/workspace/collapse.cljs
+++ b/frontend/src/app/main/data/workspace/collapse.cljs
@@ -18,13 +18,13 @@
    ptk/UpdateEvent
    (update [_ state]
      (let [expand-fn (fn [expanded]
-                        (merge expanded
-                               (->> ids
-                                    (map #(cfh/get-parent-ids objects %))
-                                    flatten
-                                    (remove #(= % uuid/zero))
-                                    (map (fn [id] {id true}))
-                                    (into {}))))]
+                        (let [parents-seqs (map (fn [x] (cfh/get-parent-ids objects x)) ids)
+                              flat-parents (apply concat parents-seqs)
+                              non-root-parents (remove #(= % uuid/zero) flat-parents)
+                              distinct-parents (into #{} non-root-parents)]
+                          (merge expanded
+                                 (into {}
+                                       (map (fn [id] {id true}) distinct-parents)))))]
        (update-in state [:workspace-local :expanded] expand-fn)))))


--- a/frontend/src/app/main/data/workspace/selection.cljs
+++ b/frontend/src/app/main/data/workspace/selection.cljs
@@ -264,10 +264,13 @@

    ptk/WatchEvent
    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)]
-        (rx/of
-         (dwc/expand-all-parents ids objects)
-         ::dwsp/interrupt)))))
+      (let [objects (dsh/lookup-page-objects state)
+            ;; Schedule expanding parents asynchronously to avoid blocking
+            ;; the event loop
+            expand-s (->> (rx/of (dwc/expand-all-parents ids objects))
+                          (rx/observe-on :async))
+            interrupt-s (rx/of ::dwsp/interrupt)]
+        (rx/merge expand-s interrupt-s)))))

 (defn select-all
  []
--- a/frontend/src/app/main/data/workspace/tokens/application.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/application.cljs
@@ -27,8 +27,10 @@
   [app.main.data.workspace.colors :as wdc]
   [app.main.data.workspace.shape-layout :as dwsl]
   [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.texts :as dwt]
   [app.main.data.workspace.transforms :as dwtr]
   [app.main.data.workspace.undo :as dwu]
+   [app.main.features :as features]
   [app.main.fonts :as fonts]
   [app.main.store :as st]
   [app.util.i18n :refer [tr]]
@@ -300,11 +302,20 @@
        update-fn (fn [node _]
                    (-> node
                        (d/txt-merge txt-attrs)
-                        (cty/remove-typography-from-node)))]
-    (dwsh/update-shapes shape-ids
-                        #(txt/update-text-content % update-node? update-fn nil)
-                        {:ignore-touched true
-                         :page-id page-id})))
+                        (cty/remove-typography-from-node)))
+        ;; Check if any attribute affects text layout (requires resize)
+        affects-layout? (some #(contains? txt-attrs %) [:font-size :font-family :font-weight :letter-spacing :line-height])]
+    (ptk/reify ::generate-text-shape-update
+      ptk/WatchEvent
+      (watch [_ state _]
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
+                                           #(txt/update-text-content % update-node? update-fn nil)
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (and affects-layout?
+               (features/active-feature? state "render-wasm/v1"))
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn update-line-height
  ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -353,11 +364,17 @@
                      (-> node
                          (d/txt-merge txt-attrs)
                          (cty/remove-typography-from-node))))]
-    (dwsh/update-shapes shape-ids
-                        (fn [shape]
-                          (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
-                        {:ignore-touched true
-                         :page-id page-id})))
+    (ptk/reify ::generate-font-family-text-shape-update
+      ptk/WatchEvent
+      (watch [_ state _]
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
+                                           (fn [shape]
+                                             (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (features/active-feature? state "render-wasm/v1")
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn- create-font-family-text-attrs
  [value]
@@ -425,10 +442,16 @@
                      (-> node
                          (d/txt-merge txt-attrs)
                          (cty/remove-typography-from-node))))]
-    (dwsh/update-shapes shape-ids
-                        #(txt/update-text-content % update-node? update-fn nil)
-                        {:ignore-touched true
-                         :page-id page-id})))
+    (ptk/reify ::generate-font-weight-text-shape-update
+      ptk/WatchEvent
+      (watch [_ state _]
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
+                                           #(txt/update-text-content % update-node? update-fn nil)
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (features/active-feature? state "render-wasm/v1")
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn update-font-weight
  ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -305,7 +305,7 @@
  (l/derived #(dsh/lookup-shape % page-id shape-id) st/state =))

 (def workspace-page-objects
-  (l/derived dsh/lookup-page-objects st/state))
+  (l/derived dsh/lookup-page-objects st/state identical?))

 (def workspace-read-only?
  (l/derived :read-only? workspace-global))
@@ -480,9 +480,6 @@
 (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))

--- a/frontend/src/app/main/render.cljs
+++ b/frontend/src/app/main/render.cljs
@@ -45,7 +45,9 @@
   [app.main.ui.shapes.svg-raw :as svg-raw]
   [app.main.ui.shapes.text :as text]
   [app.main.ui.shapes.text.fontfaces :as ff]
+   [app.render-wasm.api :as wasm.api]
   [app.util.dom :as dom]
+   [app.util.globals :as g]
   [app.util.http :as http]
   [app.util.strings :as ust]
   [app.util.thumbnails :as th]
@@ -53,6 +55,7 @@
   [beicon.v2.core :as rx]
   [clojure.set :as set]
   [cuerdas.core :as str]
+   [promesa.core :as p]
   [rumext.v2 :as mf]))

 (def ^:const viewbox-decimal-precision 3)
@@ -171,6 +174,8 @@
            ;; Don't wrap svg elements inside a <g> otherwise some can break
            [:> svg-raw-wrapper {:shape shape :frame frame}]))))))

+(set! wasm.api/shape-wrapper-factory shape-wrapper-factory)
+
 (defn format-viewbox
  "Format a viewbox given a rectangle"
  [{:keys [x y width height] :or {x 0 y 0 width 100 height 100}}]
@@ -480,6 +485,48 @@
       [:& ff/fontfaces-style {:fonts fonts}]
       [:& shape-wrapper {:shape object}]]]]))

+(mf/defc object-wasm
+  {::mf/wrap [mf/memo]}
+  [{:keys [objects object-id embed skip-children]
+    :or {embed false}
+    :as props}]
+  (let [object  (get objects object-id)
+        object (cond-> object
+                 (:hide-fill-on-export object)
+                 (assoc :fills [])
+
+                 skip-children
+                 (assoc :shapes []))
+
+        {:keys [width height] :as bounds}
+        (gsb/get-object-bounds objects object {:ignore-margin? false})
+
+        vbox (format-viewbox bounds)
+        zoom    1
+        canvas-ref (mf/use-ref nil)]
+
+    (mf/use-effect
+     (fn []
+       (let [canvas (mf/ref-val canvas-ref)]
+         (->> @wasm.api/module
+              (p/fmap
+               (fn [ready?]
+                 (when ready?
+                   (try
+                     (when (wasm.api/init-canvas-context canvas)
+                       (wasm.api/initialize-viewport
+                        objects zoom vbox "transparent"
+                        (fn []
+                          (wasm.api/render-sync-shape object-id)
+                          (dom/set-attribute! canvas "id" (dm/str "screenshot-" object-id)))))
+                     (catch :default e
+                       (js/console.error "Error initializing canvas context:" e)
+                       false)))))))))
+    [:canvas {:ref canvas-ref
+              :width width
+              :height height
+              :style {:background "red"}}]))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SPRITES (DEBUG)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
--- a/frontend/src/app/main/ui/dashboard/file_menu.cljs
+++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs
@@ -193,15 +193,16 @@
        restore-fn
        (fn [_]
          (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id current-team-id
+                     (with-meta {:team-id (:id current-team)
                                 :ids (into #{} d/xf:map-id files)}
                       {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects current-team-id)
-                                               (dd/fetch-deleted-files current-team-id))
+                                               (dd/fetch-projects (:id current-team))
+                                               (dd/fetch-deleted-files (:id current-team)))
                        :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")
@@ -213,7 +214,7 @@
        on-delete-immediately
        (fn []
          (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id current-team-id
+                                      {:team-id (:id current-team)
                                       :ids (into #{} d/xf:map-id files)}))]
            (st/emit!
             (modal/show {:type :confirm
@@ -243,7 +244,8 @@
           (for [project current-projects]
             {:name (get-project-name project)
              :id (get-project-id project)
-              :handler (on-move current-team-id (:id project))})
+              :handler (on-move (:id current-team)
+                                (:id project))})
           (when (seq other-teams)
             [{:name (tr "dashboard.move-to-other-team")
               :id "move-to-other-team"
--- a/frontend/src/app/main/ui/ds/z-index.scss
+++ b/frontend/src/app/main/ui/ds/z-index.scss
@@ -10,6 +10,7 @@ $z-index-200: 200;
 $z-index-300: 300;
 $z-index-400: 400;
 $z-index-500: 500;
+$z-index-600: 600;

 :global(:root) {
  --z-index-auto: #{$z-index-auto}; // Index for elements such as workspace, rulers ...
@@ -18,4 +19,5 @@ $z-index-500: 500;
  --z-index-set: #{$z-index-300}; // Index for configuration elements like modals, color picker, grid edition elements
  --z-index-dropdown: #{$z-index-400}; // Index for dropdown like elements, selects, menus, dropdowns
  --z-index-notifications: #{$z-index-500}; // Index for notification
+  --z-index-loaders: #{$z-index-600}; // Index for loaders
 }
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -308,6 +308,16 @@
     [:div {:class (stl/css :sign-info)}
      [:button {:on-click on-click} (tr "labels.retry")]]]))

+(mf/defc webgl-context-lost*
+  []
+  (let [on-reload (mf/use-fn #(js/location.reload))]
+    [:> error-container* {}
+     [:div {:class (stl/css :main-message)} (tr "errors.webgl-context-lost.main-message")]
+     [:div {:class (stl/css :desc-message)} (tr "errors.webgl-context-lost.desc-message")]
+     [:div {:class (stl/css :buttons-container)}
+      [:> button* {:variant "primary" :on-click on-reload}
+       (tr "labels.reload-page")]]]))
+
 (defn- generate-report
  [data]
  (try
@@ -437,6 +447,7 @@
                       (rx/of default)
                       (rx/throw cause)))))))

+
 (mf/defc exception-section*
  {::mf/private true}
  [{:keys [data route] :as props}]
@@ -469,6 +480,9 @@
      :service-unavailable
      [:> service-unavailable*]

+      :webgl-context-lost
+      [:> webgl-context-lost*]
+
      [:> internal-error* props])))

 (mf/defc context-wrapper*
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -217,6 +217,10 @@

        design-tokens?   (features/use-feature "design-tokens/v1")

+        wasm-renderer-enabled? (features/use-feature "render-wasm/v1")
+
+        first-frame-rendered?  (mf/use-state false)
+
        background-color (:background-color wglobal)]

    (mf/with-effect []
@@ -241,6 +245,17 @@
      (when (and file-loaded? (not page-id))
        (st/emit! (dcm/go-to-workspace :file-id file-id ::rt/replace true))))

+    (mf/with-effect [file-id page-id]
+      (reset! first-frame-rendered? false))
+
+    (mf/with-effect []
+      (let [handle-wasm-render
+            (fn [_]
+              (reset! first-frame-rendered? true))
+            listener-key (events/listen globals/document "penpot:wasm:render" handle-wasm-render)]
+        (fn []
+          (events/unlistenByKey listener-key))))
+
    [:> (mf/provider ctx/current-project-id) {:value project-id}
     [:> (mf/provider ctx/current-file-id) {:value file-id}
      [:> (mf/provider ctx/current-page-id) {:value page-id}
@@ -249,15 +264,22 @@
         [:> modal-container*]
         [:section {:class (stl/css :workspace)
                    :style {:background-color background-color
-                            :touch-action "none"}}
+                            :touch-action "none"
+                            :position "relative"}}
          [:> context-menu*]
-          (if (and file-loaded? page-id)
+          (when (and file-loaded? page-id)
            [:> workspace-inner*
             {:page-id page-id
              :file-id file-id
              :file file
              :wglobal wglobal
-              :layout layout}]
+              :layout layout}])
+          (when (or (not (and file-loaded? page-id))
+                    ;; in wasm renderer, extend the pixel loader until the first frame is rendered
+                    ;; but do not apply it when switching pages
+                    (and wasm-renderer-enabled?
+                         (not file-loaded?)
+                         (not @first-frame-rendered?)))
            [:> workspace-loader*])]]]]]]))

 (mf/defc workspace-page*
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -20,7 +20,13 @@
 }

 .workspace-loader {
-  grid-area: viewport;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-loaders);
+  background-color: var(--color-background-primary);
 }

 .workspace-content {
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -33,9 +33,24 @@
   [okulary.core :as l]
   [rumext.v2 :as mf]))

+;; Coalesce sidebar hover highlights to 1 frame to avoid long tasks
+(defonce ^:private sidebar-hover-queue (atom {:enter #{} :leave #{}}))
+(defonce ^:private sidebar-hover-pending? (atom false))
+
+(defn- schedule-sidebar-hover-flush []
+  (when (compare-and-set! sidebar-hover-pending? false true)
+    (ts/raf
+     (fn []
+       (let [{:keys [enter leave]} (swap! sidebar-hover-queue (constantly {:enter #{} :leave #{}}))]
+         (reset! sidebar-hover-pending? false)
+         (when (seq leave)
+           (apply st/emit! (map dw/dehighlight-shape leave)))
+         (when (seq enter)
+           (apply st/emit! (map dw/highlight-shape enter))))))))
+
 (mf/defc layer-item-inner
  {::mf/wrap-props false}
-  [{:keys [item depth parent-size name-ref children ref
+  [{:keys [item depth parent-size name-ref children ref style
           ;; Flags
           read-only? highlighted? selected? component-tree?
           filtered? expanded? dnd-over? dnd-over-top? dnd-over-bot? hide-toggle?
@@ -82,7 +97,8 @@
                    :dnd-over dnd-over?
                    :dnd-over-top dnd-over-top?
                    :dnd-over-bot dnd-over-bot?
-                    :root-board parent-board?)}
+                    :root-board parent-board?)
+            :style style}
      [:span {:class (stl/css-case
                      :tab-indentation true
                      :filtered filtered?)
@@ -166,10 +182,12 @@

     children]))

+;; Memoized for performance
 (mf/defc layer-item
  {::mf/props :obj
-   ::mf/memo true}
-  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
+   ::mf/wrap [mf/memo]}
+  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted style render-children?]
+    :or {render-children? true}}]
  (let [id                (:id item)
        blocked?          (:blocked item)
        hidden?           (:hidden item)
@@ -246,13 +264,21 @@
        (mf/use-fn
         (mf/deps id)
         (fn [_]
-           (st/emit! (dw/highlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (conj enter id))
+                                            (assoc :leave (disj leave id)))))
+           (schedule-sidebar-hover-flush)))

        on-pointer-leave
        (mf/use-fn
         (mf/deps id)
         (fn [_]
-           (st/emit! (dw/dehighlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (disj enter id))
+                                            (assoc :leave (conj leave id)))))
+           (schedule-sidebar-hover-flush)))

        on-context-menu
        (mf/use-fn
@@ -338,14 +364,18 @@
        component-tree? (or component-child? (ctk/instance-root? item) (ctk/instance-head? item))

        enable-drag      (mf/use-fn #(reset! drag-disabled* false))
-        disable-drag     (mf/use-fn #(reset! drag-disabled* true))]
+        disable-drag     (mf/use-fn #(reset! drag-disabled* true))
+
+        ;; Lazy loading of child elements via IntersectionObserver
+        children-count*  (mf/use-state 0)
+        children-count   (deref children-count*)
+        lazy-ref         (mf/use-ref nil)
+        observer-var     (mf/use-var nil)
+        chunk-size       50]

    (mf/with-effect [selected? selected]
      (let [single? (= (count selected) 1)
            node (mf/ref-val ref)
-            ;; NOTE: Neither get-parent-at nor get-parent-with-selector
-            ;; work if the component template changes, so we need to
-            ;; seek for an alternate solution. Maybe use-context?
            scroll-node (dom/get-parent-with-data node "scroll-container")
            parent-node (dom/get-parent-at node 2)
            first-child-node (dom/get-first-child parent-node)
@@ -363,6 +393,61 @@
        #(when (some? subid)
           (rx/dispose! subid))))

+    ;; Setup scroll-driven lazy loading when expanded
+    ;; and ensures selected children are loaded immediately
+    (mf/with-effect [expanded? (:shapes item) selected]
+      (let [shapes-vec (:shapes item)
+            total (count shapes-vec)]
+        (if expanded?
+          (let [;; Children are rendered in reverse order, so index 0 in render = last in shapes-vec
+                ;; Find if any selected id is a direct child and get its render index
+                selected-child-render-idx
+                (when (and (> total chunk-size) (seq selected))
+                  (let [shapes-reversed (vec (reverse shapes-vec))]
+                    (some (fn [sel-id]
+                            (let [idx (.indexOf shapes-reversed sel-id)]
+                              (when (>= idx 0) idx)))
+                          selected)))
+                ;; Load at least enough to include the selected child plus extra
+                ;; for context (so it can be centered in the scroll view)
+                min-count (if selected-child-render-idx
+                            (+ selected-child-render-idx chunk-size)
+                            chunk-size)
+                current @children-count*
+                new-count (min total (max current chunk-size min-count))]
+            (reset! children-count* new-count))
+          (reset! children-count* 0)))
+      (fn []
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))))
+
+    ;; Re-observe sentinel whenever children-count changes (sentinel moves)
+    (mf/with-effect [children-count expanded?]
+      (let [total (count (:shapes item))
+            node (mf/ref-val ref)
+            scroll-node (dom/get-parent-with-data node "scroll-container")
+            lazy-node (mf/ref-val lazy-ref)]
+        ;; Disconnect previous observer
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))
+        ;; Setup new observer if there are more children to load
+        (when (and expanded?
+                   (< children-count total)
+                   scroll-node
+                   lazy-node)
+          (let [cb (fn [entries]
+                     (when (and (seq entries)
+                                (.-isIntersecting (first entries)))
+                       ;; Load next chunk when sentinel intersects
+                       (let [current @children-count*
+                             next-count (min total (+ current chunk-size))]
+                         (reset! children-count* next-count))))
+                observer (js/IntersectionObserver. cb #js {:root scroll-node})]
+            (.observe observer lazy-node)
+            (reset! observer-var observer)))))
+
    [:& layer-item-inner
     {:ref dref
      :item item
@@ -387,24 +472,32 @@
      :on-enable-drag enable-drag
      :on-disable-drag disable-drag
      :on-toggle-visibility toggle-visibility
-      :on-toggle-blocking toggle-blocking}
+      :on-toggle-blocking toggle-blocking
+      :style style}

-     (when (and (:shapes item) expanded?)
+     (when (and render-children?
+                (:shapes item)
+                expanded?)
       [:div {:class (stl/css-case
                      :element-children true
                      :parent-selected selected?
                      :sticky-children parent-board?)
              :data-testid (dm/str "children-" id)}
-        (for [[index id] (reverse (d/enumerate (:shapes item)))]
-          (when-let [item (get objects id)]
-            [:& layer-item
-             {:item item
-              :highlighted highlighted
-              :selected selected
-              :index index
-              :objects objects
-              :key (dm/str id)
-              :sortable? sortable?
-              :depth depth
-              :parent-size parent-size
-              :component-child? component-tree?}]))])]))
+        (let [all-children (reverse (d/enumerate (:shapes item)))
+              visible      (take children-count all-children)]
+          (for [[index id] visible]
+            (when-let [item (get objects id)]
+              [:& layer-item
+               {:item item
+                :highlighted highlighted
+                :selected selected
+                :index index
+                :objects objects
+                :key (dm/str id)
+                :sortable? sortable?
+                :depth depth
+                :parent-size parent-size
+                :component-child? component-tree?}])))
+        (when (< children-count (count (:shapes item)))
+          [:div {:ref lazy-ref
+                 :style {:min-height 1}}])])]))
--- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs
@@ -116,13 +116,29 @@
        (->> (dm/get-in grid-edition [edition :selected])
             (map #(dm/get-in objects [edition :layout-grid-cells %])))

-        shapes-with-children
-        (mf/with-memo [selected objects shapes]
-          (let [xform    (comp (remove nil?)
-                               (mapcat #(cfh/get-children-ids objects %)))
-                selected (into selected xform selected)]
-            (sequence (keep (d/getf objects)) selected)))
+        shapes-with-children*
+        (mf/use-state nil)

+        _ (mf/use-effect
+           (mf/deps selected objects shapes)
+           (fn []
+             (reset! shapes-with-children* nil)
+             (let [result
+                   (loop [queue   (into #queue [] selected)
+                          visited selected]
+                     (if-let [id (peek queue)]
+                       (let [shape    (get objects id)
+                             children (:shapes shape)]
+                         (if (seq children)
+                           (let [new-children (remove visited children)]
+                             (recur (into (pop queue) new-children)
+                                    (into visited new-children)))
+                           (recur (pop queue) visited)))
+                       (sequence (keep (d/getf objects)) visited)))]
+               (reset! shapes-with-children* result))))
+
+        shapes-with-children
+        (deref shapes-with-children*)

        total-selected
        (count selected)]
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -13,6 +13,7 @@
   [app.main.data.helpers :as dsh]
   [app.main.data.modal :as modal]
   [app.main.data.workspace :as dw]
+   [app.main.features :as features]
   [app.main.refs :as refs]
   [app.main.store :as st]
   [app.main.ui.components.title-bar :refer [title-bar*]]
@@ -22,9 +23,11 @@
   [app.main.ui.hooks :as hooks]
   [app.main.ui.icons :as deprecated-icon]
   [app.main.ui.notifications.badge :refer [badge-notification]]
+   [app.render-wasm.api :as wasm.api]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.keyboard :as kbd]
+   [app.util.timers :as timers]
   [cuerdas.core :as str]
   [okulary.core :as l]
   [rumext.v2 :as mf]))
@@ -52,6 +55,8 @@
             refs/workspace-data
             =))

+
+
 ;; --- Page Item

 (mf/defc page-item
@@ -63,6 +68,22 @@
        navigate-fn  (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dcm/go-to-workspace :page-id id)))
        read-only?   (mf/use-ctx ctx/workspace-read-only?)

+        on-click
+        (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")
+             (do
+               (wasm.api/capture-canvas-pixels)
+               (wasm.api/apply-canvas-blur)
+               ;; NOTE: it seems we need two RAF so the blur is actually applied and visible
+               ;;       in the canvas :(
+               (timers/raf
+                (fn []
+                  (timers/raf navigate-fn))))
+             (navigate-fn))))
+
        on-delete
        (mf/use-fn
         (mf/deps id)
@@ -155,7 +176,7 @@
                    :selected selected?)
            :data-testid (dm/str "page-" id)
            :tab-index "0"
-            :on-click navigate-fn
+            :on-click on-click
            :on-double-click on-double-click
            :on-context-menu on-context-menu}
      [:div {:class (stl/css :page-icon)}
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
@@ -53,12 +53,10 @@


 (defn- resolve-value
-  [tokens prev-token token-name value]
+  [tokens prev-token value]
  (let [token
        {:value value
-         :name (if (str/blank? token-name)
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}

        tokens
        (-> tokens
@@ -133,7 +131,6 @@

  (let [form       (mf/use-ctx fc/context)
        input-name name
-        token-name (get-in @form [:data :name] nil)


        touched?
@@ -143,9 +140,6 @@
        error
        (get-in @form [:errors input-name])

-        extra-error
-        (get-in @form [:extra-errors input-name])
-
        value
        (get-in @form [:data input-name] "")

@@ -253,20 +247,15 @@
                                  :hint-type (:type hint)})

        props
-        (cond
-          (and error touched?)
+        (if (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 token-name]
+    (mf/with-effect [resolve-stream tokens token input-name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -312,7 +301,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])

@@ -425,10 +414,10 @@
                                  :hint-message (:message error)})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name index value-subfield token-name]
+    (mf/with-effect [resolve-stream tokens token input-name index value-subfield]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs
@@ -49,12 +49,10 @@
 ;; validate data within the form state.

 (defn- resolve-value
-  [tokens prev-token token-name value]
+  [tokens prev-token value]
  (let [token
        {:value (cto/split-font-family value)
-         :name (if (str/blank? token-name)
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}

        tokens
        (-> tokens
@@ -75,7 +73,6 @@
  [{: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)
@@ -155,10 +152,10 @@
                                  :hint-message (:message error)})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name touched? token-name]
+    (mf/with-effect [resolve-stream tokens token input-name touched?]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -203,7 +200,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])

@@ -279,10 +276,10 @@
                                  :hint-message (:message error)})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name token-name]
+    (mf/with-effect [resolve-stream tokens token input-name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
@@ -139,12 +139,10 @@


 (defn- resolve-value
-  [tokens prev-token token-name value]
+  [tokens prev-token value]
  (let [token
        {:value value
-         :name (if (str/blank? token-name)
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}
        tokens
        (-> tokens
            ;; Remove previous token when renaming a token
@@ -165,7 +163,6 @@

  (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)
@@ -209,11 +206,11 @@
                                  :hint-message (:message error)})
          props)]

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

      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -255,7 +252,6 @@

  (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])
@@ -302,10 +298,10 @@
                (mf/spread-props props {:hint-formated true})
                props)]

-    (mf/with-effect [resolve-stream tokens token input-name name token-name]
+    (mf/with-effect [resolve-stream tokens token input-name name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -369,7 +365,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 +410,10 @@
          (mf/spread-props props {:hint-formated true})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name index value-subfield token-name]
+    (mf/with-effect [resolve-stream tokens token input-name index value-subfield]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@@ -14,7 +14,6 @@
   [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]
@@ -111,7 +110,8 @@

        token-title (str/lower (:title token-properties))

-        tokens (mf/deref refs/workspace-all-tokens-map)
+        tokens
+        (mf/deref refs/workspace-active-theme-sets-tokens)

        tokens
        (mf/with-memo [tokens token]
@@ -207,11 +207,7 @@
                                            :value (:value valid-token)
                                            :description description}))
                      (dwtp/propagate-workspace-tokens)
-                      (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}))))))))]
+                      (modal/hide))))))))]

    [:> fc/form* {:class (stl/css :form-wrapper)
                  :form form
--- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
@@ -312,6 +312,11 @@
                                         (js/console.error "Error initializing canvas context:" e)
                                         false))]
                           (reset! canvas-init? init?)
+                           (when init?
+                             ;; Restore previous canvas pixels immediately after context initialization
+                             ;; This happens before initialize-viewport is called
+                             (wasm.api/apply-canvas-blur)
+                             (wasm.api/restore-previous-canvas-pixels))
                           (when-not init?
                             (js/alert "WebGL not supported")
                             (st/emit! (dcm/go-to-dashboard-recent))))))))
@@ -340,6 +345,7 @@

    (mf/with-effect [@canvas-init? zoom vbox background]
      (when (and @canvas-init? (not @initialized?))
+        (wasm.api/clear-canvas-pixels)
        (wasm.api/initialize-viewport base-objects zoom vbox background)
        (reset! initialized? true)))

--- a/frontend/src/app/render.cljs
+++ b/frontend/src/app/render.cljs
@@ -63,7 +63,7 @@

 (mf/defc object-svg
  {::mf/wrap-props false}
-  [{:keys [object-id embed skip-children]}]
+  [{:keys [object-id embed skip-children wasm]}]
  (let [objects (mf/deref ref:objects)]

    ;; Set the globa CSS to assign the page size, needed for PDF
@@ -77,27 +77,42 @@
                   (mth/ceil height) "px")}))))

    (when objects
-      [:& (mf/provider ctx/is-render?) {:value true}
-       [:& render/object-svg
-        {:objects objects
-         :object-id object-id
-         :embed embed
-         :skip-children skip-children}]])))
+      (if wasm
+        [:& render/object-wasm
+         {:objects objects
+          :object-id object-id
+          :embed embed
+          :skip-children skip-children}]

-(mf/defc objects-svg
-  {::mf/wrap-props false}
-  [{:keys [object-ids embed skip-children]}]
-  (when-let [objects (mf/deref ref:objects)]
-    (for [object-id object-ids]
-      (let [objects (render/adapt-objects-for-shape objects object-id)]
        [:& (mf/provider ctx/is-render?) {:value true}
         [:& render/object-svg
          {:objects objects
-           :key (str object-id)
           :object-id object-id
           :embed embed
           :skip-children skip-children}]]))))

+(mf/defc objects-svg
+  {::mf/wrap-props false}
+  [{:keys [object-ids embed skip-children wasm]}]
+  (when-let [objects (mf/deref ref:objects)]
+    (for [object-id object-ids]
+      (let [objects (render/adapt-objects-for-shape objects object-id)]
+        (if wasm
+          [:& render/object-wasm
+           {:objects objects
+            :key (str object-id)
+            :object-id object-id
+            :embed embed
+            :skip-children skip-children}]
+
+          [:& (mf/provider ctx/is-render?) {:value true}
+           [:& render/object-svg
+            {:objects objects
+             :key (str object-id)
+             :object-id object-id
+             :embed embed
+             :skip-children skip-children}]])))))
+
 (defn- fetch-objects-bundle
  [& {:keys [file-id page-id share-id object-id] :as options}]
  (ptk/reify ::fetch-objects-bundle
@@ -136,7 +151,7 @@
 (defn- render-objects
  [params]
  (try
-    (let [{:keys [file-id page-id embed share-id object-id skip-children] :as params}
+    (let [{:keys [file-id page-id embed share-id object-id skip-children wasm] :as params}
          (coerce-render-objects-params params)]
      (st/emit! (fetch-objects-bundle :file-id file-id :page-id page-id :share-id share-id :object-id object-id))
      (if (uuid? object-id)
@@ -147,7 +162,8 @@
           :share-id share-id
           :object-id object-id
           :embed embed
-           :skip-children skip-children}])
+           :skip-children skip-children
+           :wasm wasm}])

        (mf/html
         [:& objects-svg
@@ -156,7 +172,8 @@
           :share-id share-id
           :object-ids (into #{} object-id)
           :embed embed
-           :skip-children skip-children}])))
+           :skip-children skip-children
+           :wasm wasm}])))
    (catch :default cause
      (when-let [explain (-> cause ex-data ::sm/explain)]
        (js/console.log "Unexpected error")
@@ -307,6 +324,3 @@
 (defn ^:dev/after-load after-load
  []
  (reinit))
-
-
-
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -10,6 +10,7 @@
   ["react-dom/server" :as rds]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
+   [app.common.exceptions :as ex]
   [app.common.files.helpers :as cfh]
   [app.common.logging :as log]
   [app.common.math :as mth]
@@ -21,14 +22,13 @@
   [app.common.types.text :as txt]
   [app.common.uuid :as uuid]
   [app.config :as cf]
-   [app.main.data.render-wasm :as drw]
   [app.main.refs :as refs]
-   [app.main.render :as render]
   [app.main.store :as st]
   [app.main.ui.shapes.text]
   [app.main.worker :as mw]
   [app.render-wasm.api.fonts :as f]
   [app.render-wasm.api.texts :as t]
+   [app.render-wasm.api.webgl :as webgl]
   [app.render-wasm.deserializers :as dr]
   [app.render-wasm.helpers :as h]
   [app.render-wasm.mem :as mem]
@@ -37,7 +37,6 @@
   [app.render-wasm.serializers :as sr]
   [app.render-wasm.serializers.color :as sr-clr]
   [app.render-wasm.svg-filters :as svg-filters]
-   ;; FIXME: rename; confunsing name
   [app.render-wasm.wasm :as wasm]
   [app.util.debug :as dbg]
   [app.util.dom :as dom]
@@ -74,6 +73,9 @@
 (def noop-fn
  (constantly nil))

+;;
+(def shape-wrapper-factory nil)
+
 ;; Based on app.main.render/object-svg
 (mf/defc object-svg
  {::mf/props :obj}
@@ -81,7 +83,7 @@
  (let [objects (mf/deref refs/workspace-page-objects)
        shape-wrapper
        (mf/with-memo [shape]
-          (render/shape-wrapper-factory objects))]
+          (shape-wrapper-factory objects))]

    [:svg {:version "1.1"
           :xmlns "http://www.w3.org/2000/svg"
@@ -279,30 +281,6 @@
  [string]
  (+ (count string) 1))

-(defn- create-webgl-texture-from-image
-  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
-  [gl image-element]
-  (let [texture (.createTexture ^js gl)]
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
-    texture))
-
-(defn- get-webgl-context
-  "Gets the WebGL context from the WASM module"
-  []
-  (when wasm/context-initialized?
-    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
-      (when gl-obj
-        ;; Get the current WebGL context from Emscripten
-        ;; The GL object has a currentContext property that contains the context handle
-        (let [current-ctx (.-currentContext ^js gl-obj)]
-          (when current-ctx
-            (.-GLctx ^js current-ctx)))))))

 (defn- get-texture-id-for-gl-object
  "Registers a WebGL texture with Emscripten's GL object system and returns its ID"
@@ -332,8 +310,8 @@
       (->> (retrieve-image url)
            (rx/map
             (fn [img]
-               (when-let [gl (get-webgl-context)]
-                 (let [texture (create-webgl-texture-from-image gl img)
+               (when-let [gl (webgl/get-webgl-context)]
+                 (let [texture (webgl/create-webgl-texture-from-image gl img)
                       texture-id (get-texture-id-for-gl-object texture)
                       width  (.-width ^js img)
                       height (.-height ^js img)
@@ -915,84 +893,86 @@
 (defn set-object
  [shape]
  (perf/begin-measure "set-object")
-  (let [shape        (svg-filters/apply-svg-derived shape)
-        id           (dm/get-prop shape :id)
-        type         (dm/get-prop shape :type)
+  (when shape
+    (let [shape        (svg-filters/apply-svg-derived shape)
+          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)
+          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)
-                         content))
-        bool-type    (get shape :bool-type)
-        grow-type    (get shape :grow-type)
-        blur         (get shape :blur)
-        svg-attrs    (get shape :svg-attrs)
-        shadows      (get shape :shadow)
-        corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]
+          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)
+                           content))
+          bool-type    (get shape :bool-type)
+          grow-type    (get shape :grow-type)
+          blur         (get shape :blur)
+          svg-attrs    (get shape :svg-attrs)
+          shadows      (get shape :shadow)
+          corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]

-    (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)
+      (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)

-    (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)))
-    (when (= type :bool)
-      (set-shape-bool-type bool-type))
-    (when (and (some? content)
-               (or (= type :path)
-                   (= type :bool)))
-      (set-shape-path-content content))
-    (when (some? svg-attrs)
-      (set-shape-svg-attrs svg-attrs))
-    (when (and (some? content) (= type :svg-raw))
-      (set-shape-svg-raw-content (get-static-markup shape)))
-    (set-shape-shadows shadows)
-    (when (= type :text)
-      (set-shape-grow-type grow-type))
+      (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)))
+      (when (= type :bool)
+        (set-shape-bool-type bool-type))
+      (when (and (some? content)
+                 (or (= type :path)
+                     (= type :bool)))
+        (set-shape-path-content content))
+      (when (some? svg-attrs)
+        (set-shape-svg-attrs svg-attrs))
+      (when (and (some? content) (= type :svg-raw))
+        (set-shape-svg-raw-content (get-static-markup shape)))
+      (set-shape-shadows shadows)
+      (when (= type :text)
+        (set-shape-grow-type grow-type))

-    (set-shape-layout shape)
-    (set-shape-selrect selrect)
+      (set-shape-layout shape)
+      (set-layout-data shape)
+      (set-shape-selrect selrect)

-    (let [pending_thumbnails (into [] (concat
-                                       (set-shape-text-content id content)
-                                       (set-shape-text-images id content true)
-                                       (set-shape-fills id fills true)
-                                       (set-shape-strokes id strokes true)))
-          pending_full (into [] (concat
-                                 (set-shape-text-images id content false)
-                                 (set-shape-fills id fills false)
-                                 (set-shape-strokes id strokes false)))]
-      (perf/end-measure "set-object")
-      {:thumbnails pending_thumbnails
-       :full pending_full})))
+      (let [pending_thumbnails (into [] (concat
+                                         (set-shape-text-content id content)
+                                         (set-shape-text-images id content true)
+                                         (set-shape-fills id fills true)
+                                         (set-shape-strokes id strokes true)))
+            pending_full (into [] (concat
+                                   (set-shape-text-images id content false)
+                                   (set-shape-fills id fills false)
+                                   (set-shape-strokes id strokes false)))]
+        (perf/end-measure "set-object")
+        {:thumbnails pending_thumbnails
+         :full pending_full}))))

 (defn update-text-layouts
  [shapes]
@@ -1055,8 +1035,9 @@
     (perf/end-measure "set-objects")
     (process-pending shapes thumbnails full noop-fn
                      (fn []
-                        (when render-callback (render-callback))
-                        (render-finish)
+                        (if render-callback
+                          (render-callback)
+                          (render-finish))
                        (ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))

 (defn clear-focus-mode
@@ -1236,7 +1217,8 @@
  (dom/prevent-default event)
  (reset! wasm/context-lost? true)
  (log/warn :hint "WebGL context lost")
-  (st/emit! (drw/context-lost)))
+  (ex/raise :type :webgl-context-lost
+            :hint "WebGL context lost"))

 (defn init-canvas-context
  [canvas]
@@ -1383,8 +1365,9 @@
        all-children
        (->> ids
             (mapcat #(cfh/get-children-with-self objects %)))]
+
    (h/call wasm/internal-module "_init_shapes_pool" (count all-children))
-    (run! (partial set-object objects) all-children)
+    (run! set-object all-children)

    (let [content (-> (calculate-bool* bool-type ids)
                      (path.impl/path-data))]
@@ -1447,6 +1430,41 @@

      result)))

+(defn apply-canvas-blur
+  []
+  (when wasm/canvas
+    (dom/set-style! wasm/canvas "filter" "blur(4px)")))
+
+(defn render-shape-pixels
+  [shape-id scale]
+  (let [buffer (uuid/get-u32 shape-id)
+
+        offset
+        (h/call wasm/internal-module "_render_shape_pixels"
+                (aget buffer 0)
+                (aget buffer 1)
+                (aget buffer 2)
+                (aget buffer 3)
+                scale)
+
+        offset-32
+        (mem/->offset-32 offset)
+
+        heap (mem/get-heap-u8)
+        heapu32 (mem/get-heap-u32)
+
+        length (aget heapu32 (mem/->offset-32 offset))
+        width (aget heapu32 (+ (mem/->offset-32 offset) 1))
+        height (aget heapu32 (+ (mem/->offset-32 offset) 2))
+
+        result
+        (dr/read-image-bytes heap (+ offset 12) length)
+        ]
+
+    (mem/free)
+    result
+    ))
+
 (defn init-wasm-module
  [module]
  (let [default-fn (unchecked-get module "default")
@@ -1468,3 +1486,8 @@
                (js/console.error cause)
                (p/resolved false)))))
      (p/resolved false))))
+
+;; Re-export public WebGL functions
+(def capture-canvas-pixels webgl/capture-canvas-pixels)
+(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
+(def clear-canvas-pixels webgl/clear-canvas-pixels)
--- a/frontend/src/app/render_wasm/api/webgl.cljs
+++ b/frontend/src/app/render_wasm/api/webgl.cljs
@@ -0,0 +1,166 @@
+;; 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.webgl
+  "WebGL utilities for pixel capture and rendering"
+  (:require
+   [app.common.logging :as log]
+   [app.render-wasm.wasm :as wasm]
+   [app.util.dom :as dom]))
+
+(defn get-webgl-context
+  "Gets the WebGL context from the WASM module"
+  []
+  (when wasm/context-initialized?
+    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
+      (when gl-obj
+        ;; Get the current WebGL context from Emscripten
+        ;; The GL object has a currentContext property that contains the context handle
+        (let [current-ctx (.-currentContext ^js gl-obj)]
+          (when current-ctx
+            (.-GLctx ^js current-ctx)))))))
+
+(defn create-webgl-texture-from-image
+  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
+  [gl image-element]
+  (let [texture (.createTexture ^js gl)]
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+    texture))
+
+;; FIXME: temporary function until we are able to keep the same <canvas> across pages.
+(defn- draw-imagedata-to-webgl
+  "Draws ImageData to a WebGL2 context by creating a texture"
+  [gl image-data]
+  (let [width (.-width ^js image-data)
+        height (.-height ^js image-data)
+        texture (.createTexture ^js gl)]
+    ;; Bind texture and set parameters
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-data)
+
+    ;; Set up viewport
+    (.viewport ^js gl 0 0 width height)
+
+    ;; Vertex & Fragment shaders
+    ;; Since we are only calling this function once (on page switch), we don't need
+    ;; to cache the compiled shaders somewhere else (cannot be reused in a differen context).
+    (let [vertex-shader-source "#version 300 es
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}"
+          fragment-shader-source "#version 300 es
+precision highp float;
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+out vec4 fragColor;
+void main() {
+  fragColor = texture(u_texture, v_texCoord);
+}"
+          vertex-shader (.createShader ^js gl (.-VERTEX_SHADER ^js gl))
+          fragment-shader (.createShader ^js gl (.-FRAGMENT_SHADER ^js gl))
+          program (.createProgram ^js gl)]
+      (.shaderSource ^js gl vertex-shader vertex-shader-source)
+      (.compileShader ^js gl vertex-shader)
+      (when-not (.getShaderParameter ^js gl vertex-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Vertex shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl vertex-shader)))
+
+      (.shaderSource ^js gl fragment-shader fragment-shader-source)
+      (.compileShader ^js gl fragment-shader)
+      (when-not (.getShaderParameter ^js gl fragment-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Fragment shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl fragment-shader)))
+
+      (.attachShader ^js gl program vertex-shader)
+      (.attachShader ^js gl program fragment-shader)
+      (.linkProgram ^js gl program)
+
+      (if (.getProgramParameter ^js gl program (.-LINK_STATUS ^js gl))
+        (do
+          (.useProgram ^js gl program)
+
+          ;; Create full-screen quad vertices (normalized device coordinates)
+          (let [position-location (.getAttribLocation ^js gl program "a_position")
+                texcoord-location (.getAttribLocation ^js gl program "a_texCoord")
+                position-buffer (.createBuffer ^js gl)
+                texcoord-buffer (.createBuffer ^js gl)
+                positions #js [-1.0 -1.0  1.0 -1.0  -1.0 1.0  -1.0 1.0  1.0 -1.0  1.0 1.0]
+                texcoords #js [0.0 0.0  1.0 0.0  0.0 1.0  0.0 1.0  1.0 0.0  1.0 1.0]]
+            ;; Set up position buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) position-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. positions) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl position-location)
+            (.vertexAttribPointer ^js gl position-location 2 (.-FLOAT ^js gl) false 0 0)
+           ;; Set up texcoord buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) texcoord-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. texcoords) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl texcoord-location)
+            (.vertexAttribPointer ^js gl texcoord-location 2 (.-FLOAT ^js gl) false 0 0)
+            ;; Set texture uniform
+            (.activeTexture ^js gl (.-TEXTURE0 ^js gl))
+            (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+            (let [texture-location (.getUniformLocation ^js gl program "u_texture")]
+              (.uniform1i ^js gl texture-location 0))
+
+            ;; draw
+            (.drawArrays ^js gl (.-TRIANGLES ^js gl) 0 6)
+
+            ;; cleanup
+            (.deleteBuffer ^js gl position-buffer)
+            (.deleteBuffer ^js gl texcoord-buffer)
+            (.deleteShader ^js gl vertex-shader)
+            (.deleteShader ^js gl fragment-shader)
+            (.deleteProgram ^js gl program)))
+        (log/error :hint "Program linking failed"
+                   :log (.getProgramInfoLog ^js gl program)))
+
+      (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+      (.deleteTexture ^js gl texture))))
+
+(defn restore-previous-canvas-pixels
+  "Restores previous canvas pixels into the new canvas"
+  []
+  (when-let [previous-canvas-pixels wasm/canvas-pixels]
+    (when-let [gl wasm/gl-context]
+      (draw-imagedata-to-webgl gl previous-canvas-pixels)
+      (set! wasm/canvas-pixels nil))))
+
+(defn clear-canvas-pixels
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context]
+      (.clearColor ^js context 0 0 0 0.0)
+      (.clear ^js context (.-COLOR_BUFFER_BIT ^js context))
+      (.clear ^js context (.-DEPTH_BUFFER_BIT ^js context))
+      (.clear ^js context (.-STENCIL_BUFFER_BIT ^js context)))
+    (dom/set-style! wasm/canvas "filter" "none")
+    (set! wasm/canvas-pixels nil)))
+
+(defn capture-canvas-pixels
+  "Captures the pixels of the viewport canvas"
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context
+          width (.-width wasm/canvas)
+          height (.-height wasm/canvas)
+          buffer (js/Uint8ClampedArray. (* width height  4))
+          _ (.readPixels ^js context 0 0 width height (.-RGBA ^js context) (.-UNSIGNED_BYTE ^js context) buffer)
+          image-data (js/ImageData. buffer width height)]
+      (set! wasm/canvas-pixels image-data))))
--- a/frontend/src/app/render_wasm/deserializers.cljs
+++ b/frontend/src/app/render_wasm/deserializers.cljs
@@ -45,6 +45,12 @@
     :center (gpt/point cx cy)
     :transform (gmt/matrix a b c d e f)}))

+(defn read-image-bytes
+  [heap offset length]
+
+  (.slice ^js heap offset (+ offset length))
+  )
+
 (defn read-position-data-entry
  [heapu32 heapf32 offset]
  (let [paragraph (aget heapu32 (+ offset 0))
--- a/frontend/src/app/render_wasm/shape.cljs
+++ b/frontend/src/app/render_wasm/shape.cljs
@@ -227,7 +227,7 @@
        :svg-attrs
        (do
          (api/set-shape-svg-attrs v)
-          ;; Always update fills/blur/shadow to clear previous state if filters disappear          
+          ;; Always update fills/blur/shadow to clear previous state if filters disappear
          (api/set-shape-fills id (:fills shape) false)
          (api/set-shape-blur (:blur shape))
          (api/set-shape-shadows (:shadow shape)))
@@ -397,12 +397,18 @@
                   (next es))
            (throw (js/Error. "conj on a map takes map entries or seqables of map entries"))))))))

+(def ^:private xf:without-id-and-type
+  (remove (fn [kvpair]
+            (let [k (key kvpair)]
+              (or (= k :id)
+                  (= k :type))))))
+
 (defn create-shape
  "Instanciate a shape from a map"
  [attrs]
  (ShapeProxy. (:id attrs)
               (:type attrs)
-               (dissoc attrs :id :type)))
+               (into {} xf:without-id-and-type attrs)))

 (t/add-handlers!
 ;; We only add a write handler, read handler uses the dynamic dispatch
--- a/frontend/src/app/render_wasm/wasm.cljs
+++ b/frontend/src/app/render_wasm/wasm.cljs
@@ -12,6 +12,8 @@

 ;; Reference to the HTML canvas element.
 (defonce canvas nil)
+;; Reference to the captured pixels of the canvas (for page switching effect)
+(defonce canvas-pixels nil)

 ;; Reference to the Emscripten GL context wrapper.
 (defonce gl-context-handle nil)
@@ -56,3 +58,4 @@
       :stroke-linecap shared/RawStrokeLineCap
       :stroke-linejoin shared/RawStrokeLineJoin
       :fill-rule shared/RawFillRule})
+
--- a/frontend/src/app/worker/index.cljs
+++ b/frontend/src/app/worker/index.cljs
@@ -58,6 +58,8 @@

        (swap! state update ::snap snap/update-page old-page new-page)
        (swap! state update ::selection selection/update-page old-page new-page))
+      (catch :default cause
+        (log/error :hint "error updating page index" :id page-id :cause cause))
      (finally
        (let [elapsed (tpoint)]
          (log/dbg :hint "page index updated" :id page-id :elapsed elapsed ::log/sync? true))))
--- a/frontend/src/app/worker/thumbnails.cljs
+++ b/frontend/src/app/worker/thumbnails.cljs
@@ -179,6 +179,7 @@

                      (->> (render-canvas-blob canvas width height bgcolor)
                           (p/fnly (fn [data cause]
+                                     (wasm.api/clear-canvas)
                                     (if cause
                                       (rx/error! subs cause)
                                       (rx/push! subs
--- a/frontend/src/debug.cljs
+++ b/frontend/src/debug.cljs
@@ -6,6 +6,8 @@

 (ns debug
  (:require
+   [app.render-wasm.wasm :as wasm]
+   [app.render-wasm.api :as wasm.api]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.files.repair :as cfr]
@@ -456,3 +458,21 @@
 (defn ^:export network-averages
  []
  (.log js/console (clj->js @http/network-averages)))
+
+(defn ^:export export-image
+  []
+
+  (let [objects (dsh/lookup-page-objects @st/state)
+        shape-id  (->> (get-selected @st/state) first)
+        bytes (wasm.api/render-shape-pixels shape-id 3.0)
+
+        blob (js/Blob. #js [bytes] #js {:type "image/png"})
+        url (.createObjectURL js/URL blob)
+
+        a (.createElement js/document "a")]
+    (set! (.-href a) url)
+    (set! (.-download a) "export.png")
+    (.click a)
+    (.revokeObjectURL js/URL url)
+    
+    nil))
--- a/frontend/text-editor/src/editor/controllers/SelectionController.js
+++ b/frontend/text-editor/src/editor/controllers/SelectionController.js
@@ -242,7 +242,6 @@ export class SelectionController extends EventTarget {
        continue;
      }
      let styleValue = element.style.getPropertyValue(styleName);
-
      if (styleName === "font-family") {
        styleValue = sanitizeFontFamily(styleValue);
      }
@@ -277,22 +276,29 @@ export class SelectionController extends EventTarget {
    this.#applyDefaultStylesToCurrentStyle();
    const root = startNode.parentElement.parentElement.parentElement;
    this.#applyStylesFromElementToCurrentStyle(root);
-    // FIXME: I don't like this approximation. Having to iterate nodes twice
-    // is bad for performance. I think we need another way of "computing"
-    // the cascade.
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const paragraph = textNode.parentElement.parentElement;
+    if (startNode === endNode) {
+      const paragraph = startNode.parentElement.parentElement;
      this.#applyStylesFromElementToCurrentStyle(paragraph);
-    }
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const textSpan = textNode.parentElement;
-      this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      const textSpan = startNode.parentElement;
+      this.#applyStylesFromElementToCurrentStyle(textSpan);
+    } else {
+      // FIXME: I don't like this approximation. Having to iterate nodes twice
+      // is bad for performance. I think we need another way of "computing"
+      // the cascade.
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const paragraph = textNode.parentElement.parentElement;
+        this.#applyStylesFromElementToCurrentStyle(paragraph);
+      }
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const textSpan = textNode.parentElement;
+        this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      }
    }
    return this;
  }
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -1559,6 +1559,12 @@ msgstr "Old password is incorrect"
 msgid "feedback.description"
 msgstr "Description"

+msgid "errors.webgl-context-lost.main-message"
+msgstr "Oops! The canvas context was lost"
+
+msgid "errors.webgl-context-lost.desc-message"
+msgstr "WebGL has stopped working. Please reload the page to reset it"
+
 #: src/app/main/ui/settings/feedback.cljs:122
 msgid "feedback.description-placeholder"
 msgstr "Please describe the reason of your feedback"
@@ -2521,6 +2527,9 @@ msgstr "Release notes"
 msgid "labels.reload-file"
 msgstr "Reload file"

+msgid "labels.reload-page"
+msgstr "Reload page"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -1552,6 +1552,12 @@ msgstr "El email o la contraseña son incorrectos."
 msgid "errors.wrong-old-password"
 msgstr "La contraseña anterior no es correcta"

+msgid "errors.webgl-context-lost.main-message"
+msgstr "Ups! Se ha perdido el contexto del canvas"
+
+msgid "errors.webgl-context-lost.desc-message"
+msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaurarlo"
+
 #: src/app/main/ui/settings/feedback.cljs:120
 msgid "feedback.description"
 msgstr "Descripción"
@@ -2502,6 +2508,9 @@ msgstr "Notas de versión"
 msgid "labels.reload-file"
 msgstr "Recargar archivo"

+msgid "labels.reload-page"
+msgstr "Recargar página"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1191,21 +1191,21 @@ __metadata:
  languageName: node
  linkType: soft

-"@penpot/plugin-types@npm:^1.4.2":
-  version: 1.4.2
-  resolution: "@penpot/plugin-types@npm:1.4.2"
-  checksum: 10c0/b0972fe75c97e697eb1044c89db660393886b3c30676f8436ff4ab56c5bf0397b2c675697ae1b9c5fe40bc95a803aecf6d7ac356dbf6d3535bf8baec5d05eab1
+"@penpot/plugin-types@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "@penpot/plugin-types@npm:1.3.2"
+  checksum: 10c0/3f624472c260721ad89bf8d944e75acf6a9c9577271a757acb77574102213914051d1a32d5ab16e6ba16ae077fff78cf7a0f6d11d18351dfc214426677a67468
  languageName: node
  linkType: hard

-"@penpot/plugins-runtime@npm:1.4.2":
-  version: 1.4.2
-  resolution: "@penpot/plugins-runtime@npm:1.4.2"
+"@penpot/plugins-runtime@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@penpot/plugins-runtime@npm:1.3.2"
  dependencies:
-    "@penpot/plugin-types": "npm:^1.4.2"
+    "@penpot/plugin-types": "npm:^1.3.2"
    ses: "npm:^1.1.0"
    zod: "npm:^3.22.4"
-  checksum: 10c0/af084d906cce9a6dea956fe5420111d7ea37c7620737a1e3d4f12958cb302a8f697c1229c237107c28fbb3b9f37eee308e6d16262b04ad56ae6f76c7a12f12e5
+  checksum: 10c0/b6d2cb3a57bcbe58232db52b8224d1817495e96b34997bfa72421629b5f34a8c9cc71357c315dcab9d52ea036ed632a5efe0ac50f52e730901c02d498dfa1313
  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.4.2"
+    "@penpot/plugins-runtime": "npm:1.3.2"
    "@penpot/svgo": "penpot/svgo#v3.2"
    "@penpot/text-editor": "portal:./text-editor"
    "@playwright/test": "npm:1.57.0"
--- a/plugins/CHANGELOG.md
+++ b/plugins/CHANGELOG.md
@@ -1,38 +1,3 @@
-## 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
--- a/plugins/docs/publish-package.md
+++ b/plugins/docs/publish-package.md
@@ -7,29 +7,6 @@ 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
@@ -58,16 +35,28 @@ 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
--- a/plugins/libs/plugin-types/package.json
+++ b/plugins/libs/plugin-types/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@penpot/plugin-types",
-  "version": "1.4.2",
+  "version": "1.3.2",
  "typings": "./index.d.ts",
  "type": "module"
 }
--- a/plugins/libs/plugins-runtime/package.json
+++ b/plugins/libs/plugins-runtime/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@penpot/plugins-runtime",
-  "version": "1.4.2",
+  "version": "1.3.2",
  "dependencies": {
-    "@penpot/plugin-types": "^1.4.2",
+    "@penpot/plugin-types": "^1.3.2",
    "ses": "^1.1.0",
    "zod": "^3.22.4"
  },
--- a/plugins/libs/plugins-runtime/src/lib/create-sandbox.ts
+++ b/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.bind(null)),
-    btoa: ses.harden(window.btoa.bind(null)),
+    atob: ses.harden(window.atob),
+    btoa: ses.harden(window.btoa),
    structuredClone: ses.harden(window.structuredClone),
  };

--- a/plugins/libs/plugins-styles/package.json
+++ b/plugins/libs/plugins-styles/package.json
@@ -1,5 +1,5 @@
 {
  "name": "@penpot/plugin-styles",
-  "version": "1.4.2",
+  "version": "1.3.2",
  "dependencies": {}
 }
--- a/plugins/pnpm-lock.yaml
+++ b/plugins/pnpm-lock.yaml
@@ -230,8 +230,8 @@ importers:
  libs/plugins-runtime:
    dependencies:
      '@penpot/plugin-types':
-        specifier: ^1.4.2
-        version: link:../plugin-types
+        specifier: ^1.3.2
+        version: 1.3.2
      ses:
        specifier: ^1.1.0
        version: 1.14.0
@@ -4200,6 +4200,12 @@ 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:
      {
@@ -13188,7 +13194,6 @@ 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:
@@ -13196,7 +13201,6 @@ 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:
@@ -18199,6 +18203,8 @@ 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
--- a/plugins/tools/scripts/publish.ts
+++ b/plugins/tools/scripts/publish.ts
@@ -69,6 +69,17 @@ 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,
--- a/render-wasm/src/main.rs
+++ b/render-wasm/src/main.rs
@@ -284,6 +284,7 @@ pub extern "C" fn set_view_end() {
            performance::end_measure!("set_view_end::clear_tile_index");
            performance::end_timed_log!("clear_tile_index", _clear_start);
        }
+        state.render_state.sync_cached_viewbox();
        performance::end_measure!("set_view_end");
        performance::end_timed_log!("set_view_end", _end_start);
        #[cfg(feature = "profile-macros")]
@@ -738,6 +739,25 @@ pub extern "C" fn end_temp_objects() {
    }
 }

+#[no_mangle]
+pub extern "C" fn render_shape_pixels(a: u32, b: u32, c: u32, d: u32, scale: f32) -> *mut u8 {
+    let id = uuid_from_u32_quartet(a, b, c, d);
+
+    with_state_mut!(state, {
+        let (data, width, height) = state.render_shape_pixels(&id, scale, performance::get_time())
+            .expect("Cannot render into texture");
+
+        let len = data.len() as u32;
+        let mut buf = Vec::with_capacity(4 + data.len());
+        buf.extend_from_slice(&len.to_le_bytes());
+        buf.extend_from_slice(&width.to_le_bytes());
+        buf.extend_from_slice(&height.to_le_bytes());
+        buf.extend_from_slice(&data);
+        mem::write_bytes(buf)
+    })
+}
+
+
 fn main() {
    #[cfg(target_arch = "wasm32")]
    init_gl!();
--- a/render-wasm/src/render.rs
+++ b/render-wasm/src/render.rs
--- a/render-wasm/src/render/fills.rs
+++ b/render-wasm/src/render/fills.rs
@@ -18,7 +18,7 @@ fn draw_image_fill(
    }

    let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
    let container = &shape.selrect;
    let path_transform = shape.to_path_transform();

--- a/render-wasm/src/render/filters.rs
+++ b/render-wasm/src/render/filters.rs
@@ -41,7 +41,7 @@ where
    F: FnOnce(&mut RenderState, SurfaceId),
 {
    if let Some((image, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
-        let canvas = render_state.surfaces.canvas(target_surface);
+        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 {
--- a/render-wasm/src/render/gpu_state.rs
+++ b/render-wasm/src/render/gpu_state.rs
@@ -104,4 +104,38 @@ impl GpuState {
        )
        .unwrap()
    }
+
+    #[allow(dead_code)]
+    pub fn create_surface_from_texture(
+        &mut self,
+        width: i32,
+        height: i32,
+        texture_id: u32
+    ) -> skia::Surface {
+        let texture_info = TextureInfo {
+            target: gl::TEXTURE_2D,
+            id: texture_id,
+            format: gl::RGBA8,
+            protected: skia::gpu::Protected::No,
+        };
+
+        let backend_texture = unsafe{
+            gpu::backend_textures::make_gl(
+                (width, height),
+                gpu::Mipmapped::No,
+                texture_info,
+                String::from("export_texture"))
+        };
+
+        gpu::surfaces::wrap_backend_texture(
+            &mut self.context,
+            &backend_texture,
+            gpu::SurfaceOrigin::BottomLeft,
+            None,
+            skia::ColorType::RGBA8888,
+            None,
+            None,
+        ).unwrap()
+    }
+
 }
--- a/render-wasm/src/render/shadows.rs
+++ b/render-wasm/src/render/shadows.rs
@@ -135,7 +135,7 @@ pub fn render_text_shadows(

    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::TextDropShadows));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::TextDropShadows));

    for shadow in shadows {
        let shadow_layer = SaveLayerRec::default().paint(shadow);
--- a/render-wasm/src/render/strokes.rs
+++ b/render-wasm/src/render/strokes.rs
@@ -387,7 +387,7 @@ fn draw_image_stroke_in_container(
    }

    let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
    let container = &shape.selrect;
    let path_transform = shape.to_path_transform();
    let svg_attrs = shape.svg_attrs.as_ref();
@@ -606,7 +606,7 @@ fn render_internal(

    let scale = render_state.get_scale();
    let target_surface = surface_id.unwrap_or(SurfaceId::Strokes);
-    let canvas = render_state.surfaces.canvas(target_surface);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
    let selrect = shape.selrect;
    let path_transform = shape.to_path_transform();
    let svg_attrs = shape.svg_attrs.as_ref();
@@ -688,7 +688,7 @@ pub fn render_text_paths(
    let scale = render_state.get_scale();
    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Strokes));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Strokes));
    let selrect = &shape.selrect;
    let svg_attrs = shape.svg_attrs.as_ref();
    let mut paint: skia_safe::Handle<_> =
--- a/render-wasm/src/render/surfaces.rs
+++ b/render-wasm/src/render/surfaces.rs
@@ -17,17 +17,18 @@ const TILE_SIZE_MULTIPLIER: i32 = 2;
 #[repr(u32)]
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub enum SurfaceId {
-    Target = 0b00_0000_0001,
-    Filter = 0b00_0000_0010,
-    Cache = 0b00_0000_0100,
-    Current = 0b00_0000_1000,
-    Fills = 0b00_0001_0000,
-    Strokes = 0b00_0010_0000,
-    DropShadows = 0b00_0100_0000,
-    InnerShadows = 0b00_1000_0000,
-    TextDropShadows = 0b01_0000_0000,
-    UI = 0b10_0000_0000,
-    Debug = 0b10_0000_0001,
+    Target          = 0b000_0000_0001,
+    Filter          = 0b000_0000_0010,
+    Cache           = 0b000_0000_0100,
+    Current         = 0b000_0000_1000,
+    Fills           = 0b000_0001_0000,
+    Strokes         = 0b000_0010_0000,
+    DropShadows     = 0b000_0100_0000,
+    InnerShadows    = 0b000_1000_0000,
+    TextDropShadows = 0b001_0000_0000,
+    Export          = 0b010_0000_0000,
+    UI              = 0b100_0000_0000,
+    Debug           = 0b100_0000_0001,
 }

 pub struct Surfaces {
@@ -52,9 +53,15 @@ pub struct Surfaces {
    // for drawing debug info.
    debug: skia::Surface,
    // for drawing tiles.
+    export: skia::Surface,
+
    tiles: TileTextureCache,
    sampling_options: skia::SamplingOptions,
-    margins: skia::ISize,
+    pub margins: skia::ISize,
+    // Tracks which surfaces have content (dirty flag bitmask)
+    dirty_surfaces: u32,
+
+    extra_tile_dims: skia::ISize,
 }

 #[allow(dead_code)]
@@ -75,6 +82,7 @@ impl Surfaces {
        let filter = gpu_state.create_surface_with_dimensions("filter".to_string(), width, height);
        let cache = gpu_state.create_surface_with_dimensions("cache".to_string(), width, height);
        let current = gpu_state.create_surface_with_isize("current".to_string(), extra_tile_dims);
+
        let drop_shadows =
            gpu_state.create_surface_with_isize("drop_shadows".to_string(), extra_tile_dims);
        let inner_shadows =
@@ -85,10 +93,13 @@ impl Surfaces {
            gpu_state.create_surface_with_isize("shape_fills".to_string(), extra_tile_dims);
        let shape_strokes =
            gpu_state.create_surface_with_isize("shape_strokes".to_string(), extra_tile_dims);
+        let export =
+            gpu_state.create_surface_with_isize("export".to_string(), extra_tile_dims);

        let ui = gpu_state.create_surface_with_dimensions("ui".to_string(), width, height);
        let debug = gpu_state.create_surface_with_dimensions("debug".to_string(), width, height);

+
        let tiles = TileTextureCache::new();
        Surfaces {
            target,
@@ -102,9 +113,12 @@ impl Surfaces {
            shape_strokes,
            ui,
            debug,
+            export,
            tiles,
            sampling_options,
            margins,
+            dirty_surfaces: 0,
+            extra_tile_dims
        }
    }

@@ -147,10 +161,51 @@ impl Surfaces {
        None
    }

+    /// Returns a mutable reference to the canvas and automatically marks
+    /// render surfaces as dirty when accessed. This tracks which surfaces
+    /// have content for optimization purposes.
+    pub fn canvas_and_mark_dirty(&mut self, id: SurfaceId) -> &skia::Canvas {
+        // Automatically mark render surfaces as dirty when accessed
+        // This tracks which surfaces have content for optimization
+        match id {
+            SurfaceId::Fills
+            | SurfaceId::Strokes
+            | SurfaceId::InnerShadows
+            | SurfaceId::TextDropShadows => {
+                self.mark_dirty(id);
+            }
+            _ => {}
+        }
+        self.canvas(id)
+    }
+
+    /// Returns a mutable reference to the canvas without any side effects.
+    /// Use this when you only need to read or manipulate the canvas state
+    /// without marking the surface as dirty.
    pub fn canvas(&mut self, id: SurfaceId) -> &skia::Canvas {
        self.get_mut(id).canvas()
    }

+    /// Marks a surface as having content (dirty)
+    pub fn mark_dirty(&mut self, id: SurfaceId) {
+        self.dirty_surfaces |= id as u32;
+    }
+
+    /// Checks if a surface has content
+    pub fn is_dirty(&self, id: SurfaceId) -> bool {
+        (self.dirty_surfaces & id as u32) != 0
+    }
+
+    /// Clears the dirty flag for a surface or set of surfaces
+    pub fn clear_dirty(&mut self, ids: u32) {
+        self.dirty_surfaces &= !ids;
+    }
+
+    /// Clears all dirty flags
+    pub fn clear_all_dirty(&mut self) {
+        self.dirty_surfaces = 0;
+    }
+
    pub fn flush_and_submit(&mut self, gpu_state: &mut GpuState, id: SurfaceId) {
        let surface = self.get_mut(id);
        gpu_state.context.flush_and_submit_surface(surface, None);
@@ -159,9 +214,12 @@ impl Surfaces {
    pub fn draw_into(&mut self, from: SurfaceId, to: SurfaceId, paint: Option<&skia::Paint>) {
        let sampling_options = self.sampling_options;

-        self.get_mut(from)
-            .clone()
-            .draw(self.canvas(to), (0.0, 0.0), sampling_options, paint);
+        self.get_mut(from).clone().draw(
+            self.canvas_and_mark_dirty(to),
+            (0.0, 0.0),
+            sampling_options,
+            paint,
+        );
    }

    pub fn apply_mut(&mut self, ids: u32, mut f: impl FnMut(&mut skia::Surface)) {
@@ -196,6 +254,9 @@ impl Surfaces {
        if ids & SurfaceId::Debug as u32 != 0 {
            f(self.get_mut(SurfaceId::Debug));
        }
+        if ids & SurfaceId::Export as u32 != 0 {
+            f(self.get_mut(SurfaceId::Export));
+        }
        performance::begin_measure!("apply_mut::flags");
    }

@@ -212,22 +273,38 @@ impl Surfaces {

    pub fn update_render_context(&mut self, render_area: skia::Rect, scale: f32) {
        let translation = self.get_render_context_translation(render_area, scale);
-        self.apply_mut(
-            SurfaceId::Fills as u32
-                | SurfaceId::Strokes as u32
-                | SurfaceId::InnerShadows as u32
-                | SurfaceId::TextDropShadows as u32,
-            |s| {
-                let canvas = s.canvas();
-                canvas.reset_matrix();
-                canvas.scale((scale, scale));
-                canvas.translate(translation);
-            },
-        );
+
+        // When context changes (zoom/pan/tile), clear all render surfaces first
+        // to remove any residual content from previous tiles, then mark as dirty
+        // so they get redrawn with new transformations
+        let surface_ids = SurfaceId::Fills as u32
+            | SurfaceId::Strokes as u32
+            | SurfaceId::InnerShadows as u32
+            | SurfaceId::TextDropShadows as u32;
+
+
+        // Clear surfaces before updating transformations to remove residual content
+        self.apply_mut(surface_ids, |s| {
+            s.canvas().clear(skia::Color::TRANSPARENT);
+        });
+
+        // Mark all render surfaces as dirty so they get redrawn
+        self.mark_dirty(SurfaceId::Fills);
+        self.mark_dirty(SurfaceId::Strokes);
+        self.mark_dirty(SurfaceId::InnerShadows);
+        self.mark_dirty(SurfaceId::TextDropShadows);
+
+        // Update transformations
+        self.apply_mut(surface_ids, |s| {
+            let canvas = s.canvas();
+            canvas.reset_matrix();
+            canvas.scale((scale, scale));
+            canvas.translate(translation);
+        });
    }

    #[inline]
-    fn get_mut(&mut self, id: SurfaceId) -> &mut skia::Surface {
+    pub fn get_mut(&mut self, id: SurfaceId) -> &mut skia::Surface {
        match id {
            SurfaceId::Target => &mut self.target,
            SurfaceId::Filter => &mut self.filter,
@@ -240,6 +317,7 @@ impl Surfaces {
            SurfaceId::Strokes => &mut self.shape_strokes,
            SurfaceId::Debug => &mut self.debug,
            SurfaceId::UI => &mut self.ui,
+            SurfaceId::Export => &mut self.export
        }
    }

@@ -264,19 +342,21 @@ impl Surfaces {
    pub fn draw_rect_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
        if let Some(corners) = shape.shape_type.corners() {
            let rrect = RRect::new_rect_radii(shape.selrect, &corners);
-            self.canvas(id).draw_rrect(rrect, paint);
+            self.canvas_and_mark_dirty(id).draw_rrect(rrect, paint);
        } else {
-            self.canvas(id).draw_rect(shape.selrect, paint);
+            self.canvas_and_mark_dirty(id)
+                .draw_rect(shape.selrect, paint);
        }
    }

    pub fn draw_circle_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
-        self.canvas(id).draw_oval(shape.selrect, paint);
+        self.canvas_and_mark_dirty(id)
+            .draw_oval(shape.selrect, paint);
    }

    pub fn draw_path_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
        if let Some(path) = shape.get_skia_path() {
-            self.canvas(id).draw_path(&path, paint);
+            self.canvas_and_mark_dirty(id).draw_path(&path, paint);
        }
    }

@@ -286,12 +366,14 @@ impl Surfaces {
        self.canvas(SurfaceId::TextDropShadows).restore_to_count(1);
        self.canvas(SurfaceId::Strokes).restore_to_count(1);
        self.canvas(SurfaceId::Current).restore_to_count(1);
+        self.canvas(SurfaceId::Export).restore_to_count(1);
        self.apply_mut(
            SurfaceId::Fills as u32
                | SurfaceId::Strokes as u32
                | SurfaceId::Current as u32
                | SurfaceId::InnerShadows as u32
-                | SurfaceId::TextDropShadows as u32,
+                | SurfaceId::TextDropShadows as u32
+                | SurfaceId::Export as u32,
            |s| {
                s.canvas().clear(color).reset_matrix();
            },
@@ -304,6 +386,9 @@ impl Surfaces {
        self.canvas(SurfaceId::UI)
            .clear(skia::Color::TRANSPARENT)
            .reset_matrix();
+
+        // Clear all dirty flags after reset
+        self.clear_all_dirty();
    }

    pub fn cache_current_tile_texture(
@@ -363,6 +448,34 @@ impl Surfaces {
    pub fn gc(&mut self) {
        self.tiles.gc();
    }
+
+    pub fn resize_export_surface(&mut self, scale: f32, rect: skia::Rect) {
+        let target_w = (scale * rect.width()).ceil() as i32;
+        let target_h = (scale * rect.height()).ceil() as i32;
+        
+        let max_w = i32::max(self.extra_tile_dims.width, target_w);
+        let max_h = i32::max(self.extra_tile_dims.height, target_h);
+
+        println!(">> current {:?}, now: {} {}", self.extra_tile_dims, max_w, max_h);
+
+        if max_w > self.extra_tile_dims.width || max_h > self.extra_tile_dims.height {
+            println!(">RESIZE SURFACES");
+            self.drop_shadows =
+                self.drop_shadows.new_surface_with_dimensions((max_w, max_h)).unwrap();
+            self.inner_shadows =
+                self.inner_shadows.new_surface_with_dimensions((max_w, max_h)).unwrap();
+            self.text_drop_shadows =
+                self.text_drop_shadows.new_surface_with_dimensions((max_w, max_h)).unwrap();
+            self.text_drop_shadows =
+                self.text_drop_shadows.new_surface_with_dimensions((max_w, max_h)).unwrap();
+            self.shape_strokes =
+                self.shape_strokes.new_surface_with_dimensions((max_w, max_h)).unwrap();
+
+            self.extra_tile_dims = skia::ISize::new(max_w, max_h);
+        }
+        
+        self.export = self.export.new_surface_with_dimensions((target_w, target_h)).unwrap();
+    }
 }

 pub struct TileTextureCache {
@@ -438,5 +551,5 @@ impl TileTextureCache {
        for k in self.grid.keys() {
            self.removed.insert(*k);
        }
-    }
+    }    
 }
--- a/render-wasm/src/render/text.rs
+++ b/render-wasm/src/render/text.rs
@@ -192,7 +192,7 @@ pub fn render(
            }
        }

-        let canvas = render_state.surfaces.canvas(target_surface);
+        let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
        render_text_on_canvas(canvas, shape, paragraph_builders, shadow, blur);
        return;
    }
@@ -371,7 +371,7 @@ pub fn render_as_path(
 ) {
    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Fills));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Fills));

    for (path, paint) in paths {
        // Note: path can be empty
@@ -397,7 +397,7 @@ pub fn render_position_data(
        let rect = Rect::from_xywh(pd.x, pd.y, pd.width, pd.height);
        render_state
            .surfaces
-            .canvas(surface_id)
+            .canvas_and_mark_dirty(surface_id)
            .draw_rect(rect, &paint);
    }
 }
--- a/render-wasm/src/shapes.rs
+++ b/render-wasm/src/shapes.rs
@@ -90,6 +90,18 @@ impl Type {
        }
    }

+    pub fn clear_corners(&mut self) {
+        match self {
+            Type::Rect(data) => {
+                data.corners = None;
+            }
+            Type::Frame(data) => {
+                data.corners = None;
+            }
+            _ => {}
+        }
+    }
+
    pub fn path(&self) -> Option<&Path> {
        match self {
            Type::Path(path) => Some(path),
@@ -694,9 +706,11 @@ impl Shape {
    pub fn set_corners(&mut self, raw_corners: (f32, f32, f32, f32)) {
        if let Some(corners) = make_corners(raw_corners) {
            self.shape_type.set_corners(corners);
-            self.invalidate_bounds();
-            self.invalidate_extrect();
+        } else {
+            self.shape_type.clear_corners();
        }
+        self.invalidate_bounds();
+        self.invalidate_extrect();
    }

    pub fn set_svg(&mut self, svg: skia::svg::Dom) {
@@ -920,8 +934,13 @@ impl Shape {
            }

            Type::Group(_) | Type::Frame(_) if !self.clip_content => {
+                // For frames and groups, we must always calculate extrect for all children
+                // to ensure accurate bounds that include nested content across all tiles.
+                // Using selrect for children can cause frames to be incorrectly omitted from
+                // tiles where they have nested content.
                for child_id in self.children_ids_iter(false) {
                    if let Some(child_shape) = shapes_pool.get(child_id) {
+                        // Always calculate full extrect for children to ensure accurate bounds
                        let child_extrect = child_shape.calculate_extrect(shapes_pool, scale);
                        rect.join(child_extrect);
                    }
@@ -1419,6 +1438,100 @@ impl Shape {
        !self.fills.is_empty()
    }

+    /// Determines if this frame or group can be flattened (doesn't affect children visually)
+    /// A container can be flattened if it has no visual effects that affect its children
+    /// and doesn't render its own content (no fills/strokes)
+    pub fn can_flatten(&self) -> bool {
+        // Only frames and groups can be flattened
+        if !matches!(self.shape_type, Type::Frame(_) | Type::Group(_)) {
+            return false;
+        }
+
+        // Cannot flatten if it has visual effects that affect children:
+
+        if self.clip_content {
+            return false;
+        }
+
+        if !self.transform.is_identity() {
+            return false;
+        }
+
+        if self.opacity != 1.0 {
+            return false;
+        }
+
+        if self.blend_mode() != BlendMode::default() {
+            return false;
+        }
+
+        if self.blur.is_some() {
+            return false;
+        }
+
+        if !self.shadows.is_empty() {
+            return false;
+        }
+
+        if let Type::Group(group) = &self.shape_type {
+            if group.masked {
+                return false;
+            }
+        }
+
+        if self.hidden {
+            return false;
+        }
+
+        // If the container itself has fills/strokes, it renders something visible
+        // We cannot flatten containers that render their own background/border
+        // because they need to be rendered even if they don't affect children
+        if self.has_fills() || self.has_visible_strokes() {
+            return false;
+        }
+
+        true
+    }
+
+    /// Checks if this shape needs a layer for rendering due to visual effects
+    /// (opacity < 1.0, non-default blend mode, or frame clip layer blur)
+    pub fn needs_layer(&self) -> bool {
+        self.opacity() < 1.0
+            || self.blend_mode().0 != skia::BlendMode::SrcOver
+            || self.has_frame_clip_layer_blur()
+            || (matches!(self.shape_type, Type::Group(g) if g.masked))
+    }
+
+    /// Checks if this frame has clip layer blur (affects children)
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn has_frame_clip_layer_blur(&self) -> bool {
+        self.frame_clip_layer_blur().is_some()
+    }
+
+    /// Returns the frame clip layer blur if this frame has one
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn frame_clip_layer_blur(&self) -> Option<Blur> {
+        use crate::shapes::BlurType;
+        match self.shape_type {
+            Type::Frame(_) if self.clip_content => self.blur.filter(|blur| {
+                !blur.hidden && blur.blur_type == BlurType::LayerBlur && blur.value > 0.0
+            }),
+            _ => None,
+        }
+    }
+
+    /// Checks if this shape has visual effects that might extend its bounds beyond selrect
+    /// Shapes with these effects require expensive extrect calculation for accurate visibility checks
+    pub fn has_effects_that_extend_bounds(&self) -> bool {
+        !self.shadows.is_empty()
+            || self.blur.is_some()
+            || !self.strokes.is_empty()
+            || !self.transform.is_identity()
+            || !math::is_close_to(self.rotation, 0.0)
+            || matches!(self.shape_type, Type::Group(_) | Type::Frame(_))
+            || matches!(self.shape_type, Type::Text(_))
+    }
+
    pub fn count_visible_inner_strokes(&self) -> usize {
        self.visible_strokes()
            .filter(|s| s.kind == StrokeKind::Inner)
@@ -1492,6 +1605,13 @@ mod tests {
        } else {
            unreachable!();
        }
+
+        shape.set_corners((0.0, 0.0, 0.0, 0.0));
+        if let Type::Rect(Rect { corners, .. }) = shape.shape_type {
+            assert_eq!(corners, None);
+        } else {
+            unreachable!();
+        }
    }

    #[test]
--- a/render-wasm/src/state.rs
+++ b/render-wasm/src/state.rs
@@ -99,7 +99,22 @@ impl<'a> State<'a> {
        Ok(())
    }

+    pub fn render_shape_pixels(&mut self, id: &Uuid, scale: f32, timestamp: i32) -> Result<(Vec<u8>, i32, i32), String> {
+        self.render_state
+            .render_shape_pixels(id, &self.shapes, scale, timestamp)
+    }
+
    pub fn start_render_loop(&mut self, timestamp: i32) -> Result<(), String> {
+        // If zoom changed, we MUST rebuild the tile index before using it.
+        // Otherwise, the index will have tiles from the old zoom level, causing visible
+        // tiles to appear empty. This can happen if start_render_loop() is called before
+        // set_view_end() finishes rebuilding the index, or if set_view_end() hasn't been
+        // called yet.
+        let zoom_changed = self.render_state.zoom_changed();
+        if zoom_changed {
+            self.rebuild_tiles_shallow();
+        }
+
        self.render_state
            .start_render_loop(None, &self.shapes, timestamp, false)?;
        Ok(())
Author	SHA1	Message	Date
alonso.torres	5e54c191cc	WIP	2026-01-22 16:47:30 +01:00
Belén Albeza	5b1766835f	🐛 Fix broken selection on duplicated shapes on new pages	2026-01-21 10:32:13 +01:00
Andrey Antukh	ff25df0457	Merge remote-tracking branch 'origin/staging' into staging-render	2026-01-21 10:17:22 +01:00
Alejandro Alonso	b7c2d9a079	Merge pull request #8130 from penpot/superalex-improve-zoom-pan-performance-7 🐛 Fix some tiles disappear after fast zoom and pan	2026-01-20 12:56:02 +01:00
Alejandro Alonso	aeb34a6f64	Merge pull request #8109 from penpot/superalex-fix-text-selrect-calculation 🐛 Render wasm typography token issues	2026-01-20 12:54:45 +01:00
Alejandro Alonso	6fa0c3af0c	🐛 Fix some tiles disappear after fast zoom and pan	2026-01-20 12:40:01 +01:00
Alejandro Alonso	260b9fb040	🐛 Fix texts with auto size updated via tokens with render wasm activated	2026-01-20 12:39:17 +01:00
Alejandro Alonso	884954f4ff	🐛 Fix text selrect calculation	2026-01-20 12:37:57 +01:00
Andrey Antukh	6fd0f5377c	Merge remote-tracking branch 'origin/staging' into staging-render	2026-01-20 10:08:58 +01:00
Elena Torró	eb54bc485e	Merge pull request #8120 from penpot/alotor-fix-flex-layout 🐛 Fix problems with layout	2026-01-20 10:00:24 +01:00
Elena Torró	12c24a36b4	Merge pull request #8122 from penpot/fix-thumbnail-generation 🐛 Fix problem with thumbnail generation	2026-01-20 09:59:34 +01:00
Alejandro Alonso	324d54ad28	🐛 Fix set all rounded corners to 0	2026-01-20 09:34:06 +01:00
alonso.torres	f42ff27f3d	🐛 Fix problem with bools	2026-01-19 17:05:04 +01:00
alonso.torres	2c1cc89f53	🐛 Fix problem with thumbnail generation	2026-01-19 12:54:15 +01:00
alonso.torres	498b0b30fe	🐛 Fix problems with layout	2026-01-19 12:17:58 +01:00
Elena Torró	89f40dcda2	🔧 Move WebGL context error message to 'errors' namespace (#8117 )	2026-01-19 11:24:19 +01:00
Elena Torró	ccac7bd510	Merge pull request #8108 from penpot/ladybenko-13022-blur-page 🎉 Apply blur effect when switching pages	2026-01-19 11:04:31 +01:00
Andrey Antukh	d73197625d	Merge remote-tracking branch 'origin/staging' into staging-render	2026-01-19 10:43:43 +01:00
Belén Albeza	43d1d127dc	🎉 Apply blur effect to previous canvas pixels while setting wasm objects	2026-01-16 13:04:59 +01:00
Belén Albeza	8bd3ef717c	🎉 Apply blur to canvas when switching pages	2026-01-16 13:04:59 +01:00
Elena Torro	53bc647783	🔧 Fix shape selection from canvas to sidebar	2026-01-16 13:02:25 +01:00
Elena Torró	6029f9bb51	Merge pull request #8089 from penpot/superalex-improve-zoom-pan-performance-5 🎉 Performance improvements	2026-01-15 16:46:07 +01:00
Elena Torro	e0fd8bac81	🔧 Optimize sidebar performance for deeply nested shapes - Batch hover highlights using RAF to avoid long tasks from rapid events - Run parent expansion asynchronously to not block selection - Lazy-load children in layer items using IntersectionObserver - Clarify expand-all-parents logic with explicit bindings	2026-01-15 13:41:54 +01:00
Elena Torro	34737ddfc9	🔧 Always lookup over a set	2026-01-15 13:41:10 +01:00
Elena Torro	a8dfd19338	🔧 Add performance debugging logs	2026-01-15 13:40:58 +01:00
Elena Torro	e33e8a8c3b	🔧 Lookup page objects only when value changes	2026-01-15 13:40:53 +01:00
Alejandro Alonso	c411aefc6c	🐛 Fix rotated shapes extrect calculation	2026-01-15 12:53:21 +01:00
Alejandro Alonso	311e124658	🎉 Reduce extrect work in tile traversal Avoid repeated extrect calculations and simplify root ordering per tile.	2026-01-15 12:53:21 +01:00
Alejandro Alonso	afc914f486	🎉 Render simple shapes directly on Current Bypass intermediate surfaces for simple shapes without effects.	2026-01-15 12:53:21 +01:00
Alejandro Alonso	84f750da0d	🎉 Skip heavy effects in fast mode Avoid blur and shadow passes for text and shapes when FAST_MODE is enabled.	2026-01-15 08:45:21 +01:00
Elena Torro	a3119bef5e	🔧 Show message and button to reload the page when WebGL context is lost	2026-01-14 11:10:03 +01:00
Alejandro Alonso	c60d74df62	🐛 Fix nested frames border clipping	2026-01-14 11:10:03 +01:00
Alejandro Alonso	d593e299e3	🐛 Fix mask erros on save/restore optimizations	2026-01-14 11:10:03 +01:00
Alejandro Alonso	4a8e02987f	🐛 Fix mask erros on save/restore optimizations	2026-01-14 11:10:03 +01:00
Alejandro Alonso	ee766e85a0	🎉 Wasm render dirty surfaces	2026-01-14 11:10:03 +01:00
Alejandro Alonso	35e3b7f19a	🎉 Root ids refactor	2026-01-14 11:10:03 +01:00
Alejandro Alonso	1810df232b	🎉 Ignore frames and groups when they have no visual extra information	2026-01-14 11:10:03 +01:00
Alejandro Alonso	3e99ad036c	🎉 Avoid unnecesary saves and restores	2026-01-14 11:10:03 +01:00
Alejandro Alonso	042a3a4080	🐛 Fix wasm playgrounds	2026-01-14 11:10:03 +01:00
Belén Albeza	f0687fd1f7	🎉 Make workspace loader to wait for first render	2026-01-14 11:10:03 +01:00
Aitor Moreno	2c9159288f	🐛 Fix previous styles lost when changing selected text	2026-01-14 11:10:01 +01:00