✨ Backport .github workflows from develop

⬆️ Update imagemagick version
⬆️ Update backend dependencies (mainly bugfixes)
2026-02-04 19:51:57 -05:00 · 2026-02-04 16:21:19 +01:00 · 2026-02-04 16:21:19 +01:00 · 2026-02-04 16:21:19 +01:00 · 2026-02-04 16:21:19 +01:00 · 2026-02-04 16:21:19 +01:00
209 changed files with 33200 additions and 6422 deletions
--- a/.github/ISSUE_TEMPLATE/new-render-bug-report.md
+++ b/.github/ISSUE_TEMPLATE/new-render-bug-report.md
@@ -0,0 +1,38 @@
+---
+name: New Render Bug Report
+about: Create a report about the bugs you have found in the new render
+title: ''
+labels: new render
+assignees: claragvinola
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Steps to Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots or screen recordings**
+If applicable, add screenshots or screen recording to help illustrate your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
--- a/.github/workflows/build-bundle.yml
+++ b/.github/workflows/build-bundle.yml
@@ -40,7 +40,7 @@ on:
 jobs:
  build-bundle:
    name: Build and Upload Penpot Bundle
-    runs-on: ubuntu-24.04
+    runs-on: penpot-runner-01
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
--- a/.github/workflows/build-docker-devenv.yml
+++ b/.github/workflows/build-docker-devenv.yml
@@ -7,9 +7,14 @@ jobs:
  build-and-push:
    name: Build and push DevEnv Docker image
    environment: release-admins
-    runs-on: ubuntu-24.04
+    runs-on: penpot-runner-02

    steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
      - name: Checkout code
        uses: actions/checkout@v4

--- a/.github/workflows/build-docker.yml
+++ b/.github/workflows/build-docker.yml
@@ -19,9 +19,14 @@ on:
 jobs:
  build-and-push:
    name: Build and Push Penpot Docker Images
-    runs-on: ubuntu-24.04-arm
+    runs-on: penpot-runner-02

    steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
      - name: Checkout code
        uses: actions/checkout@v4
        with:
@@ -66,6 +71,15 @@ jobs:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

+      # To avoid the “429 Too Many Requests” error when downloading
+      # images from DockerHub for unregistered users.
+      # https://docs.docker.com/docker-hub/usage/
+      - name: Login to DockerHub Registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.PUB_DOCKER_USERNAME }}
+          password: ${{ secrets.PUB_DOCKER_PASSWORD }}
+
      - name: Extract metadata (tags, labels)
        id: meta
        uses: docker/metadata-action@v5
--- a/.github/workflows/commit-checker.yml
+++ b/.github/workflows/commit-checker.yml
@@ -26,7 +26,7 @@ jobs:
      - name: Check Commit Type
        uses: gsactions/commit-message-checker@v2
        with:
-          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert).+[^.])$'
+          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert|Reapply).+[^.])$'
          flags: 'gm'
          error: 'Commit should match CONTRIBUTING.md guideline'
          checkAllCommitMessages: 'true' # optional: this checks all commits associated with a pull request
--- a/.github/workflows/tests-mcp.yml
+++ b/.github/workflows/tests-mcp.yml
@@ -0,0 +1,45 @@
+name: "MCP CI"
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - staging
+      - main
+
+    types:
+      - opened
+      - synchronize
+
+    paths:
+      - 'mcp/**'
+
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+
+    paths:
+      - 'mcp/**'
+
+jobs:
+  test:
+    name: "Test"
+    runs-on: penpot-runner-02
+    container: penpotapp/devenv:latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup
+        working-directory: ./mcp
+        run: ./scripts/setup
+
+      - name: Check
+        working-directory: ./mcp
+        run: |
+          pnpm run fmt:check;
+          pnpm -r run build;
+          pnpm -r run types:check;
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v22.21.1
+v22.22.0
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,10 +1,6 @@
 # CHANGELOG

-## 2.13.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
+## 2.13.0

 ### :heart: Community contributions (Thank you!)

@@ -29,7 +25,6 @@
 - 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 problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
 - Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
 - Fix allow negative spread values on shadow token creation [Taiga #13167](https://tree.taiga.io/project/penpot/issue/13167)
 - Fix spanish translations on import export token modal [Taiga #13171](https://tree.taiga.io/project/penpot/issue/13171)
--- a/backend/deps.edn
+++ b/backend/deps.edn
@@ -3,7 +3,7 @@

 :deps
 {penpot/common {:local/root "../common"}
-  org.clojure/clojure {:mvn/version "1.12.2"}
+  org.clojure/clojure {:mvn/version "1.12.4"}
  org.clojure/tools.namespace {:mvn/version "1.5.0"}

  com.github.luben/zstd-jni {:mvn/version "1.5.7-4"}
@@ -28,8 +28,8 @@
  com.google.guava/guava {:mvn/version "33.4.8-jre"}

  funcool/yetti
-  {:git/tag "v11.8"
-   :git/sha "1d1b33f"
+  {:git/tag "v11.9"
+   :git/sha "5fad7a9"
   :git/url "https://github.com/funcool/yetti.git"
   :exclusions [org.slf4j/slf4j-api]}

@@ -39,7 +39,7 @@
  metosin/reitit-core {:mvn/version "0.9.1"}
  nrepl/nrepl {:mvn/version "1.4.0"}

-  org.postgresql/postgresql {:mvn/version "42.7.7"}
+  org.postgresql/postgresql {:mvn/version "42.7.9"}
  org.xerial/sqlite-jdbc {:mvn/version "3.50.3.0"}

  com.zaxxer/HikariCP {:mvn/version "7.0.2"}
@@ -49,7 +49,7 @@
  buddy/buddy-hashers {:mvn/version "2.0.167"}
  buddy/buddy-sign {:mvn/version "3.6.1-359"}

-  com.github.ben-manes.caffeine/caffeine {:mvn/version "3.2.2"}
+  com.github.ben-manes.caffeine/caffeine {:mvn/version "3.2.3"}

  org.jsoup/jsoup {:mvn/version "1.21.2"}
  org.im4java/im4java
@@ -66,7 +66,7 @@

  ;; Pretty Print specs
  pretty-spec/pretty-spec {:mvn/version "0.1.4"}
-  software.amazon.awssdk/s3 {:mvn/version "2.33.10"}}
+  software.amazon.awssdk/s3 {:mvn/version "2.41.21"}}

 :paths ["src" "resources" "target/classes"]
 :aliases
--- a/backend/src/app/rpc/commands/audit.clj
+++ b/backend/src/app/rpc/commands/audit.clj
@@ -79,7 +79,7 @@
      (db/insert-many! pool :audit-log event-columns events))))

 (def valid-event-types
-  #{"action" "identify" "trigger"})
+  #{"action" "identify"})

 (def schema:event
  [:map {:title "Event"}
--- a/common/deps.edn
+++ b/common/deps.edn
@@ -1,5 +1,5 @@
 {:deps
- {org.clojure/clojure {:mvn/version "1.12.2"}
+ {org.clojure/clojure {:mvn/version "1.12.4"}
  org.clojure/data.json {:mvn/version "2.5.1"}
  org.clojure/tools.cli {:mvn/version "1.1.230"}
  org.clojure/test.check {:mvn/version "1.1.1"}
@@ -9,15 +9,15 @@
  org.apache.commons/commons-pool2 {:mvn/version "2.12.1"}

  ;; Logging
-  org.apache.logging.log4j/log4j-api {:mvn/version "2.25.1"}
-  org.apache.logging.log4j/log4j-core {:mvn/version "2.25.1"}
-  org.apache.logging.log4j/log4j-web {:mvn/version "2.25.1"}
-  org.apache.logging.log4j/log4j-jul {:mvn/version "2.25.1"}
-  org.apache.logging.log4j/log4j-slf4j2-impl {:mvn/version "2.25.1"}
+  org.apache.logging.log4j/log4j-api {:mvn/version "2.25.3"}
+  org.apache.logging.log4j/log4j-core {:mvn/version "2.25.3"}
+  org.apache.logging.log4j/log4j-web {:mvn/version "2.25.3"}
+  org.apache.logging.log4j/log4j-jul {:mvn/version "2.25.3"}
+  org.apache.logging.log4j/log4j-slf4j2-impl {:mvn/version "2.25.3"}
  org.slf4j/slf4j-api {:mvn/version "2.0.17"}
-  pl.tkowalcz.tjahzi/log4j2-appender {:mvn/version "0.9.40"}
+  pl.tkowalcz.tjahzi/log4j2-appender {:mvn/version "0.9.41"}

-  selmer/selmer {:mvn/version "1.12.69"}
+  selmer/selmer {:mvn/version "1.12.70"}
  criterium/criterium {:mvn/version "0.4.6"}

  metosin/jsonista {:mvn/version "0.3.13"}
@@ -27,7 +27,7 @@
  com.cognitect/transit-clj {:mvn/version "1.0.333"}
  com.cognitect/transit-cljs {:mvn/version "0.8.280"}
  java-http-clj/java-http-clj {:mvn/version "0.4.3"}
-  integrant/integrant {:mvn/version "1.0.0"}
+  integrant/integrant {:mvn/version "1.0.1"}

  funcool/cuerdas {:mvn/version "2026.415"}
  funcool/promesa
--- a/common/src/app/common/files/helpers.cljc
+++ b/common/src/app/common/files/helpers.cljc
@@ -526,25 +526,20 @@
          ids))

 (defn clean-loops
-  "Clean a list of ids from circular references. Optimized fast-path for single selections."
+  "Clean a list of ids from circular references."
  [objects ids]
-  (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)))
+  (let [parent-selected?
+        (fn [id]
+          (let [parents (get-parent-ids objects id)]
+            (some ids 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/common/src/app/common/flags.cljc
+++ b/common/src/app/common/flags.cljc
@@ -134,8 +134,6 @@
    :subscriptions
    :subscriptions-old
    :inspect-styles
-    ;; Enable performance logs in devconsole (disabled by default)
-    :perf-logs

    ;; Security layer middleware that filters request by fetch
    ;; metadata headers
--- a/common/src/app/common/geom/align.cljc
+++ b/common/src/app/common/geom/align.cljc
@@ -124,51 +124,33 @@

 (defn adjust-to-viewport
  ([viewport srect] (adjust-to-viewport viewport srect nil))
-  ([viewport srect {:keys [padding min-zoom] :or {padding 0 min-zoom nil}}]
+  ([viewport srect {:keys [padding] :or {padding 0}}]
   (let [gprop  (/ (:width viewport)
                   (:height viewport))
-         srect-padded (-> srect
-                          (update :x #(- % padding))
-                          (update :y #(- % padding))
-                          (update :width #(+ % padding padding))
-                          (update :height #(+ % padding padding)))
-         width  (:width srect-padded)
-         height (:height srect-padded)
-         lprop  (/ width height)
-         adjusted-rect
-         (cond
-           (> gprop lprop)
-           (let [width'  (* (/ width lprop) gprop)
-                 padding (/ (- width' width) 2)]
-             (-> srect-padded
-                 (update :x #(- % padding))
-                 (assoc :width width')
-                 (grc/update-rect :position)))
-
-           (< gprop lprop)
-           (let [height' (/ (* height lprop) gprop)
-                 padding (/ (- height' height) 2)]
-             (-> srect-padded
-                 (update :y #(- % padding))
-                 (assoc :height height')
-                 (grc/update-rect :position)))
-
-           :else
-           (grc/update-rect srect-padded :position))]
-     ;; If min-zoom is specified and the resulting zoom would be below it,
-     ;; return a rect with the original top-left corner centered in the viewport
-     ;; instead of using the aspect-ratio-adjusted rect (which can push coords
-     ;; extremely far with extreme aspect ratios).
-     (if (and (some? min-zoom)
-              (< (/ (:width viewport) (:width adjusted-rect)) min-zoom))
-       (let [anchor-x (:x srect)
-             anchor-y (:y srect)
-             vbox-width (/ (:width viewport) min-zoom)
-             vbox-height (/ (:height viewport) min-zoom)]
-         (-> adjusted-rect
-             (assoc :x (- anchor-x (/ vbox-width 2))
-                    :y (- anchor-y (/ vbox-height 2))
-                    :width vbox-width
-                    :height vbox-height)
+         srect  (-> srect
+                    (update :x #(- % padding))
+                    (update :y #(- % padding))
+                    (update :width #(+ % padding padding))
+                    (update :height #(+ % padding padding)))
+         width  (:width srect)
+         height (:height srect)
+         lprop  (/ width height)]
+     (cond
+       (> gprop lprop)
+       (let [width'  (* (/ width lprop) gprop)
+             padding (/ (- width' width) 2)]
+         (-> srect
+             (update :x #(- % padding))
+             (assoc :width width')
             (grc/update-rect :position)))
-       adjusted-rect))))
+
+       (< gprop lprop)
+       (let [height' (/ (* height lprop) gprop)
+             padding (/ (- height' height) 2)]
+         (-> srect
+             (update :y #(- % padding))
+             (assoc :height height')
+             (grc/update-rect :position)))
+
+       :else
+       (grc/update-rect srect :position)))))
--- a/common/src/app/common/logic/libraries.cljc
+++ b/common/src/app/common/logic/libraries.cljc
@@ -2017,9 +2017,7 @@
  (let [;; We need to sync only the position relative to the origin of the component.
        ;; (see update-attrs for a full explanation)
        previous-shape (reposition-shape previous-shape prev-root current-root)
-        touched        (get previous-shape :touched #{})
-        text-auto?     (and (cfh/text-shape? current-shape)
-                            (contains? #{:auto-height :auto-width} (:grow-type current-shape)))]
+        touched        (get previous-shape :touched #{})]

    (loop [attrs       updatable-attrs
           roperations [{:type :set-touched :touched (:touched previous-shape)}]
@@ -2028,10 +2026,6 @@
        (let [attr-group (get ctk/sync-attrs attr)
              skip-operations?
              (or
-               ;; For auto text, avoid copying geometry-driven attrs on switch.
-               (and text-auto?
-                    (contains? #{:points :selrect :width :height :position-data} attr))
-
               ;; If the attribute is not valid for the destiny, don't copy it
               (not (cts/is-allowed-switch-keep-attr? attr (:type current-shape)))

--- a/docker/devenv/Dockerfile
+++ b/docker/devenv/Dockerfile
@@ -31,7 +31,7 @@ RUN set -ex; \

 FROM base AS setup-node

-ENV NODE_VERSION=v22.21.1 \
+ENV NODE_VERSION=v22.22.0 \
    PATH=/opt/node/bin:$PATH

 RUN set -eux; \
@@ -97,18 +97,19 @@ RUN set -eux; \

 FROM base AS setup-jvm

-ENV CLOJURE_VERSION=1.12.3.1577
+# https://clojure.org/releases/tools
+ENV CLOJURE_VERSION=1.12.4.1602

 RUN set -eux; \
    ARCH="$(dpkg --print-architecture)"; \
    case "${ARCH}" in \
       aarch64|arm64) \
-         ESUM='8c5321f16d9f1d8149f83e4e9ff8ca5d9e94320b92d205e6db42a604de3d1140'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_aarch64.tar.gz'; \
+         ESUM='9903c6b19183a33725ca1dfdae5b72400c9d00995c76fafc4a0d31c5152f33f7'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_aarch64.tar.gz'; \
         ;; \
       amd64|x86_64) \
-         ESUM='471b3e62bdffaed27e37005d842d8639f10d244ccce1c7cdebf7abce06c8313e'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_x64.tar.gz'; \
+         ESUM='946ad9766d98fc6ab495a1a120072197db54997f6925fb96680f1ecd5591db4e'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_x64.tar.gz'; \
         ;; \
       *) \
         echo "Unsupported arch: ${ARCH}"; \
@@ -179,9 +180,10 @@ RUN set -eux; \

 FROM base AS setup-utils

-ENV CLJKONDO_VERSION=2025.07.28 \
+ENV CLJKONDO_VERSION=2026.01.19 \
    BABASHKA_VERSION=1.12.208 \
-    CLJFMT_VERSION=0.13.1
+    CLJFMT_VERSION=0.15.6 \
+    PIXI_VERSION=0.63.2

 RUN set -ex; \
    ARCH="$(dpkg --print-architecture)"; \
@@ -224,6 +226,26 @@ RUN set -ex; \
    tar -xf /tmp/babashka.tar.gz; \
    rm -rf /tmp/babashka.tar.gz;

+RUN set -ex; \
+    ARCH="$(dpkg --print-architecture)"; \
+    case "${ARCH}" in \
+       aarch64|arm64) \
+         BINARY_URL="https://github.com/prefix-dev/pixi/releases/download/v$PIXI_VERSION/pixi-aarch64-unknown-linux-musl.tar.gz"; \
+         ;; \
+       amd64|x86_64) \
+         BINARY_URL="https://github.com/prefix-dev/pixi/releases/download/v$PIXI_VERSION/pixi-x86_64-unknown-linux-musl.tar.gz"; \
+         ;; \
+       *) \
+         echo "Unsupported arch: ${ARCH}"; \
+         exit 1; \
+         ;; \
+    esac; \
+    cd /tmp; \
+    curl -LfsSo /tmp/pixi.tar.gz ${BINARY_URL}; \
+    cd /opt/utils/bin; \
+    tar -xf /tmp/pixi.tar.gz; \
+    rm -rf /tmp/pixi.tar.gz;
+
 RUN set -ex; \
    ARCH="$(dpkg --print-architecture)"; \
    case "${ARCH}" in \
@@ -375,7 +397,7 @@ ENV LANG='C.UTF-8' \
    RUSTUP_HOME="/opt/rustup" \
    PATH="/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"

-COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
+COPY --from=penpotapp/imagemagick:7.1.2-13 /opt/imagick /opt/imagick
 COPY --from=setup-jvm /opt/jdk /opt/jdk
 COPY --from=setup-jvm /opt/clojure /opt/clojure
 COPY --from=setup-node /opt/node /opt/node
@@ -398,7 +420,6 @@ COPY files/Caddyfile           /home/
 COPY files/selfsigned.crt      /home/
 COPY files/selfsigned.key      /home/
 COPY files/start-tmux.sh       /home/start-tmux.sh
-COPY files/start-tmux-back.sh  /home/start-tmux-back.sh
 COPY files/entrypoint.sh       /home/entrypoint.sh
 COPY files/init.sh             /home/init.sh

--- a/docker/devenv/docker-compose.yaml
+++ b/docker/devenv/docker-compose.yaml
@@ -46,6 +46,11 @@ services:
      - 9090:9090
      - 9091:9091

+      # MCP
+      - 4400:4400
+      - 4401:4401
+      - 4402:4402
+
    environment:
      - EXTERNAL_UID=${CURRENT_USER_ID}
      # SMTP setup
--- a/docker/devenv/files/Caddyfile
+++ b/docker/devenv/files/Caddyfile
@@ -1,16 +1,17 @@
 {
-    auto_https off
+	auto_https off
 }

 localhost:3449 {
-   reverse_proxy localhost:4449
-   tls /home/selfsigned.crt /home/selfsigned.key
+	reverse_proxy localhost:4449
+	tls /home/selfsigned.crt /home/selfsigned.key
+	header -Strict-Transport-Security
 }

 http://localhost:3450 {
-   reverse_proxy localhost:4449
+	reverse_proxy localhost:4449
 }

 http://penpot-devenv-main:3450 {
-    reverse_proxy localhost:4449
+	reverse_proxy localhost:4449
 }
--- a/docker/devenv/files/bashrc
+++ b/docker/devenv/files/bashrc
@@ -6,7 +6,8 @@ export PATH="/home/penpot/.cargo/bin:/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bi
 export CARGO_HOME="/home/penpot/.cargo"

 alias l='ls --color -GFlh'
-alias rm='rm -r'
+alias ll='ls --color -GFlh'
+alias rm='rm -rf'
 alias ls='ls --color -F'
 alias lsd='ls -d *(/)'
 alias lsf='ls -h *(.)'
--- a/docker/devenv/files/nginx.conf
+++ b/docker/devenv/files/nginx.conf
@@ -121,6 +121,28 @@ http {
            proxy_http_version 1.1;
        }

+        location /mcp {
+            alias /home/penpot/penpot/mcp/packages/plugin/dist;
+            proxy_http_version 1.1;
+        }
+
+        location /mcp/ws {
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_pass http://127.0.0.1:4402;
+            proxy_http_version 1.1;
+        }
+
+        location /mcp/stream {
+            proxy_pass http://127.0.0.1:4401/mcp;
+            proxy_http_version 1.1;
+        }
+
+        location /mcp/sse {
+            proxy_pass http://127.0.0.1:4401/sse;
+            proxy_http_version 1.1;
+        }
+
        location /admin {
            proxy_pass http://127.0.0.1:6063/admin;
        }
@@ -141,8 +163,14 @@ http {
            proxy_pass http://127.0.0.1:5000;
        }

-        location /nitrate/ {
-            proxy_pass http://127.0.0.1:3000/;
+        location /control-center {
+           proxy_pass http://127.0.0.1:3000;
+           proxy_http_version 1.1;
+
+           proxy_set_header Host $host;
+           proxy_set_header X-Real-IP $remote_addr;
+           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+           proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /wasm-playground {
--- a/docker/devenv/files/tmux.conf
+++ b/docker/devenv/files/tmux.conf
@@ -1,3 +1,4 @@
+set -g default-command "${SHELL}"
 set -g mouse off
 set -g history-limit 50000
 setw -g mode-keys emacs
--- a/docker/imagemagick/Dockerfile
+++ b/docker/imagemagick/Dockerfile
@@ -6,7 +6,7 @@ ENV LANG='C.UTF-8' \
    DEBIAN_FRONTEND=noninteractive \
    TZ=Etc/UTC

-ARG IMAGEMAGICK_VERSION=7.1.1-47
+ARG IMAGEMAGICK_VERSION=7.1.2-13

 RUN set -e; \
    apt-get -qq update; \
--- a/docker/images/Dockerfile.backend
+++ b/docker/images/Dockerfile.backend
@@ -5,7 +5,7 @@ ENV LANG='C.UTF-8' \
    LC_ALL='C.UTF-8' \
    JAVA_HOME="/opt/jdk" \
    DEBIAN_FRONTEND=noninteractive \
-    NODE_VERSION=v22.21.1 \
+    NODE_VERSION=v22.22.0 \
    TZ=Etc/UTC

 RUN set -ex; \
@@ -46,12 +46,12 @@ RUN set -eux; \
    ARCH="$(dpkg --print-architecture)"; \
    case "${ARCH}" in \
       aarch64|arm64) \
-         ESUM='8c5321f16d9f1d8149f83e4e9ff8ca5d9e94320b92d205e6db42a604de3d1140'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_aarch64.tar.gz'; \
+         ESUM='9903c6b19183a33725ca1dfdae5b72400c9d00995c76fafc4a0d31c5152f33f7'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_aarch64.tar.gz'; \
         ;; \
       amd64|x86_64) \
-         ESUM='471b3e62bdffaed27e37005d842d8639f10d244ccce1c7cdebf7abce06c8313e'; \
-         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.30.17-ca-jdk25.0.1-linux_x64.tar.gz'; \
+         ESUM='946ad9766d98fc6ab495a1a120072197db54997f6925fb96680f1ecd5591db4e'; \
+         BINARY_URL='https://cdn.azul.com/zulu/bin/zulu25.32.21-ca-jdk25.0.2-linux_x64.tar.gz'; \
         ;; \
       *) \
         echo "Unsupported arch: ${ARCH}"; \
--- a/docker/images/Dockerfile.exporter
+++ b/docker/images/Dockerfile.exporter
@@ -3,7 +3,7 @@ LABEL maintainer="Penpot <docker@penpot.app>"

 ENV LANG=en_US.UTF-8 \
    LC_ALL=en_US.UTF-8 \
-    NODE_VERSION=v22.21.1 \
+    NODE_VERSION=v22.22.0 \
    DEBIAN_FRONTEND=noninteractive \
    PATH=/opt/node/bin:/opt/imagick/bin:$PATH

--- a/exporter/src/app/renderer/pdf.cljs
+++ b/exporter/src/app/renderer/pdf.cljs
@@ -38,26 +38,6 @@
                  (assoc :path "/render.html")
                  (assoc :query (u/map->query-string params)))))

-          (sync-page-size! [dom]
-            (bw/eval! dom
-                      (fn [elem]
-                        (let [rect (.getBoundingClientRect ^js elem)
-                              width (js/Math.max (or (some-> (.getAttribute ^js elem "width") js/parseFloat) 0)
-                                                 (.-width rect))
-                              height (js/Math.max (or (some-> (.getAttribute ^js elem "height") js/parseFloat) 0)
-                                                  (.-height rect))
-                              width-px (str width "px")
-                              height-px (str height "px")
-                              style-node (or (.getElementById js/document "penpot-pdf-page-size")
-                                             (let [node (.createElement js/document "style")]
-                                               (set! (.-id node) "penpot-pdf-page-size")
-                                               (.appendChild (.-head js/document) node)
-                                               node))]
-                          (set! (.-textContent style-node)
-                                (str "@page { size: " width-px " " height-px "; margin: 0; }\n"
-                                     "html, body, #app { margin: 0; padding: 0;" 
-                                     "width: " width-px "; height: " height-px "; }"))))))
-
          (render-object [page base-uri {:keys [id] :as object}]
            (p/let [uri  (prepare-uri base-uri id)
                    path (sh/tempfile :prefix "penpot.tmp.pdf." :suffix (mime/get-extension type))]
@@ -65,7 +45,6 @@
              (bw/nav! page uri)
              (p/let [dom (bw/select page (dm/str "#screenshot-" id))]
                (bw/wait-for dom)
-                (sync-page-size! dom)
                (bw/screenshot dom {:full-page? true})
                (bw/sleep page 2000) ; the good old fix with sleep
                (bw/pdf page {:path path})
--- a/frontend/playwright.config.js
+++ b/frontend/playwright.config.js
@@ -1,5 +1,4 @@
 import { defineConfig, devices } from "@playwright/test";
-import { platform } from "os";

 /**
 * Read environment variables from file.
@@ -7,10 +6,6 @@ import { platform } from "os";
 */
 // require('dotenv').config();

-const userAgent = platform === 'darwin' ?
-  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" :
-  undefined;
-
 /**
 * @see https://playwright.dev/docs/test-configuration
 */
@@ -48,20 +43,12 @@ export default defineConfig({
  projects: [
    {
      name: "default",
+      use: { ...devices["Desktop Chrome"] },
      testDir: "./playwright/ui/specs",
      use: {
-        ...devices["Desktop Chrome"],
-        viewport: { width: 1920, height: 1080 }, // Add custom viewport size
        video: 'retain-on-failure',
        trace: 'retain-on-failure',
-        userAgent,
-      },
-      snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}.png",
-      expect: {
-        toHaveScreenshot: {
-          maxDiffPixelRatio: 0.001,
-        },
-      },
+      }
    },
    {
      name: "ds",
--- a/frontend/playwright/data/render-wasm/get-file-flex-layouts.json
+++ b/frontend/playwright/data/render-wasm/get-file-flex-layouts.json
@@ -1,155 +0,0 @@
-{
-    "~:features": {
-        "~#set": [
-            "fdata/path-data",
-            "design-tokens/v1",
-            "variants/v1",
-            "layout/grid",
-            "fdata/objects-map",
-            "components/v2",
-            "fdata/shape-data-type"
-        ]
-    },
-    "~:team-id": "~ud7430f09-4f59-8049-8007-6277bb7586f6",
-    "~:permissions": {
-        "~:type": "~:membership",
-        "~:is-owner": true,
-        "~:is-admin": true,
-        "~:can-edit": true,
-        "~:can-read": true,
-        "~:is-logged": true
-    },
-    "~:has-media-trimmed": false,
-    "~:comment-thread-seqn": 0,
-    "~:name": "flex_index_position",
-    "~:revn": 114,
-    "~:modified-at": "~m1769430362161",
-    "~:vern": 0,
-    "~:id": "~u31fe2e21-73e7-80f3-8007-73894fb58240",
-    "~:is-shared": false,
-    "~:migrations": {
-        "~#ordered-set": [
-            "legacy-2",
-            "legacy-3",
-            "legacy-5",
-            "legacy-6",
-            "legacy-7",
-            "legacy-8",
-            "legacy-9",
-            "legacy-10",
-            "legacy-11",
-            "legacy-12",
-            "legacy-13",
-            "legacy-14",
-            "legacy-16",
-            "legacy-17",
-            "legacy-18",
-            "legacy-19",
-            "legacy-25",
-            "legacy-26",
-            "legacy-27",
-            "legacy-28",
-            "legacy-29",
-            "legacy-31",
-            "legacy-32",
-            "legacy-33",
-            "legacy-34",
-            "legacy-36",
-            "legacy-37",
-            "legacy-38",
-            "legacy-39",
-            "legacy-40",
-            "legacy-41",
-            "legacy-42",
-            "legacy-43",
-            "legacy-44",
-            "legacy-45",
-            "legacy-46",
-            "legacy-47",
-            "legacy-48",
-            "legacy-49",
-            "legacy-50",
-            "legacy-51",
-            "legacy-52",
-            "legacy-53",
-            "legacy-54",
-            "legacy-55",
-            "legacy-56",
-            "legacy-57",
-            "legacy-59",
-            "legacy-62",
-            "legacy-65",
-            "legacy-66",
-            "legacy-67",
-            "0001-remove-tokens-from-groups",
-            "0002-normalize-bool-content-v2",
-            "0002-clean-shape-interactions",
-            "0003-fix-root-shape",
-            "0003-convert-path-content-v2",
-            "0005-deprecate-image-type",
-            "0006-fix-old-texts-fills",
-            "0008-fix-library-colors-v4",
-            "0009-clean-library-colors",
-            "0009-add-partial-text-touched-flags",
-            "0010-fix-swap-slots-pointing-non-existent-shapes",
-            "0011-fix-invalid-text-touched-flags",
-            "0012-fix-position-data",
-            "0013-fix-component-path",
-            "0013-clear-invalid-strokes-and-fills",
-            "0014-fix-tokens-lib-duplicate-ids",
-            "0014-clear-components-nil-objects",
-            "0015-fix-text-attrs-blank-strings",
-            "0015-clean-shadow-color",
-            "0016-copy-fills-from-position-data-to-text-node"
-        ]
-    },
-    "~:version": 67,
-    "~:project-id": "~ud7430f09-4f59-8049-8007-6277bb765abd",
-    "~:created-at": "~m1769007798998",
-    "~:backend": "legacy-db",
-    "~:data": {
-        "~:pages": [
-            "~u02e9633d-4ce7-80da-8007-736558496fa8"
-        ],
-        "~:pages-index": {
-            "~u02e9633d-4ce7-80da-8007-736558496fa8": {
-                "~:id": "~u02e9633d-4ce7-80da-8007-736558496fa8",
-                "~:name": "Page 1",
-                "~:objects": {
-                    "~#penpot/objects-map/v2": {
-                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^I\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~u77c71dba-32ee-804c-8007-736561cf857f\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff457": "[\"~#shape\",[\"^ \",\"~:y\",396.00000357564704,\"~:rx\",8,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",396.00000357564704]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",476.00000357564704]],[\"^>\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",476.00000357564704]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704,\"^9\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",396.00000357564704,\"~:x2\",768.9999775886536,\"~:y2\",476.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2885": "[\"~#shape\",[\"^ \",\"~:y\",612.0000188344361,\"~:rx\",8,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",612.0000188344361]],[\"^>\",[\"^ \",\"~:x\",684.9999165534973,\"~:y\",612.0000188344361]],[\"^>\",[\"^ \",\"~:x\",684.9999165534973,\"~:y\",692.0000188344361]],[\"^>\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",692.0000188344361]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",604.9999165534973,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",612.0000188344361,\"^9\",80,\"~:height\",80,\"~:x1\",604.9999165534973,\"~:y1\",612.0000188344361,\"~:x2\",684.9999165534973,\"~:y2\",692.0000188344361]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2886": "[\"~#shape\",[\"^ \",\"~:y\",636.0000188344361,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",636.0000188344361]],[\"^K\",[\"^ \",\"~:x\",677.9999165534973,\"~:y\",636.0000188344361]],[\"^K\",[\"^ \",\"~:x\",677.9999165534973,\"~:y\",668.0000188344361]],[\"^K\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",668.0000188344361]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",611.9999165534973,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",636.0000188344361,\"^E\",66,\"~:height\",32,\"~:x1\",611.9999165534973,\"~:y1\",636.0000188344361,\"~:x2\",677.9999165534973,\"~:y2\",668.0000188344361]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2887\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2887": "[\"~#shape\",[\"^ \",\"~:y\",644.0000188344361,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",644.0000188344361]],[\"^K\",[\"^ \",\"~:x\",665.9999165534973,\"~:y\",644.0000188344361]],[\"^K\",[\"^ \",\"~:x\",665.9999165534973,\"~:y\",660.0000188344361]],[\"^K\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",660.0000188344361]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:strokes\",[],\"~:x\",623.9999165534973,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",644.0000188344361,\"^D\",42,\"~:height\",16,\"~:x1\",623.9999165534973,\"~:y1\",644.0000188344361,\"~:x2\",665.9999165534973,\"~:y2\",660.0000188344361]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2888\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2888": "[\"~#shape\",[\"^ \",\"~:y\",645.0000188344363,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",645.0000188344363]],[\"^S\",[\"^ \",\"~:x\",663.9999165534973,\"~:y\",645.0000188344363]],[\"^S\",[\"^ \",\"~:x\",663.9999165534973,\"~:y\",660.0000188344359]],[\"^S\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",660.0000188344363]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2888\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:position-data\",[[\"^ \",\"~:y\",659.3400268554688,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",626.0299682617188,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:strokes\",[],\"~:x\",625.9999165534973,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",645.0000188344363,\"^Q\",38,\"^11\",15,\"~:x1\",625.9999165534973,\"~:y1\",645.0000188344363,\"~:x2\",663.9999165534973,\"~:y2\",660.0000188344363]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff45a": "[\"~#shape\",[\"^ \",\"~:y\",429.00000357564727,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",429.00000357564727]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",429.00000357564727]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",444.0000035756468]],[\"^S\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",444.00000357564727]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff45a\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:position-data\",[[\"^ \",\"~:y\",443.3399963378906,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",710.030029296875,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.079986572265625,\"^L\",\"Label\"]],\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:strokes\",[],\"~:x\",709.9999775886536,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",429.00000357564727,\"^Q\",38,\"^11\",15,\"~:x1\",709.9999775886536,\"~:y1\",429.00000357564727,\"~:x2\",747.9999775886536,\"~:y2\",444.00000357564727]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff459": "[\"~#shape\",[\"^ \",\"~:y\",428.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",428.00000357564704]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",428.00000357564704]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",444.00000357564704]],[\"^K\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",444.00000357564704]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:strokes\",[],\"~:x\",707.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",428.00000357564704,\"^D\",42,\"~:height\",16,\"~:x1\",707.9999775886536,\"~:y1\",428.00000357564704,\"~:x2\",749.9999775886536,\"~:y2\",444.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff45a\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff458": "[\"~#shape\",[\"^ \",\"~:y\",420.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",420.00000357564704]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",420.00000357564704]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",452.00000357564704]],[\"^K\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",452.00000357564704]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",695.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",420.00000357564704,\"^E\",66,\"~:height\",32,\"~:x1\",695.9999775886536,\"~:y1\",420.00000357564704,\"~:x2\",761.9999775886536,\"~:y2\",452.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff459\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cf857f": "[\"~#shape\",[\"^ \",\"~:y\",395.99997913999186,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 1\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",395.99997913999186]],[\"^J\",[\"^ \",\"~:x\",865.0000386238098,\"~:y\",395.99997913999186]],[\"^J\",[\"^ \",\"~:x\",865.0000386238098,\"~:y\",475.9999669761459]],[\"^J\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",475.9999669761459]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",593.0000386238098,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",395.99997913999186,\"^D\",272,\"~:height\",79.99998783615405,\"~:x1\",593.0000386238098,\"~:y1\",395.99997913999186,\"~:x2\",865.0000386238098,\"~:y2\",475.9999669761459]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.99998783615405,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cf8584\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d50980078e": "[\"~#shape\",[\"^ \",\"~:y\",720.0000478045426,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 4\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",720.0000478045426]],[\"^J\",[\"^ \",\"~:x\",864.9998555183411,\"~:y\",720.0000478045426]],[\"^J\",[\"^ \",\"~:x\",864.9998555183411,\"~:y\",800.0000356406968]],[\"^J\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",800.0000356406968]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9998555183411,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",720.0000478045426,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9998555183411,\"~:y1\",720.0000478045426,\"~:x2\",864.9998555183411,\"~:y2\",800.0000356406968]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078f\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d50980078f": "[\"~#shape\",[\"^ \",\"~:y\",719.9999806874634,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",719.9999806874634]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",719.9999806874634]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",799.9999806874634]],[\"^;\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",799.9999806874634]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:strokes\",[],\"~:x\",604.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",719.9999806874634,\"^7\",80,\"~:height\",80,\"~:x1\",604.9999775886536,\"~:y1\",719.9999806874634,\"~:x2\",684.9999775886536,\"~:y2\",799.9999806874634]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~u94eaebe4-addd-80d1-8007-79d509800791\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508a9dc2f": "[\"~#shape\",[\"^ \",\"~:y\",612.000024916359,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 3\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",612.000024916359]],[\"^J\",[\"^ \",\"~:x\",864.9999165534973,\"~:y\",612.000024916359]],[\"^J\",[\"^ \",\"~:x\",864.9999165534973,\"~:y\",692.0000127525132]],[\"^J\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",692.0000127525132]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9999165534973,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",612.000024916359,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9999165534973,\"~:y1\",612.000024916359,\"~:x2\",864.9999165534973,\"~:y2\",692.0000127525132]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800790": "[\"~#shape\",[\"^ \",\"~:y\",720.0000417226197,\"~:rx\",8,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",720.0000417226197]],[\"^>\",[\"^ \",\"~:x\",684.9998555183411,\"~:y\",720.0000417226197]],[\"^>\",[\"^ \",\"~:x\",684.9998555183411,\"~:y\",800.0000417226197]],[\"^>\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",800.0000417226197]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",604.9998555183411,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",720.0000417226197,\"^9\",80,\"~:height\",80,\"~:x1\",604.9998555183411,\"~:y1\",720.0000417226197,\"~:x2\",684.9998555183411,\"~:y2\",800.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508a9dc30": "[\"~#shape\",[\"^ \",\"~:y\",612.0000188344361,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",612.0000188344361]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",612.0000188344361]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",692.0000188344361]],[\"^;\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",692.0000188344361]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:strokes\",[],\"~:x\",604.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",612.0000188344361,\"^7\",80,\"~:height\",80,\"~:x1\",604.9999775886536,\"~:y1\",612.0000188344361,\"~:x2\",684.9999775886536,\"~:y2\",692.0000188344361]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800791": "[\"~#shape\",[\"^ \",\"~:y\",744.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",744.0000417226197]],[\"^K\",[\"^ \",\"~:x\",677.9998555183411,\"~:y\",744.0000417226197]],[\"^K\",[\"^ \",\"~:x\",677.9998555183411,\"~:y\",776.0000417226197]],[\"^K\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",776.0000417226197]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",611.9998555183411,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",744.0000417226197,\"^E\",66,\"~:height\",32,\"~:x1\",611.9998555183411,\"~:y1\",744.0000417226197,\"~:x2\",677.9998555183411,\"~:y2\",776.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800792\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800792": "[\"~#shape\",[\"^ \",\"~:y\",752.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",752.0000417226197]],[\"^K\",[\"^ \",\"~:x\",665.9998555183411,\"~:y\",752.0000417226197]],[\"^K\",[\"^ \",\"~:x\",665.9998555183411,\"~:y\",768.0000417226197]],[\"^K\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",768.0000417226197]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:strokes\",[],\"~:x\",623.9998555183411,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",752.0000417226197,\"^D\",42,\"~:height\",16,\"~:x1\",623.9998555183411,\"~:y1\",752.0000417226197,\"~:x2\",665.9998555183411,\"~:y2\",768.0000417226197]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800793\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800793": "[\"~#shape\",[\"^ \",\"~:y\",753.0000417226199,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",753.0000417226199]],[\"^S\",[\"^ \",\"~:x\",663.9998555183411,\"~:y\",753.0000417226199]],[\"^S\",[\"^ \",\"~:x\",663.9998555183411,\"~:y\",768.0000417226195]],[\"^S\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",768.0000417226199]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800793\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:position-data\",[[\"^ \",\"~:y\",767.340087890625,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",626.0299072265625,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:strokes\",[],\"~:x\",625.9998555183411,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",753.0000417226199,\"^Q\",38,\"^11\",15,\"~:x1\",625.9998555183411,\"~:y1\",753.0000417226199,\"~:x2\",663.9998555183411,\"~:y2\",768.0000417226199]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cf8584": "[\"~#shape\",[\"^ \",\"~:y\",396.00000357564704,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",396.00000357564704]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",476.00000357564704]],[\"^;\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",476.00000357564704]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704,\"^7\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",396.00000357564704,\"~:x2\",768.9999775886536,\"~:y2\",476.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~u77c71dba-32ee-804c-8007-736561cff458\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d6859": "[\"~#shape\",[\"^ \",\"~:y\",504.00000202817546,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 2\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",504.00000202817546]],[\"^J\",[\"^ \",\"~:x\",864.9999775886536,\"~:y\",504.00000202817546]],[\"^J\",[\"^ \",\"~:x\",864.9999775886536,\"~:y\",583.9999898643296]],[\"^J\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",583.9999898643296]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",504.00000202817546,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9999775886536,\"~:y1\",504.00000202817546,\"~:x2\",864.9999775886536,\"~:y2\",583.9999898643296]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685a\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685a": "[\"~#shape\",[\"^ \",\"~:y\",503.9999959462525,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",503.9999959462525]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",583.9999959462525]],[\"^;\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",583.9999959462525]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525,\"^7\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",503.9999959462525,\"~:x2\",768.9999775886536,\"~:y2\",583.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685b": "[\"~#shape\",[\"^ \",\"~:y\",503.9999959462525,\"~:rx\",8,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",503.9999959462525]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",583.9999959462525]],[\"^>\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",583.9999959462525]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525,\"^9\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",503.9999959462525,\"~:x2\",768.9999775886536,\"~:y2\",583.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685c": "[\"~#shape\",[\"^ \",\"~:y\",527.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",527.9999959462525]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",527.9999959462525]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",559.9999959462525]],[\"^K\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",559.9999959462525]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",695.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",527.9999959462525,\"^E\",66,\"~:height\",32,\"~:x1\",695.9999775886536,\"~:y1\",527.9999959462525,\"~:x2\",761.9999775886536,\"~:y2\",559.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685d\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685d": "[\"~#shape\",[\"^ \",\"~:y\",535.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",535.9999959462525]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",535.9999959462525]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",551.9999959462525]],[\"^K\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",551.9999959462525]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:strokes\",[],\"~:x\",707.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",535.9999959462525,\"^D\",42,\"~:height\",16,\"~:x1\",707.9999775886536,\"~:y1\",535.9999959462525,\"~:x2\",749.9999775886536,\"~:y2\",551.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685e\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685e": "[\"~#shape\",[\"^ \",\"~:y\",536.9999959462527,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",536.9999959462527]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",536.9999959462527]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",551.9999959462523]],[\"^S\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",551.9999959462527]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685e\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:position-data\",[[\"^ \",\"~:y\",551.3400268554688,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",710.030029296875,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:strokes\",[],\"~:x\",709.9999775886536,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",536.9999959462527,\"^Q\",38,\"^11\",15,\"~:x1\",709.9999775886536,\"~:y1\",536.9999959462527,\"~:x2\",747.9999775886536,\"~:y2\",551.9999959462527]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]"
-                    }
-                }
-            }
-        },
-        "~:id": "~u31fe2e21-73e7-80f3-8007-73894fb58240",
-        "~:options": {
-            "~:components-v2": true,
-            "~:base-font-size": "16px"
-        }
-    }
-}
--- 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/data/workspace/create-file-object-thumbnail.json
+++ b/frontend/playwright/data/workspace/create-file-object-thumbnail.json
@@ -1,7 +0,0 @@
-{
-  "~:file-id": "~u8d38942d-b01f-800e-8007-79ee6a9bac45",
-  "~:tag": "component",
-  "~:object-id": "8d38942d-b01f-800e-8007-79ee6a9bac45/8d38942d-b01f-800e-8007-79ee6a9bac46/6b68aedd-4c5b-80b9-8007-7b38c1d34ce4/component",
-  "~:media-id": "~ube2dc82e-615b-486b-a193-8768bdb51d7a",
-  "~:created-at": "~m1769523563389"
-}
--- a/frontend/playwright/ui/pages/WorkspacePage.js
+++ b/frontend/playwright/ui/pages/WorkspacePage.js
@@ -58,10 +58,10 @@ export class WorkspacePage extends BaseWebSocketPage {

    async waitForTextSpan(nth = 0) {
      if (!nth) {
-        return this.page.waitForSelector('[data-itype="span"]');
+        return this.page.waitForSelector('[data-itype="inline"]');
      }
      return this.page.waitForSelector(
-        `[data-itype="span"]:nth-child(${nth})`,
+        `[data-itype="inline"]:nth-child(${nth})`,
      );
    }

@@ -253,7 +253,7 @@ export class WorkspacePage extends BaseWebSocketPage {

  async #waitForWebSocketReadiness() {
    // TODO: find a better event to settle whether the app is ready to receive notifications via ws
-    await expect(this.pageName).toHaveText("Page 1", { timeout: 30000 })
+    await expect(this.pageName).toHaveText("Page 1");
  }

  async sendPresenceMessage(fixture) {
@@ -383,46 +383,19 @@ export class WorkspacePage extends BaseWebSocketPage {
    await this.page.keyboard.press("T");
    await this.page.waitForTimeout(timeToWait);
    await this.clickAndMove(x1, y1, x2, y2);
-    await expect(this.page.getByTestId("text-editor")).toBeVisible();
-
+    await this.page.waitForTimeout(timeToWait);
    if (initialText) {
      await this.page.keyboard.type(initialText);
    }
  }

  /**
-   * Copies the selected element into the clipboard, or copy the
-   * content of the locator into the clipboard.
+   * Copies the selected element into the clipboard.
   *
   * @returns {Promise<void>}
   */
-  async copy(kind = "keyboard", locator = undefined) {
-    if (kind === "context-menu" && locator) {
-      await locator.click({ button: "right" });
-      await this.page.getByText("Copy", { exact: true }).click();
-    } else {
-      await this.page.keyboard.press("ControlOrMeta+C");
-    }
-    // wait for the clipboard to be updated
-    await this.page.waitForFunction(async () => {
-      const content = await navigator.clipboard.readText()
-      return content !== "";
-    }, { timeout: 1000 });
-  }
-
-  async cut(kind = "keyboard", locator = undefined) {
-    if (kind === "context-menu" && locator) {
-      await locator.click({ button: "right" });
-      await this.page.getByText("Cut", { exact: true }).click();
-    } else {
-      await this.page.keyboard.press("ControlOrMeta+X");
-    }
-    // wait for the clipboard to be updated
-    await this.page.waitForFunction(async () => {
-      const content = await navigator.clipboard.readText()
-      return content !== "";
-    }, { timeout: 1000 });
-
+  async copy() {
+    return this.page.keyboard.press("Control+C");
  }

  /**
@@ -434,9 +407,9 @@ export class WorkspacePage extends BaseWebSocketPage {
  async paste(kind = "keyboard") {
    if (kind === "context-menu") {
      await this.viewport.click({ button: "right" });
-      return this.page.getByText("Paste", { exact: true }).click();
+      return this.page.getByText("PasteCtrlV").click();
    }
-    return this.page.keyboard.press("ControlOrMeta+V");
+    return this.page.keyboard.press("Control+V");
  }

  async panOnViewportAt(x, y, width, height) {
@@ -475,11 +448,11 @@ export class WorkspacePage extends BaseWebSocketPage {
    const layer = this.layers
      .getByTestId("layer-row")
      .filter({ hasText: name });
-    const button = layer.getByTestId("toggle-content");
+    const button = layer.getByRole("button");

-    await expect(button).toBeVisible();
+    await button.waitFor();
    await button.click(clickOptions);
-    await button.waitFor({ ariaExpanded: true });
+    await this.page.waitForTimeout(500);
  }

  async expectSelectedLayer(name) {
@@ -522,7 +495,13 @@ export class WorkspacePage extends BaseWebSocketPage {

  async clickColorPalette(clickOptions = {}) {
    await this.palette
-      .getByRole("button", { name: /Color Palette/ })
+      .getByRole("button", { name: "Color Palette (Alt+P)" })
+      .click(clickOptions);
+  }
+
+  async clickColorPalette(clickOptions = {}) {
+    await this.palette
+      .getByRole("button", { name: "Color Palette (Alt+P)" })
      .click(clickOptions);
  }

--- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js
+++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js
@@ -210,22 +210,6 @@ test("Renders a file with shadows applied to any kind of shape", async ({
  await expect(workspace.canvas).toHaveScreenshot();
 });

-test("Renders a file with flex layouts and different directions", async ({
-  page,
-}) => {
-  const workspace = new WasmWorkspacePage(page);
-  await workspace.setupEmptyFile();
-  await workspace.mockGetFile("render-wasm/get-file-flex-layouts.json");
-
-  await workspace.goToWorkspace({
-    id: "31fe2e21-73e7-80f3-8007-73894fb58240",
-    pageId: "02e9633d-4ce7-80da-8007-736558496fa8",
-  });
-  await workspace.waitForFirstRenderWithoutUI();
-
-  await expect(workspace.canvas).toHaveScreenshot();
-});
-
 test("Renders a file with a closed path shape with multiple segments using strokes and shadow", async ({
  page,
 }) => {
--- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-flex-layouts-and-different-directions-1.png
+++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-flex-layouts-and-different-directions-1.png
--- 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/playwright/ui/specs/onboarding.spec.js
+++ b/frontend/playwright/ui/specs/onboarding.spec.js
@@ -15,8 +15,6 @@ test("User can complete the onboarding", async ({ page }) => {
  const dashboardPage = new DashboardPage(page);
  const onboardingPage = new OnboardingPage(page);

-  await dashboardPage.mockConfigFlags(["enable-onboarding"]);
-
  await dashboardPage.goToDashboard();
  await expect(
    page.getByRole("heading", { name: "Help us get to know you" }),
--- a/frontend/playwright/ui/specs/render-wasm.spec.js
+++ b/frontend/playwright/ui/specs/render-wasm.spec.js
@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+import { WasmWorkspacePage, WASM_FLAGS } from "../pages/WasmWorkspacePage";

 test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
--- a/frontend/playwright/ui/specs/text-editor-v2.spec.js
+++ b/frontend/playwright/ui/specs/text-editor-v2.spec.js
@@ -5,7 +5,7 @@ import { WorkspacePage } from "../pages/WorkspacePage";
 const timeToWait = 100;

 test.beforeEach(async ({ page, context }) => {
-  await Clipboard.enable(context, Clipboard.Permission.ALL);
+  await Clipboard.enable(context, Clipboard.Permission.ONLY_WRITE);

  await WorkspacePage.init(page);
  await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
--- a/frontend/playwright/ui/specs/variants.spec.js
+++ b/frontend/playwright/ui/specs/variants.spec.js
@@ -1,19 +1,12 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage  } from "../pages/WorkspacePage";
+import { WorkspacePage } from "../pages/WorkspacePage";
 import { BaseWebSocketPage } from "../pages/BaseWebSocketPage";
-import { Clipboard } from "../../helpers/Clipboard";
-
-test.beforeEach(async ({ page, context }) => {
-  await Clipboard.enable(context, Clipboard.Permission.ALL);

+test.beforeEach(async ({ page }) => {
  await WorkspacePage.init(page);
  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-variants.json");
 });

-test.afterEach(async ({ context }) => {
-  context.clearPermissions();
-});
-
 const setupVariantsFile = async (workspacePage) => {
  await workspacePage.setupEmptyFile();
  await workspacePage.mockRPC(
@@ -41,9 +34,9 @@ const setupVariantsFileWithVariant = async (workspacePage) => {
  await setupVariantsFile(workspacePage);

  await workspacePage.clickLeafLayer("Rectangle");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");
  await workspacePage.page.waitForTimeout(500);
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");
  await workspacePage.page.waitForTimeout(500);

  // We wait until layer-row starts looking like it an component
@@ -163,7 +156,7 @@ test("User duplicates a variant container", async ({ page }) => {
  await variant.container.click();

  //Duplicate the variant container
-  await workspacePage.page.keyboard.press("ControlOrMeta+d");
+  await workspacePage.page.keyboard.press("Control+d");

  const variant_original = await findVariant(workspacePage, 1); // On duplicate, the new item is the first
  const variant_duplicate = await findVariant(workspacePage, 0);
@@ -176,27 +169,25 @@ test("User duplicates a variant container", async ({ page }) => {
  await validateVariant(variant_duplicate);
 });

-test("User copy paste a variant container", async ({ page, context }) => {
+test("User copy paste a variant container", async ({ page }) => {
  const workspacePage = new WorkspacePage(page);
-  // Access to the read/write clipboard necesary for this functionality
  await setupVariantsFileWithVariant(workspacePage);
-  await workspacePage.mockRPC(
-    /create-file-object-thumbnail.*/,
-    "workspace/create-file-object-thumbnail.json",
-  );

  const variant = findVariantNoWait(workspacePage, 0);

+  // await variant.container.waitFor();
+
+  // Select the variant container
+  await variant.container.click();
+
+  await workspacePage.page.waitForTimeout(1000);
+
  // Copy the variant container
-  await workspacePage.clickLeafLayer("Rectangle");
-  await workspacePage.copy("keyboard");
+  await workspacePage.page.keyboard.press("Control+c");

  // Paste the variant container
  await workspacePage.clickAt(400, 400);
-  await workspacePage.paste("keyboard");
-
-  const variants = workspacePage.layers.getByText("Rectangle");
-  await expect(variants).toHaveCount(2);
+  await workspacePage.page.keyboard.press("Control+v");

  const variantDuplicate = findVariantNoWait(workspacePage, 0);
  const variantOriginal = findVariantNoWait(workspacePage, 1);
@@ -221,17 +212,18 @@ test("User cut paste a variant container", async ({ page }) => {
  await variant.container.click();

  //Cut the variant container
-  await workspacePage.cut("keyboard");
+  await workspacePage.page.keyboard.press("Control+x");
+  await workspacePage.page.waitForTimeout(500);

  //Paste the variant container
  await workspacePage.clickAt(500, 500);
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");
  await workspacePage.page.waitForTimeout(500);

  const variantPasted = await findVariant(workspacePage, 0);

  // Expand the layers
-  await workspacePage.clickToggableLayer("Rectangle");
+  await variantPasted.container.locator("button").first().click();

  // The variants are valid
  await validateVariant(variantPasted);
@@ -247,34 +239,27 @@ test("User cut paste a variant container into a board, and undo twice", async ({

  //Create a board
  await workspacePage.boardButton.click();
-  // NOTE: this board should not intersect the existing variants, otherwise
-  // this test is flaky
-  await workspacePage.clickWithDragViewportAt(200, 200, 100, 100);
+  await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
  await workspacePage.clickAt(495, 495);
  const board = await workspacePage.rootShape.locator("Board");

  // Select the variant container
-  // await variant.container.click();
-  await workspacePage.clickLeafLayer("Rectangle");
+  await variant.container.click();

  //Cut the variant container
-  await workspacePage.cut("keyboard");
-  await expect(variant.container).not.toBeVisible();
+  await workspacePage.page.keyboard.press("Control+x");
+  await workspacePage.page.waitForTimeout(500);

  //Select the board
  await workspacePage.clickLeafLayer("Board");

  //Paste the variant container inside the board
-  await workspacePage.paste("keyboard");
-  await expect(variant.container).toBeVisible();
+  await workspacePage.page.keyboard.press("Control+v");

  //Undo twice
-  await workspacePage.page.keyboard.press("ControlOrMeta+z");
-
-  await expect(variant.container).not.toBeVisible();
-
-  await workspacePage.page.keyboard.press("ControlOrMeta+z");
-  await expect(variant.container).toBeVisible();
+  await workspacePage.page.keyboard.press("Control+z");
+  await workspacePage.page.keyboard.press("Control+z");
+  await workspacePage.page.waitForTimeout(500);

  const variantAfterUndo = await findVariant(workspacePage, 0);

@@ -291,12 +276,12 @@ test("User copy paste a variant", async ({ page }) => {
  // Select the variant1
  await variant.variant1.click();

-  // Copy the variant
-  await workspacePage.copy("keyboard");
+  //Cut the variant
+  await workspacePage.page.keyboard.press("Control+c");

-  // Paste the variant
+  //Paste the variant
  await workspacePage.clickAt(500, 500);
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");

  const copy = await workspacePage.layers
    .getByTestId("layer-row")
@@ -317,11 +302,11 @@ test("User cut paste a variant outside the container", async ({ page }) => {
  await variant.variant1.click();

  //Cut the variant
-  await workspacePage.cut("keyboard");
+  await workspacePage.page.keyboard.press("Control+x");

  //Paste the variant
  await workspacePage.clickAt(500, 500);
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");

  const component = await workspacePage.layers
    .getByTestId("layer-row")
@@ -339,11 +324,15 @@ test("User drag and drop a variant outside the container", async ({ page }) => {
  const variant = await findVariant(workspacePage, 0);

  // Drag and drop the variant
-  // FIXME: to make this test more resilient, we should get the bounding box of the Value 1 variant
-  // and use it to calculate the target position
-  await workspacePage.clickWithDragViewportAt(600, 500, 0, 300);
+  await workspacePage.clickWithDragViewportAt(350, 400, 0, 200);

-  await expect(workspacePage.layers.getByText("Rectangle / Value 1")).toBeVisible();
+  const component = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
+    .filter({ has: workspacePage.page.getByTestId("icon-component") });
+
+  //The component exists and is visible
+  await expect(component).toBeVisible();
 });

 test("User cut paste a component inside a variant", async ({ page }) => {
@@ -356,14 +345,14 @@ test("User cut paste a component inside a variant", async ({ page }) => {
  await workspacePage.ellipseShapeButton.click();
  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");

  //Cut the component
-  await workspacePage.cut("keyboard");
+  await workspacePage.page.keyboard.press("Control+x");

  //Paste the component inside the variant
  await variant.container.click();
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");

  const variant3 = await workspacePage.layers
    .getByTestId("layer-row")
@@ -387,7 +376,7 @@ test("User cut paste a component with path inside a variant", async ({
  await workspacePage.ellipseShapeButton.click();
  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");

  //Rename the component
  await workspacePage.layers.getByText("Ellipse").dblclick();
@@ -398,11 +387,11 @@ test("User cut paste a component with path inside a variant", async ({
  await workspacePage.page.keyboard.press("Enter");

  //Cut the component
-  await workspacePage.cut("keyboard");
+  await workspacePage.page.keyboard.press("Control+x");

  //Paste the component inside the variant
  await variant.container.click();
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");

  const variant3 = await workspacePage.layers
    .getByTestId("layer-row")
@@ -426,7 +415,7 @@ test("User drag and drop a component with path inside a variant", async ({
  await workspacePage.ellipseShapeButton.click();
  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");

  //Rename the component
  await workspacePage.layers.getByText("Ellipse").dblclick();
@@ -437,7 +426,7 @@ test("User drag and drop a component with path inside a variant", async ({
  await workspacePage.page.keyboard.press("Enter");

  //Drag and drop the component the component
-  await workspacePage.clickWithDragViewportAt(510, 510, 200, 0);
+  await workspacePage.clickWithDragViewportAt(510, 510, 0, -200);

  const variant3 = await workspacePage.layers
    .getByTestId("layer-row")
@@ -457,8 +446,8 @@ test("User cut paste a variant into another container", async ({ page }) => {
  await workspacePage.ellipseShapeButton.click();
  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
-  await workspacePage.page.keyboard.press("ControlOrMeta+k");
+  await workspacePage.page.keyboard.press("Control+k");
+  await workspacePage.page.keyboard.press("Control+k");

  const variantOrigin = await findVariantNoWait(workspacePage, 1);

@@ -468,11 +457,11 @@ test("User cut paste a variant into another container", async ({ page }) => {
  await variantOrigin.variant1.click();

  //Cut the variant
-  await workspacePage.cut("keyboard");
+  await workspacePage.page.keyboard.press("Control+x");

  //Paste the variant
  await workspacePage.layers.getByText("Ellipse").first().click();
-  await workspacePage.paste("keyboard");
+  await workspacePage.page.keyboard.press("Control+v");

  const variant3 = workspacePage.layers
    .getByTestId("layer-row")
--- a/frontend/playwright/ui/specs/workspace.spec.js
+++ b/frontend/playwright/ui/specs/workspace.spec.js
@@ -1,13 +1,13 @@
 import { test, expect } from "@playwright/test";
-import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+import { WorkspacePage } from "../pages/WorkspacePage";
 import { presenceFixture } from "../../data/workspace/ws-notifications";

 test.beforeEach(async ({ page }) => {
-  await WasmWorkspacePage.init(page);
+  await WorkspacePage.init(page);
 });

 test("User loads worskpace with empty file", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);

  await workspacePage.goToWorkspace();
@@ -16,7 +16,7 @@ test("User loads worskpace with empty file", async ({ page }) => {
 });

 test("User opens a file with a bad page id", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);

  await workspacePage.goToWorkspace({
@@ -29,7 +29,7 @@ test("User opens a file with a bad page id", async ({ page }) => {
 test("User receives presence notifications updates in the workspace", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();

  await workspacePage.goToWorkspace();
@@ -41,7 +41,7 @@ test("User receives presence notifications updates in the workspace", async ({
 });

 test("User draws a rect", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.mockRPC(
    "update-file?id=*",
@@ -52,12 +52,13 @@ test("User draws a rect", async ({ page }) => {
  await workspacePage.rectShapeButton.click();
  await workspacePage.clickWithDragViewportAt(128, 128, 200, 100);

-  await workspacePage.hideUI();
-  await expect(workspacePage.canvas).toHaveScreenshot();
+  const shape = await workspacePage.rootShape.locator("rect");
+  await expect(shape).toHaveAttribute("width", "200");
+  await expect(shape).toHaveAttribute("height", "100");
 });

 test("User makes a group", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.mockRPC(
    /get\-file\?/,
@@ -73,14 +74,14 @@ test("User makes a group", async ({ page }) => {
    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
  });
  await workspacePage.clickLeafLayer("Rectangle");
-  await workspacePage.page.keyboard.press("ControlOrMeta+g");
+  await workspacePage.page.keyboard.press("Control+g");
  await workspacePage.expectSelectedLayer("Group");
 });

 test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.goToWorkspace();

@@ -90,10 +91,10 @@ test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({
  await workspacePage.expectHiddenToolbarOptions();
 });

-test("Bug 7525 - User moves a scrollbar and no selection rectangle appears", async ({
+test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.mockRPC(
    /get\-file\?/,
@@ -109,8 +110,8 @@ test("Bug 7525 - User moves a scrollbar and no selection rectangle appears", asy
    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
  });

-  // Move created rect to a corner, in order to get scrollbars
-  await workspacePage.panOnViewportAt(128, 128, 600, 600);
+  // Move created rect to a corner, in orther to get scrollbars
+  await workspacePage.panOnViewportAt(128, 128, 300, 300);

  // Check scrollbars appear
  const horizontalScrollbar = workspacePage.horizontalScrollbar;
@@ -129,7 +130,7 @@ test("Bug 7525 - User moves a scrollbar and no selection rectangle appears", asy
 test("User adds a library and its automatically selected in the color palette", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.mockRPC(
    "link-file-to-library",
@@ -174,7 +175,7 @@ test("User adds a library and its automatically selected in the color palette",
 test("Bug 10179 - Drag & drop doesn't add colors to the Recent Colors palette", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.goToWorkspace();
  await workspacePage.moveButton.click();
@@ -217,7 +218,7 @@ test("Bug 10179 - Drag & drop doesn't add colors to the Recent Colors palette",
 test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-shortcut", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.goToWorkspace();

@@ -234,7 +235,7 @@ test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-
 test("Bug 8784 - Use keyboard arrow to move inside a text input does not change tabs", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile();
  await workspacePage.goToWorkspace();
  await workspacePage.pageName.click();
@@ -244,7 +245,7 @@ test("Bug 8784 - Use keyboard arrow to move inside a text input does not change
 });

 test("Bug 9066 - Problem with grid layout", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9066.json");

@@ -272,7 +273,7 @@ test("Bug 9066 - Problem with grid layout", async ({ page }) => {
 });

 test("User have toolbar", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.goToWorkspace();

@@ -281,7 +282,7 @@ test("User have toolbar", async ({ page }) => {
 });

 test("User have edition menu entries", async ({ page }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.goToWorkspace();

@@ -297,7 +298,7 @@ test("User have edition menu entries", async ({ page }) => {
 });

 test("Copy/paste properties", async ({ page, context }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
@@ -354,23 +355,23 @@ test("Copy/paste properties", async ({ page, context }) => {
 });

 test("[Taiga #9929] Paste text in workspace", async ({ page, context }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.goToWorkspace();
  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
  await page.evaluate(() => navigator.clipboard.writeText("Lorem ipsum dolor"));
  await workspacePage.viewport.click({ button: "right" });
-  await page.getByText(/^Paste/i).click();
+  await page.getByText("PasteCtrlV").click();
  await workspacePage.viewport
    .getByRole("textbox")
    .getByText("Lorem ipsum dolor");
 });

-test("[Taiga #9930] Zoom fit all doesn't fit all shapes", async ({
+test("[Taiga #9930] Zoom fit all doesn't fits all", async ({
  page,
  context,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9930.json");
  await workspacePage.goToWorkspace({
@@ -378,18 +379,16 @@ test("[Taiga #9930] Zoom fit all doesn't fit all shapes", async ({
    pageId: "fb9798e7-a547-80ae-8005-9ffda4a13e2c",
  });

-  const zoom = page.getByTitle("Zoom");
+  const zoom = await page.getByTitle("Zoom");
  await zoom.click();

-  const zoomIn = page.getByRole("button", { name: "Zoom in" });
+  const zoomIn = await page.getByRole("button", { name: "Zoom in" });
  await zoomIn.click();
  await zoomIn.click();
  await zoomIn.click();

  // Zoom fit all
  await page.keyboard.press("Shift+1");
-  // Select all shapes to display selrect
-  await workspacePage.page.keyboard.press("ControlOrMeta+a");

  const ids = [
    "shape-165d1e5a-5873-8010-8005-9ffdbeaeec59",
@@ -411,7 +410,7 @@ test("[Taiga #9930] Zoom fit all doesn't fit all shapes", async ({

  const viewportBoundingBox = await workspacePage.viewport.boundingBox();
  for (const id of ids) {
-    const shape = page.locator(`.viewport-selrect`);
+    const shape = await page.locator(`.ws-shape-wrapper > g#${id}`);
    const shapeBoundingBox = await shape.boundingBox();
    expect(contains(viewportBoundingBox, shapeBoundingBox)).toBeTruthy();
  }
@@ -420,7 +419,7 @@ test("[Taiga #9930] Zoom fit all doesn't fit all shapes", async ({
 test("Bug 9877, user navigation to dashboard from header goes to blank page", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);

  await workspacePage.goToWorkspace();
@@ -437,7 +436,7 @@ test("Bug 9877, user navigation to dashboard from header goes to blank page", as
 test("Bug 8371 - Flatten option is not visible in context menu", async ({
  page,
 }) => {
-  const workspacePage = new WasmWorkspacePage(page);
+  const workspacePage = new WorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockGetFile("workspace/get-file-8371.json");
  await workspacePage.goToWorkspace({
--- a/frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-1.png
+++ b/frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-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/shadows.html
+++ b/frontend/resources/wasm-playground/shadows.html
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8" />
-  <title>WASM + WebGL2 Canvas</title>
-  <style>
-    body {
-      margin: 0;
-      background: #111;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      overflow: hidden;
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-  </style>
-</head>
-<body>
-  <canvas id="canvas"></canvas>
-  <script type="module">
-    import initWasmModule from '/js/render-wasm.js';
-    import {
-      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
-      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill
-    } from './js/lib.js';
-
-    const canvas = document.getElementById("canvas");
-    canvas.width =  window.innerWidth;
-    canvas.height = window.innerHeight;
-
-    const params = new URLSearchParams(document.location.search);
-    const shapes = params.get("shapes") || 1000;
-
-    initWasmModule().then(Module => {
-      init(Module);
-      assignCanvas(canvas);
-      Module._set_canvas_background(hexToU32ARGB("#FABADA", 1));
-      Module._init_shapes_pool(shapes + 1);
-      setupInteraction(canvas);
-
-      const children = [];
-      for (let i = 0; i < shapes; i++) {
-        const uuid = crypto.randomUUID();
-        children.push(uuid);
-
-        useShape(uuid);
-        Module._set_parent(0, 0, 0, 0);
-        Module._set_shape_type(3);
-        const x1 = getRandomInt(0, canvas.width);
-        const y1 = getRandomInt(0, canvas.height);
-        const width = getRandomInt(20, 100);
-        const height = getRandomInt(20, 100);
-        Module._set_shape_selrect(x1, y1, x1 + width, y1 + height);
-
-        const color = getRandomColor();
-        const argb = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
-        addShapeSolidFill(argb)
-
-        Module._add_shape_center_stroke(10, 0,  0, 0);
-        const argb2 = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
-        addShapeSolidStrokeFill(argb2);
-
-        // Add shadows
-        // Shadow 1: drop-shadow, #dedede opacity 0.33, blur 4, spread -2, offsetX 0, offsetY 2
-        Module._add_shape_shadow(hexToU32ARGB("#dedede", 0.33), 4, -2, 0, 2, 0, false);
-        // Shadow 2: drop-shadow, #dedede opacity 1, blur 12, spread -8, offsetX 0, offsetY 12
-        Module._add_shape_shadow(hexToU32ARGB("#dedede", 1), 12, -8, 0, 12, 0, false);
-        // Shadow 3: inner-shadow, #002046 opacity 0.12, blur 12, spread -8, offsetX 0, offsetY -4
-        Module._add_shape_shadow(hexToU32ARGB("#002046", 0.12), 12, -8, 0, -4, 1, false);
-      }
-
-      useShape("00000000-0000-0000-0000-000000000000");
-      setShapeChildren(children);
-
-      performance.mark('render:begin');
-      Module._set_view(1, 0, 0);
-      Module._render(Date.now());
-      performance.mark('render:end');
-      const { duration } = performance.measure('render', 'render:begin', 'render:end');
-      // alert(`render time: ${duration.toFixed(2)}ms`);
-    });
-    
-  </script>
-</body>
-</html>
--- 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/src/app/main.cljs
+++ b/frontend/src/app/main.cljs
@@ -16,7 +16,6 @@
   [app.main.data.profile :as dp]
   [app.main.data.websocket :as ws]
   [app.main.errors]
-   [app.main.features :as feat]
   [app.main.rasterizer :as thr]
   [app.main.store :as st]
   [app.main.ui :as ui]
@@ -66,11 +65,8 @@
    ptk/WatchEvent
    (watch [_ _ stream]
      (rx/merge
-       (if (contains? cf/flags :audit-log)
-         (rx/of (ev/initialize))
-         (rx/empty))
-
-       (rx/of (dp/refresh-profile))
+       (rx/of (ev/initialize)
+              (dp/refresh-profile))

       ;; Watch for profile deletion events
       (->> stream
@@ -91,12 +87,7 @@
            (rx/map deref)
            (rx/filter dp/is-authenticated?)
            (rx/take 1)
-            (rx/map #(ws/initialize)))))
-
-    ptk/EffectEvent
-    (effect [_ state _]
-      (when-not (feat/active-feature? state "render-wasm/v1")
-        (thr/init!)))))
+            (rx/map #(ws/initialize)))))))

 (defn ^:export init
  [options]
@@ -106,7 +97,7 @@
  (mw/init!)
  (i18n/init)
  (cur/init-styles)
-
+  (thr/init!)
  (init-ui)
  (st/emit! (plugins/initialize)
            (initialize)))
--- a/frontend/src/app/main/data/event.cljs
+++ b/frontend/src/app/main/data/event.cljs
@@ -31,34 +31,35 @@
 (l/set-level! :info)

 ;; Defines the maximum buffer size, after events start discarding.
-(def ^:private ^:const max-buffer-size 1024)
+(def max-buffer-size 1024)

 ;; Defines the maximum number of events that can go in a single batch.
-(def ^:private ^:const max-chunk-size 100)
+(def max-chunk-size 100)

 ;; Defines the time window (in ms) within events belong to the same session.
-(def ^:private ^:const session-timeout (* 1000 60 30))
+(def session-timeout (* 1000 60 30))
+

 ;; Min time for a long task to be reported to telemetry
-(def ^:private ^:const min-longtask-time 1000)
+(def min-longtask-time 1000)

 ;; Min time between long task reports
-(def ^:private ^:const debounce-longtask-time 1000)
+(def debounce-longtask-time 1000)

 ;; Min time for a long task to be reported to telemetry
-(def ^:private ^:const min-browser-event-time 1000)
+(def min-browser-event-time 1000)

 ;; Min time between long task reports
-(def ^:private ^:const debounce-browser-event-time 1000)
+(def debounce-browser-event-time 1000)

 ;; Min time for a long task to be reported to telemetry
-(def ^:private ^:const min-performace-event-time 1000)
+(def min-performace-event-time 1000)

 ;; Min time between long task reports
-(def ^:private ^:const debounce-performance-event-time 1000)
+(def debounce-performance-event-time 1000)

-;; Default micro-benchmark iterations
-(def ^:private ^:const micro-benchmark-iterations 1e6)
+;; Def micro-benchmark iterations
+(def micro-benchmark-iterations 1e6)

 ;; --- CONTEXT

@@ -136,12 +137,12 @@
             data
             data))

-(defn- add-external-context-info
+(defn add-external-context-info
  [context]
  (let [external-context-info  (json/->clj (cf/external-context-info))]
    (merge context external-context-info)))

-(defn- make-proto-event
+(defn- process-event-by-proto
  [event]
  (let [data    (d/deep-merge (-data event) (meta event))
        type    (ptk/type event)
@@ -150,6 +151,7 @@
                    (assoc :event-origin (::origin data))
                    (assoc :event-namespace (namespace type))
                    (assoc :event-symbol ev-name)
+                    (add-external-context-info)
                    (d/without-nils))
        props   (-> data d/without-qualified simplify-props)]

@@ -158,7 +160,7 @@
     :context context
     :props props}))

-(defn- make-data-event
+(defn- process-data-event
  [event]
  (let [data (deref event)
        name (::name data)]
@@ -167,6 +169,7 @@
      (let [type    (::type data "action")
            context (-> (::context data)
                        (assoc :event-origin (::origin data))
+                        (add-external-context-info)
                        (d/without-nils))
            props   (-> data d/without-qualified simplify-props)]
        {:type    type
@@ -174,62 +177,57 @@
         :context context
         :props   props}))))

-(defn- make-event
-  "Create a standard event"
+(defn performance-payload
  ([result]
   (let [props      (aget result 0)
         profile-id (aget result 1)]
-     (make-event profile-id props)))
-  ([profile-id event]
-   (when-let [event (cond
-                      (satisfies? Event event)
-                      (make-proto-event event)
-
-                      (ptk/data-event? event)
-                      (make-data-event event))]
-     (assoc event :profile-id profile-id))))
-
-(defn- make-performance-event
-  "Create a performance trigger event"
-  ([result]
-   (let [props      (aget result 0)
-         profile-id (aget result 1)]
-     (make-performance-event profile-id props)))
+     (performance-payload profile-id props)))
  ([profile-id props]
-   (let [perf-info (get @st/state :performance-info)
-         name      (get props ::name)]
-     {:type    "trigger"
-      :name    (str "performance-" name)
-      :context {:file-stats (:counters perf-info)}
-      :props   (-> props
-                   (dissoc ::name)
-                   (assoc :file-id (:file-id perf-info)))
+   (let [{:keys [performance-info]} @st/state]
+     {:type    "action"
+      :name    "performance"
+      :context (merge @context performance-info)
+      :props   props
      :profile-id profile-id})))

 (defn- process-performance-event
-  "Process performance sensitive events"
  [result]
  (let [event      (aget result 0)
        profile-id (aget result 1)]
-    (if (satisfies? PerformanceEvent event)
+
+    (if (and (satisfies? PerformanceEvent event)
+             (exists? js/globalThis)
+             (exists? (.-requestAnimationFrame js/globalThis))
+             (exists? (.-scheduler js/globalThis))
+             (exists? (.-postTask (.-scheduler js/globalThis))))
      (rx/create
       (fn [subs]
-         (let [start (perf/now)]
+         (let [start (perf/timestamp)]
           (js/requestAnimationFrame
-            #(.postTask js/scheduler
-                        (fn []
-                          (let [time (- (perf/now) start)]
-                            (when (> time min-performace-event-time)
-                              (rx/push! subs
-                                        (make-performance-event profile-id
-                                                                {::name "blocking-event"
-                                                                 :event-name (d/name (ptk/type event))
-                                                                 :duration time})))
-                            (rx/end! subs)))
-                        #js {:priority "user-blocking"}))
-           nil)))
+            #(js/scheduler.postTask
+              (fn []
+                (let [time (- (perf/timestamp) start)]
+                  (when (> time min-performace-event-time)
+                    (rx/push!
+                     subs
+                     (performance-payload
+                      profile-id
+                      {::event (str (ptk/type event))
+                       :time time}))))
+                (rx/end! subs))
+              #js {"priority" "user-blocking"})))
+         nil))
      (rx/empty))))

+(defn- process-event
+  [event]
+  (cond
+    (satisfies? Event event)
+    (process-event-by-proto event)
+
+    (ptk/data-event? event)
+    (process-data-event event)))
+
 ;; --- MAIN LOOP

 (defn- append-to-buffer
@@ -257,8 +255,7 @@
    (rx/of nil)))


-(defn- user-input-observer
-  "Create user interaction/input event observer. Returns rx stream."
+(defn performance-observer-event-stream
  []
  (if (and (exists? js/globalThis)
           (exists? (.-PerformanceObserver js/globalThis)))
@@ -271,17 +268,18 @@
                 (fn [entry]
                   (when (and (= "event" (.-entryType entry))
                              (> (.-duration entry) min-browser-event-time))
-                     (rx/push! subs {::name "user-input"
-                                     :duration (.-duration entry)
-                                     :event-name (.-name entry)})))
+                     (rx/push!
+                      subs
+                      {::event :observer-event
+                       :duration (.-duration entry)
+                       :event-name (.-name entry)})))
                 (.getEntries list))))]
         (.observe observer #js {:entryTypes #js ["event"]})
         (fn []
           (.disconnect observer)))))
    (rx/empty)))

-(defn- longtask-observer
-  "Create a Long-Task performance observer. Returns rx stream."
+(defn performance-observer-longtask-stream
  []
  (if (and (exists? js/globalThis)
           (exists? (.-PerformanceObserver js/globalThis)))
@@ -295,7 +293,7 @@
                   (when (and (= "longtask" (.-entryType entry))
                              (> (.-duration entry) min-longtask-time))
                     (rx/push! subs
-                               {::name "long-task"
+                               {::event :observer-longtask
                                :duration (.-duration entry)})))
                 (.getEntries list))))]
         (.observe observer #js {:entryTypes #js ["longtask"]})
@@ -303,155 +301,165 @@
           (.disconnect observer)))))
    (rx/empty)))

-(defn- snapshot-performance-info
-  [{:keys [file-id]}]
-
-  (letfn [(count-shapes [file]
-            (->> file :data :pages-index
-                 (reduce-kv
-                  (fn [sum _ page]
-                    (+ sum (count (:objects page))))
-                  0)))
-
-          (add-libraries-counters [state files]
-            (reduce (fn [state library-id]
-                      (let [data (dm/get-in files [library-id :data])]
-                        (-> state
-                            (update :total-components + (count (:components data)))
-                            (update :total-colors + (count (:colors data)))
-                            (update :total-typographies + (count (:typographies data))))))
-                    state
-                    (refs/select-libraries files file-id)))]
-
-    (ptk/reify ::snapshot-performance-info
-      ptk/UpdateEvent
-      (update [_ state]
-        (update state :performance-info
-                (fn [info]
-                  (let [files (get state :files)
-                        file  (get files file-id)]
-                    (-> info
-                        (assoc :file-id file-id)
-                        (update :counters assoc :total-shapes (count-shapes file))
-                        (update :counters add-libraries-counters files)))))))))
-
-(defn- store-performace-info
+(defn- save-performance-info
  []
-  (ptk/reify ::store-performace-info
+  (ptk/reify ::save-performance-info
    ptk/UpdateEvent
    (update [_ state]
-      (let [start (perf/now)
-            _     (loop [i micro-benchmark-iterations]
-                    (when-not (zero? i)
-                      (* (math/sin i) (math/sqrt i))
-                      (recur (dec i))))
-            end   (perf/now)]
+      (letfn [(count-shapes [file]
+                (->> file :data :pages-index
+                     (reduce-kv
+                      (fn [sum _ page]
+                        (+ sum (count (:objects page))))
+                      0)))
+              (count-library-data [files {:keys [id]}]
+                (let [data (dm/get-in files [id :data])]
+                  {:components (count (:components data))
+                   :colors (count (:colors data))
+                   :typographies (count (:typographies data))}))]
+        (let [file-id (get state :current-file-id)
+              file (get-in state [:files file-id])
+              file-size (count-shapes file)

-        (update state :performance-info assoc :bench (- end start))))
+              libraries
+              (-> (refs/select-libraries (:files state) (:id file))
+                  (d/update-vals (partial count-library-data (:files state))))

-    ptk/WatchEvent
-    (watch [_ _ stream]
-      (->> stream
-           (rx/filter (ptk/type? :app.main.data.workspace/all-libraries-resolved))
-           (rx/take 1)
-           (rx/map deref)
-           (rx/map snapshot-performance-info)))))
+              lib-sizes
+              (->> libraries
+                   (reduce-kv
+                    (fn [acc _ {:keys [components colors typographies]}]
+                      (-> acc
+                          (update :components + components)
+                          (update :colors + colors)
+                          (update :typographies + typographies)))
+                    {}))]
+          (update state :performance-info
+                  (fn [info]
+                    (-> info
+                        (assoc :file-size file-size)
+                        (assoc :library-sizes lib-sizes)
+                        (assoc :file-start-time (perf/now))))))))))
+
+(defn store-performace-info
+  []
+  (letfn [(micro-benchmark [state]
+            (let [start (perf/now)]
+              (loop [i micro-benchmark-iterations]
+                (when-not (zero? i)
+                  (* (math/sin i) (math/sqrt i))
+                  (recur (dec i))))
+              (let [end (perf/now)]
+                (update state :performance-info assoc :bench-result (- end start)))))]
+
+    (ptk/reify ::store-performace-info
+      ptk/UpdateEvent
+      (update [_ state]
+        (-> state
+            micro-benchmark
+            (assoc-in [:performance-info :app-start-time] (perf/now))))
+
+      ptk/WatchEvent
+      (watch [_ _ stream]
+        (->> stream
+             (rx/filter (ptk/type? :app.main.data.workspace/all-libraries-resolved))
+             (rx/take 1)
+             (rx/map save-performance-info))))))

 (defn initialize
  []
-  (ptk/reify ::initialize
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (rx/of (store-performace-info)))
+  (when (contains? cf/flags :audit-log)
+    (ptk/reify ::initialize
+      ptk/WatchEvent
+      (watch [_ _ _]
+        (rx/of (store-performace-info)))

-    ptk/EffectEvent
-    (effect [_ _ stream]
-      (let [session (atom nil)
-            stopper (rx/filter (ptk/type? ::initialize) stream)
-            buffer  (atom #queue [])
-            profile (->> (rx/from-atom storage/user {:emit-current-value? true})
-                         (rx/map :profile)
-                         (rx/map :id)
-                         (rx/pipe (rxo/distinct-contiguous)))]
+      ptk/EffectEvent
+      (effect [_ _ stream]
+        (let [session (atom nil)
+              stopper (rx/filter (ptk/type? ::initialize) stream)
+              buffer  (atom #queue [])
+              profile (->> (rx/from-atom storage/user {:emit-current-value? true})
+                           (rx/map :profile)
+                           (rx/map :id)
+                           (rx/pipe (rxo/distinct-contiguous)))]

-        (l/debug :hint "event instrumentation initialized")
+          (l/debug :hint "event instrumentation initialized")

-        (->> (rx/merge
-              (->> (rx/from-atom buffer)
-                   (rx/filter #(pos? (count %)))
-                   (rx/debounce 2000))
-              (->> stream
-                   (rx/filter (ptk/type? :app.main.data.profile/logout))
-                   (rx/observe-on :async)))
-             (rx/map (fn [_]
-                       (into [] (take max-chunk-size) @buffer)))
-             (rx/with-latest-from profile)
-             (rx/mapcat (fn [[chunk profile-id]]
-                          (let [events (filterv #(= profile-id (:profile-id %)) chunk)]
-                            (->> (persist-events events)
-                                 (rx/tap (fn [_]
-                                           (l/debug :hint "events chunk persisted" :total (count chunk))))
-                                 (rx/map (constantly chunk))))))
-             (rx/take-until stopper)
-             (rx/subs! (fn [chunk]
-                         (swap! buffer remove-from-buffer (count chunk)))
-                       (fn [cause]
-                         (l/error :hint "unexpected error on audit persistence" :cause cause))
-                       (fn []
-                         (l/debug :hint "audit persistence terminated"))))
+          (->> (rx/merge
+                (->> (rx/from-atom buffer)
+                     (rx/filter #(pos? (count %)))
+                     (rx/debounce 2000))
+                (->> stream
+                     (rx/filter (ptk/type? :app.main.data.profile/logout))
+                     (rx/observe-on :async)))
+               (rx/map (fn [_]
+                         (into [] (take max-buffer-size) @buffer)))
+               (rx/with-latest-from profile)
+               (rx/mapcat (fn [[chunk profile-id]]
+                            (let [events (filterv #(= profile-id (:profile-id %)) chunk)]
+                              (->> (persist-events events)
+                                   (rx/tap (fn [_]
+                                             (l/debug :hint "events chunk persisted" :total (count chunk))))
+                                   (rx/map (constantly chunk))))))
+               (rx/take-until stopper)
+               (rx/subs! (fn [chunk]
+                           (swap! buffer remove-from-buffer (count chunk)))
+                         (fn [cause]
+                           (l/error :hint "unexpected error on audit persistence" :cause cause))
+                         (fn []
+                           (l/debug :hint "audit persistence terminated"))))

-        (->> (rx/merge
-              (->> stream
-                   (rx/with-latest-from profile)
-                   (rx/map make-event))
+          (->> (rx/merge
+                (->> stream
+                     (rx/with-latest-from profile)
+                     (rx/map (fn [result]
+                               (let [event      (aget result 0)
+                                     profile-id (aget result 1)]
+                                 (some-> (process-event event)
+                                         (update :profile-id #(or % profile-id)))))))

-              (->> (user-input-observer)
-                   (rx/with-latest-from profile)
-                   (rx/map make-performance-event)
-                   (rx/debounce debounce-browser-event-time))
+                (->> (performance-observer-event-stream)
+                     (rx/with-latest-from profile)
+                     (rx/map performance-payload)
+                     (rx/debounce debounce-browser-event-time))

-              (->> (longtask-observer)
-                   (rx/with-latest-from profile)
-                   (rx/map make-performance-event)
-                   (rx/debounce debounce-longtask-time))
+                (->> (performance-observer-longtask-stream)
+                     (rx/with-latest-from profile)
+                     (rx/map performance-payload)
+                     (rx/debounce debounce-longtask-time))

-              (if (and (exists? js/globalThis)
-                       (exists? (.-requestAnimationFrame js/globalThis))
-                       (exists? (.-scheduler js/globalThis))
-                       (exists? (.-postTask (.-scheduler js/globalThis))))
                (->> stream
                     (rx/with-latest-from profile)
                     (rx/merge-map process-performance-event)
-                     (rx/debounce debounce-performance-event-time))
-                (rx/empty)))
+                     (rx/debounce debounce-performance-event-time)))

-             (rx/filter :profile-id)
-             (rx/map (fn [event]
-                       (let [session* (or @session (ct/now))
-                             context  (-> @context
-                                          (merge (:context event))
-                                          (assoc :session session*)
-                                          (assoc :external-session-id (cf/external-session-id))
-                                          (add-external-context-info)
-                                          (d/without-nils))]
-                         (reset! session session*)
-                         (-> event
-                             (assoc :timestamp (ct/now))
-                             (assoc :context context)))))
+               (rx/filter :profile-id)
+               (rx/map (fn [event]
+                         (let [session* (or @session (ct/now))
+                               context  (-> @context
+                                            (merge (:context event))
+                                            (assoc :session session*)
+                                            (assoc :external-session-id (cf/external-session-id))
+                                            (d/without-nils))]
+                           (reset! session session*)
+                           (-> event
+                               (assoc :timestamp (ct/now))
+                               (assoc :context context)))))

-             (rx/tap (fn [event]
-                       (l/debug :hint "event enqueued")
-                       (swap! buffer append-to-buffer event)))
+               (rx/tap (fn [event]
+                         (l/debug :hint "event enqueued")
+                         (swap! buffer append-to-buffer event)))

-             (rx/switch-map #(rx/timer session-timeout))
-             (rx/take-until stopper)
-             (rx/subs! (fn [_]
-                         (l/debug :hint "session reinitialized")
-                         (reset! session nil))
-                       (fn [cause]
-                         (l/error :hint "error on event batching stream" :cause cause))
-                       (fn []
-                         (l/debug :hitn "events batching stream terminated"))))))))
+               (rx/switch-map #(rx/timer session-timeout))
+               (rx/take-until stopper)
+               (rx/subs! (fn [_]
+                           (l/debug :hint "session reinitialized")
+                           (reset! session nil))
+                         (fn [cause]
+                           (l/error :hint "error on event batching stream" :cause cause))
+                         (fn []
+                           (l/debug :hitn "events batching stream terminated")))))))))

 (defn event
  [props]
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -24,7 +24,6 @@
   [app.common.types.shape :as cts]
   [app.common.types.variant :as ctv]
   [app.common.uuid :as uuid]
-   [app.config :as cf]
   [app.main.data.changes :as dch]
   [app.main.data.comments :as dcmt]
   [app.main.data.common :as dcm]
@@ -76,7 +75,6 @@
   [app.util.dom :as dom]
   [app.util.globals :as ug]
   [app.util.http :as http]
-   [app.util.perf :as perf]
   [app.util.storage :as storage]
   [app.util.timers :as tm]
   [app.util.webapi :as wapi]
@@ -197,7 +195,7 @@
                       (rx/of (check-libraries-synchronization file-id libraries))))))

              ;; This events marks that all the libraries have been resolved
-              (rx/of (ptk/data-event ::all-libraries-resolved {:file-id file-id})))
+              (rx/of (ptk/data-event ::all-libraries-resolved)))
             (rx/take-until stopper-s))))))

 (defn- workspace-initialized
@@ -349,13 +347,6 @@
                                 (with-meta {:team-id team-id
                                             :file-id file-id}))))))

-              ;; Install dev perf observers once the workspace is ready
-              (when (contains? cf/flags :perf-logs)
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/take 1)
-                     (rx/tap (fn [_] (perf/setup)))))
-
              (->> 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]
-                        (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)))))]
+                        (merge expanded
+                               (->> ids
+                                    (map #(cfh/get-parent-ids objects %))
+                                    flatten
+                                    (remove #(= % uuid/zero))
+                                    (map (fn [id] {id true}))
+                                    (into {}))))]
        (update-in state [:workspace-local :expanded] expand-fn)))))


--- a/frontend/src/app/main/data/workspace/colors.cljs
+++ b/frontend/src/app/main/data/workspace/colors.cljs
@@ -214,8 +214,8 @@
       ptk/WatchEvent
       (watch [_ state _]
         (let [change-fn
-               (fn [node attrs]
-                 (update node :fills types.fills/prepend attrs))
+               (fn [shape attrs]
+                 (update shape :fills types.fills/prepend attrs))
               undo-id
               (js/Symbol)]
           (rx/concat
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -46,9 +46,7 @@
   [app.main.data.workspace.thumbnails :as dwt]
   [app.main.data.workspace.transforms :as dwtr]
   [app.main.data.workspace.undo :as dwu]
-   [app.main.data.workspace.wasm-text :as dwwt]
   [app.main.data.workspace.zoom :as dwz]
-   [app.main.features :as features]
   [app.main.features.pointer-map :as fpmap]
   [app.main.refs :as refs]
   [app.main.repo :as rp]
@@ -1014,13 +1012,6 @@

            updated-objects  (pcb/get-objects changes)
            new-children-ids (cfh/get-children-ids-with-self updated-objects (:id new-shape))
-            new-text-ids     (->> new-children-ids
-                                  (keep (fn [id]
-                                          (when-let [child (get updated-objects id)]
-                                            (when (and (cfh/text-shape? child)
-                                                       (not= :fixed (:grow-type child)))
-                                              id))))
-                                  (vec))

            [changes parents-of-swapped]
            (if keep-touched?
@@ -1030,9 +1021,6 @@
        (rx/of
         (dwu/start-undo-transaction undo-id)
         (dch/commit-changes changes)
-         (when (and (features/active-feature? state "render-wasm/v1")
-                    (seq new-text-ids))
-           (dwwt/resize-wasm-text-all new-text-ids))
         (ptk/data-event :layout/update {:ids update-layout-ids :undo-group undo-group})
         (dwu/commit-undo-transaction undo-id)
         (dws/select-shape (:id new-shape) false))))))
--- a/frontend/src/app/main/data/workspace/modifiers.cljs
+++ b/frontend/src/app/main/data/workspace/modifiers.cljs
@@ -712,7 +712,8 @@
               (ctm/rotation-modifiers shape center angle))

             modif-tree
-             (build-modif-tree ids objects get-modifier)
+             (-> (build-modif-tree ids objects get-modifier)
+                 (gm/set-objects-modifiers objects))

             modifiers
             (mapv (fn [[id {:keys [modifiers]}]]
--- a/frontend/src/app/main/data/workspace/pages.cljs
+++ b/frontend/src/app/main/data/workspace/pages.cljs
@@ -105,15 +105,9 @@
      (if (dsh/lookup-page state file-id page-id)
        (rx/concat
         (rx/of (initialize-page* file-id page-id)
-                (fdf/fix-deleted-fonts-for-page file-id page-id))
-
-         ;; Disable thumbnail generation in wasm renderer
-         (if (features/active-feature? state "render-wasm/v1")
-           (rx/empty)
-           (rx/of (dwth/watch-state-changes file-id page-id)))
-
-         (rx/of (dwl/watch-component-changes))
-
+                (fdf/fix-deleted-fonts-for-page file-id page-id)
+                (dwth/watch-state-changes file-id page-id)
+                (dwl/watch-component-changes))
         (let [profile (:profile state)
               props   (get profile :props)]
           (when (not (:workspace-visited props))
--- a/frontend/src/app/main/data/workspace/selection.cljs
+++ b/frontend/src/app/main/data/workspace/selection.cljs
@@ -264,13 +264,10 @@

    ptk/WatchEvent
    (watch [_ state _]
-      (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)))))
+      (let [objects (dsh/lookup-page-objects state)]
+        (rx/of
+         (dwc/expand-all-parents ids objects)
+         ::dwsp/interrupt)))))

 (defn select-all
  []
--- a/frontend/src/app/main/data/workspace/texts.cljs
+++ b/frontend/src/app/main/data/workspace/texts.cljs
@@ -11,6 +11,7 @@
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.files.helpers :as cfh]
+   [app.common.geom.matrix :as gmt]
   [app.common.geom.point :as gpt]
   [app.common.geom.shapes :as gsh]
   [app.common.math :as mth]
@@ -28,10 +29,10 @@
   [app.main.data.workspace.shapes :as dwsh]
   [app.main.data.workspace.transforms :as dwt]
   [app.main.data.workspace.undo :as dwu]
-   [app.main.data.workspace.wasm-text :as dwwt]
   [app.main.features :as features]
   [app.main.fonts :as fonts]
   [app.main.router :as rt]
+   [app.render-wasm.api :as wasm.api]
   [app.util.text-editor :as ted]
   [app.util.text.content.styles :as styles]
   [app.util.timers :as ts]
@@ -51,6 +52,50 @@
 (declare v2-update-text-shape-content)
 (declare v2-update-text-editor-styles)

+(defn resize-wasm-text-modifiers
+  ([shape]
+   (resize-wasm-text-modifiers shape (:content shape)))
+
+  ([{:keys [id points selrect grow-type] :as shape} content]
+   (wasm.api/use-shape id)
+   (wasm.api/set-shape-text-content id content)
+   (wasm.api/set-shape-text-images id content)
+
+   (let [dimension (wasm.api/get-text-dimensions)
+         width-scale (if (#{:fixed :auto-height} grow-type)
+                       1.0
+                       (/ (:width dimension) (:width selrect)))
+         height-scale (if (= :fixed grow-type)
+                        1.0
+                        (/ (:height dimension) (:height selrect)))
+         resize-v  (gpt/point width-scale height-scale)
+         origin    (first points)]
+
+     {id
+      {:modifiers
+       (ctm/resize-modifiers
+        resize-v
+        origin
+        (:transform shape (gmt/matrix))
+        (:transform-inverse shape (gmt/matrix)))}})))
+
+(defn resize-wasm-text
+  [id]
+  (ptk/reify ::resize-wasm-text
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects (dsh/lookup-page-objects state)
+            shape   (get objects id)]
+        (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))))))
+
+(defn resize-wasm-text-all
+  [ids]
+  (ptk/reify ::resize-wasm-text-all
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (->> (rx/from ids)
+           (rx/map resize-wasm-text)))))
+
 ;; -- Content helpers

 (defn- v2-content-has-text?
@@ -133,7 +178,7 @@
                     {:undo-group (when new-shape? id)})

                    (dwm/apply-wasm-modifiers
-                     (dwwt/resize-wasm-text-modifiers shape content)
+                     (resize-wasm-text-modifiers shape content)
                     {:undo-group (when new-shape? id)})))))

              (let [content (d/merge (ted/export-content content)
@@ -778,7 +823,7 @@
           (when (features/active-feature? state "render-wasm/v1")
             ;; This delay is to give time for the font to be correctly rendered
             ;; in wasm.
-             (cond->> (rx/of (dwwt/resize-wasm-text id))
+             (cond->> (rx/of (resize-wasm-text id))
               (contains? attrs :font-id)
               (rx/delay 200)))))))

@@ -928,11 +973,11 @@

            (if (and (not= :fixed (:grow-type shape)) finalize?)
              (dwm/apply-wasm-modifiers
-               (dwwt/resize-wasm-text-modifiers shape content)
+               (resize-wasm-text-modifiers shape content)
               {:undo-group (when new-shape? id)})

              (dwm/set-wasm-modifiers
-               (dwwt/resize-wasm-text-modifiers shape content)
+               (resize-wasm-text-modifiers shape content)
               {:undo-group (when new-shape? id)})))

           (when finalize?
--- a/frontend/src/app/main/data/workspace/thumbnails.cljs
+++ b/frontend/src/app/main/data/workspace/thumbnails.cljs
@@ -191,63 +191,59 @@
  [page-id [event [old-data new-data]]]

  (let [changes (:changes event)
-        ;; cache for the get-frame-ids function
-        frame-id-cache (atom {})]
+        lookup-data-objects
+        (fn [data page-id]
+          (dm/get-in data [:pages-index page-id :objects]))

-    (letfn [(lookup-data-objects [data page-id]
-              (dm/get-in data [:pages-index page-id :objects]))

-            (extract-ids [{:keys [page-id type] :as change}]
-              (case type
-                :add-obj [[page-id (:id change)]]
-                :mod-obj [[page-id (:id change)]]
-                :del-obj [[page-id (:id change)]]
-                :mov-objects (->> (:shapes change) (map #(vector page-id %)))
-                []))
+        extract-ids
+        (fn [{:keys [page-id type] :as change}]
+          (case type
+            :add-obj [[page-id (:id change)]]
+            :mod-obj [[page-id (:id change)]]
+            :del-obj [[page-id (:id change)]]
+            :mov-objects (->> (:shapes change) (map #(vector page-id %)))
+            []))

-            (get-frame-ids [id]
-              (let [old-objects     (lookup-data-objects old-data page-id)
-                    new-objects     (lookup-data-objects new-data page-id)
+        get-frame-ids
+        (fn get-frame-ids [id]
+          (let [old-objects     (lookup-data-objects old-data page-id)
+                new-objects     (lookup-data-objects new-data page-id)

-                    new-shape       (get new-objects id)
-                    old-shape       (get old-objects id)
+                new-shape       (get new-objects id)
+                old-shape       (get old-objects id)

-                    old-frame-id    (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
-                    new-frame-id    (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))
+                old-frame-id    (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
+                new-frame-id    (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))

-                    root-frame-old? (cfh/root-frame? old-objects old-frame-id)
-                    root-frame-new? (cfh/root-frame? new-objects new-frame-id)
-                    instance-root?  (ctc/instance-root? new-shape)]
+                root-frame-old? (cfh/root-frame? old-objects old-frame-id)
+                root-frame-new? (cfh/root-frame? new-objects new-frame-id)
+                instance-root?  (ctc/instance-root? new-shape)]

-                (cond-> #{}
-                  root-frame-old?
-                  (conj ["frame" old-frame-id])
+            (cond-> #{}
+              root-frame-old?
+              (conj ["frame" old-frame-id])

-                  root-frame-new?
-                  (conj ["frame" new-frame-id])
+              root-frame-new?
+              (conj ["frame" new-frame-id])

-                  instance-root?
-                  (conj ["component" id])
+              instance-root?
+              (conj ["component" id])

-                  (and (uuid? (:frame-id old-shape))
-                       (not= uuid/zero (:frame-id old-shape)))
-                  (into (get-frame-ids (:frame-id old-shape)))
+              (and (uuid? (:frame-id old-shape))
+                   (not= uuid/zero (:frame-id old-shape)))
+              (into (get-frame-ids (:frame-id old-shape)))

-                  (and (uuid? (:frame-id new-shape))
-                       (not= uuid/zero (:frame-id new-shape)))
-                  (into (get-frame-ids (:frame-id new-shape))))))
+              (and (uuid? (:frame-id new-shape))
+                   (not= uuid/zero (:frame-id new-shape)))
+              (into (get-frame-ids (:frame-id new-shape))))))]

-            (get-frame-ids-cached [id]
-              (or (get @frame-id-cache id)
-                  (let [result (get-frame-ids id)]
-                    (swap! frame-id-cache assoc id result)
-                    result)))]
-      (into #{}
-            (comp (mapcat extract-ids)
-                  (filter (fn [[page-id']] (= page-id page-id')))
-                  (map (fn [[_ id]] id))
-                  (mapcat get-frame-ids-cached))
-            changes))))
+    (into #{}
+          (comp (mapcat extract-ids)
+                (filter (fn [[page-id']] (= page-id page-id')))
+                (map (fn [[_ id]] id))
+                (mapcat get-frame-ids))
+          changes)))

 (defn watch-state-changes
  "Watch the state for changes inside frames. If a change is detected will force a rendering
--- a/frontend/src/app/main/data/workspace/tokens/application.cljs
+++ b/frontend/src/app/main/data/workspace/tokens/application.cljs
@@ -29,8 +29,6 @@
   [app.main.data.workspace.shapes :as dwsh]
   [app.main.data.workspace.transforms :as dwtr]
   [app.main.data.workspace.undo :as dwu]
-   [app.main.data.workspace.wasm-text :as dwwt]
-   [app.main.features :as features]
   [app.main.fonts :as fonts]
   [app.main.store :as st]
   [app.util.i18n :refer [tr]]
@@ -302,20 +300,11 @@
        update-fn (fn [node _]
                    (-> node
                        (d/txt-merge txt-attrs)
-                        (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 (dwwt/resize-wasm-text-all shape-ids))))))))
+                        (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})))

 (defn update-line-height
  ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -364,17 +353,11 @@
                      (-> node
                          (d/txt-merge txt-attrs)
                          (cty/remove-typography-from-node))))]
-    (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 (dwwt/resize-wasm-text-all shape-ids))))))))
+    (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})))

 (defn- create-font-family-text-attrs
  [value]
@@ -442,16 +425,10 @@
                      (-> node
                          (d/txt-merge txt-attrs)
                          (cty/remove-typography-from-node))))]
-    (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 (dwwt/resize-wasm-text-all shape-ids))))))))
+    (dwsh/update-shapes shape-ids
+                        #(txt/update-text-content % update-node? update-fn nil)
+                        {:ignore-touched true
+                         :page-id page-id})))

 (defn update-font-weight
  ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))
--- a/frontend/src/app/main/data/workspace/transforms.cljs
+++ b/frontend/src/app/main/data/workspace/transforms.cljs
@@ -406,13 +406,13 @@
                       (ctm/change-property :grow-type new-grow-type)))
                   modifiers)))

-             modif-tree (dwm/build-modif-tree ids objects get-modifier)]
+             modif-tree
+             (-> (dwm/build-modif-tree ids objects get-modifier)
+                 (gm/set-objects-modifiers objects))]

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

 (defn change-orientation
  "Change orientation of shapes, from the sidebar options form.
--- a/frontend/src/app/main/data/workspace/viewport.cljs
+++ b/frontend/src/app/main/data/workspace/viewport.cljs
@@ -51,7 +51,7 @@

                (or (> (:width srect) width)
                    (> (:height srect) height))
-                (let [srect (gal/adjust-to-viewport size srect {:padding 40 :min-zoom 0.01})
+                (let [srect (gal/adjust-to-viewport size srect {:padding 40})
                      zoom  (/ (:width size) (:width srect))]

                  (-> local
--- a/frontend/src/app/main/data/workspace/wasm_text.cljs
+++ b/frontend/src/app/main/data/workspace/wasm_text.cljs
@@ -1,72 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.data.workspace.wasm-text
-  "Helpers/events to resize wasm text shapes without depending on workspace.texts.
-
-  This exists to avoid circular deps:
-  workspace.texts -> workspace.libraries -> workspace.texts"
-  (:require
-   [app.common.files.helpers :as cfh]
-   [app.common.geom.matrix :as gmt]
-   [app.common.geom.point :as gpt]
-   [app.common.types.modifiers :as ctm]
-   [app.main.data.helpers :as dsh]
-   [app.main.data.workspace.modifiers :as dwm]
-   [app.render-wasm.api :as wasm.api]
-   [beicon.v2.core :as rx]
-   [potok.v2.core :as ptk]))
-
-(defn resize-wasm-text-modifiers
-  ([shape]
-   (resize-wasm-text-modifiers shape (:content shape)))
-
-  ([{:keys [id points selrect grow-type] :as shape} content]
-   (wasm.api/use-shape id)
-   (wasm.api/set-shape-text-content id content)
-   (wasm.api/set-shape-text-images id content)
-
-   (let [dimension (wasm.api/get-text-dimensions)
-         width-scale (if (#{:fixed :auto-height} grow-type)
-                       1.0
-                       (/ (:width dimension) (:width selrect)))
-         height-scale (if (= :fixed grow-type)
-                        1.0
-                        (/ (:height dimension) (:height selrect)))
-         resize-v  (gpt/point width-scale height-scale)
-         origin    (first points)]
-
-     {id
-      {:modifiers
-       (ctm/resize-modifiers
-        resize-v
-        origin
-        (:transform shape (gmt/matrix))
-        (:transform-inverse shape (gmt/matrix)))}})))
-
-(defn resize-wasm-text
-  "Resize a single text shape (auto-width/auto-height) by id.
-  No-op if the id is not a text shape or is :fixed."
-  [id]
-  (ptk/reify ::resize-wasm-text
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
-            shape   (get objects id)]
-        (if (and (some? shape)
-                 (cfh/text-shape? shape)
-                 (not= :fixed (:grow-type shape)))
-          (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))
-          (rx/empty))))))
-
-(defn resize-wasm-text-all
-  "Resize all text shapes (auto-width/auto-height) from a collection of ids."
-  [ids]
-  (ptk/reify ::resize-wasm-text-all
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (->> (rx/from ids)
-           (rx/map resize-wasm-text)))))
--- a/frontend/src/app/main/data/workspace/zoom.cljs
+++ b/frontend/src/app/main/data/workspace/zoom.cljs
@@ -97,7 +97,7 @@
          state
          (update state :workspace-local
                  (fn [{:keys [vport] :as local}]
-                    (let [srect (gal/adjust-to-viewport vport srect {:padding 160 :min-zoom 0.01})
+                    (let [srect (gal/adjust-to-viewport vport srect {:padding 160})
                          zoom  (/ (:width vport) (:width srect))]
                      (-> local
                          (assoc :zoom zoom)
@@ -118,7 +118,7 @@
                             (gsh/shapes->rect))]
            (update state :workspace-local
                    (fn [{:keys [vport] :as local}]
-                      (let [srect (gal/adjust-to-viewport vport srect {:padding 40 :min-zoom 0.01})
+                      (let [srect (gal/adjust-to-viewport vport srect {:padding 40})
                            zoom  (/ (:width vport) (:width srect))]
                        (-> local
                            (assoc :zoom zoom)
@@ -142,7 +142,7 @@
                  (fn [{:keys [vport] :as local}]
                    (let [srect (gal/adjust-to-viewport
                                 vport srect
-                                 {:padding 40 :min-zoom 0.01})
+                                 {:padding 40})
                          zoom  (/ (:width vport)
                                   (:width srect))]
                      (-> local
--- a/frontend/src/app/main/rasterizer.cljs
+++ b/frontend/src/app/main/rasterizer.cljs
@@ -108,7 +108,6 @@
  "Initializes the rasterizer."
  []
  (let [iframe (dom/create-element "iframe")]
-    (dom/set-attribute! iframe "id" "rasterizer")
    (dom/set-attribute! iframe "src" origin)
    (dom/set-attribute! iframe "hidden" true)
    (.addEventListener js/window "message" on-message)
--- 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 identical?))
+  (l/derived dsh/lookup-page-objects st/state))

 (def workspace-read-only?
  (l/derived :read-only? workspace-global))
--- a/frontend/src/app/main/ui/ds/z-index.scss
+++ b/frontend/src/app/main/ui/ds/z-index.scss
@@ -10,7 +10,6 @@ $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 ...
@@ -19,5 +18,4 @@ $z-index-600: 600;
  --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/inspect/styles/rows/properties_row.cljs
+++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs
@@ -21,7 +21,7 @@
 (def ^:private schema:properties-row
  [:map
   [:term :string]
-   [:detail {:optional true} [:maybe :string]]
+   [:detail :string]
   [:property {:optional true} :string] ;; CSS valid property
   [:token {:optional true} :any] ;; resolved token object
   [:copiable {:optional true} :boolean]])
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -308,16 +308,6 @@
     [: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
@@ -447,7 +437,6 @@
                       (rx/of default)
                       (rx/throw cause)))))))

-
 (mf/defc exception-section*
  {::mf/private true}
  [{:keys [data route] :as props}]
@@ -480,9 +469,6 @@
      :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,10 +217,6 @@

        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 []
@@ -245,17 +241,6 @@
      (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}
@@ -264,22 +249,15 @@
         [:> modal-container*]
         [:section {:class (stl/css :workspace)
                    :style {:background-color background-color
-                            :touch-action "none"
-                            :position "relative"}}
+                            :touch-action "none"}}
          [:> context-menu*]
-          (when (and file-loaded? page-id)
+          (if (and file-loaded? page-id)
            [:> workspace-inner*
             {:page-id page-id
              :file-id file-id
              :file file
              :wglobal wglobal
-              :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?)))
+              :layout layout}]
            [:> workspace-loader*])]]]]]]))

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

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

 .workspace-content {
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -78,15 +78,13 @@
         (fn []
           (close-modals)
           ;; FIXME: move set-mode to uri?
-           (st/emit! :interrupt
-                     (dw/set-options-mode :design)
+           (st/emit! (dw/set-options-mode :design)
                     (dcm/go-to-dashboard-recent))))

        nav-to-project
        (mf/use-fn
         (mf/deps project-id)
-         #(st/emit! :interrupt
-                    (dcm/go-to-dashboard-files ::rt/new-window true :project-id project-id)))]
+         #(st/emit! (dcm/go-to-dashboard-files ::rt/new-window true :project-id project-id)))]

    (mf/with-effect [editing?]
      (when ^boolean editing?
--- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
@@ -90,8 +90,7 @@
        instance
        (dwt/create-editor editor-node canvas-node options)

-        ;; Store original content to compare name later
-        original-content content
+        update-name? (nil? content)

        on-key-up
        (fn [event]
@@ -102,22 +101,10 @@
        on-blur
        (fn []
          (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
-            (let [state @st/state
-                  objects (dsh/lookup-page-objects state)
-                  shape (get objects shape-id)
-                  current-name (:name shape)
-                  generated-name (gen-name instance)
-                  ;; Update name if: (1) it's a new shape (nil original content), or
-                  ;; (2) the current name matches the generated name from original content
-                  ;; (meaning it was never manually renamed)
-                  update-name? (or (nil? original-content)
-                                   (and (some? current-name)
-                                        (some? original-content)
-                                        (= current-name (txt/generate-shape-name (txt/content->text original-content)))))]
-              (st/emit! (dwt/v2-update-text-shape-content shape-id content
-                                                          :update-name? update-name?
-                                                          :name generated-name
-                                                          :finalize? true))))
+            (st/emit! (dwt/v2-update-text-shape-content shape-id content
+                                                        :update-name? update-name?
+                                                        :name (gen-name instance)
+                                                        :finalize? true)))

          (let [container-node (mf/ref-val container-ref)]
            (dom/set-style! container-node "opacity" 0)))
@@ -151,6 +138,7 @@
            (st/emit! (dw/set-clipboard-style style))))]

    (.addEventListener ^js global/document "keyup" on-key-up)
+    (.addEventListener ^js instance "blur" on-blur)
    (.addEventListener ^js instance "focus" on-focus)
    (.addEventListener ^js instance "needslayout" on-needs-layout)
    (.addEventListener ^js instance "stylechange" on-style-change)
@@ -165,12 +153,8 @@

    ;; This function is called when the component is unmounted
    (fn []
-      ;; Explicitly call on-blur here instead of relying on browser blur events,
-      ;; because in Firefox blur is not reliably fired when leaving the text editor
-      ;; by clicking elsewhere. The component does unmount when the shape is
-      ;; deselected, so we can safely call the blur handler here to finalize the editor.
-      (on-blur)
      (.removeEventListener ^js global/document "keyup" on-key-up)
+      (.removeEventListener ^js instance "blur" on-blur)
      (.removeEventListener ^js instance "focus" on-focus)
      (.removeEventListener ^js instance "needslayout" on-needs-layout)
      (.removeEventListener ^js instance "stylechange" on-style-change)
@@ -401,8 +385,7 @@
                             (dm/fmt "scale(%)" maybe-zoom))}))]

    [:g.text-editor {:clip-path (dm/fmt "url(#%)" clip-id)
-                     :transform (dm/str transform)
-                     :data-testid "text-editor"}
+                     :transform (dm/str transform)}
     [:defs
      [:clipPath {:id clip-id}
       [:rect {:x x :y y :width width :height height}]]]
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -33,24 +33,9 @@
   [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 style
+  [{:keys [item depth parent-size name-ref children ref
           ;; Flags
           read-only? highlighted? selected? component-tree?
           filtered? expanded? dnd-over? dnd-over-top? dnd-over-bot? hide-toggle?
@@ -97,8 +82,7 @@
                    :dnd-over dnd-over?
                    :dnd-over-top dnd-over-top?
                    :dnd-over-bot dnd-over-bot?
-                    :root-board parent-board?)
-            :style style}
+                    :root-board parent-board?)}
      [:span {:class (stl/css-case
                      :tab-indentation true
                      :filtered filtered?)
@@ -119,9 +103,6 @@
            [:button {:class (stl/css-case
                              :toggle-content true
                              :inverse expanded?)
-                      :data-testid "toggle-content"
-                      :aria-expanded expanded?
-                      :aria-labelledby (dm/str "layer-name-" id)
                      :on-click on-toggle-collapse}
             deprecated-icon/arrow])

@@ -185,12 +166,10 @@

     children]))

-;; Memoized for performance
 (mf/defc layer-item
  {::mf/props :obj
-   ::mf/wrap [mf/memo]}
-  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted style render-children?]
-    :or {render-children? true}}]
+   ::mf/memo true}
+  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
  (let [id                (:id item)
        blocked?          (:blocked item)
        hidden?           (:hidden item)
@@ -267,21 +246,13 @@
        (mf/use-fn
         (mf/deps id)
         (fn [_]
-           (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)))
+           (st/emit! (dw/highlight-shape id))))

        on-pointer-leave
        (mf/use-fn
         (mf/deps id)
         (fn [_]
-           (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)))
+           (st/emit! (dw/dehighlight-shape id))))

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

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

    (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)
@@ -396,62 +363,6 @@
        #(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)
-    ;; and (shapes item) to reconnect observer after shape changes
-    (mf/with-effect [children-count expanded? (:shapes item)]
-      (let [total (count (:shapes item))
-            node (mf/ref-val ref)
-            scroll-node (dom/get-parent-with-data node "scroll-container")
-            lazy-node (mf/ref-val lazy-ref)]
-        ;; 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
@@ -476,32 +387,24 @@
      :on-enable-drag enable-drag
      :on-disable-drag disable-drag
      :on-toggle-visibility toggle-visibility
-      :on-toggle-blocking toggle-blocking
-      :style style}
+      :on-toggle-blocking toggle-blocking}

-     (when (and render-children?
-                (:shapes item)
-                expanded?)
+     (when (and (:shapes item) expanded?)
       [:div {:class (stl/css-case
                      :element-children true
                      :parent-selected selected?
                      :sticky-children parent-board?)
              :data-testid (dm/str "children-" id)}
-        (let [all-children (reverse (d/enumerate (:shapes item)))
-              visible      (take children-count all-children)]
-          (for [[index id] visible]
-            (when-let [item (get objects id)]
-              [:& layer-item
-               {:item item
-                :highlighted highlighted
-                :selected selected
-                :index index
-                :objects objects
-                :key (dm/str id)
-                :sortable? sortable?
-                :depth depth
-                :parent-size parent-size
-                :component-child? component-tree?}])))
-        (when (< children-count (count (:shapes item)))
-          [:div {:ref lazy-ref
-                 :style {:min-height 1}}])])]))
+        (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?}]))])]))
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
@@ -108,7 +108,6 @@
        :on-blur accept-edit
        :on-key-down on-key-down
        :auto-focus true
-        :id (dm/str "layer-name-" shape-id)
        :default-value (d/nilv default-value "")}]
      [:*
       [:span
@@ -119,7 +118,6 @@
                 :hidden is-hidden
                 :type-comp type-comp
                 :type-frame type-frame)
-         :id (dm/str "layer-name-" shape-id)
         :style {"--depth" depth "--parent-size" parent-size}
         :ref ref
         :on-double-click start-edit}
--- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs
@@ -116,29 +116,13 @@
        (->> (dm/get-in grid-edition [edition :selected])
             (map #(dm/get-in objects [edition :layout-grid-cells %])))

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

        total-selected
        (count selected)]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
@@ -15,7 +15,6 @@
   [app.main.data.workspace.shortcuts :as sc]
   [app.main.data.workspace.texts :as dwt]
   [app.main.data.workspace.undo :as dwu]
-   [app.main.data.workspace.wasm-text :as dwwt]
   [app.main.features :as features]
   [app.main.refs :as refs]
   [app.main.store :as st]
@@ -139,7 +138,7 @@
              (dwsh/update-shapes ids #(assoc % :grow-type grow-type)))

             (when (features/active-feature? @st/state "render-wasm/v1")
-               (st/emit! (dwwt/resize-wasm-text-all ids)))
+               (st/emit! (dwt/resize-wasm-text-all ids)))
             ;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
             (ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
           (when (some? on-blur) (on-blur))))]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -346,19 +346,17 @@
                                               {:value (:id variant)
                                                :key (pr-str variant)
                                                :label (:name variant)})))
-             variant-options (if (or (= font-variant-id :multiple) (= font-variant-id "mixed"))
+             variant-options (if (= font-variant-id :multiple)
                               (conj basic-variant-options
                                     {:value ""
                                      :key :multiple-variants
                                      :label "--"})
-                               basic-variant-options)
-             font-variant-value (attr->string font-variant-id)
-             font-variant-value (if (= font-variant-value "mixed") "" font-variant-value)]
+                               basic-variant-options)]

         ;;  TODO Add disabled mode
         [:& select
          {:class (stl/css :font-variant-select)
-           :default-value font-variant-value
+           :default-value (attr->string font-variant-id)
           :options variant-options
           :on-change on-font-variant-change
           :on-blur on-blur}])]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -13,7 +13,6 @@
   [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*]]
@@ -23,11 +22,9 @@
   [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]))
@@ -55,37 +52,17 @@
             refs/workspace-data
             =))

-
-
 ;; --- Page Item

 (mf/defc page-item
  {::mf/wrap-props false}
-  [{:keys [page index deletable? selected? editing? hovering? current-page-id]}]
+  [{:keys [page index deletable? selected? editing? hovering?]}]
  (let [input-ref    (mf/use-ref)
        id           (:id page)
        delete-fn    (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
        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 []
-           ;; For the wasm renderer, apply a blur effect to the viewport canvas
-           ;; when we navigate to a different page.
-           (if (and (features/active-feature? @st/state "render-wasm/v1")
-                    (not= id current-page-id))
-             (do
-               (wasm.api/capture-canvas-pixels)
-               (wasm.api/apply-canvas-blur)
-               ;; 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)
@@ -178,7 +155,7 @@
                    :selected selected?)
            :data-testid (dm/str "page-" id)
            :tab-index "0"
-            :on-click on-click
+            :on-click navigate-fn
            :on-double-click on-double-click
            :on-context-menu on-context-menu}
      [:div {:class (stl/css :page-icon)}
@@ -205,13 +182,12 @@

 (mf/defc page-item-wrapper
  {::mf/wrap-props false}
-  [{:keys [page-id index deletable? selected? editing? current-page-id]}]
+  [{:keys [page-id index deletable? selected? editing?]}]
  (let [page-ref (mf/with-memo [page-id]
                   (make-page-ref page-id))
        page     (mf/deref page-ref)]
    [:& page-item {:page page
                   :index index
-                   :current-page-id current-page-id
                   :deletable? deletable?
                   :selected? selected?
                   :editing? editing?}]))
@@ -234,7 +210,6 @@
          :deletable? deletable?
          :editing? (= page-id editing-page-id)
          :selected? (= page-id current-page-id)
-          :current-page-id current-page-id
          :key page-id}])]]))

 ;; --- Sitemap Toolbox
--- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
@@ -144,7 +144,7 @@
        modifiers (hooks/use-equal-memo modifiers)
        shapes    (hooks/use-equal-memo shapes)]

-    [:g.outlines.blurrable
+    [:g.outlines
     [:& shape-outlines-render {:shapes shapes
                                :zoom zoom
                                :modifiers modifiers}]]))
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -252,7 +252,7 @@
        edition        (mf/deref refs/selected-edition)
        grid-edition?  (ctl/grid-layout? objects edition)]

-    [:g.frame-titles.blurrable
+    [:g.frame-titles
     (for [{:keys [id parent-id] :as shape} shapes]
       (when (and
              (not= id uuid/zero)
--- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
@@ -312,11 +312,6 @@
                                         (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))))))))
@@ -345,7 +340,6 @@

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

@@ -424,7 +418,6 @@
       :xmlnsXlink "http://www.w3.org/1999/xlink"
       :preserveAspectRatio "xMidYMid meet"
       :key (str "viewport" page-id)
-       :id "viewport-controls"
       :view-box (utils/format-viewbox vbox)
       :ref on-viewport-ref
       :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
@@ -474,7 +467,7 @@
              :zoom zoom}]

            (when (ctl/any-layout? outlined-frame)
-              [:g.ghost-outline.blurrable
+              [:g.ghost-outline
               [:& outline/shape-outlines
                {:objects base-objects
                 :selected selected
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -10,7 +10,6 @@
   ["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]
@@ -22,15 +21,14 @@
   [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.shapes :as shapes]
   [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]
@@ -39,6 +37,7 @@
   [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]
@@ -69,25 +68,12 @@
 (def ^:const DEBOUNCE_DELAY_MS 100)
 (def ^:const THROTTLE_DELAY_MS 10)

-;; Number of shapes to process before yielding to browser
-(def ^:const SHAPES_CHUNK_SIZE 100)
-;; Threshold below which we use synchronous processing (no chunking overhead)
-(def ^:const ASYNC_THRESHOLD 100)
-
 (def dpr
  (if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))

 (def noop-fn
  (constantly nil))

-(defn- yield-to-browser
-  "Returns a promise that resolves after yielding to the browser's event loop.
-   Uses requestAnimationFrame for smooth visual updates during loading."
-  []
-  (p/create
-   (fn [resolve _reject]
-     (js/requestAnimationFrame (fn [_] (resolve nil))))))
-
 ;; Based on app.main.render/object-svg
 (mf/defc object-svg
  {::mf/props :obj}
@@ -134,56 +120,17 @@
              (aget buffer 3))
      (set! wasm/internal-frame-id nil))))

-(defn render-preview!
-  "Render a lightweight preview without tile caching.
-   Used during progressive loading for fast feedback."
-  []
-  (when (and wasm/context-initialized? (not @wasm/context-lost?))
-    (h/call wasm/internal-module "_render_preview")))
-

 (defonce pending-render (atom false))
-(defonce shapes-loading? (atom false))
-(defonce deferred-render? (atom false))
-
-(defn- register-deferred-render!
-  []
-  (reset! deferred-render? true))

 (defn request-render
  [_requester]
-  (when (and wasm/context-initialized? (not @wasm/context-lost?))
-    (if @shapes-loading?
-      (register-deferred-render!)
-      (when-not @pending-render
-        (reset! pending-render true)
-        (let [frame-id
-              (js/requestAnimationFrame
-               (fn [ts]
-                 (reset! pending-render false)
-                 (set! wasm/internal-frame-id nil)
-                 (render ts)))]
-          (set! wasm/internal-frame-id frame-id))))))
-
-(defn- begin-shapes-loading!
-  []
-  (reset! shapes-loading? true)
-  (let [frame-id wasm/internal-frame-id
-        was-pending @pending-render]
-    (when frame-id
-      (js/cancelAnimationFrame frame-id)
-      (set! wasm/internal-frame-id nil))
-    (reset! pending-render false)
-    (reset! deferred-render? was-pending)))
-
-(defn- end-shapes-loading!
-  []
-  (let [was-loading (compare-and-set! shapes-loading? true false)]
-    (reset! deferred-render? false)
-    ;; Always trigger a render after loading completes
-    ;; This ensures shapes are displayed even if no deferred render was requested
-    (when was-loading
-      (request-render "set-objects:flush"))))
+  (when (and wasm/context-initialized? (not @pending-render) (not @wasm/context-lost?))
+    (reset! pending-render true)
+    (js/requestAnimationFrame
+     (fn [ts]
+       (reset! pending-render false)
+       (render ts)))))

 (declare get-text-dimensions)

@@ -332,6 +279,30 @@
  [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"
@@ -361,8 +332,8 @@
       (->> (retrieve-image url)
            (rx/map
             (fn [img]
-               (when-let [gl (webgl/get-webgl-context)]
-                 (let [texture (webgl/create-webgl-texture-from-image gl img)
+               (when-let [gl (get-webgl-context)]
+                 (let [texture (create-webgl-texture-from-image gl img)
                       texture-id (get-texture-id-for-gl-object texture)
                       width  (.-width ^js img)
                       height (.-height ^js img)
@@ -948,12 +919,24 @@
        id           (dm/get-prop shape :id)
        type         (dm/get-prop shape :type)

+        parent-id    (get shape :parent-id)
        masked       (get shape :masked-group)
+        selrect      (get shape :selrect)
+        constraint-h (get shape :constraints-h)
+        constraint-v (get shape :constraints-v)
+        clip-content (if (= type :frame)
+                       (not (get shape :show-content))
+                       false)
+        rotation     (get shape :rotation)
+        transform    (get shape :transform)

        fills        (get shape :fills)
        strokes      (if (= type :group)
                       [] (get shape :strokes))
        children     (get shape :shapes)
+        blend-mode   (get shape :blend-mode)
+        opacity      (get shape :opacity)
+        hidden       (get shape :hidden)
        content      (let [content (get shape :content)]
                       (if (= type :text)
                         (ensure-text-content content)
@@ -962,12 +945,22 @@
        grow-type    (get shape :grow-type)
        blur         (get shape :blur)
        svg-attrs    (get shape :svg-attrs)
-        shadows      (get shape :shadow)]
+        shadows      (get shape :shadow)
+        corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]

-    (shapes/set-shape-base-props shape)
+    (use-shape id)
+    (set-parent-id parent-id)
+    (set-shape-type type)
+    (set-shape-clip-content clip-content)
+    (set-shape-constraints constraint-h constraint-v)

-    ;; Remaining properties that need separate calls (variable-length or conditional)
+    (set-shape-rotation rotation)
+    (set-shape-transform transform)
+    (set-shape-blend-mode blend-mode)
+    (set-shape-opacity opacity)
+    (set-shape-hidden hidden)
    (set-shape-children children)
+    (set-shape-corners corners)
    (set-shape-blur blur)
    (when (= type :group)
      (set-masked (boolean masked)))
@@ -986,7 +979,7 @@
      (set-shape-grow-type grow-type))

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

    (let [pending_thumbnails (into [] (concat
                                       (set-shape-text-content id content)
@@ -1042,143 +1035,29 @@
  (let [{:keys [thumbnails full]} (set-object shape)]
    (process-pending [shape] thumbnails full noop-fn)))

-(defn- process-shapes-chunk
-  "Process a chunk of shapes synchronously, returning accumulated pending operations.
-   Returns {:thumbnails [...] :full [...] :next-index n}"
-  [shapes start-index chunk-size thumbnails-acc full-acc]
-  (let [total (count shapes)
-        end-index (min total (+ start-index chunk-size))]
-    (loop [index start-index
-           t-acc thumbnails-acc
-           f-acc full-acc]
-      (if (< index end-index)
-        (let [shape (nth shapes index)
-              {:keys [thumbnails full]} (set-object shape)]
-          (recur (inc index)
-                 (into t-acc thumbnails)
-                 (into f-acc full)))
-        {:thumbnails t-acc
-         :full f-acc
-         :next-index end-index}))))
-
-(defn- set-objects-async
-  "Asynchronously process shapes in chunks, yielding to the browser between chunks.
-   Returns a promise that resolves when all shapes are processed.
-   
-   Renders a preview only periodically during loading to show progress,
-   then does a full tile-based render at the end."
-  [shapes render-callback]
-  (let [total-shapes (count shapes)
-        total-chunks (mth/ceil (/ total-shapes SHAPES_CHUNK_SIZE))
-        ;; Render at 25%, 50%, 75% of loading
-        render-at-chunks (set [(mth/floor (* total-chunks 0.25))
-                               (mth/floor (* total-chunks 0.5))
-                               (mth/floor (* total-chunks 0.75))])]
-    (p/create
-     (fn [resolve _reject]
-       (letfn [(process-next-chunk [index thumbnails-acc full-acc chunk-count]
-                 (if (< index total-shapes)
-                   ;; Process one chunk
-                   (let [{:keys [thumbnails full next-index]}
-                         (process-shapes-chunk shapes index SHAPES_CHUNK_SIZE
-                                               thumbnails-acc full-acc)
-                         new-chunk-count (inc chunk-count)]
-                     ;; Only render at specific progress milestones
-                     (when (contains? render-at-chunks new-chunk-count)
-                       (render-preview!))
-
-                     ;; Yield to browser, then continue with next chunk
-                     (-> (yield-to-browser)
-                         (p/then (fn [_]
-                                   (process-next-chunk next-index thumbnails full new-chunk-count)))))
-                   ;; All chunks done - finalize
-                   (do
-                     (perf/end-measure "set-objects")
-                     (process-pending shapes thumbnails-acc full-acc noop-fn
-                                      (fn []
-                                        (end-shapes-loading!)
-                                        (if render-callback
-                                          (render-callback)
-                                          (render-finish))
-                                        (ug/dispatch! (ug/event "penpot:wasm:set-objects"))
-                                        (resolve nil))))))]
-         (process-next-chunk 0 [] [] 0))))))
-
-(defn- set-objects-sync
-  "Synchronously process all shapes (for small shape counts)."
-  [shapes render-callback]
-  (let [total-shapes (count shapes)
-        {:keys [thumbnails full]}
-        (loop [index 0 thumbnails-acc [] full-acc []]
-          (if (< index total-shapes)
-            (let [shape (nth shapes index)
-                  {:keys [thumbnails full]} (set-object shape)]
-              (recur (inc index)
-                     (into thumbnails-acc thumbnails)
-                     (into full-acc full)))
-            {:thumbnails thumbnails-acc :full full-acc}))]
-    (perf/end-measure "set-objects")
-    (process-pending shapes thumbnails full noop-fn
-                     (fn []
-                       (if render-callback
-                         (render-callback)
-                         (render-finish))
-                       (ug/dispatch! (ug/event "penpot:wasm:set-objects"))))))
-
-(defn- shapes-in-tree-order
-  "Returns shapes sorted in tree order (parents before children).
-   This ensures parent shapes are processed before their children,
-   maintaining proper shape reference consistency in WASM."
-  [objects]
-  ;; Get IDs in tree order starting from root (uuid/zero)
-  ;; If root doesn't exist (e.g., filtered thumbnail data), fall back to
-  ;; finding top-level shapes (those without a parent in objects) and
-  ;; traversing from there.
-  (if (contains? objects uuid/zero)
-    ;; Normal case: traverse from root
-    (let [ordered-ids (cfh/get-children-ids-with-self objects uuid/zero)]
-      (into []
-            (keep #(get objects %))
-            ordered-ids))
-    ;; Fallback for filtered data (thumbnails): find top-level shapes and traverse
-    (let [;; Find shapes whose parent is not in the objects map (top-level in this subset)
-          top-level-ids (->> (vals objects)
-                             (filter (fn [shape]
-                                       (not (contains? objects (:parent-id shape)))))
-                             (map :id))
-          ;; Get all children in order for each top-level shape
-          all-ordered-ids (into []
-                                (mapcat #(cfh/get-children-ids-with-self objects %))
-                                top-level-ids)]
-      (into []
-            (keep #(get objects %))
-            all-ordered-ids))))
-
 (defn set-objects
-  "Set all shape objects for rendering.
-
-   Shapes are processed in tree order (parents before children)
-   to maintain proper shape reference consistency in WASM."
  ([objects]
   (set-objects objects nil))
  ([objects render-callback]
   (perf/begin-measure "set-objects")
-   (let [shapes (shapes-in-tree-order objects)
-         total-shapes (count shapes)]
-     (if (< total-shapes ASYNC_THRESHOLD)
-       (set-objects-sync shapes render-callback)
-       (do
-         (begin-shapes-loading!)
-         (try
-           (-> (set-objects-async shapes render-callback)
-               (p/catch (fn [error]
-                          (end-shapes-loading!)
-                          (js/console.error "Async WASM shape loading failed" error))))
-           (catch :default error
-             (end-shapes-loading!)
-             (js/console.error "Async WASM shape loading failed" error)
-             (throw error)))
-         nil)))))
+   (let [shapes        (into [] (vals objects))
+         total-shapes  (count shapes)
+         ;; Collect pending operations - set-object returns {:thumbnails [...] :full [...]}
+         {:keys [thumbnails full]}
+         (loop [index 0 thumbnails-acc [] full-acc []]
+           (if (< index total-shapes)
+             (let [shape    (nth shapes index)
+                   {:keys [thumbnails full]} (set-object shape)]
+               (recur (inc index)
+                      (into thumbnails-acc thumbnails)
+                      (into full-acc full)))
+             {:thumbnails thumbnails-acc :full full-acc}))]
+     (perf/end-measure "set-objects")
+     (process-pending shapes thumbnails full noop-fn
+                      (fn []
+                        (when render-callback (render-callback))
+                        (render-finish)
+                        (ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))

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

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

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

      result)))

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

 (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,8 +12,6 @@

 ;; 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)
@@ -58,4 +56,3 @@
       :stroke-linecap shared/RawStrokeLineCap
       :stroke-linejoin shared/RawStrokeLineJoin
       :fill-rule shared/RawFillRule})
-
--- a/frontend/src/app/util/perf.cljs
+++ b/frontend/src/app/util/perf.cljs
@@ -169,81 +169,3 @@
           (let [end (timestamp)]
             (println (str "[" event "]" (- end start)))))
         #js {"priority" "user-blocking"})))))
-
-;; --- DEVTOOLS PERF LOGGING
-
-(defonce ^:private longtask-observer* (atom nil))
-(defonce ^:private stall-timer* (atom nil))
-(defonce ^:private current-op* (atom nil))
-
-(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.
-
-  Params:
-    - 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 setup
-  "Install perf observers in dev builds. Safe to call multiple times.
-  Perf logs are disabled by default. Enable them with the :perf-logs
-  flag in config."
-  []
-  (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)))}]
-    (unchecked-set js/window "PenpotPerf" api)))
--- a/frontend/src/app/util/text/content/from_dom.cljs
+++ b/frontend/src/app/util/text/content/from_dom.cljs
@@ -23,15 +23,15 @@
  [node]
  (is-element node "br"))

-(defn is-text-span-child
+(defn is-inline-child
  [node]
  (or (is-line-break node)
      (is-text-node node)))

-(defn get-text-span-text
+(defn get-inline-text
  [element]
-  (when-not (is-text-span-child (.-firstChild element))
-    (throw (js/TypeError. "Invalid text span child")))
+  (when-not (is-inline-child (.-firstChild element))
+    (throw (js/TypeError. "Invalid inline child")))
  (if (is-line-break (.-firstChild element))
    ""
    (.-textContent element)))
@@ -54,7 +54,7 @@
                (assoc acc key (if (value-empty? value) (get defaults key) value))))
            {} attrs)))

-(defn get-text-span-styles
+(defn get-inline-styles
  [element]
  (get-attrs-from-styles element txt/text-node-attrs (txt/get-default-text-attrs)))

@@ -66,18 +66,18 @@
  [element]
  (get-attrs-from-styles element txt/root-attrs txt/default-root-attrs))

-(defn create-text-span
+(defn create-inline
  [element]
-  (let [text (get-text-span-text element)]
+  (let [text (get-inline-text element)]
    (d/merge {:text text
              :key (.-id element)}
-             (get-text-span-styles element))))
+             (get-inline-styles element))))

 (defn create-paragraph
  [element]
  (d/merge {:type "paragraph"
            :key (.-id element)
-            :children (mapv create-text-span (.-children element))}
+            :children (mapv create-inline (.-children element))}
           (get-paragraph-styles element)))

 (defn create-root
--- a/frontend/src/app/util/text/content/to_dom.cljs
+++ b/frontend/src/app/util/text/content/to_dom.cljs
@@ -92,7 +92,7 @@
  [root]
  (get-styles-from-attrs root txt/root-attrs txt/default-text-attrs))

-(defn get-text-span-styles
+(defn get-inline-styles
  [inline paragraph]
  (let [node (if (= "" (:text inline)) paragraph inline)
        styles (get-styles-from-attrs node txt/text-node-attrs txt/default-text-attrs)]
@@ -104,7 +104,7 @@
  (when text
    (.replace text (js/RegExp "/" "g") "/\u200B")))

-(defn get-text-span-children
+(defn get-inline-children
  [inline paragraph]
  [(if (and (= "" (:text inline))
            (= 1 (count (:children paragraph))))
@@ -119,14 +119,14 @@
  [paragraph]
  (some #(not= "" (:text % "")) (:children paragraph)))

-(defn create-text-span
+(defn create-inline
  [inline paragraph]
  (create-element
   "span"
   {:id (or (:key inline) (create-random-key))
-    :data {:itype "span"}
-    :style (get-text-span-styles inline paragraph)}
-   (get-text-span-children inline paragraph)))
+    :data {:itype "inline"}
+    :style (get-inline-styles inline paragraph)}
+   (get-inline-children inline paragraph)))

 (defn create-paragraph
  [paragraph]
@@ -135,7 +135,7 @@
   {:id (or (:key paragraph) (create-random-key))
    :data {:itype "paragraph"}
    :style (get-paragraph-styles paragraph)}
-   (mapv #(create-text-span % paragraph) (:children paragraph))))
+   (mapv #(create-inline % paragraph) (:children paragraph))))

 (defn create-root
  [root]
--- a/frontend/src/app/worker/index.cljs
+++ b/frontend/src/app/worker/index.cljs
@@ -58,8 +58,6 @@

        (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,7 +179,6 @@

                      (->> (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/text-editor/package.json
+++ b/frontend/text-editor/package.json
@@ -20,7 +20,6 @@
    "@vitest/browser": "^1.6.0",
    "@vitest/coverage-v8": "^1.6.0",
    "@vitest/ui": "^1.6.0",
-    "canvas": "^3.2.1",
    "esbuild": "^0.24.0",
    "jsdom": "^25.0.0",
    "playwright": "^1.45.1",
--- a/frontend/text-editor/src/editor/TextEditor.js
+++ b/frontend/text-editor/src/editor/TextEditor.js
@@ -130,9 +130,9 @@ export class TextEditor extends EventTarget {
      cut: this.#onCut,
      copy: this.#onCopy,

-      keydown: this.#onKeyDown,
      beforeinput: this.#onBeforeInput,
      input: this.#onInput,
+      keydown: this.#onKeyDown,
    };
    this.#styleDefaults = options?.styleDefaults;
    this.#options = options;
@@ -160,7 +160,7 @@ export class TextEditor extends EventTarget {
    if (this.#element.ariaAutoComplete) this.#element.ariaAutoComplete = false;
    if (!this.#element.ariaMultiLine) this.#element.ariaMultiLine = true;
    this.#element.dataset.itype = "editor";
-    if (options?.shouldUpdatePositionOnScroll) {
+    if (options.shouldUpdatePositionOnScroll) {
      this.#updatePositionFromCanvas();
    }
  }
@@ -186,7 +186,7 @@ export class TextEditor extends EventTarget {
      "stylechange",
      this.#onStyleChange,
    );
-    if (options?.shouldUpdatePositionOnScroll) {
+    if (options.shouldUpdatePositionOnScroll) {
      window.addEventListener("scroll", this.#onScroll);
    }
    addEventListeners(this.#element, this.#events, {
@@ -218,7 +218,7 @@ export class TextEditor extends EventTarget {

    // Disposes the rest of event listeners.
    removeEventListeners(this.#element, this.#events);
-    if (this.#options?.shouldUpdatePositionOnScroll) {
+    if (this.#options.shouldUpdatePositionOnScroll) {
      window.removeEventListener("scroll", this.#onScroll);
    }

@@ -385,8 +385,7 @@ export class TextEditor extends EventTarget {
   * @param {InputEvent} e
   */
  #onBeforeInput = (e) => {
-    if (e.inputType === "historyUndo"
-     || e.inputType === "historyRedo") {
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
      return;
    }

@@ -405,8 +404,12 @@ export class TextEditor extends EventTarget {

    if (e.inputType in commands) {
      const command = commands[e.inputType];
+      if (!this.#selectionController.startMutation()) {
+        return;
+      }
      command(e, this, this.#selectionController);
-      this.#notifyLayout(LayoutType.FULL);
+      const mutations = this.#selectionController.endMutation();
+      this.#notifyLayout(LayoutType.FULL, mutations);
    }
  };

@@ -416,8 +419,7 @@ export class TextEditor extends EventTarget {
   * @param {InputEvent} e
   */
  #onInput = (e) => {
-    if (e.inputType === "historyUndo"
-     || e.inputType === "historyRedo") {
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
      return;
    }

@@ -452,12 +454,19 @@ export class TextEditor extends EventTarget {

    if ((e.ctrlKey || e.metaKey) && e.key === "Backspace") {
      e.preventDefault();
+
+      if (!this.#selectionController.startMutation()) {
+        return;
+      }
+
      if (this.#selectionController.isCollapsed) {
        this.#selectionController.removeWordBackward();
      } else {
        this.#selectionController.removeSelected();
      }
-      this.#notifyLayout(LayoutType.FULL);
+
+      const mutations = this.#selectionController.endMutation();
+      this.#notifyLayout(LayoutType.FULL, mutations);
    }
  };

@@ -465,12 +474,14 @@ export class TextEditor extends EventTarget {
   * Notifies that the edited texts needs layout.
   *
   * @param {'full'|'partial'} type
+   * @param {CommandMutations} mutations
   */
-  #notifyLayout(type = LayoutType.FULL) {
+  #notifyLayout(type = LayoutType.FULL, mutations) {
    this.dispatchEvent(
      new CustomEvent("needslayout", {
        detail: {
          type: type,
+          mutations: mutations,
        },
      }),
    );
@@ -617,8 +628,10 @@ export class TextEditor extends EventTarget {
   * @returns {TextEditor}
   */
  applyStylesToSelection(styles) {
+    this.#selectionController.startMutation();
    this.#selectionController.applyStyles(styles);
-    this.#notifyLayout(LayoutType.FULL);
+    const mutations = this.#selectionController.endMutation();
+    this.#notifyLayout(LayoutType.FULL, mutations);
    this.#changeController.notifyImmediately();
    return this;
  }
--- a/frontend/text-editor/src/editor/commands/CommandMutations.js
+++ b/frontend/text-editor/src/editor/commands/CommandMutations.js
@@ -0,0 +1,66 @@
+/**
+ * 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
+ */
+
+/**
+ * Command mutations
+ */
+export class CommandMutations {
+  #added = new Set();
+  #removed = new Set();
+  #updated = new Set();
+
+  constructor(added, updated, removed) {
+    if (added && Array.isArray(added)) this.#added = new Set(added);
+    if (updated && Array.isArray(updated)) this.#updated = new Set(updated);
+    if (removed && Array.isArray(removed)) this.#removed = new Set(removed);
+  }
+
+  get added() {
+    return this.#added;
+  }
+
+  get removed() {
+    return this.#removed;
+  }
+
+  get updated() {
+    return this.#updated;
+  }
+
+  clear() {
+    this.#added.clear();
+    this.#removed.clear();
+    this.#updated.clear();
+  }
+
+  dispose() {
+    this.#added.clear();
+    this.#added = null;
+    this.#removed.clear();
+    this.#removed = null;
+    this.#updated.clear();
+    this.#updated = null;
+  }
+
+  add(node) {
+    this.#added.add(node);
+    return this;
+  }
+
+  remove(node) {
+    this.#removed.add(node);
+    return this;
+  }
+
+  update(node) {
+    this.#updated.add(node);
+    return this;
+  }
+}
+
+export default CommandMutations;
--- a/frontend/text-editor/src/editor/commands/CommandMutations.test.js
+++ b/frontend/text-editor/src/editor/commands/CommandMutations.test.js
@@ -0,0 +1,71 @@
+import { describe, test, expect } from "vitest";
+import CommandMutations from "./CommandMutations.js";
+
+describe("CommandMutations", () => {
+  test("should create a new CommandMutations", () => {
+    const mutations = new CommandMutations();
+    expect(mutations).toHaveProperty("added");
+    expect(mutations).toHaveProperty("updated");
+    expect(mutations).toHaveProperty("removed");
+  });
+
+  test("should create an initialized new CommandMutations", () => {
+    const mutations = new CommandMutations([1], [2], [3]);
+    expect(mutations.added.size).toBe(1);
+    expect(mutations.updated.size).toBe(1);
+    expect(mutations.removed.size).toBe(1);
+    expect(mutations.added.has(1)).toBe(true);
+    expect(mutations.updated.has(2)).toBe(true);
+    expect(mutations.removed.has(3)).toBe(true);
+  });
+
+  test("should add an added node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    expect(mutations.added.has(1)).toBe(true);
+  });
+
+  test("should add an updated node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.update(1);
+    expect(mutations.updated.has(1)).toBe(true);
+  });
+
+  test("should add an removed node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.remove(1);
+    expect(mutations.removed.has(1)).toBe(true);
+  });
+
+  test("should clear a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    mutations.update(2);
+    mutations.remove(3);
+    expect(mutations.added.has(1)).toBe(true);
+    expect(mutations.added.size).toBe(1);
+    expect(mutations.updated.has(2)).toBe(true);
+    expect(mutations.updated.size).toBe(1);
+    expect(mutations.removed.has(3)).toBe(true);
+    expect(mutations.removed.size).toBe(1);
+
+    mutations.clear();
+    expect(mutations.added.size).toBe(0);
+    expect(mutations.added.has(1)).toBe(false);
+    expect(mutations.updated.size).toBe(0);
+    expect(mutations.updated.has(1)).toBe(false);
+    expect(mutations.removed.size).toBe(0);
+    expect(mutations.removed.has(1)).toBe(false);
+  });
+
+  test("should dispose a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    mutations.update(2);
+    mutations.remove(3);
+    mutations.dispose();
+    expect(mutations.added).toBe(null);
+    expect(mutations.updated).toBe(null);
+    expect(mutations.removed).toBe(null);
+  });
+});
--- a/frontend/text-editor/src/editor/content/Text.test.js
+++ b/frontend/text-editor/src/editor/content/Text.test.js
@@ -1,5 +1,5 @@
 import { describe, test, expect } from "vitest";
-import { insertInto, removeSlice, removeBackward, removeForward, removeWordBackward, replaceWith, findPreviousWordBoundary } from "./Text";
+import { insertInto, removeBackward, removeForward, replaceWith } from "./Text";

 describe("Text", () => {
  test("* should throw when passed wrong parameters", () => {
@@ -51,23 +51,4 @@ describe("Text", () => {
  test("`removeForward` should remove string forward from offset 6", () => {
    expect(removeForward("Hello, World!", 6)).toBe("Hello,World!");
  });
-
-  test("`removeSlice` should remove a part of a text", () => {
-    expect(removeSlice("Hello, World!", 7, 12)).toBe("Hello, !");
-  });
-
-  test("`findPreviousWordBoundary` edge cases", () => {
-    expect(findPreviousWordBoundary(null)).toBe(0);
-    expect(findPreviousWordBoundary("Hello, World!", 0)).toBe(0);
-    expect(findPreviousWordBoundary("   Hello, World!", 3)).toBe(0);
-  })
-
-  test("`removeWordBackward` with no text should return an empty string", () => {
-    expect(removeWordBackward(null, 0)).toBe("");
-  });
-
-  test("`removeWordBackward` should remove a word backward", () => {
-    expect(removeWordBackward("Hello, World!", 13)).toBe("Hello, World");
-    expect(removeWordBackward("Hello, World", 12)).toBe("Hello, ");
-  });
 });
--- a/frontend/text-editor/src/editor/content/dom/Color.test.js
+++ b/frontend/text-editor/src/editor/content/dom/Color.test.js
@@ -1,11 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { getFills } from "./Color.js";
-
-/* @vitest-environment jsdom */
-describe.skip("Color", () => {
-  test("getFills", () => {
-    expect(getFills("#aa0000")).toBe(
-      '[["^ ","~:fill-color","#aa0000","~:fill-opacity",1]]',
-    );
-  });
-});
--- a/frontend/text-editor/src/editor/content/dom/Content.test.js
+++ b/frontend/text-editor/src/editor/content/dom/Content.test.js
@@ -31,9 +31,9 @@ describe("Content", () => {
      inertElement.style,
    );
    expect(contentFragment).toBeInstanceOf(DocumentFragment);
-    expect(contentFragment.children).toHaveLength(2);
+    expect(contentFragment.children).toHaveLength(1);
    expect(contentFragment.firstElementChild).toBeInstanceOf(HTMLDivElement);
-    expect(contentFragment.firstElementChild.children).toHaveLength(1);
+    expect(contentFragment.firstElementChild.children).toHaveLength(2);
    expect(contentFragment.firstElementChild.firstElementChild).toBeInstanceOf(
      HTMLSpanElement,
    );
@@ -43,7 +43,6 @@ describe("Content", () => {
    expect(contentFragment.textContent).toBe("Hello, World!");
  });

-  /*
  test("mapContentFragmentFromHTML should return a valid content for the editor (multiple paragraphs)", () => {
    const paragraphs = [
      "Lorem ipsum",
@@ -52,11 +51,11 @@ describe("Content", () => {
    ];
    const inertElement = document.createElement("div");
    const contentFragment = mapContentFragmentFromHTML(
-      "<div>Lorem ipsum</div><div>Dolor sit amet</div><div>Sed iaculis blandit odio ornare sagittis.</div>",
+      "<div>Lorem ipsum</div><div>Dolor sit amet</div><div><br/></div><div>Sed iaculis blandit odio ornare sagittis.</div>",
      inertElement.style,
    );
    expect(contentFragment).toBeInstanceOf(DocumentFragment);
-    expect(contentFragment.children).toHaveLength(5);
+    expect(contentFragment.children).toHaveLength(3);
    for (let index = 0; index < contentFragment.children.length; index++) {
      expect(contentFragment.children.item(index)).toBeInstanceOf(
        HTMLDivElement,
@@ -75,7 +74,6 @@ describe("Content", () => {
      "Lorem ipsumDolor sit ametSed iaculis blandit odio ornare sagittis.",
    );
  });
-  */

  test("mapContentFragmentFromString should return a valid content for the editor", () => {
    const contentFragment = mapContentFragmentFromString("Hello, \nWorld!");
--- a/frontend/text-editor/src/editor/content/dom/Editor.test.js
+++ b/frontend/text-editor/src/editor/content/dom/Editor.test.js
@@ -1,30 +0,0 @@
-import { describe, test, expect } from "vitest";
-import {
-  isEditor,
-  TYPE,
-  TAG,
-} from "./Editor.js";
-
-/* @vitest-environment jsdom */
-describe("Editor", () => {
-  test("isEditor should return true", () => {
-    const element = document.createElement(TAG)
-    element.dataset.itype = TYPE;
-    expect(isEditor(element)).toBeTruthy();
-  });
-
-  test("isEditor should return false when element is null", () => {
-    expect(isEditor(null)).toBeFalsy();
-  });
-
-  test("isEditor should return false when the tag is not valid", () => {
-    const element = document.createElement("span");
-    expect(isEditor(element)).toBeFalsy();
-  });
-
-  test("isEditor should return false when the itype is not valid", () => {
-    const element = document.createElement(TAG);
-    element.dataset.itype = "whatever";
-    expect(isEditor(element)).toBeFalsy();
-  });
-});
--- a/frontend/text-editor/src/editor/content/dom/Element.test.js
+++ b/frontend/text-editor/src/editor/content/dom/Element.test.js
@@ -49,8 +49,7 @@ describe("Element", () => {
      },
      allowedStyles: [["text-decoration"]],
    });
-    // FIXME:
-    // expect(element.style.getPropertyValue("text-decoration")).toBe("underline");
+    expect(element.style.textDecoration).toBe("underline");
  });

  test("createElement should create a new element with a child", () => {
--- a/frontend/text-editor/src/editor/content/dom/Paragraph.js
+++ b/frontend/text-editor/src/editor/content/dom/Paragraph.js
@@ -129,36 +129,8 @@ export function createParagraph(textSpans, styles, attrs) {
 * @param {Object.<string, *>} styles
 * @returns {HTMLDivElement}
 */
-export function createEmptyParagraph(styles, attrs) {
-  return createParagraph([createEmptyTextSpan(styles)], styles, attrs);
-}
-
-/**
- * Creates a new paragraph with text.
- *
- * @param {Array<string>|string} text
- * @param {Object.<string, *>|CSSStyleDeclaration} styles
- * @param {Object.<string, *>} attrs
- * @returns {HTMLDivElement}
- */
-export function createParagraphWith(text, styles, attrs) {
-  if (typeof text === "string") {
-    if (text === "" || text === "\n") {
-      return createEmptyParagraph(styles, attrs);
-    }
-    return createParagraph([
-      createTextSpan(new Text(text))
-    ], styles, attrs);
-  } else if (Array.isArray(text)) {
-    return createParagraph(
-      text.map((text) => {
-        if (text === "" || text === "\n") return createEmptyTextSpan(styles);
-        return createTextSpan(new Text(text), styles);
-      })
-    , styles, attrs);
-  } else {
-    throw new TypeError("Invalid text, it should be an array of strings or a string");
-  }
+export function createEmptyParagraph(styles) {
+  return createParagraph([createEmptyTextSpan(styles)], styles);
 }

 /**
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Andrey Antukh	44c7d3fbd6	✨ Backport .github workflows from develop	2026-02-04 16:21:19 +01:00
Andrey Antukh	3d50aa6cb2	⬆️ Update imagemagick version	2026-02-04 16:21:19 +01:00
Andrey Antukh	06afd94a74	⬆️ Update backend dependencies (mainly bugfixes)	2026-02-04 16:21:19 +01:00
Andrey Antukh	e7d9dca55e	⬆️ Update jdk and node on devenv and other images	2026-02-04 16:21:19 +01:00
Andrey Antukh	c14ccc18b8	✨ Import mcp from develop	2026-02-04 16:21:19 +01:00
Andrey Antukh	7d09d930fe	📚 Update changelog	2026-02-03 11:13:46 +01:00