WIP

2026-02-05 04:02:03 -05:00 · 2026-01-22 16:47:30 +01:00
176 changed files with 2072 additions and 4561 deletions
--- a/.clj-kondo/config.edn
+++ b/.clj-kondo/config.edn
@@ -45,15 +45,6 @@
  :potok/reify-type
  {:level :error}

-  :redundant-primitive-coercion
-  {:level :off}
-
-  :unused-excluded-var
-  {:level :off}
-
-  :unresolved-excluded-var
-  {:level :off}
-
  :missing-protocol-method
  {:level :off}

--- a/.github/workflows/build-tag.yml
+++ b/.github/workflows/build-tag.yml
@@ -33,7 +33,7 @@ jobs:
          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
          MATTERMOST_CHANNEL: bot-alerts-cicd
          TEXT: |
-            🐳 *[PENPOT] Docker image available: ${{ github.ref_name }}*
+            🐳 *[PENPOT] Docker image available: {{ github.ref_name }}*
            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
            @infra

--- a/.github/workflows/plugins-deploy-api-doc.yml
+++ b/.github/workflows/plugins-deploy-api-doc.yml
@@ -1,125 +0,0 @@
-name: Plugins/api-doc deployer
-
-on:
-  push:
-    branches:
-      - develop
-      - staging
-      - main
-    paths:
-      - 'plugins/libs/plugin-types/index.d.ts'
-      - 'plugins/libs/plugin-types/REAME.md'
-      - 'plugins/tools/typedoc.css'
-      - 'plugins/CHANGELOG.md'
-      - 'plugins/wrangler-penpot-plugins-api-doc.toml'
-  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main
-
-permissions:
-  contents: read
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Extract some useful variables
-        id: vars
-        run: |
-          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ steps.vars.outputs.gh_ref }}
-
-      # START: Setup Node and PNPM enabling cache
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable PNPM
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          corepack enable;
-          corepack install;
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        working-directory: ./plugins
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm store
-        uses: actions/cache@v4
-        with:
-          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-      # END: Setup Node and PNPM enabling cache
-
-      - name: Install deps
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          pnpm install --no-frozen-lockfile;
-          pnpm add -D -w wrangler@latest;
-
-      - name: Build docs
-        working-directory: plugins
-        shell: bash
-        run: pnpm run build:doc
-
-      - name: Select Worker name
-        run: |
-          REF="${{ steps.vars.outputs.gh_ref }}"
-          case "$REF" in
-            main)
-              echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV
-              echo "WORKER_URI=doc.plugins.penpot.app" >> $GITHUB_ENV ;;
-            staging)
-              echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV
-              echo "WORKER_URI=doc.plugins.penpot.dev" >> $GITHUB_ENV ;;
-            develop)
-              echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV
-              echo "WORKER_URI=doc.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
-            *) echo "Unsupported branch ${REF}" && exit 1 ;;
-          esac
-
-      - name: Set the custom url
-        working-directory: plugins
-        shell: bash
-        run: |
-          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" wrangler-penpot-plugins-api-doc.toml
-
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
-        with:
-          workingDirectory: plugins
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: deploy --config wrangler-penpot-plugins-api-doc.toml --name ${{ env.WORKER_NAME }}
-
-      - name: Notify Mattermost
-        if: failure()
-        uses: mattermost/action-mattermost-notify@master
-        with:
-          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
-          MATTERMOST_CHANNEL: bot-alerts-cicd
-          TEXT: |
-            ❌ 🧩📚 *[PENPOT PLUGINS] Error deploying API documentation.*
-            📄 Triggered from ref: `${{ inputs.gh_ref }}`
-            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-            @infra
--- a/.github/workflows/plugins-deploy-package.yml
+++ b/.github/workflows/plugins-deploy-package.yml
@@ -1,127 +0,0 @@
-name: Plugins/package deployer
-
-on:
-  # Deploy package from manual action
-  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main
-      plugin_name:
-        description: 'Pluging name (like plugins/apps/<plugin_name>-plugin)'
-        type: string
-        required: true
-  workflow_call:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: string
-        required: true
-        default: 'develop'
-      plugin_name:
-        description: 'Publig name (from plugins/apps/<plugin_name>-plugin)'
-        type: string
-        required: true
-
-permissions:
-  contents: read
-
-jobs:
-  deploy:
-    runs-on: penpot-runner-01
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ inputs.gh_ref }}
-
-      # START: Setup Node and PNPM enabling cache
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable PNPM
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          corepack enable;
-          corepack install;
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        working-directory: ./plugins
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm store
-        uses: actions/cache@v4
-        with:
-          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-      # END: Setup Node and PNPM enabling cache
-
-      - name: Install deps
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          pnpm install --no-frozen-lockfile;
-          pnpm add -D -w wrangler@latest;
-
-      - name: "Build package for ${{ inputs.plugin_name }}-plugin"
-        working-directory: plugins
-        shell: bash
-        run: npx nx build ${{ inputs.plugin_name }}-plugin
-
-      - name: Select Worker name
-        run: |
-          REF="${{ inputs.gh_ref }}"
-          case "$REF" in
-            main)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-pro" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.penpot.app" >> $GITHUB_ENV ;;
-            staging)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-pre" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.penpot.dev" >> $GITHUB_ENV ;;
-            develop)
-              echo "WORKER_NAME=${{ inputs.plugin_name }}-plugin-hourly" >> $GITHUB_ENV
-              echo "WORKER_URI=${{ inputs.plugin_name }}.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
-            *) echo "Unsupported branch ${REF}" && exit 1 ;;
-          esac
-
-      - name: Set the custom url
-        working-directory: plugins
-        shell: bash
-        run: |
-          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" apps/${{ inputs.plugin_name }}-plugin/wrangler.toml
-
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
-        with:
-          workingDirectory: plugins
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: deploy --config apps/${{ inputs.plugin_name }}-plugin/wrangler.toml --name ${{ env.WORKER_NAME }}
-
-      - name: Notify Mattermost
-        if: failure()
-        uses: mattermost/action-mattermost-notify@master
-        with:
-          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
-          MATTERMOST_CHANNEL: bot-alerts-cicd
-          TEXT: |
-            ❌ 🧩📦 *[PENPOT PLUGINS] Error deploying ${{ env.WORKER_NAME }}.*
-            📄 Triggered from ref: `${{ inputs.gh_ref }}`
-               Plugin name: `${{ inputs.plugin_name }}-plugin`
-               Cloudflare worker name: `${{ env.WORKER_NAME }}`
-            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-            @infra
--- a/.github/workflows/plugins-deploy-packages.yml
+++ b/.github/workflows/plugins-deploy-packages.yml
@@ -1,143 +0,0 @@
-name: Plugins/packages deployer
-
-on:
-  push:
-    branches:
-      - develop
-      - staging
-      - main
-    paths:
-      - 'plugins/apps/*-plugin/**'
-      - 'libs/plugins-styles/**'
-  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main
-
-jobs:
-  detect-changes:
-    runs-on: ubuntu-latest
-    outputs:
-      colors_to_tokens: ${{ steps.filter.outputs.colors_to_tokens }}
-      create_palette: ${{ steps.filter.outputs.create_palette }}
-      lorem_ipsum: ${{ steps.filter.outputs.lorem_ipsum }}
-      rename_layers: ${{ steps.filter.outputs.rename_layers }}
-      contrast: ${{ steps.filter.outputs.contrast }}
-      icons: ${{ steps.filter.outputs.icons }}
-      poc_state: ${{ steps.filter.outputs.poc_state }}
-      table: ${{ steps.filter.outputs.table }}
-      # [For new plugins]
-      #   Add more outputs here
-    steps:
-      - uses: actions/checkout@v4
-      - id: filter
-        uses: dorny/paths-filter@v3
-        with:
-          filters: |
-            colors_to_tokens:
-              - 'plugins/apps/colors-to-tokens-plugin/**'
-              - 'libs/plugins-styles/**'
-            contrast:
-              - 'plugins/apps/contrast-plugin/**'
-              - 'libs/plugins-styles/**'
-            create_palette:
-              - 'plugins/apps/create-palette-plugin/**'
-              - 'libs/plugins-styles/**'
-            icons:
-              - 'plugins/apps/icons-plugin/**'
-              - 'libs/plugins-styles/**'
-            lorem_ipsum:
-              - 'plugins/apps/lorem-ipsum-plugin/**'
-              - 'libs/plugins-styles/**'
-            rename_layers:
-              - 'plugins/apps/rename-layers-plugin/**'
-              - 'libs/plugins-styles/**'
-            table:
-              - 'plugins/apps/table-plugin/**'
-              - 'libs/plugins-styles/**'
-           # [For new plugins]
-           #   Add more plugin filters here
-           #     another_plugin:
-           #       - 'plugins/apps/another-plugin/**'
-           #       - 'libs/plugins-styles/**'
-
-  colors-to-tokens-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.colors_to_tokens == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: colors-to-tokens
-
-  contrast-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.contrast == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: contrast
-
-  create-palette-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.create_palette == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: create-palette
-
-  icons-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.icons == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: icons
-
-  lorem-ipsum-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.lorem_ipsum == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: lorem-ipsum
-
-  rename-layers-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.rename_layers == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: rename-layers
-
-  table-plugin:
-    needs: detect-changes
-    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.table == 'true'
-    uses: ./.github/workflows/plugins-deploy-package.yml
-    secrets: inherit
-    with:
-      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-      plugin_name: table
-
-  # [For new plugins]
-  #   Add more jobs for other plugins below, following the same pattern
-  #     another-plugin:
-  #       needs: detect-changes
-  #       if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.another_plugin == 'true'
-  #       uses: ./.github/workflows/plugins-deploy-package.yml
-  #       secrets: inherit
-  #       with:
-  #         gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
-  #         plugin_name: another
--- a/.github/workflows/plugins-deploy-styles-doc.yml
+++ b/.github/workflows/plugins-deploy-styles-doc.yml
@@ -1,123 +0,0 @@
-name: Plugins/styles-doc deployer
-
-on:
-  push:
-    branches:
-      - develop
-      - staging
-      - main
-    paths:
-      - 'plugins/apps/example-styles/**'
-      - 'plugins/libs/plugins-styles/**'
-      - 'plugins/wrangler-penpot-plugins-styles-doc.toml'
-  workflow_dispatch:
-    inputs:
-      gh_ref:
-        description: 'Name of the branch'
-        type: choice
-        required: true
-        default: 'develop'
-        options:
-          - develop
-          - staging
-          - main
-
-permissions:
-  contents: read
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Extract some useful variables
-        id: vars
-        run: |
-          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ steps.vars.outputs.gh_ref }}
-
-      # START: Setup Node and PNPM enabling cache
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable PNPM
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          corepack enable;
-          corepack install;
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        working-directory: ./plugins
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm store
-        uses: actions/cache@v4
-        with:
-          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-      # END: Setup Node and PNPM enabling cache
-
-      - name: Install deps
-        working-directory: ./plugins
-        shell: bash
-        run: |
-          pnpm install --no-frozen-lockfile;
-          pnpm add -D -w wrangler@latest;
-
-      - name: Build styles
-        working-directory: plugins
-        shell: bash
-        run: npx nx run example-styles:build
-
-      - name: Select Worker name
-        run: |
-          REF="${{ steps.vars.outputs.gh_ref }}"
-          case "$REF" in
-            main)
-              echo "WORKER_NAME=penpot-plugins-styles-doc-pro" >> $GITHUB_ENV
-              echo "WORKER_URI=styles-doc.plugins.penpot.app" >> $GITHUB_ENV ;;
-            staging)
-              echo "WORKER_NAME=penpot-plugins-styles-doc-pre" >> $GITHUB_ENV
-              echo "WORKER_URI=styles-doc.plugins.penpot.dev" >> $GITHUB_ENV ;;
-            develop)
-              echo "WORKER_NAME=penpot-plugins-styles-doc-hourly" >> $GITHUB_ENV
-              echo "WORKER_URI=styles-doc.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
-            *) echo "Unsupported branch ${REF}" && exit 1 ;;
-          esac
-
-      - name: Set the custom url
-        working-directory: plugins
-        shell: bash
-        run: |
-          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" wrangler-penpot-plugins-styles-doc.toml
-
-      - name: Deploy to Cloudflare Workers
-        uses: cloudflare/wrangler-action@v3
-        with:
-          workingDirectory: plugins
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: deploy --config wrangler-penpot-plugins-styles-doc.toml --name ${{ env.WORKER_NAME }}
-
-      - name: Notify Mattermost
-        if: failure()
-        uses: mattermost/action-mattermost-notify@master
-        with:
-          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
-          MATTERMOST_CHANNEL: bot-alerts-cicd
-          TEXT: |
-            ❌ 🧩💅 *[PENPOT PLUGINS] Error deploying Styles documentation.*
-            📄 Triggered from ref: `${{ inputs.gh_ref }}`
-            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-            @infra
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -21,7 +21,7 @@ concurrency:
 jobs:
  lint:
    name: "Linter"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -34,7 +34,7 @@ jobs:

  test-common:
    name: "Common Tests"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -53,8 +53,7 @@ jobs:

  test-plugins:
    name: Plugins Runtime Linter & Tests
-    runs-on: penpot-runner-02
-    container: penpotapp/devenv:latest
+    runs-on: ubuntu-24.04

    steps:
      - uses: actions/checkout@v4
@@ -99,7 +98,7 @@ jobs:

  test-frontend:
    name: "Frontend Tests"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -120,7 +119,7 @@ jobs:

  test-render-wasm:
    name: "Render WASM Tests"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -144,7 +143,7 @@ jobs:

  test-backend:
    name: "Backend Tests"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    services:
@@ -183,7 +182,7 @@ jobs:

  test-library:
    name: "Library Tests"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -197,7 +196,7 @@ jobs:

  build-integration:
    name: "Build Integration Bundle"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest

    steps:
@@ -218,7 +217,7 @@ jobs:

  test-integration-1:
    name: "Integration Tests 1/4"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest
    needs: build-integration

@@ -248,7 +247,7 @@ jobs:

  test-integration-2:
    name: "Integration Tests 2/4"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest
    needs: build-integration

@@ -278,7 +277,7 @@ jobs:

  test-integration-3:
    name: "Integration Tests 3/4"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest
    needs: build-integration

@@ -308,7 +307,7 @@ jobs:

  test-integration-4:
    name: "Integration Tests 4/4"
-    runs-on: penpot-runner-02
+    runs-on: ubuntu-24.04
    container: penpotapp/devenv:latest
    needs: build-integration

--- a/CHANGES.md
+++ b/CHANGES.md
@@ -30,18 +30,6 @@
 - 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)
- Remove whitespaces from asset export filename [Github #8133](https://github.com/penpot/penpot/pull/8133)
- Fix exception on uploading large fonts [Github #8135](https://github.com/penpot/penpot/pull/8135)
- Fix unhandled exception on open-new-window helper [Github #7787](https://github.com/penpot/penpot/issues/7787)
- Fix incorrect handling of input values on layout gap and padding inputs [Github #8113](https://github.com/penpot/penpot/issues/8113)
- Fix several race conditions on path editor [Github #8187](https://github.com/penpot/penpot/pull/8187)
- Fix app freeze when introducing an error on a very long token name [Taiga #13214](https://tree.taiga.io/project/penpot/issue/13214)
- Fix import a file with shadow tokens [Taiga #13229](https://tree.taiga.io/project/penpot/issue/13229)
- Fix allow spaces on token description [Taiga #13184](https://tree.taiga.io/project/penpot/issue/13184)
- Fix error when creating a token with an invalid name [Taiga #13219](https://tree.taiga.io/project/penpot/issue/13219)

 ## 2.12.1

--- a/backend/src/app/binfile/v3.clj
+++ b/backend/src/app/binfile/v3.clj
@@ -873,8 +873,11 @@
  (import-storage-objects cfg)

  (let [files  (get manifest :files)
-        result (reduce (fn [result file]
+        result (reduce (fn [result {:keys [id] :as file}]
                         (let [name' (get file :name)
+                               name' (if (map? name)
+                                       (get name id)
+                                       name')
                               file (assoc file :name name')]
                           (conj result (import-file cfg file))))
                       []
--- a/backend/src/app/email.clj
+++ b/backend/src/app/email.clj
@@ -124,6 +124,8 @@
      (throw (IllegalArgumentException. "invalid email body provided")))

    (doseq [[name content] attachments]
+
+      (prn "attachment" name)
      (let [attachment-part (MimeBodyPart.)]
        (.setFileName attachment-part ^String name)
        (.setContent attachment-part ^String content (str "text/plain; charset=" charset))
--- a/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/backend/src/app/rpc/commands/fonts.clj
+++ b/backend/src/app/rpc/commands/fonts.clj
@@ -27,17 +27,7 @@
   [app.rpc.helpers :as rph]
   [app.rpc.quotes :as quotes]
   [app.storage :as sto]
-   [app.storage.tmp :as tmp]
-   [app.util.services :as sv]
-   [datoteka.io :as io])
-  (:import
-   java.io.InputStream
-   java.io.OutputStream
-   java.io.SequenceInputStream
-   java.util.Collections))
-
-(set! *warn-on-reflection* true)
-
+   [app.util.services :as sv]))

 (def valid-weight #{100 200 300 400 500 600 700 800 900 950})
 (def valid-style #{"normal" "italic"})
@@ -115,7 +105,7 @@

 (defn create-font-variant
  [{:keys [::sto/storage ::db/conn]} {:keys [data] :as params}]
-  (letfn [(generate-missing [data]
+  (letfn [(generate-missing! [data]
            (let [data (media/run {:cmd :generate-fonts :input data})]
              (when (and (not (contains? data "font/otf"))
                         (not (contains? data "font/ttf"))
@@ -126,26 +116,8 @@
                          :hint "invalid font upload, unable to generate missing font assets"))
              data))

-          (process-chunks [chunks]
-            (let [tmp     (tmp/tempfile :prefix "penpot.tempfont." :suffix "")
-                  streams (map io/input-stream chunks)
-                  streams (Collections/enumeration streams)]
-              (with-open [^OutputStream output (io/output-stream tmp)
-                          ^InputStream input (SequenceInputStream. streams)]
-                (io/copy input output))
-              tmp))
-
-          (join-chunks [data]
-            (reduce-kv (fn [data mtype content]
-                         (if (vector? content)
-                           (assoc data mtype (process-chunks content))
-                           data))
-                       data
-                       data))
-
          (prepare-font [data mtype]
            (when-let [resource (get data mtype)]
-
              (let [hash    (sto/calculate-hash resource)
                    content (-> (sto/content resource)
                                (sto/wrap-with-hash hash))]
@@ -184,8 +156,7 @@
                         :otf-file-id (:id otf)
                         :ttf-file-id (:id ttf)}))]

-    (let [data   (join-chunks data)
-          data   (generate-missing data)
+    (let [data   (generate-missing! data)
          assets (persist-fonts-files! data)
          result (insert-font-variant! assets)]
      (vary-meta result assoc ::audit/replace-props (update params :data (comp vec keys))))))
--- 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/common/src/app/common/types/token.cljc
+++ b/common/src/app/common/types/token.cljc
@@ -97,12 +97,9 @@
 (def token-types
  (into #{} (keys token-type->dtcg-token-type)))

-(def token-name-validation-regex
-  #"^[a-zA-Z0-9_-][a-zA-Z0-9$_-]*(\.[a-zA-Z0-9$_-]+)*$")
-
 (def token-name-ref
  [:re {:title "TokenNameRef" :gen/gen sg/text}
-   token-name-validation-regex])
+   #"^(?!\$)([a-zA-Z0-9-$_]+\.?)*(?<!\.)$"])

 (def ^:private schema:color
  [:map
--- a/common/src/app/common/types/tokens_lib.cljc
+++ b/common/src/app/common/types/tokens_lib.cljc
@@ -1462,12 +1462,11 @@ Will return a value that matches this schema:
 (def ^:private schema:dtcg-node
  [:schema {:registry
            {::simple-value
-             [:or :string :int :double ::sm/boolean]
+             [:or :string :int :double]
             ::value
             [:or
              [:ref ::simple-value]
              [:vector ::simple-value]
-              [:vector [:map-of :string ::simple-value]]
              [:map-of :string [:or
                                [:ref ::simple-value]
                                [:vector ::simple-value]]]]}}
--- a/docs/plugins/api.md
+++ b/docs/plugins/api.md
@@ -6,4 +6,4 @@ desc: Create, deploy, and use the Penpot plugin API with our comprehensive docum

 # Penpot plugins API

-We've got all the documentation you need for the API right <a target="_blank" href="https://doc.plugins.penpot.app/">here</a>.
+We've got all the documentation you need for the API right <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/">here</a>.
--- a/docs/plugins/beta-changelog.md
+++ b/docs/plugins/beta-changelog.md
@@ -9,13 +9,13 @@ desc: See the Penpot plugin API changelog for version 1.0! Find breaking changes
 ### <g-emoji class="g-emoji" alias="boom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png"><img class="emoji" alt="boom" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png"></g-emoji> Epics and highlights</code>
 - This marks the release of version 1.0, and from this point forward, we’ll do our best to avoid making any more breaking changes (or make deprecations backward compatible).
 - We’ve redone the documentation. You can check the API here:
-[https://doc.plugins.penpot.app/](https://doc.plugins.penpot.app/)
+[https://penpot-plugins-api-doc.pages.dev/](https://penpot-plugins-api-doc.pages.dev/)
 - New samples repository with lots of samples to use the API:
 [https://github.com/penpot/penpot-plugins-samples](https://github.com/penpot/penpot-plugins-samples)

 ### <g-emoji class="g-emoji" alias="boom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"><img class="emoji" alt="boom" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"></g-emoji> Breaking changes & Deprecations

- Changed types names to remove the Penpot prefix. So for example: <code class="language-js">PenpotShape</code> becomes <code class="language-js">Shape</code>; <code class="language-js">PenpotFile</code> becomes <code class="language-js">File</code>, and so on. Check the [API documentation](https://doc.plugins.penpot.app/) for more details.
+- Changed types names to remove the Penpot prefix. So for example: <code class="language-js">PenpotShape</code> becomes <code class="language-js">Shape</code>; <code class="language-js">PenpotFile</code> becomes <code class="language-js">File</code>, and so on. Check the [API documentation](https://penpot-plugins-api-doc.pages.dev/) for more details.
 - Changes on the <code class="language-js">penpot.on</code> and <code class="language-js">penpot.off</code> methods.
 Previously you had to send the original callback to the off method in order to remove an event listener. Now, <code class="language-js">penpot.on</code> will return an *id* that you can pass to the <code class="language-js">penpot.off</code> method in order to remove the listener.

--- a/docs/plugins/create-a-plugin.md
+++ b/docs/plugins/create-a-plugin.md
@@ -49,7 +49,7 @@ There are two libraries that can help you with your plugin's development. They a

 ### Plugin styles

-<code class="language-js">@penpot/plugin-styles</code> contains styles to help build the UI for Penpot plugins. To check the styles go to <a target="_blank" href="https://styles-doc.plugins.penpot.app/">Plugin styles</a>.
+<code class="language-js">@penpot/plugin-styles</code> contains styles to help build the UI for Penpot plugins. To check the styles go to <a target="_blank" href="https://penpot-plugins-styles.pages.dev/">Plugin styles</a>.

 ```bash
 npm install @penpot/plugin-styles
@@ -139,7 +139,7 @@ parent.postMessage(responseMessage, targetOrigin);

 By using these message-based events, any data retrieved through the Penpot API can be communicated to and from your plugin interface seamlessly.

-For more detailed information, refer to the [Penpot Plugins API Documentation](https://doc.plugins.penpot.app/).
+For more detailed information, refer to the [Penpot Plugins API Documentation](https://penpot-plugins-api-doc.pages.dev/).

 ## 2.5. Step 5. Build the plugin file

--- a/docs/plugins/examples-templates.md
+++ b/docs/plugins/examples-templates.md
@@ -86,7 +86,7 @@ penpot.library.local.createTypography();

 Penpot has dark and light modes, and you can easily add this to your plugin so your interface adapts to both themes. When you add theme support, your plugin will automatically sync with Penpot's interface settings, so the user experience is consistent no matter which mode is selected. This makes your plugin look better and also ensures it stays in line with Penpot's overall design.

-Just a heads-up: if you use the <a target="_blank" href="https://styles-doc.plugins.penpot.app/">plugin-styles library</a>, many elements will automatically adapt to dark or light mode without any extra effort from you. However, if you need to customize specific elements, be sure to use the selectors provided in the <code class="language-bash">styles.css</code> of the example.
+Just a heads-up: if you use the <a target="_blank" href="https://penpot-plugins-styles.pages.dev/">plugin-styles library</a>, many elements will automatically adapt to dark or light mode without any extra effort from you. However, if you need to customize specific elements, be sure to use the selectors provided in the <code class="language-bash">styles.css</code> of the example.

 <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/theme">Theme example</a>

--- a/docs/plugins/faq.md
+++ b/docs/plugins/faq.md
@@ -40,7 +40,7 @@ The plugin <a target="_blank" href="https://www.npmjs.com/package/@penpot/plugin

 ### Is the API ready to use the prototyping features?

-Absolutely! You can definitely create flows and interactions in the same elements as in the interface, like frames, shapes, and groups. Just check out the API documentation for the methods: createFlow, addInteraction, or removeInteraction. And if you need more help, you can always check out the <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Flow">Flow</a> or <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Interaction">Interaction</a> interfaces.
+Absolutely! You can definitely create flows and interactions in the same elements as in the interface, like frames, shapes, and groups. Just check out the API documentation for the methods: createFlow, addInteraction, or removeInteraction. And if you need more help, you can always check out the <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/PenpotFlow">PenpotFlow</a> or <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/PenpotInteraction">PenpotInteraction</a> interfaces.

 ### Are there any security or quality criteria I should be aware of?

@@ -48,8 +48,7 @@ There are no set requirements. However, we can recommend the use of <a target="_

 ### Is it necessary to create plugins with a UI?

-No, it’s completely optional, in fact, we have an example of a plugin without UI. Try the plugin using this url to install it: <code class="language-js">https:\/\/create-palette.plugins.penpot.app/assets/manifest.json</code> or check the code <a target="_blank" href="https://github.com/penpot/penpot/tree/main/plugins/apps/create-palette-plugin">here</a>
-
+No, it’s completely optional, in fact, we have an example of a plugin without UI. Try the plugin using this url to install it: <code class="language-js">https:\/\/create-palette-penpot-plugin.pages.dev/assets/manifest.json</code> or check the code <a target="_blank" href="https://github.com/penpot/penpot-plugins/tree/main/apps/create-palette-plugin">here</a>

 ### Can I create components?

@@ -59,7 +58,7 @@ Yes, it is possible to create components using:
 createComponent(shapes: Shape[]): LibraryComponent;
 ```

-Take a look at the Penpot Library methods in the <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Library">API documentation</a> or this <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/components-library">simple example</a>.
+Take a look at the Penpot Library methods in the <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/Library">API documentation</a> or this <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/components-library">simple example</a>.

 ### Is there a place where I can share my plugin?

--- a/docs/plugins/getting-started.md
+++ b/docs/plugins/getting-started.md
@@ -69,13 +69,12 @@ You need to provide the plugin's manifest URL for the installation. If there are

 | Name          | URL                                                                 |
 | ------------- | ------------------------------------------------------------------- |
-| Color palette |	https://create-palette.plugins.penpot.app/assets/manifest.json      |
-| Contrast	    | https://contrast.plugins.penpot.app/assets/manifest.json            |
-| Feather icons	| https://icons.plugins.penpot.app/assets/manifest.json               |
-| Lorem ipsum	  | https://lorem-ipsum.plugins.penpot.app/assets/manifest.json         |
-| Rename layers |	https://rename-layers.plugins.penpot.app/assets/manifest.json       |
-| Tables	      | https://table.plugins.penpot.app/assets/manifest.json               |
-
+| Lorem Ipsum   | https://lorem-ipsum-penpot-plugin.pages.dev/assets/manifest.json    |
+| Contrast      | https://contrast-penpot-plugin.pages.dev/assets/manifest.json       |
+| Feather icons | https://icons-penpot-plugin.pages.dev/assets/manifest.json          |
+| Tables        | https://table-penpot-plugin.pages.dev/assets/manifest.json          |
+| Color palette | https://create-palette-penpot-plugin.pages.dev/assets/manifest.json |
+| Rename layers | https://rename-layers-penpot-plugin.pages.dev/assets/manifest.json  |

 ## 1.4. Plugin's basics

--- a/exporter/src/app/handlers/resources.cljs
+++ b/exporter/src/app/handlers/resources.cljs
@@ -36,7 +36,7 @@
    {:path     path
     :mtype    (mime/get type)
     :name     name
-     :filename (str/concat (str/slug name) (mime/get-extension type))
+     :filename (str/concat name (mime/get-extension type))
     :id       task-id}))

 (defn create-zip
--- a/exporter/src/app/renderer/bitmap.cljs
+++ b/exporter/src/app/renderer/bitmap.cljs
@@ -58,7 +58,8 @@
                    :share-id share-id
                    :object-id (mapv :id objects)
                    :route "objects"
-                    :skip-children skip-children}
+                    :skip-children skip-children
+                    :wasm "true"}
            uri    (-> (cf/get :public-uri)
                       (assoc :path "/render.html")
                       (assoc :query (u/map->query-string params)))]
--- a/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/package.json
+++ b/frontend/package.json
@@ -48,13 +48,13 @@
    "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
    "clear:shadow-cache": "rm -rf .shadow-cljs",
    "watch": "exit 0",
-    "watch:app": "yarn run clear:shadow-cache && yarn run build:wasm && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
    "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
  },
  "devDependencies": {
    "@penpot/draft-js": "portal:./packages/draft-js",
    "@penpot/mousetrap": "portal:./packages/mousetrap",
-    "@penpot/plugins-runtime": "1.4.2",
+    "@penpot/plugins-runtime": "1.3.2",
    "@penpot/svgo": "penpot/svgo#v3.2",
    "@penpot/text-editor": "portal:./text-editor",
    "@playwright/test": "1.57.0",
--- a/frontend/playwright.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/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/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"]);
@@ -110,7 +110,7 @@ test("Update an already created text shape by prepending text", async ({
  await workspace.textEditor.stopEditing();
 });

-test.skip("Update an already created text shape by inserting text in between", async ({
+test("Update an already created text shape by inserting text in between", async ({
  page,
 }) => {
  const workspace = new WorkspacePage(page, {
@@ -151,7 +151,7 @@ test("Update a new text shape appending text by pasting text", async ({
  await workspace.textEditor.stopEditing();
 });

-test.skip("Update a new text shape prepending text by pasting text", async ({
+test("Update a new text shape prepending text by pasting text", async ({
  page,
  context,
 }) => {
--- a/frontend/playwright/ui/specs/tokens.spec.js
+++ b/frontend/playwright/ui/specs/tokens.spec.js
@@ -1256,192 +1256,6 @@ test.describe("Tokens: Tokens Tab", () => {
    ).toBeEnabled();
  });

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

  watcher.on("change", (path) => {
@@ -182,19 +181,8 @@ export async function watch(baseDir, predicate, callback) {
      callback(path);
    }
  });
-
-
-  watcher.on("error", (cause) => {
-    console.log("WATCHER ERROR", cause);
-  });
 }

-export async function ensureDirectories() {
-  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
-  await fs.mkdir("./resources/public/css/", { recursive: true });
-}
-
-
 async function readManifestFile(resource) {
  const manifestPath = "resources/public/" + resource;
  let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -272,9 +260,6 @@ const markedOptions = {
 marked.use(markedOptions);

 export async function compileTranslations() {
-  const outputDir = "resources/public/js/";
-  await fs.mkdir(outputDir, { recursive: true });
-
  const langs = [
    "ar",
    "ca",
@@ -356,6 +341,7 @@ export async function compileTranslations() {
    }

    const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
+    const outputDir = "resources/public/js/";
    const outputFile = ph.join(outputDir, "translation." + lang + ".js");
    await fs.writeFile(outputFile, esm);
  }
@@ -513,43 +499,17 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
  const start = process.hrtime();
  log.info("init: compile svgsprite");
-  let error = false;
-
-  try {
-    await generateSvgSprites();
-  } catch (cause) {
-    error = cause;
-  }
-
+  await generateSvgSprites();
  const end = process.hrtime(start);
-
-  if (error) {
-    log.error("error: compile svgsprite", `(${ppt(end)})`);
-    console.error(error);
-  } else {
-    log.info("done: compile svgsprite", `(${ppt(end)})`);
-  }
+  log.info("done: compile svgsprite", `(${ppt(end)})`);
 }

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

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

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

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

-  try {
-    sass = await h.compileSassAll(worker);
-    let output = await h.concatSass(sass);
-    await fs.writeFile("./resources/public/css/main.css", output);
+  sass = await h.compileSassAll(worker);
+  let output = await h.concatSass(sass);
+  await fs.writeFile("./resources/public/css/main.css", output);

-    if (isDebug) {
-      let debugCSS = await h.compileSassDebug(worker);
-      await fs.writeFile("./resources/public/css/debug.css", debugCSS);
-    }
-  } catch (cause) {
-    error = cause;
+  if (isDebug) {
+    let debugCSS = await h.compileSassDebug(worker);
+    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
  }

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

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

-await h.ensureDirectories();
+await fs.mkdir("./resources/public/css/", { recursive: true });
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();
--- a/frontend/src/app/main.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,40 @@
 (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)
+
+;; Performance logs
+(defonce ^:private longtask-observer* (atom nil))
+(defonce ^:private stall-timer* (atom nil))
+(defonce ^:private current-op* (atom nil))

 ;; --- CONTEXT

@@ -136,12 +142,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 +156,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 +165,7 @@
     :context context
     :props props}))

-(defn- make-data-event
+(defn- process-data-event
  [event]
  (let [data (deref event)
        name (::name data)]
@@ -167,6 +174,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 +182,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 +260,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 +273,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 +298,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,156 +306,235 @@
           (.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]
  (ptk/data-event ::event props))
+
+;; --- DEVTOOLS PERF LOGGING
+
+(defn install-long-task-observer! []
+  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
+    (let [observer (js/PerformanceObserver.
+                    (fn [list _]
+                      (doseq [entry (.getEntries list)]
+                        (let [dur (.-duration entry)
+                              start (.-startTime entry)
+                              attrib (.-attribution entry)
+                              attrib-count (when attrib (.-length attrib))
+                              first-attrib (when (and attrib-count (> attrib-count 0)) (aget attrib 0))
+                              attrib-name (when first-attrib (.-name first-attrib))
+                              attrib-ctype (when first-attrib (.-containerType first-attrib))
+                              attrib-cid (when first-attrib (.-containerId first-attrib))
+                              attrib-csrc (when first-attrib (.-containerSrc first-attrib))]
+
+                          (.warn js/console (str "[perf] long task " (Math/round dur) "ms at " (Math/round start) "ms"
+                                                 (when first-attrib
+                                                   (str " attrib:name=" attrib-name
+                                                        " ctype=" attrib-ctype
+                                                        " cid=" attrib-cid
+                                                        " csrc=" attrib-csrc))))))))]
+      (.observe observer #js{:entryTypes #js["longtask"]})
+      (reset! longtask-observer* observer))))
+
+(defn start-event-loop-stall-logger!
+  "Log event loop stalls by measuring setInterval drift.
+  interval-ms: base interval
+  threshold-ms: drift over which we report"
+  [interval-ms threshold-ms]
+  (when (nil? @stall-timer*)
+    (let [last (atom (.now js/performance))
+          id (js/setInterval
+              (fn []
+                (let [now (.now js/performance)
+                      expected (+ @last interval-ms)
+                      drift (- now expected)
+                      current-op @current-op*
+                      measures (.getEntriesByType js/performance "measure")
+                      mlen (.-length measures)
+                      last-measure (when (> mlen 0) (aget measures (dec mlen)))
+                      meas-name (when last-measure (.-name last-measure))
+                      meas-detail (when last-measure (.-detail last-measure))
+                      meas-count (when meas-detail (unchecked-get meas-detail "count"))]
+                  (reset! last now)
+                  (when (> drift threshold-ms)
+                    (.warn js/console
+                           (str "[perf] event loop stall: " (Math/round drift) "ms"
+                                (when current-op (str " op=" current-op))
+                                (when meas-name (str " last=" meas-name))
+                                (when meas-count (str " count=" meas-count)))))))
+              interval-ms)]
+      (reset! stall-timer* id))))
+
+(defn init!
+  "Install perf observers in dev builds. Safe to call multiple times."
+  []
+  (when (and ^boolean js/goog.DEBUG *assert* false)
+    (install-long-task-observer!)
+    (start-event-loop-stall-logger! 50 100)
+    ;; Expose simple API on window for manual control in devtools
+    (let [api #js {:reset (fn []
+                            (try
+                              (.clearMarks js/performance)
+                              (.clearMeasures js/performance)
+                              (catch :default _ nil)))}]
+      (aset js/window "PenpotPerf" api))))
--- a/frontend/src/app/main/data/fonts.cljs
+++ b/frontend/src/app/main/data/fonts.cljs
@@ -24,20 +24,6 @@
   [cuerdas.core :as str]
   [potok.v2.core :as ptk]))

-(def ^:const default-chunk-size
-  (* 1024 1024 4)) ;; 4MiB
-
-(defn- chunk-array
-  [data chunk-size]
-  (let [total-size (alength data)]
-    (loop [offset 0
-           chunks []]
-      (if (< offset total-size)
-        (let [end   (min (+ offset chunk-size) total-size)
-              chunk (.subarray ^js data offset end)]
-          (recur end (conj chunks chunk)))
-        chunks))))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; General purpose events & IMPL
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -130,9 +116,9 @@
                                      (not= hhea-descender win-descent)
                                      (and f-selection (or
                                                        (not= hhea-ascender os2-ascent)
-                                                        (not= hhea-descender os2-descent))))
-                  data            (js/Uint8Array. data)]
-              {:content {:data (chunk-array data default-chunk-size)
+                                                        (not= hhea-descender os2-descent))))]
+
+              {:content {:data (js/Uint8Array. data)
                         :name name
                         :type type}
               :font-family (or family "")
--- a/frontend/src/app/main/data/style_dictionary.cljs
+++ b/frontend/src/app/main/data/style_dictionary.cljs
@@ -126,7 +126,7 @@
  If the `value` is not parseable and/or has missing references returns a map with `:errors`.
  If the `value` is parseable but is out of range returns a map with `warnings`."
  [value]
-  (let [missing-references? (seq (cto/find-token-value-references value))
+  (let [missing-references? (seq (seq (cto/find-token-value-references value)))
        parsed-value (cft/parse-token-value value)
        out-of-scope (not (<= 0 (:value parsed-value) 1))
        references (seq (cto/find-token-value-references value))]
@@ -152,14 +152,15 @@
  [value]
  (let [missing-references? (seq (cto/find-token-value-references value))
        parsed-value (cft/parse-token-value value)
-        out-of-scope (< (:value parsed-value) 0)]
+        out-of-scope (< (:value parsed-value) 0)
+        references (seq (cto/find-token-value-references value))]
    (cond
      (and parsed-value (not out-of-scope))
      parsed-value

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

      (and (not missing-references?) out-of-scope)
      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-stroke-width value)]}
@@ -364,7 +365,7 @@
  "Parses shadow spread value (non-negative number)."
  [value]
  (let [parsed (parse-sd-token-general-value value)
-        valid? (:value parsed)]
+        valid? (and (:value parsed) (>= (:value parsed) 0))]
    (cond
      valid?
      parsed
--- 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
@@ -350,11 +348,10 @@
                                             :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? ::workspace-initialized))
+                   (rx/take 1)
+                   (rx/map (fn [_] (ev/init!))))

              (->> stream
                   (rx/filter (ptk/type? ::dps/persistence-notification))
--- 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/path/changes.cljs
+++ b/frontend/src/app/main/data/workspace/path/changes.cljs
@@ -70,22 +70,20 @@
                              (= (-> content last :command) :move-to))
                       (into [] (take (dec (count content)) content))
                       content)]
-         (st/set-content state content)))
+         (-> state
+             (st/set-content content))))

     ptk/WatchEvent
     (watch [it state _]
       (let [page-id     (:current-page-id state)
-             local       (get state :workspace-local)
-             id          (get local :edition)
-             objects     (dsh/lookup-page-objects state page-id)]
+             objects     (dsh/lookup-page-objects state page-id)
+             id          (dm/get-in state [:workspace-local :edition])
+             old-content (dm/get-in state [:workspace-local :edit-path id :old-content])
+             shape       (st/get-path state)]

-         ;; NOTE: we proceed only if the shape is present on the
-         ;; objects, if shape is a ephimeral drawing shape, we should
-         ;; do nothing
-         (when-let [shape (get objects id)]
-           (when-let [old-content (dm/get-in local [:edit-path id :old-content])]
-             (let [new-content (get shape :content)
-                   changes     (generate-path-changes it objects page-id shape old-content new-content)]
-               (rx/of (dch/commit-changes changes))))))))))
+         (if (and (some? old-content) (some? (:id shape)))
+           (let [changes (generate-path-changes it objects page-id shape old-content (:content shape))]
+             (rx/of (dch/commit-changes changes)))
+           (rx/empty)))))))


--- a/frontend/src/app/main/data/workspace/path/edition.cljs
+++ b/frontend/src/app/main/data/workspace/path/edition.cljs
@@ -8,6 +8,7 @@
  (:require
   [app.common.data :as d]
   [app.common.data.macros :as dm]
+   [app.common.files.helpers :as cfh]
   [app.common.geom.point :as gpt]
   [app.common.types.path :as path]
   [app.common.types.path.helpers :as path.helpers]
@@ -288,34 +289,34 @@

 (declare stop-path-edit)

-
 (defn start-path-edit
  [id]
  (ptk/reify ::start-path-edit
    ptk/UpdateEvent
    (update [_ state]
      (let [objects   (dsh/lookup-page-objects state)
-            shape     (get objects id)]
+            edit-path (dm/get-in state [:workspace-local :edit-path id])
+            content   (st/get-path state :content)
+            state     (cond-> state
+                        (cfh/path-shape? objects id)
+                        (st/set-content (path/close-subpaths content)))]

-        (-> state
-            (st/set-content (path/close-subpaths (:content shape)))
-            (update-in [:workspace-local :edit-path id]
-                       (fn [state]
-                         (let [state (if state
-                                       (if (= :move (:edit-mode state))
-                                         (assoc state :edit-mode :draw)
-                                         state)
-                                       {:edit-mode :move
-                                        :selected #{}
-                                        :snap-toggled false})]
-                           (assoc state :old-content (:content shape))))))))
+        (cond-> state
+          (or (not edit-path)
+              (= :draw (:edit-mode edit-path)))
+          (assoc-in [:workspace-local :edit-path id] {:edit-mode :move
+                                                      :selected #{}
+                                                      :snap-toggled false})
+          (and (some? edit-path)
+               (= :move (:edit-mode edit-path)))
+          (assoc-in [:workspace-local :edit-path id :edit-mode] :draw))))

    ptk/WatchEvent
    (watch [_ _ stream]
-      (let [stopper (rx/filter #(let [type (ptk/type %)]
-                                  (= type ::dwe/clear-edition-mode)
-                                  (= type ::start-path-edit))
-                               stream)]
+      (let [stopper (->> stream
+                         (rx/filter #(let [type (ptk/type %)]
+                                       (= type ::dwe/clear-edition-mode)
+                                       (= type ::start-path-edit))))]
        (rx/concat
         (rx/of (undo/start-path-undo))
         (->> stream
@@ -324,8 +325,7 @@
              (rx/map #(stop-path-edit id))
              (rx/take-until stopper)))))))

-(defn stop-path-edit
-  [id]
+(defn stop-path-edit [id]
  (ptk/reify ::stop-path-edit
    ptk/UpdateEvent
    (update [_ state]
@@ -335,12 +335,13 @@
    (watch [_ _ _]
      (rx/of (ptk/data-event :layout/update {:ids [id]})))))

-(defn- split-segments
-  [id {:keys [from-p to-p t]}]
+(defn split-segments
+  [{:keys [from-p to-p t]}]
  (ptk/reify ::split-segments
    ptk/UpdateEvent
    (update [_ state]
-      (let [content (st/get-path state :content)]
+      (let [id (st/get-path-id state)
+            content (st/get-path state :content)]
        (-> state
            (assoc-in [:workspace-local :edit-path id :old-content] content)
            (st/set-content (-> content
@@ -352,10 +353,10 @@
      (rx/of (changes/save-path-content {:preserve-move-to true})))))

 (defn create-node-at-position
-  [params]
+  [event]
  (ptk/reify ::create-node-at-position
    ptk/WatchEvent
    (watch [_ state _]
      (let [id (st/get-path-id state)]
        (rx/of (dwsh/update-shapes [id] path/convert-to-path)
-               (split-segments id params))))))
+               (split-segments event))))))
--- 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
@@ -27,9 +27,9 @@
   [app.main.data.workspace.colors :as wdc]
   [app.main.data.workspace.shape-layout :as dwsl]
   [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.texts :as dwt]
   [app.main.data.workspace.transforms :as dwtr]
   [app.main.data.workspace.undo :as dwu]
-   [app.main.data.workspace.wasm-text :as dwwt]
   [app.main.features :as features]
   [app.main.fonts :as fonts]
   [app.main.store :as st]
@@ -315,7 +315,7 @@
          (and affects-layout?
               (features/active-feature? state "render-wasm/v1"))
          (rx/merge
-           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn update-line-height
  ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -374,7 +374,7 @@
                                            :page-id page-id}))
          (features/active-feature? state "render-wasm/v1")
          (rx/merge
-           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn- create-font-family-text-attrs
  [value]
@@ -451,7 +451,7 @@
                                            :page-id page-id}))
          (features/active-feature? state "render-wasm/v1")
          (rx/merge
-           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))

 (defn update-font-weight
  ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))
--- a/frontend/src/app/main/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
@@ -480,9 +480,6 @@
 (def workspace-token-sets-tree
  (l/derived (d/nilf ctob/get-set-tree) tokens-lib))

-(def workspace-all-tokens-map
-  (l/derived (d/nilf ctob/get-all-tokens) tokens-lib))
-
 (def workspace-active-theme-paths
  (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))

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

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

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

+(mf/defc object-wasm
+  {::mf/wrap [mf/memo]}
+  [{:keys [objects object-id embed skip-children]
+    :or {embed false}
+    :as props}]
+  (let [object  (get objects object-id)
+        object (cond-> object
+                 (:hide-fill-on-export object)
+                 (assoc :fills [])
+
+                 skip-children
+                 (assoc :shapes []))
+
+        {:keys [width height] :as bounds}
+        (gsb/get-object-bounds objects object {:ignore-margin? false})
+
+        vbox (format-viewbox bounds)
+        zoom    1
+        canvas-ref (mf/use-ref nil)]
+
+    (mf/use-effect
+     (fn []
+       (let [canvas (mf/ref-val canvas-ref)]
+         (->> @wasm.api/module
+              (p/fmap
+               (fn [ready?]
+                 (when ready?
+                   (try
+                     (when (wasm.api/init-canvas-context canvas)
+                       (wasm.api/initialize-viewport
+                        objects zoom vbox "transparent"
+                        (fn []
+                          (wasm.api/render-sync-shape object-id)
+                          (dom/set-attribute! canvas "id" (dm/str "screenshot-" object-id)))))
+                     (catch :default e
+                       (js/console.error "Error initializing canvas context:" e)
+                       false)))))))))
+    [:canvas {:ref canvas-ref
+              :width width
+              :height height
+              :style {:background "red"}}]))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SPRITES (DEBUG)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
--- a/frontend/src/app/main/ui/dashboard/file_menu.cljs
+++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs
@@ -193,15 +193,16 @@
        restore-fn
        (fn [_]
          (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id current-team-id
+                     (with-meta {:team-id (:id current-team)
                                 :ids (into #{} d/xf:map-id files)}
                       {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects current-team-id)
-                                               (dd/fetch-deleted-files current-team-id))
+                                               (dd/fetch-projects (:id current-team))
+                                               (dd/fetch-deleted-files (:id current-team)))
                        :on-error #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restore-file" (:name file))))}))))

        on-restore-immediately
        (fn []
+          (prn files)
          (st/emit!
           (modal/show {:type :confirm
                        :title (tr "dashboard-restore-file-confirmation.title")
@@ -213,7 +214,7 @@
        on-delete-immediately
        (fn []
          (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id current-team-id
+                                      {:team-id (:id current-team)
                                       :ids (into #{} d/xf:map-id files)}))]
            (st/emit!
             (modal/show {:type :confirm
@@ -243,7 +244,8 @@
           (for [project current-projects]
             {:name (get-project-name project)
              :id (get-project-id project)
-              :handler (on-move current-team-id (:id project))})
+              :handler (on-move (:id current-team)
+                                (:id project))})
           (when (seq other-teams)
             [{:name (tr "dashboard.move-to-other-team")
               :id "move-to-other-team"
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -628,7 +628,6 @@
  width: $sz-400;
  padding: var(--sp-xxxl);
  background-color: var(--color-background-primary);
-  z-index: var(--z-index-set);

  &.hero {
    top: px2rem(216);
--- a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
+++ b/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
@@ -36,12 +36,10 @@

 (defn- hide-popover
  [node]
-  (when (and (some? node)
-             (fn? (.-hidePopover node)))
-    (dom/unset-css-property! node "block-size")
-    (dom/unset-css-property! node "inset-block-start")
-    (dom/unset-css-property! node "inset-inline-start")
-    (.hidePopover ^js node)))
+  (dom/unset-css-property! node "block-size")
+  (dom/unset-css-property! node "inset-block-start")
+  (dom/unset-css-property! node "inset-inline-start")
+  (.hidePopover ^js node))

 (defn- calculate-placement-bounding-rect
  "Given a placement, calcultates the bounding rect for it taking in
--- a/frontend/src/app/main/ui/forms.cljs
+++ b/frontend/src/app/main/ui/forms.cljs
@@ -16,7 +16,7 @@
 (def context (mf/create-context nil))

 (mf/defc form-input*
-  [{:keys [name trim] :rest props}]
+  [{:keys [name] :rest props}]

  (let [form       (mf/use-ctx context)
        input-name name
@@ -33,7 +33,7 @@
         (mf/deps input-name)
         (fn [event]
           (let [value (-> event dom/get-target dom/get-input-value)]
-             (fm/on-input-change form input-name value trim))))
+             (fm/on-input-change form input-name value true))))

        props
        (mf/spread-props props {:on-change on-change
--- 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/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
@@ -119,9 +119,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])

@@ -426,8 +423,7 @@
          (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)]
+    (mf/with-effect [children-count expanded?]
      (let [total (count (:shapes item))
            node (mf/ref-val ref)
            scroll-node (dom/get-parent-with-data node "scroll-container")
--- 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/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -375,7 +375,7 @@
        (mf/use-fn
         (mf/deps on-change ids)
         (fn [value attr event]
-           (if (or (string? value) (number? value))
+           (if (or (string? value) (int? value))
             (on-change :simple attr value event)
             (do
               (let [resolved-value (:resolved-value (first value))
@@ -489,7 +489,7 @@
        (mf/use-fn
         (mf/deps on-change ids)
         (fn [value attr event]
-           (if (or (string? value) (number? value))
+           (if (or (string? value) (int? value))
             (on-change :multiple attr value event)
             (do
               (let [resolved-value (:resolved-value (first value))]
@@ -724,7 +724,7 @@
        (mf/use-fn
         (mf/deps on-change wrap-type ids)
         (fn [value event attr]
-           (if (or (string? value) (number? value))
+           (if (or (string? value) (int? value))
             (on-change (= "nowrap" wrap-type) attr value event)
             (do
               (let [resolved-value (:resolved-value (first value))]
--- 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
@@ -61,7 +61,7 @@

 (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)))
@@ -72,10 +72,8 @@
        (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))
+           ;; when using the wasm renderer, apply a blur effect to the viewport canvas
+           (if (features/active-feature? @st/state "render-wasm/v1")
             (do
               (wasm.api/capture-canvas-pixels)
               (wasm.api/apply-canvas-blur)
@@ -205,13 +203,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 +231,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/tokens/management/forms/controls/color_input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
@@ -11,7 +11,6 @@
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.types.color :as cl]
-   [app.common.types.token :as cto]
   [app.common.types.tokens-lib :as ctob]
   [app.main.data.style-dictionary :as sd]
   [app.main.data.tinycolor :as tinycolor]
@@ -52,17 +51,12 @@
 ;; Both variants provide identical color-picker and text-input behavior, but
 ;; differ in how they persist the value within the form’s nested structure.

-(defn- resolve-value
-  [tokens prev-token token-name value]
-  (let [valid-token-name?
-        (and (string? token-name)
-             (re-matches  cto/token-name-validation-regex token-name))

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

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

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


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

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

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

        props
-        (cond
-          (and error touched?)
+        (if (and error touched?)
          (mf/spread-props props {:hint-type "error"
                                  :hint-message (:message error)})
-          (and extra-error touched?)
-          (mf/spread-props props {:hint-type "error"
-                                  :hint-message (:message extra-error)})
-          :else
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name token-name]
+    (mf/with-effect [resolve-stream tokens token input-name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -316,7 +301,7 @@

  (let [form       (mf/use-ctx fc/context)
        input-name name
-        token-name (get-in @form [:data :name] nil)
+
        error
        (get-in @form [:errors :value value-subfield index input-name])

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

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

 (defn- resolve-value
-  [tokens prev-token token-name value]
-  (let [valid-token-name?
-        (and (string? token-name)
-             (re-matches  cto/token-name-validation-regex token-name))
-
-        token
+  [tokens prev-token value]
+  (let [token
        {:value (cto/split-font-family value)
-         :name (if (or (not valid-token-name?) (str/blank? token-name))
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}

        tokens
        (-> tokens
@@ -79,7 +73,6 @@
  [{:keys [token tokens name] :rest props}]
  (let [form       (mf/use-ctx fc/context)
        input-name name
-        token-name (get-in @form [:data :name] nil)

        touched?
        (and (contains? (:data @form) input-name)
@@ -159,10 +152,10 @@
                                  :hint-message (:message error)})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name touched? token-name]
+    (mf/with-effect [resolve-stream tokens token input-name touched?]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -207,7 +200,7 @@
  [{:keys [token tokens name] :rest props}]
  (let [form       (mf/use-ctx fc/context)
        input-name name
-        token-name (get-in @form [:data :name] nil)
+
        error
        (get-in @form [:errors :value input-name])

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

-    (mf/with-effect [resolve-stream tokens token input-name token-name]
+    (mf/with-effect [resolve-stream tokens token input-name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
@@ -8,7 +8,6 @@
  (:require
   [app.common.data :as d]
   [app.common.files.tokens :as cft]
-   [app.common.types.token :as cto]
   [app.common.types.tokens-lib :as ctob]
   [app.main.data.style-dictionary :as sd]
   [app.main.data.workspace.tokens.format :as dwtf]
@@ -140,16 +139,10 @@


 (defn- resolve-value
-  [tokens prev-token token-name value]
-  (let [valid-token-name?
-        (and (string? token-name)
-             (re-matches  cto/token-name-validation-regex token-name))
-
-        token
+  [tokens prev-token value]
+  (let [token
        {:value value
-         :name (if (or (not valid-token-name?) (str/blank? token-name))
-                 "__PENPOT__TOKEN__NAME__PLACEHOLDER__"
-                 token-name)}
+         :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"}
        tokens
        (-> tokens
            ;; Remove previous token when renaming a token
@@ -170,7 +163,6 @@

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

        touched?
        (and (contains? (:data @form) input-name)
@@ -214,11 +206,11 @@
                                  :hint-message (:message error)})
          props)]

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

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

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

        error
        (get-in @form [:errors :value input-name])
@@ -307,10 +298,10 @@
                (mf/spread-props props {:hint-formated true})
                props)]

-    (mf/with-effect [resolve-stream tokens token input-name name token-name]
+    (mf/with-effect [resolve-stream tokens token input-name name]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
@@ -374,7 +365,7 @@

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

        error
        (get-in @form [:errors :value value-subfield index input-name])
@@ -419,10 +410,10 @@
          (mf/spread-props props {:hint-formated true})
          props)]

-    (mf/with-effect [resolve-stream tokens token input-name index value-subfield token-name]
+    (mf/with-effect [resolve-stream tokens token input-name index value-subfield]
      (let [subs (->> resolve-stream
                      (rx/debounce 300)
-                      (rx/mapcat (partial resolve-value tokens token token-name))
+                      (rx/mapcat (partial resolve-value tokens token))
                      (rx/map (fn [result]
                                (d/update-when result :error
                                               (fn [error]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@@ -14,7 +14,6 @@
   [app.main.constants :refer [max-input-length]]
   [app.main.data.modal :as modal]
   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.data.workspace.tokens.errors :as wte]
   [app.main.data.workspace.tokens.library-edit :as dwtl]
   [app.main.data.workspace.tokens.propagation :as dwtp]
   [app.main.refs :as refs]
@@ -111,7 +110,8 @@

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

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

        tokens
        (mf/with-memo [tokens token]
@@ -207,11 +207,7 @@
                                            :value (:value valid-token)
                                            :description description}))
                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide)))
-                   (fn [{:keys [errors]}]
-                     (let [error-messages (wte/humanize-errors errors)
-                           error-message (first error-messages)]
-                       (swap! form assoc-in [:extra-errors :value] {:message error-message}))))))))]
+                      (modal/hide))))))))]

    [:> fc/form* {:class (stl/css :form-wrapper)
                  :form form
@@ -230,7 +226,6 @@
                           :placeholder (tr "workspace.tokens.enter-token-name" token-title)
                           :max-length max-input-length
                           :variant "comfortable"
-                           :trim true
                           :auto-focus true}]

       (when (and warning-name-change? (= action "edit"))
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
@@ -282,7 +282,12 @@
               (let [n (d/parse-double blur)]
                 (or (nil? n) (not (< n 0)))))]]]
          [:spread {:optional true}
-           [:maybe :string]]
+           [:and
+            [:maybe :string]
+            [:fn {:error/fn #(tr "workspace.tokens.shadow-token-spread-value-error")}
+             (fn [spread]
+               (let [n (d/parse-double spread)]
+                 (or (nil? n) (not (< n 0)))))]]]
          [:color {:optional true} [:maybe :string]]
          [:color-result {:optional true} ::sm/any]
          [:inset {:optional true} [:maybe :boolean]]]]]
--- 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
@@ -424,7 +424,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 +473,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.cljs
+++ b/frontend/src/app/render.cljs
@@ -63,7 +63,7 @@

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

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

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

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

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

        (mf/html
         [:& objects-svg
@@ -156,7 +172,8 @@
           :share-id share-id
           :object-ids (into #{} object-id)
           :embed embed
-           :skip-children skip-children}])))
+           :skip-children skip-children
+           :wasm wasm}])))
    (catch :default cause
      (when-let [explain (-> cause ex-data ::sm/explain)]
        (js/console.log "Unexpected error")
@@ -307,6 +324,3 @@
 (defn ^:dev/after-load after-load
  []
  (reinit))
-
-
-
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -23,12 +23,10 @@
   [app.common.uuid :as uuid]
   [app.config :as cf]
   [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]
@@ -69,24 +67,14 @@
 (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))))))
+;;
+(def shape-wrapper-factory nil)

 ;; Based on app.main.render/object-svg
 (mf/defc object-svg
@@ -95,7 +83,7 @@
  (let [objects (mf/deref refs/workspace-page-objects)
        shape-wrapper
        (mf/with-memo [shape]
-          (render/shape-wrapper-factory objects))]
+          (shape-wrapper-factory objects))]

    [:svg {:version "1.1"
           :xmlns "http://www.w3.org/2000/svg"
@@ -134,56 +122,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)

@@ -944,62 +893,86 @@
 (defn set-object
  [shape]
  (perf/begin-measure "set-object")
-  (let [shape        (svg-filters/apply-svg-derived shape)
-        id           (dm/get-prop shape :id)
-        type         (dm/get-prop shape :type)
+  (when shape
+    (let [shape        (svg-filters/apply-svg-derived shape)
+          id           (dm/get-prop shape :id)
+          type         (dm/get-prop shape :type)

-        masked       (get shape :masked-group)
+          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)
-        content      (let [content (get shape :content)]
-                       (if (= type :text)
-                         (ensure-text-content content)
-                         content))
-        bool-type    (get shape :bool-type)
-        grow-type    (get shape :grow-type)
-        blur         (get shape :blur)
-        svg-attrs    (get shape :svg-attrs)
-        shadows      (get shape :shadow)]
+          fills        (get shape :fills)
+          strokes      (if (= type :group)
+                         [] (get shape :strokes))
+          children     (get shape :shapes)
+          blend-mode   (get shape :blend-mode)
+          opacity      (get shape :opacity)
+          hidden       (get shape :hidden)
+          content      (let [content (get shape :content)]
+                         (if (= type :text)
+                           (ensure-text-content content)
+                           content))
+          bool-type    (get shape :bool-type)
+          grow-type    (get shape :grow-type)
+          blur         (get shape :blur)
+          svg-attrs    (get shape :svg-attrs)
+          shadows      (get shape :shadow)
+          corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]

-    (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-children children)
-    (set-shape-blur blur)
-    (when (= type :group)
-      (set-masked (boolean masked)))
-    (when (= type :bool)
-      (set-shape-bool-type bool-type))
-    (when (and (some? content)
-               (or (= type :path)
-                   (= type :bool)))
-      (set-shape-path-content content))
-    (when (some? svg-attrs)
-      (set-shape-svg-attrs svg-attrs))
-    (when (and (some? content) (= type :svg-raw))
-      (set-shape-svg-raw-content (get-static-markup shape)))
-    (set-shape-shadows shadows)
-    (when (= type :text)
-      (set-shape-grow-type grow-type))
+      (set-shape-rotation rotation)
+      (set-shape-transform transform)
+      (set-shape-blend-mode blend-mode)
+      (set-shape-opacity opacity)
+      (set-shape-hidden hidden)
+      (set-shape-children children)
+      (set-shape-corners corners)
+      (set-shape-blur blur)
+      (when (= type :group)
+        (set-masked (boolean masked)))
+      (when (= type :bool)
+        (set-shape-bool-type bool-type))
+      (when (and (some? content)
+                 (or (= type :path)
+                     (= type :bool)))
+        (set-shape-path-content content))
+      (when (some? svg-attrs)
+        (set-shape-svg-attrs svg-attrs))
+      (when (and (some? content) (= type :svg-raw))
+        (set-shape-svg-raw-content (get-static-markup shape)))
+      (set-shape-shadows shadows)
+      (when (= type :text)
+        (set-shape-grow-type grow-type))

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

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

 (defn update-text-layouts
  [shapes]
@@ -1042,143 +1015,30 @@
  (let [{:keys [thumbnails full]} (set-object shape)]
    (process-pending [shape] thumbnails full noop-fn)))

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

 (defn clear-focus-mode
  []
@@ -1572,10 +1432,38 @@

 (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)))
+  (when wasm/canvas
+    (dom/set-style! wasm/canvas "filter" "blur(4px)")))

+(defn render-shape-pixels
+  [shape-id scale]
+  (let [buffer (uuid/get-u32 shape-id)
+
+        offset
+        (h/call wasm/internal-module "_render_shape_pixels"
+                (aget buffer 0)
+                (aget buffer 1)
+                (aget buffer 2)
+                (aget buffer 3)
+                scale)
+
+        offset-32
+        (mem/->offset-32 offset)
+
+        heap (mem/get-heap-u8)
+        heapu32 (mem/get-heap-u32)
+
+        length (aget heapu32 (mem/->offset-32 offset))
+        width (aget heapu32 (+ (mem/->offset-32 offset) 1))
+        height (aget heapu32 (+ (mem/->offset-32 offset) 2))
+
+        result
+        (dr/read-image-bytes heap (+ offset 12) length)
+        ]
+
+    (mem/free)
+    result
+    ))

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

 (defn capture-canvas-pixels
--- a/frontend/src/app/render_wasm/deserializers.cljs
+++ b/frontend/src/app/render_wasm/deserializers.cljs
@@ -45,6 +45,12 @@
     :center (gpt/point cx cy)
     :transform (gmt/matrix a b c d e f)}))

+(defn read-image-bytes
+  [heap offset length]
+
+  (.slice ^js heap offset (+ offset length))
+  )
+
 (defn read-position-data-entry
  [heapu32 heapf32 offset]
  (let [paragraph (aget heapu32 (+ offset 0))
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -106,20 +106,17 @@

 (defn stop-propagation
  [^js event]
-  (when (and (some? event)
-             (fn? (.-stopPropagation event)))
+  (when event
    (.stopPropagation event)))

 (defn stop-immediate-propagation
  [^js event]
-  (when (and (some? event)
-             (fn? (.-stopImmediatePropagation event)))
+  (when event
    (.stopImmediatePropagation event)))

 (defn prevent-default
  [^js event]
-  (when (and (some? event)
-             (fn? (.-preventDefault event)))
+  (when event
    (.preventDefault event)))

 (defn get-target
@@ -805,10 +802,9 @@
  ([uri name]
   (open-new-window uri name "noopener,noreferrer"))
  ([uri name features]
-   (when-let [new-window (.open js/window (str uri) name features)]
+   (let [new-window (.open js/window (str uri) name features)]
     (when (not= name "_blank")
-       (when-let [location (.-location new-window)]
-         (.reload location))))))
+       (.reload (.-location new-window))))))

 (defn browser-back
  []
--- a/frontend/src/app/util/keyboard.cljs
+++ b/frontend/src/app/util/keyboard.cljs
@@ -7,16 +7,15 @@
 (ns app.util.keyboard
  (:require
   [app.config :as cfg]
-   [app.util.dom :as dom]
   [cuerdas.core :as str]))

 (defrecord KeyboardEvent [type key shift ctrl alt meta mod editing native-event]
  Object
  (preventDefault [_]
-    (dom/prevent-default native-event))
+    (.preventDefault native-event))

  (stopPropagation [_]
-    (dom/stop-propagation native-event)))
+    (.stopPropagation native-event)))

 (defn keyboard-event?
  [o]
--- 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/debug.cljs
+++ b/frontend/src/debug.cljs
@@ -6,6 +6,8 @@

 (ns debug
  (:require
+   [app.render-wasm.wasm :as wasm]
+   [app.render-wasm.api :as wasm.api]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.files.repair :as cfr]
@@ -456,3 +458,21 @@
 (defn ^:export network-averages
  []
  (.log js/console (clj->js @http/network-averages)))
+
+(defn ^:export export-image
+  []
+
+  (let [objects (dsh/lookup-page-objects @st/state)
+        shape-id  (->> (get-selected @st/state) first)
+        bytes (wasm.api/render-shape-pixels shape-id 3.0)
+
+        blob (js/Blob. #js [bytes] #js {:type "image/png"})
+        url (.createObjectURL js/URL blob)
+
+        a (.createElement js/document "a")]
+    (set! (.-href a) url)
+    (set! (.-download a) "export.png")
+    (.click a)
+    (.revokeObjectURL js/URL url)
+    
+    nil))
--- a/frontend/text-editor/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/Show More
+++ b/Show More