📚 Update changelog

Also for .stopImmediatePropagation and .preventDefault on
the event instances.

.clj-kondo/config.edn

@@ -45,6 +45,15 @@
   :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}
 

.github/ISSUE_TEMPLATE/new-render-bug-report.md

@@ -1,38 +0,0 @@
----
-name: New Render Bug Report
-about: Create a report about the bugs you have found in the new render
-title: ''
-labels: new render
-assignees: claragvinola
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**Steps to Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots or screen recordings**
-If applicable, add screenshots or screen recording to help illustrate your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/workflows/commit-checker.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Check Commit Type
         uses: gsactions/commit-message-checker@v2
         with:
-          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert|Reapply).+[^.])$'
+          pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert).+[^.])$'
           flags: 'gm'
           error: 'Commit should match CONTRIBUTING.md guideline'
           checkAllCommitMessages: 'true' # optional: this checks all commits associated with a pull request

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

@@ -0,0 +1,125 @@
+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

.github/workflows/plugins-deploy-package.yml

@@ -0,0 +1,127 @@
+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

.github/workflows/plugins-deploy-packages.yml

@@ -0,0 +1,143 @@
+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

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

@@ -0,0 +1,123 @@
+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

.github/workflows/tests.yml

@@ -54,6 +54,7 @@ jobs:
   test-plugins:
     name: Plugins Runtime Linter & Tests
     runs-on: penpot-runner-02
+    container: penpotapp/devenv:latest
 
     steps:
       - uses: actions/checkout@v4

.travis.yml

@@ -1,40 +0,0 @@
-dist: xenial
-
-language: generic
-sudo: required
-
-cache:
-  directories:
-    - $HOME/.m2
-
-services:
-  - docker
-
-branches:
-  only:
-    - master
-    - develop
-
-install:
-  - curl -O https://download.clojure.org/install/linux-install-1.10.1.447.sh
-  - chmod +x linux-install-1.10.1.447.sh
-  - sudo ./linux-install-1.10.1.447.sh
-
-before_script:
-  - env | sort
-
-script:
-  - ./manage.sh build-devenv
-  - ./manage.sh run-frontend-tests
-  - ./manage.sh run-backend-tests
-  - ./manage.sh build-images
-  - ./manage.sh run
-
-after_script:
-  - docker images
-
-notifications:
-  email: false
-
-env:
-  - NODE_VERSION=10.16.0

CHANGES.md

@@ -1,32 +1,6 @@
 # CHANGELOG
 
-## 2.14.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
-### :sparkles: New features & Enhancements
-
-- Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
-- Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
-- Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
-- Optimize sidebar performance for deeply nested shapes [Taiga #13017](https://tree.taiga.io/project/penpot/task/13017)
-
-### :bug: Bugs fixed
-
-- Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
-- Fix wrong image in the onboarding invitation block [Taiga #13040](https://tree.taiga.io/project/penpot/issue/13040)
-- Fix wrong register image [Taiga #12955](https://tree.taiga.io/project/penpot/task/12955)
-
-
-## 2.13.0 (Unreleased)
-
-### :boom: Breaking changes & Deprecations
-
-### :rocket: Epics and highlights
+## 2.13.0
 
 ### :heart: Community contributions (Thank you!)
 
@@ -45,13 +19,24 @@
 - Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
 - Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797)
 - Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
-- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
 - Fix color assets from shared libraries not appearing as assets in Selected colors panel [Taiga #12957](https://tree.taiga.io/project/penpot/issue/12957)
 - Fix CSS generated box-shadow property [Taiga #12997](https://tree.taiga.io/project/penpot/issue/12997)
 - Fix inner shadow selector on shadow token [Taiga #12951](https://tree.taiga.io/project/penpot/issue/12951)
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
+- Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
+- Fix 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
 
@@ -61,6 +46,7 @@
 - Fix problem with style in fonts input [Taiga #12935](https://tree.taiga.io/project/penpot/issue/12935)
 - Fix problem with path editor and right click [Github #7917](https://github.com/penpot/penpot/issues/7917)
 
+
 ## 2.12.0
 
 ### :boom: Breaking changes & Deprecations
@@ -72,6 +58,7 @@ The backend RPC API URLS are changed from `/api/rpc/command/<name>` to
 compatibility; however, if you are a user of this API, it is strongly
 recommended that you adapt your code to use the new PATH.
 
+
 #### Updated SSO Callback URL
 
 The OAuth / Single Sign-On (SSO) callback endpoint has changed to
@@ -104,6 +91,7 @@ This update standardizes all authentication flows under the single URL
 and makis it more modular, enabling the ability to configure SSO auth
 provider dinamically.
 
+
 #### Changes on default docker compose
 
 We have updated the `docker/images/docker-compose.yaml` with a small

backend/src/app/binfile/v3.clj

@@ -873,11 +873,8 @@
   (import-storage-objects cfg)
 
   (let [files  (get manifest :files)
-        result (reduce (fn [result {:keys [id] :as file}]
+        result (reduce (fn [result 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))))
                        []

backend/src/app/email.clj

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

backend/src/app/rpc/commands/fonts.clj

@@ -27,7 +27,17 @@
    [app.rpc.helpers :as rph]
    [app.rpc.quotes :as quotes]
    [app.storage :as sto]
-   [app.util.services :as sv]))
+   [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)
+
 
 (def valid-weight #{100 200 300 400 500 600 700 800 900 950})
 (def valid-style #{"normal" "italic"})
@@ -105,7 +115,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"))
@@ -116,8 +126,26 @@
                           :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))]
@@ -156,7 +184,8 @@
                          :otf-file-id (:id otf)
                          :ttf-file-id (:id ttf)}))]
 
-    (let [data   (generate-missing! data)
+    (let [data   (join-chunks data)
+          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))))))

common/src/app/common/files/helpers.cljc

@@ -526,25 +526,20 @@
           ids))
 
 (defn clean-loops
-  "Clean a list of ids from circular references. Optimized fast-path for single selections."
+  "Clean a list of ids from circular references."
   [objects ids]
-  (if (<= (count ids) 1)
-    ;; For single selection, there can't be circularity; return as ordered-set.
-    (into (d/ordered-set) ids)
-    (let [ids-set (if (set? ids) ids (set ids))
-          parent-selected?
-          (fn [id]
-            ;; Stop early as soon as we find any selected parent
-            (let [parents (get-parent-ids objects id)]
-              (some #(contains? ids-set %) parents)))
+  (let [parent-selected?
+        (fn [id]
+          (let [parents (get-parent-ids objects id)]
+            (some ids parents)))
 
-          add-element
-          (fn [result id]
-            (cond-> result
-              (not (parent-selected? id))
-              (conj id)))]
+        add-element
+        (fn [result id]
+          (cond-> result
+            (not (parent-selected? id))
+            (conj id)))]
 
-      (reduce add-element (d/ordered-set) ids))))
+    (reduce add-element (d/ordered-set) ids)))
 
 (defn- indexed-shapes
   "Retrieves a vector with the indexes for each element in the layer

common/src/app/common/logic/libraries.cljc

@@ -2497,7 +2497,7 @@
         (-> changes
             (cls/generate-delete-shapes
              file page objects (d/ordered-set (:id shape))
-             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true :ignore-flows-for #{(:id shape)}}))
+             {:allow-altering-copies true :ignore-children-fn ignore-swapped-fn :ignore-mask true}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]

common/src/app/common/logic/shapes.cljc

@@ -124,11 +124,9 @@
                         ;; on the deletion process. It should receive a shape and
                         ;; return a boolean
                         ignore-children-fn
-                        ignore-mask
-                        ignore-flows-for]
+                        ignore-mask]
                  :or {ignore-children-fn (constantly false)
-                      ignore-mask false
-                      ignore-flows-for #{}}}]
+                      ignore-mask false}}]
    (let [objects (pcb/get-objects changes)
          data    (pcb/get-library-data changes)
          page-id (pcb/get-page-id changes)
@@ -196,8 +194,7 @@
          (->> (:flows page)
               (reduce
                (fn [changes [id flow]]
-                 (if (and (id-to-delete? (:starting-frame flow))
-                          (not (contains? ignore-flows-for (:starting-frame flow))))
+                 (if (id-to-delete? (:starting-frame flow))
                    (-> changes
                        (pcb/with-page page)
                        (pcb/set-flow id nil))

common/src/app/common/path_names.cljc

@@ -132,94 +132,3 @@ Some naming conventions:
   (if-let [last-period (str/last-index-of s ".")]
     [(subs s 0 (inc last-period)) (subs s (inc last-period))]
     [s ""]))
-
-;; Tree building functions --------------------------------------------------
-
-"Build tree structure from flat list of paths"
-
-"`build-tree-root` is the main function to build the tree."
-
-"Receives a list of segments with 'name' properties representing paths,
-   and a separator string."
-"E.g segments = [{... :name 'one/two/three'} {... :name 'one/two/four'} {... :name 'one/five'}]"
-
-"Transforms into a tree structure like:
-   [{:name 'one'
-     :path 'one'
-     :depth 0
-     :leaf nil
-     :children-fn (fn [] [{:name 'two'
-                           :path 'one.two'
-                           :depth 1
-                           :leaf nil
-                           :children-fn (fn [] [{... :name 'three'} {... :name 'four'}])}
-                          {:name 'five'
-                           :path 'one.five'
-                           :depth 1
-                           :leaf {... :name 'five'}
-                           ...}])}]"
-
-(defn- sort-by-children
-  "Sorts segments so that those with children come first."
-  [segments separator]
-  (sort-by (fn [segment]
-             (let [path (split-path (:name segment) :separator separator)
-                   path-length (count path)]
-               (if (= path-length 1)
-                 1
-                 0)))
-           segments))
-
-(defn- group-by-first-segment
-  "Groups segments by their first path segment and update segment name."
-  [segments separator]
-  (reduce (fn [acc segment]
-            (let [[first-segment & remaining-segments] (split-path (:name segment) :separator separator)
-                  rest-path (when (seq remaining-segments) (join-path remaining-segments :separator separator :with-spaces? false))]
-              (update acc first-segment (fnil conj [])
-                      (if rest-path
-                        (assoc segment :name rest-path)
-                        segment))))
-          {}
-          segments))
-
-(defn- sort-and-group-segments
-  "Sorts elements and groups them by their first path segment."
-  [segments separator]
-  (let [sorted  (sort-by-children segments separator)
-        grouped (group-by-first-segment sorted separator)]
-    grouped))
-
-(defn- build-tree-node
-  "Builds a single tree node with lazy children."
-  [segment-name remaining-segments separator parent-path depth]
-  (let [current-path (if parent-path
-                       (str parent-path "." segment-name)
-                       segment-name)
-
-        is-leaf? (and (seq remaining-segments)
-                      (every? (fn [segment]
-                                (let [remaining-segment-name (first (split-path (:name segment) :separator separator))]
-                                  (= segment-name remaining-segment-name)))
-                              remaining-segments))
-
-        leaf-segment (when is-leaf? (first remaining-segments))
-        node {:name segment-name
-              :path current-path
-              :depth depth
-              :leaf leaf-segment
-              :children-fn (when-not is-leaf?
-                             (fn []
-                               (let [grouped-elements (sort-and-group-segments remaining-segments separator)]
-                                 (mapv (fn [[child-segment-name remaining-child-segments]]
-                                         (build-tree-node child-segment-name remaining-child-segments separator current-path (inc depth)))
-                                       grouped-elements))))}]
-    node))
-
-(defn build-tree-root
-  "Builds the root level of the tree."
-  [segments separator]
-  (let [grouped-elements (sort-and-group-segments segments separator)]
-    (mapv (fn [[segment-name remaining-segments]]
-            (build-tree-node segment-name remaining-segments separator nil 0))
-          grouped-elements)))

common/src/app/common/types/component.cljc

@@ -140,8 +140,7 @@
     :layout-item-min-w
     :layout-item-absolute
     :layout-item-z-index
-    :layout-item-align-self
-    :interactions})
+    :layout-item-align-self})
 
 (defn component-attr?
   "Check if some attribute is one that is involved in component syncrhonization.

common/src/app/common/types/token.cljc

@@ -47,18 +47,6 @@
         self-reference? (get token-references token-name)]
     self-reference?))
 
-(defn references-token?
-  "Recursively check if a value references the token name. Handles strings, maps, and sequences."
-  [value token-name]
-  (cond
-    (string? value)
-    (boolean (some #(= % token-name) (find-token-value-references value)))
-    (map? value)
-    (some true? (map #(references-token? % token-name) (vals value)))
-    (sequential? value)
-    (some true? (map #(references-token? % token-name) value))
-    :else false))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SCHEMA
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -109,9 +97,12 @@
 (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}
-   #"^(?!\$)([a-zA-Z0-9-$_]+\.?)*(?<!\.)$"])
+   token-name-validation-regex])
 
 (def ^:private schema:color
   [:map
@@ -570,18 +561,3 @@
   "Predicate if a shadow composite token is a reference value - a string pointing to another reference token."
   [token-value]
   (string? token-value))
-
-(defn update-token-value-references
-  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
-  [value old-name new-name]
-  (cond
-    (string? value)
-    (str/replace value
-                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
-                 (str "{" new-name "}"))
-    (map? value)
-    (d/update-vals value #(update-token-value-references % old-name new-name))
-    (sequential? value)
-    (mapv #(update-token-value-references % old-name new-name) value)
-    :else
-    value))

common/src/app/common/types/tokens_lib.cljc

@@ -909,8 +909,7 @@ Will return a value that matches this schema:
 `:all`     All of the nested sets are active
 `:partial` Mixed active state of nested sets")
   (get-tokens-in-active-sets [_] "set of set names that are active in the the active themes")
-  (get-all-tokens [_] "all tokens in the lib, as a sequence")
-  (get-all-tokens-map [_] "all tokens in the lib, as a map name -> token")
+  (get-all-tokens [_] "all tokens in the lib")
   (get-tokens [_ set-id] "return a map of tokens in the set, indexed by token-name"))
 
 (declare parse-multi-set-dtcg-json)
@@ -1307,10 +1306,6 @@ Will return a value that matches this schema:
       tokens))
 
   (get-all-tokens [this]
-    (mapcat #(vals (get-tokens- %))
-            (get-sets this)))
-
-  (get-all-tokens-map [this]
     (reduce
      (fn [tokens' set]
        (into tokens' (map (fn [x] [(:name x) x]) (vals (get-tokens- set)))))
@@ -1467,11 +1462,12 @@ Will return a value that matches this schema:
 (def ^:private schema:dtcg-node
   [:schema {:registry
             {::simple-value
-             [:or :string :int :double]
+             [:or :string :int :double ::sm/boolean]
              ::value
              [:or
               [:ref ::simple-value]
               [:vector ::simple-value]
+              [:vector [:map-of :string ::simple-value]]
               [:map-of :string [:or
                                 [:ref ::simple-value]
                                 [:vector ::simple-value]]]]}}

docker/devenv/files/nginx.conf

@@ -223,7 +223,7 @@ http {
                 add_header X-Cache-Status $upstream_cache_status;
             }
 
-            location ~* \.(jpg|png|svg|ttf|woff|woff2)$ {
+            location ~* \.(jpg|png|svg|ttf|woff|woff2|gif)$ {
                 add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 

docker/images/docker-compose.yaml

@@ -152,9 +152,9 @@ services:
 
       # AWS_ACCESS_KEY_ID: <KEY_ID>
       # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
-      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>
 
       ## Telemetry. When enabled, a periodical process will send anonymous data about this
       ## instance. Telemetry data will enable us to learn how the application is used,

docker/images/files/nginx.conf.template

@@ -144,7 +144,7 @@ http {
         location / {
             include /etc/nginx/overrides/location.d/*.conf;
 
-            location ~* \.(js|css|jpg|png|svg|ttf|woff|woff2|wasm)$ {
+            location ~* \.(js|css|jpg|png|svg|gif|ttf|woff|woff2|wasm)$ {
                 add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 

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://penpot-plugins-api-doc.pages.dev/">here</a>.
+We've got all the documentation you need for the API right <a target="_blank" href="https://doc.plugins.penpot.app/">here</a>.

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://penpot-plugins-api-doc.pages.dev/](https://penpot-plugins-api-doc.pages.dev/)
+[https://doc.plugins.penpot.app/](https://doc.plugins.penpot.app/)
 - 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://penpot-plugins-api-doc.pages.dev/) 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://doc.plugins.penpot.app/) 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.
 

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://penpot-plugins-styles.pages.dev/">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://styles-doc.plugins.penpot.app/">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://penpot-plugins-api-doc.pages.dev/).
+For more detailed information, refer to the [Penpot Plugins API Documentation](https://doc.plugins.penpot.app/).
 
 ## 2.5. Step 5. Build the plugin file
 

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://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.
+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.
 
 <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/theme">Theme example</a>
 

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://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.
+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.
 
 ### Are there any security or quality criteria I should be aware of?
 
@@ -48,7 +48,8 @@ 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-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>
+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>
+
 
 ### Can I create components?
 
@@ -58,7 +59,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://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>.
+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>.
 
 ### Is there a place where I can share my plugin?
 

docs/plugins/getting-started.md

@@ -69,12 +69,13 @@ You need to provide the plugin's manifest URL for the installation. If there are
 
 | Name          | URL                                                                 |
 | ------------- | ------------------------------------------------------------------- |
-| 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  |
+| 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               |
+
 
 ## 1.4. Plugin's basics
 

docs/technical-guide/configuration.md

@@ -114,14 +114,7 @@ configuration.
 The callback has the following format:
 
 ```html
-https://<your_domain>/api/auth/oauth/<oauth_provider>/callback
-```
-
-You will need to change <your_domain> and <oauth_provider> according to your setup.
-This is how it looks with Gitlab provider:
-
-```html
-https://<your_domain>/api/auth/oauth/gitlab/callback
+https://<your_domain>/api/auth/oidc/callback
 ```
 
 #### Google

exporter/src/app/handlers/resources.cljs

@@ -36,7 +36,7 @@
     {:path     path
      :mtype    (mime/get type)
      :name     name
-     :filename (str/concat name (mime/get-extension type))
+     :filename (str/concat (str/slug name) (mime/get-extension type))
      :id       task-id}))
 
 (defn create-zip

frontend/package.json

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

frontend/playwright/ui/pages/WorkspacePage.js

@@ -198,10 +198,10 @@ export class WorkspacePage extends BaseWebSocketPage {
       `[id="shape-00000000-0000-0000-0000-000000000000"]`,
     );
     this.toolbarOptions = page.getByTestId("toolbar-options");
-    this.rectShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Rectangle" });
-    this.ellipseShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Ellipse" });
-    this.moveButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Move" });
-    this.boardButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Board" });
+    this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.ellipseShapeButton = page.getByRole("button", { name: "Ellipse (E)" });
+    this.moveButton = page.getByRole("button", { name: "Move (V)" });
+    this.boardButton = page.getByRole("button", { name: "Board (B)" });
     this.toggleToolbarButton = page.getByRole("button", {
       name: "Toggle toolbar",
     });

frontend/playwright/ui/specs/design-tab.spec.js

@@ -189,8 +189,8 @@ test("BUG 7760 - Layout losing properties when changing parents", async ({
   await workspacePage.clickLeafLayer("Flex Board");
 
   // Move the first board into the second
-  const hAuto = await workspacePage.page.getByTestId("behaviour-h-auto");
-  const vAuto = await workspacePage.page.getByTestId("behaviour-v-auto");
+  const hAuto = await workspacePage.page.getByTitle("Fit content (Horizontal)");
+  const vAuto = await workspacePage.page.getByTitle("Fit content (Vertical)");
 
   await expect(vAuto.locator("input")).toBeChecked();
   await expect(hAuto.locator("input")).toBeChecked();

frontend/playwright/ui/specs/text-editor-v2.spec.js

@@ -110,7 +110,7 @@ test("Update an already created text shape by prepending text", async ({
   await workspace.textEditor.stopEditing();
 });
 
-test("Update an already created text shape by inserting text in between", async ({
+test.skip("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("Update a new text shape prepending text by pasting text", async ({
+test.skip("Update a new text shape prepending text by pasting text", async ({
   page,
   context,
 }) => {

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

@@ -1,604 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-  unfoldTokenTree,
-} from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Apply token", () => {
-  test("User applies color token to a shape", async ({ page }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers
-      .getByTestId("layer-row")
-      .filter({ hasText: "Button" })
-      .click();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    unfoldTokenTree(tokensSidebar, "color", "colors.black");
-
-    await tokensSidebar
-      .getByRole("button", { name: "black" })
-      .click({ button: "right" });
-    await tokenContextMenuForToken.getByText("Fill").click();
-
-    await expect(
-      workspacePage.page.getByLabel("Name: colors.black"),
-    ).toBeVisible();
-  });
-
-  test("User applies border-radius token to a shape from sidebar", async ({
-    page,
-  }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
-
-    // Open tokens sections on left sidebar
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    // Unfold border radius tokens
-    await page.getByRole("button", { name: "Border Radius 3" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius" }),
-    ).toBeVisible();
-    await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
-    await expect(
-      tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
-    ).toBeVisible();
-
-    // Apply border radius token from token panels
-    await tokensSidebar
-      .getByRole("button", { name: "borderRadius.sm" })
-      .click();
-
-    // Check if border radius sections is visible on right sidebar
-    const borderRadiusSection = page.getByRole("region", {
-      name: "border-radius-section",
-    });
-    await expect(borderRadiusSection).toBeVisible();
-
-    // Check if token pill is visible on design tab on right sidebar
-    const brTokenPillSM = borderRadiusSection.getByRole("button", {
-      name: "borderRadius.sm",
-    });
-    await expect(brTokenPillSM).toBeVisible();
-    await brTokenPillSM.click();
-
-    // Change token from dropdown
-    const brTokenOptionXl = borderRadiusSection.getByLabel("borderRadius.xl");
-    await expect(brTokenOptionXl).toBeVisible();
-    await brTokenOptionXl.click();
-
-    await expect(brTokenPillSM).not.toBeVisible();
-    const brTokenPillXL = borderRadiusSection.getByRole("button", {
-      name: "borderRadius.xl",
-    });
-    await expect(brTokenPillXL).toBeVisible();
-
-    // Detach token from design tab on right sidebar
-    const detachButton = borderRadiusSection.getByRole("button", {
-      name: "Detach token",
-    });
-    await detachButton.click();
-    await expect(brTokenPillXL).not.toBeVisible();
-  });
-
-  test("User applies typography token to a text shape", async ({ page }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTypographyTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers
-      .getByTestId("layer-row")
-      .filter({ hasText: "Some Text" })
-      .click();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    await tokensSidebar
-      .getByRole("button")
-      .filter({ hasText: "Typography" })
-      .click();
-
-    await tokensSidebar.getByRole("button", { name: "Full" }).click();
-
-    const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
-      name: "Font Size",
-    });
-    await expect(fontSizeInput).toBeVisible();
-    await expect(fontSizeInput).toHaveValue("100");
-  });
-
-  test("User edits typography token and all fields are valid", async ({
-    page,
-  }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    await tokensSidebar
-      .getByRole("button")
-      .filter({ hasText: "Typography" })
-      .click();
-
-    // Open edit modal for "Full" typography token
-    const token = tokensSidebar.getByRole("button", { name: "Full" });
-    await token.click({ button: "right" });
-    await page.getByText("Edit token").click();
-
-    // Modal opens
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const saveButton = tokensUpdateCreateModal.getByRole("button", {
-      name: /save/i,
-    });
-
-    // Fill font-family to verify to verify that input value doesn't get split into list of characters
-    const fontFamilyField = tokensUpdateCreateModal
-      .getByLabel("Font family")
-      .first();
-    await fontFamilyField.fill("OneWord");
-
-    // Invalidate incorrect values for font size
-    const fontSizeField = tokensUpdateCreateModal.getByLabel(/Font Size/i);
-    await fontSizeField.fill("invalid");
-    await expect(
-      tokensUpdateCreateModal.getByText(/Invalid token value:/),
-    ).toBeVisible();
-    await expect(saveButton).toBeDisabled();
-
-    // Show error with line-height depending on invalid font-size
-    await fontSizeField.fill("");
-    await expect(saveButton).toBeDisabled();
-
-    // Fill in values for all fields and verify they persist when switching tabs
-    await fontSizeField.fill("16");
-    await expect(saveButton).toBeEnabled();
-
-    const fontWeightField = tokensUpdateCreateModal.getByLabel(/Font Weight/i);
-    const letterSpacingField =
-      tokensUpdateCreateModal.getByLabel(/Letter Spacing/i);
-    const lineHeightField = tokensUpdateCreateModal.getByLabel(/Line Height/i);
-    const textCaseField = tokensUpdateCreateModal.getByLabel(/Text Case/i);
-    const textDecorationField =
-      tokensUpdateCreateModal.getByLabel(/Text Decoration/i);
-
-    // Capture all values before switching tabs
-    const originalValues = {
-      fontSize: await fontSizeField.inputValue(),
-      fontFamily: await fontFamilyField.inputValue(),
-      fontWeight: await fontWeightField.inputValue(),
-      letterSpacing: await letterSpacingField.inputValue(),
-      lineHeight: await lineHeightField.inputValue(),
-      textCase: await textCaseField.inputValue(),
-      textDecoration: await textDecorationField.inputValue(),
-    };
-
-    // Switch to reference tab and back to composite tab
-    const referenceTabButton =
-      tokensUpdateCreateModal.getByTestId("reference-opt");
-    await referenceTabButton.click();
-
-    // Empty reference tab should be disabled
-    await expect(saveButton).toBeDisabled();
-
-    const compositeTabButton =
-      tokensUpdateCreateModal.getByTestId("composite-opt");
-    await compositeTabButton.click();
-
-    // Filled composite tab should be enabled
-    await expect(saveButton).toBeEnabled();
-
-    // Verify all values are preserved after switching tabs
-    await expect(fontSizeField).toHaveValue(originalValues.fontSize);
-    await expect(fontFamilyField).toHaveValue(originalValues.fontFamily);
-    await expect(fontWeightField).toHaveValue(originalValues.fontWeight);
-    await expect(letterSpacingField).toHaveValue(originalValues.letterSpacing);
-    await expect(lineHeightField).toHaveValue(originalValues.lineHeight);
-    await expect(textCaseField).toHaveValue(originalValues.textCase);
-    await expect(textDecorationField).toHaveValue(
-      originalValues.textDecoration,
-    );
-
-    await saveButton.click();
-
-    // Modal should close, token should be visible (with new name) in sidebar
-    await expect(tokensUpdateCreateModal).not.toBeVisible();
-  });
-
-  test("User cant submit empty typography token or reference", async ({
-    page,
-  }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-    await tokensTabPanel
-      .getByRole("button", { name: "Add Token: Typography" })
-      .click();
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    await nameField.fill("typography.empty");
-
-    const valueField = tokensUpdateCreateModal.getByLabel("Font Size");
-
-    // Insert a value and then delete it
-    await valueField.fill("1");
-    await valueField.fill("");
-
-    // Submit button should be disabled when field is empty
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-    await expect(submitButton).toBeDisabled();
-
-    // Switch to reference tab, should not be submittable either
-    const referenceTabButton =
-      tokensUpdateCreateModal.getByTestId("reference-opt");
-    await referenceTabButton.click();
-    await expect(submitButton).toBeDisabled();
-  });
-
-  test("User adds typography token with reference", async ({ page }) => {
-    const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
-
-    const newTokenTitle = "NewReference";
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-    await tokensTabPanel
-      .getByRole("button", { name: "Add Token: Typography" })
-      .click();
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    await nameField.fill(newTokenTitle);
-
-    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Use a reference",
-    });
-    referenceTabButton.click();
-
-    const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-      name: "Reference",
-    });
-    await referenceField.fill("{Full}");
-
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-
-    const resolvedValue =
-      await tokensUpdateCreateModal.getByText("Resolved value:");
-    await expect(resolvedValue).toBeVisible();
-    await expect(resolvedValue).toContainText("Font Family: 42dot Sans");
-    await expect(resolvedValue).toContainText("Font Size: 100");
-    await expect(resolvedValue).toContainText("Font Weight: 300");
-    await expect(resolvedValue).toContainText("Letter Spacing: 2");
-    await expect(resolvedValue).toContainText("Text Case: uppercase");
-    await expect(resolvedValue).toContainText("Text Decoration: underline");
-
-    await expect(submitButton).toBeEnabled();
-    await submitButton.click();
-
-    await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-    const newToken = tokensSidebar.getByRole("button", {
-      name: newTokenTitle,
-    });
-
-    await expect(newToken).toBeVisible();
-  });
-
-  test("User adds shadow token with multiple shadows and applies it to shape", async ({
-    page,
-  }) => {
-    const {
-      tokensUpdateCreateModal,
-      tokensSidebar,
-      workspacePage,
-      tokenContextMenuForToken,
-    } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-    await test.step("Stage 1: Basic open", async () => {
-      // User adds shadow via the sidebar
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      const nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary");
-
-      // User adds first shadow with a color from the color ramp
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      await expect(firstShadowFields).toBeVisible();
-
-      // Fill in the shadow values
-      const offsetXInput = firstShadowFields.getByLabel("X");
-      const offsetYInput = firstShadowFields.getByLabel("Y");
-      const blurInput = firstShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const spreadInput = firstShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-
-      await offsetXInput.fill("2");
-      await offsetYInput.fill("2");
-      await blurInput.fill("4");
-      await spreadInput.fill("0");
-
-      // Add color using the color picker
-      const colorBullet = firstShadowFields.getByTestId(
-        "token-form-color-bullet",
-      );
-      await colorBullet.click();
-
-      // Click on the color ramp to select a color
-      const valueSaturationSelector = tokensUpdateCreateModal.getByTestId(
-        "value-saturation-selector",
-      );
-      await expect(valueSaturationSelector).toBeVisible();
-      await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
-
-      // Verify that a color value was set
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
-
-      // Wait for validation to complete
-      await expect(
-        tokensUpdateCreateModal.getByText(/Resolved value:/).first(),
-      ).toBeVisible();
-
-      // Save button should be enabled
-      const submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await expect(submitButton).toBeEnabled();
-    });
-
-    await test.step("Stage 2: Shadow adding/removing works", async () => {
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      const firstColorValue = await colorInput.inputValue();
-
-      // User adds a second shadow
-      const addButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Add Shadow",
-      });
-      await addButton.click();
-
-      const secondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      await expect(secondShadowFields).toBeVisible();
-
-      // User adds a third shadow
-      await addButton.click();
-
-      const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-2",
-      );
-      await expect(thirdShadowFields).toBeVisible();
-
-      // User adds values for the third shadow
-      const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
-      const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
-      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-
-      await thirdOffsetXInput.fill("10");
-      await thirdOffsetYInput.fill("10");
-      await thirdBlurInput.fill("20");
-      await thirdSpreadInput.fill("5");
-      await thirdColorInput.fill("#FF0000");
-
-      // User removes the 2nd shadow
-      const removeButton2 = secondShadowFields.getByRole("button", {
-        name: "Remove Shadow",
-      });
-      await removeButton2.click();
-
-      // Verify that we have only two shadow fields
-      await expect(thirdShadowFields).not.toBeVisible();
-
-      // Verify that the first shadow kept its values
-      const firstOffsetXValue = await firstShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const firstOffsetYValue = await firstShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const firstBlurValue = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const firstSpreadValue = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const firstColorValueAfter = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(firstOffsetXValue).toBe("2");
-      await expect(firstOffsetYValue).toBe("2");
-      await expect(firstBlurValue).toBe("4");
-      await expect(firstSpreadValue).toBe("0");
-      await expect(firstColorValueAfter).toBe(firstColorValue);
-
-      // Verify that the second kept its values (after shadow 3)
-      // After removing index 1, the third shadow becomes the second shadow at index 1
-      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      await expect(newSecondShadowFields).toBeVisible();
-
-      const secondOffsetXValue = await newSecondShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const secondOffsetYValue = await newSecondShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const secondBlurValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const secondSpreadValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const secondColorValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(secondOffsetXValue).toBe("10");
-      await expect(secondOffsetYValue).toBe("10");
-      await expect(secondBlurValue).toBe("20");
-      await expect(secondSpreadValue).toBe("5");
-      await expect(secondColorValue).toBe("#FF0000");
-    });
-
-    await test.step("Stage 3: Restore when switching tabs works", async () => {
-      const firstShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-0",
-      );
-      const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
-        "shadow-input-fields-1",
-      );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      const firstColorValue = await colorInput.inputValue();
-
-      // Switch to reference tab
-      const referenceTabButton =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceTabButton.click();
-
-      // Verify we're in reference mode - the composite fields should not be visible
-      await expect(firstShadowFields).not.toBeVisible();
-
-      // Switch back to composite tab
-      const compositeTabButton =
-        tokensUpdateCreateModal.getByTestId("composite-opt");
-      await compositeTabButton.click();
-
-      // Verify that shadows are restored
-      await expect(firstShadowFields).toBeVisible();
-      await expect(newSecondShadowFields).toBeVisible();
-
-      // Verify first shadow values are still there
-      const restoredFirstOffsetX = await firstShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const restoredFirstOffsetY = await firstShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const restoredFirstBlur = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const restoredFirstSpread = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const restoredFirstColor = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(restoredFirstOffsetX).toBe("2");
-      await expect(restoredFirstOffsetY).toBe("2");
-      await expect(restoredFirstBlur).toBe("4");
-      await expect(restoredFirstSpread).toBe("0");
-      await expect(restoredFirstColor).toBe(firstColorValue);
-
-      // Verify second shadow values are still there
-      const restoredSecondOffsetX = await newSecondShadowFields
-        .getByLabel("X")
-        .inputValue();
-      const restoredSecondOffsetY = await newSecondShadowFields
-        .getByLabel("Y")
-        .inputValue();
-      const restoredSecondBlur = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
-        .inputValue();
-      const restoredSecondSpread = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
-        .inputValue();
-      const restoredSecondColor = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
-        .inputValue();
-
-      await expect(restoredSecondOffsetX).toBe("10");
-      await expect(restoredSecondOffsetY).toBe("10");
-      await expect(restoredSecondBlur).toBe("20");
-      await expect(restoredSecondSpread).toBe("5");
-      await expect(restoredSecondColor).toBe("#FF0000");
-    });
-
-    await test.step("Stage 4: Layer application works", async () => {
-      // Save the token
-      const submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      unfoldTokenTree(tokensSidebar, "shadow", "primary");
-
-      // Verify token appears in sidebar
-      const shadowToken = tokensSidebar.getByRole("button", {
-        name: "primary",
-      });
-      await expect(shadowToken).toBeEnabled();
-
-      // Apply the shadow
-      await workspacePage.clickLayers();
-      await workspacePage.clickLeafLayer("Button");
-
-      const shadowSection = workspacePage.rightSidebar.getByText("Drop shadow");
-      await expect(shadowSection).toHaveCount(0);
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      await shadowToken.click();
-
-      await expect(shadowSection).toHaveCount(2);
-    });
-  });
-});

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

@@ -1,22 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupEmptyTokensFile } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens tab - common tests", () => {
-  test("Clicking tokens tab button opens tokens sidebar tab", async ({
-    page,
-  }) => {
-    await setupEmptyTokensFile(page);
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-    await expect(tokensTabPanel).toHaveText(/TOKENS/);
-    await expect(tokensTabPanel).toHaveText(/Themes/);
-  });
-});

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

@@ -1,266 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-
-const setupEmptyTokensFile = async (page, options = {}) => {
-  const { flags = [] } = options;
-
-  const workspacePage = new WorkspacePage(page);
-  if (flags.length > 0) {
-    await workspacePage.mockConfigFlags(flags);
-  }
-
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockRPC(
-    "get-team?id=*",
-    "workspace/get-team-tokens.json",
-  );
-
-  await workspacePage.mockRPC(
-    "update-file?id=*",
-    "workspace/update-file-create-rect.json",
-  );
-
-  await workspacePage.goToWorkspace({
-    fileId: "c7ce0794-0992-8105-8004-38f280443849",
-    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
-  });
-
-  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-  await tokensTabButton.click();
-
-  return {
-    workspacePage,
-    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
-    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
-    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
-    tokenSetItems: workspacePage.tokenSetItems,
-    tokensSidebar: workspacePage.tokensSidebar,
-    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
-    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
-  };
-};
-
-const setupTokensFile = async (page, options = {}) => {
-  const {
-    file = "workspace/get-file-tokens.json",
-    fileFragment = "workspace/get-file-fragment-tokens.json",
-    flags = ["enable-feature-token-input"],
-  } = options;
-
-  const workspacePage = new WorkspacePage(page);
-  if (flags.length > 0) {
-    await workspacePage.mockConfigFlags(flags);
-  }
-
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockRPC(
-    "get-team?id=*",
-    "workspace/get-team-tokens.json",
-  );
-  await workspacePage.mockRPC(/get\-file\?/, file);
-  await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
-  await workspacePage.mockRPC(
-    "update-file?id=*",
-    "workspace/update-file-create-rect.json",
-  );
-
-  await workspacePage.goToWorkspace({
-    fileId: "c7ce0794-0992-8105-8004-38f280443849",
-    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
-  });
-
-  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-  await tokensTabButton.click();
-
-  return {
-    workspacePage,
-    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
-    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
-    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
-    tokenSetItems: workspacePage.tokenSetItems,
-    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
-    tokensSidebar: workspacePage.tokensSidebar,
-    tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
-    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
-  };
-};
-
-const setupTypographyTokensFile = async (page, options = {}) => {
-  return setupTokensFile(page, {
-    file: "workspace/get-file-typography-tokens.json",
-    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
-    ...options,
-  });
-};
-
-const testTokenCreationFlow = async (
-  page,
-  {
-    tokenLabel,
-    namePlaceholder,
-    valuePlaceholder,
-    validValue,
-    invalidValue,
-    selfReferenceValue,
-    missingReferenceValue,
-    secondValidValue,
-    resolvedValueText,
-    secondResolvedValueText,
-  },
-) => {
-  const invalidValueError = "Invalid token value";
-  const emptyNameError = "Name should be at least 1 character";
-  const selfReferenceError = "Token has self reference";
-  const missingReferenceError = "Missing token references";
-
-  const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-    await setupEmptyTokensFile(page);
-
-  // Open modal
-  const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-  const addTokenButton = tokensTabPanel.getByRole("button", {
-    name: `Add Token: ${tokenLabel}`,
-  });
-
-  await addTokenButton.click();
-  await expect(tokensUpdateCreateModal).toBeVisible();
-
-  // Placeholder checks
-  await expect(
-    tokensUpdateCreateModal.getByPlaceholder(namePlaceholder),
-  ).toBeVisible();
-  await expect(
-    tokensUpdateCreateModal.getByPlaceholder(valuePlaceholder),
-  ).toBeVisible();
-
-  const nameField = tokensUpdateCreateModal.getByLabel("Name");
-  const valueField = tokensUpdateCreateModal.getByLabel("Value");
-  const submitButton = tokensUpdateCreateModal.getByRole("button", {
-    name: "Save",
-  });
-
-  // 1. Name filled + empty value → disabled
-  await nameField.fill("my-token");
-  await expect(submitButton).toBeDisabled();
-
-  // 2. Invalid value → disabled + error message
-  await valueField.fill(invalidValue);
-
-  const invalidValueErrorNode =
-    tokensUpdateCreateModal.getByText(invalidValueError);
-
-  await expect(invalidValueErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 3. Empty name → disabled + error message
-  await nameField.fill("");
-
-  const emptyNameErrorNode = tokensUpdateCreateModal.getByText(emptyNameError);
-
-  await expect(emptyNameErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 4. Self reference → disabled + error message
-  await nameField.fill("my-token");
-  await valueField.fill(selfReferenceValue);
-
-  const selfRefErrorNode =
-    tokensUpdateCreateModal.getByText(selfReferenceError);
-
-  await expect(selfRefErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  // 5. Missing reference → disabled + error message
-  await valueField.fill(missingReferenceValue);
-
-  const missingRefErrorNode = tokensUpdateCreateModal.getByText(
-    missingReferenceError,
-  );
-
-  await expect(missingRefErrorNode).toBeVisible();
-  await expect(submitButton).toBeDisabled();
-
-  //
-  // ------- SUCCESSFUL CREATION -------
-  //
-
-  // 6. Basic valid value → enabled
-  await valueField.fill(validValue);
-  await expect(
-    tokensUpdateCreateModal.getByText(resolvedValueText),
-  ).toBeVisible();
-  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");
-  await valueField.fill(secondValidValue);
-
-  await expect(
-    tokensUpdateCreateModal.getByText(secondResolvedValueText),
-  ).toBeVisible();
-  await expect(submitButton).toBeEnabled();
-
-  await submitButton.click();
-
-  await expect(
-    tokensTabPanel.getByRole("button", { name: "my-token-2" }),
-  ).toBeEnabled();
-};
-
-const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
-  const tokenSegments = tokenName.split(".");
-  const tokenFolderTree = tokenSegments.slice(0, -1);
-  const tokenLeafName = tokenSegments.pop();
-
-  const typeParentWrapper = tokensTabPanel.getByTestId(`section-${type}`);
-  const typeSectionButton = typeParentWrapper
-    .getByRole("button", {
-      name: type,
-    })
-    .first();
-
-  const isSectionExpanded =
-    await typeSectionButton.getAttribute("aria-expanded");
-
-  if (isSectionExpanded === "false") {
-    await typeSectionButton.click();
-  }
-
-  for (const segment of tokenFolderTree) {
-    const segmentButton = typeParentWrapper
-      .getByRole("listitem")
-      .getByRole("button", { name: segment })
-      .first();
-
-    const isExpanded = await segmentButton.getAttribute("aria-expanded");
-    if (isExpanded === "false") {
-      await segmentButton.click();
-    }
-  }
-
-  await expect(
-    typeParentWrapper.getByRole("button", {
-      name: tokenLeafName,
-    }),
-  ).toBeEnabled();
-};
-
-export {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-  testTokenCreationFlow,
-  unfoldTokenTree,
-};

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

@@ -1,651 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
-} from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Remapping Feature", () => {
-  test.describe("Box Shadow Token Remapping", () => {
-    test("User renames box shadow token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base shadow token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-shadow");
-
-      const colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#000000");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived shadow token that references base-shadow
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("derived-shadow");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{base-shadow}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base-shadow token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-shadow",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("foundation-shadow");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-      await expect(remappingModal).toContainText("1");
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "foundation-shadow" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "derived-shadow" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates shadow token - referenced token and applied shapes update", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-        workspacePage,
-      } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base shadow token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary-shadow");
-
-      let colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#000000");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived shadow token that references base
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Shadow" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("card-shadow");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{primary-shadow}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Apply the referenced token to a shape
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Button" })
-        .click();
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      const cardShadowToken = tokensSidebar.getByRole("button", {
-        name: "card-shadow",
-      });
-      await cardShadowToken.click();
-
-      // Rename and update value of base token
-      const primaryToken = tokensSidebar.getByRole("button", {
-        name: "primary-shadow",
-      });
-      await primaryToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("main-shadow");
-
-      // Update the color value
-      colorField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Color",
-      });
-      await colorField.fill("#FF0000");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "main-shadow" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "card-shadow" }),
-      ).toBeVisible();
-
-      // Verify the shape still has the token applied with the NEW name
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Button" })
-        .click();
-
-      // Verify the shape still has the shadow applied with the UPDATED color value
-      // Expand the shadow section to access the color field
-      const shadowSection =
-        workspacePage.rightSidebar.getByTestId("shadow-section");
-      await expect(shadowSection).toBeVisible();
-
-      // Click to expand the shadow options (the menu button)
-      const shadowMenuButton = shadowSection
-        .getByRole("button", { name: "options" })
-        .first();
-      await shadowMenuButton.click();
-
-      // Wait for the advanced options to appear
-      await page.waitForTimeout(500);
-
-      // Verify the color value has updated from #000000 to #FF0000
-      const colorInput = shadowSection.getByRole("textbox", { name: "Color" });
-      expect(colorInput).not.toBeNull();
-      const colorValue = await colorInput.inputValue();
-      expect(colorValue.toUpperCase()).toBe("FF0000");
-    });
-  });
-
-  test.describe("Typography Token Remapping", () => {
-    test("User renames typography token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTypographyTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-text");
-
-      const fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("16");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("body-text");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{base-text}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-text",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("default-text");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "default-text" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "body-text" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates typography token - referenced token and applied shapes update", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-        workspacePage,
-      } = await setupTypographyTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("body-style");
-
-      let fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("16");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived typography token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Typography" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Name",
-      });
-      await nameField.fill("paragraph-style");
-
-      const referenceToggle =
-        tokensUpdateCreateModal.getByTestId("reference-opt");
-      await referenceToggle.click();
-
-      const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Reference",
-      });
-      await referenceField.fill("{body-style}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Apply the referenced token to a text shape
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Some Text" })
-        .click();
-
-      await page.getByRole("tab", { name: "Tokens" }).click();
-      const paragraphToken = tokensSidebar.getByRole("button", {
-        name: "paragraph-style",
-      });
-      await paragraphToken.click();
-
-      // Rename and update value of base token
-      const bodyToken = tokensSidebar.getByRole("button", {
-        name: "body-style",
-      });
-      await bodyToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("text-base");
-
-      // Update the font size value
-      fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
-        name: "Font size",
-      });
-      await fontSizeField.fill("18");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "text-base" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "paragraph-style" }),
-      ).toBeVisible();
-
-      // Verify the text shape still has the token applied with NEW name and value
-      await page.getByRole("tab", { name: "Layers" }).click();
-      await workspacePage.layers
-        .getByTestId("layer-row")
-        .filter({ hasText: "Some Text" })
-        .click();
-
-      // Verify the shape shows the updated font size value (18)
-      // This proves the remapping worked and the value update propagated through the reference
-      const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
-        name: "Font Size",
-      });
-      await expect(fontSizeInput).toBeVisible();
-      await expect(fontSizeInput).toHaveValue("18");
-    });
-  });
-
-  test.describe("Border Radius Token Remapping", () => {
-    test("User renames border radius token with alias references", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("base-radius");
-
-      const valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("4");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("card-radius");
-
-      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField2.fill("{base-radius}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename base token
-      const baseToken = tokensSidebar.getByRole("button", {
-        name: "base-radius",
-      });
-      await baseToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("primary-radius");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Check for remapping modal
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "primary-radius" }),
-      ).toBeVisible();
-      await expect(
-        tokensSidebar.getByRole("button", { name: "card-radius" }),
-      ).toBeVisible();
-    });
-
-    test("User renames and updates border radius token - referenced token updates", async ({
-      page,
-    }) => {
-      const {
-        tokensUpdateCreateModal,
-        tokensSidebar,
-        tokenContextMenuForToken,
-      } = await setupTokensFile(page);
-
-      const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-
-      // Create base border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      let nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("radius-sm");
-
-      let valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("4");
-
-      let submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Create derived border radius token
-      await tokensTabPanel
-        .getByRole("button", { name: "Add Token: Border Radius" })
-        .click();
-      await expect(tokensUpdateCreateModal).toBeVisible();
-
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("button-radius");
-
-      const valueField2 = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField2.fill("{radius-sm}");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-      await expect(tokensUpdateCreateModal).not.toBeVisible();
-
-      // Rename and update value of base token
-      const radiusToken = tokensSidebar.getByRole("button", {
-        name: "radius-sm",
-      });
-      await radiusToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      nameField = tokensUpdateCreateModal.getByLabel("Name");
-      await nameField.fill("radius-base");
-
-      // Update the value
-      valueField = tokensUpdateCreateModal.getByLabel("Value");
-      await valueField.fill("8");
-
-      submitButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Save",
-      });
-      await submitButton.click();
-
-      // Confirm remapping
-      const remappingModal = page.getByTestId("token-remapping-modal");
-      await expect(remappingModal).toBeVisible({ timeout: 5000 });
-
-      const confirmButton = remappingModal.getByRole("button", {
-        name: /remap/i,
-      });
-      await confirmButton.click();
-
-      // Verify base token was renamed
-      await expect(
-        tokensSidebar.getByRole("button", { name: "radius-base" }),
-      ).toBeVisible();
-
-      // Verify referenced token still exists
-      await expect(
-        tokensSidebar.getByRole("button", { name: "button-radius" }),
-      ).toBeVisible();
-
-      // Verify the referenced token now points to the renamed token
-      // by opening it and checking the reference
-      const buttonRadiusToken = tokensSidebar.getByRole("button", {
-        name: "button-radius",
-      });
-      await buttonRadiusToken.click({ button: "right" });
-      await tokenContextMenuForToken.getByText("Edit token").click();
-
-      await expect(tokensUpdateCreateModal).toBeVisible();
-      const currentValue = tokensUpdateCreateModal.getByLabel("Value");
-      await expect(currentValue).toHaveValue("{radius-base}");
-    });
-  });
-});

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

@@ -1,219 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens: Sets Tab", () => {
-  const changeSetInput = async (sidebar, setName, finalKey = "Enter") => {
-    const setInput = sidebar.locator("input:focus");
-    await expect(setInput).toBeVisible();
-    await setInput.fill(setName);
-    await setInput.press(finalKey);
-  };
-
-  const createSet = async (sidebar, setName, finalKey = "Enter") => {
-    const tokensTabButton = sidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await changeSetInput(sidebar, setName, (finalKey = "Enter"));
-  };
-
-  const assertEmptySetsList = async (el) => {
-    const buttons = await el.getByRole("button").allTextContents();
-    const filteredButtons = buttons.filter((text) => text === "Create one.");
-    await expect(filteredButtons.length).toEqual(2); // We assume there are no themes, so we have two "Create one" buttons.
-  };
-
-  const assertSetsList = async (el, sets) => {
-    const buttons = await el.getByRole("button").allTextContents();
-    const filteredButtons = buttons.filter(
-      (text) => text && text !== "Create one.",
-    );
-    await expect(filteredButtons).toEqual(sets);
-  };
-
-  test("User creates sets tree structure by entering a set path", async ({
-    page,
-  }) => {
-    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
-      await setupEmptyTokensFile(page);
-
-    const tokensTabButton = tokenThemesSetsSidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await createSet(tokenThemesSetsSidebar, "core/colors/light");
-    await createSet(tokenThemesSetsSidebar, "core/colors/dark");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "light",
-      "dark",
-    ]);
-
-    // User renames set
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "light" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Rename").click();
-    await changeSetInput(tokenThemesSetsSidebar, "light-renamed");
-
-    // User cancels during editing
-    await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "light-renamed",
-      "dark",
-    ]);
-
-    // Creates nesting by renaming set with double click
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "light-renamed" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Rename").click();
-    await changeSetInput(tokenThemesSetsSidebar, "nested/light");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "nested",
-      "light",
-      "dark",
-    ]);
-
-    // Create set in group
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Add set to this group").click();
-    await changeSetInput(tokenThemesSetsSidebar, "sizes/small");
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "nested",
-      "light",
-      "dark",
-      "sizes",
-      "small",
-    ]);
-
-    // User deletes set
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "nested" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Delete").click();
-
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "dark",
-      "sizes",
-      "small",
-    ]);
-
-    // User deletes all sets
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .click({ button: "right" });
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Delete").click();
-
-    await assertEmptySetsList(tokenThemesSetsSidebar);
-  });
-
-  test("User can create & edit sets and set groups with an identical name", async ({
-    page,
-  }) => {
-    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
-      await setupEmptyTokensFile(page);
-
-    const tokensTabButton = tokenThemesSetsSidebar
-      .getByRole("button", { name: "Add set" })
-      .click();
-
-    await createSet(tokenThemesSetsSidebar, "core/colors");
-    await createSet(tokenThemesSetsSidebar, "core");
-    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .nth(0)
-      .dblclick();
-    await changeSetInput(tokenThemesSetsSidebar, "core-group-renamed");
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core-group-renamed",
-      "colors",
-      "core",
-    ]);
-
-    await page.keyboard.press(`ControlOrMeta+z`);
-    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
-
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "core" })
-      .nth(1)
-      .dblclick();
-    await changeSetInput(tokenThemesSetsSidebar, "core-set-renamed");
-    await assertSetsList(tokenThemesSetsSidebar, [
-      "core",
-      "colors",
-      "core-set-renamed",
-    ]);
-  });
-
-  test("Fold/Unfold set", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenSetGroupItems } =
-      await setupTokensFile(page);
-
-    await expect(tokenThemesSetsSidebar).toBeVisible();
-
-    const darkSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    await expect(darkSet).toBeVisible();
-
-    const setGroup = await tokenSetGroupItems
-      .filter({ hasText: "LightDark" })
-      .first();
-
-    const setCollapsable = await setGroup
-      .getByTestId("tokens-set-group-collapse")
-      .first();
-
-    await setCollapsable.click();
-
-    await expect(darkSet).toHaveCount(0);
-  });
-
-  test("Change current theme", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenSetItems } =
-      await setupTokensFile(page);
-
-    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "true");
-    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "false");
-
-    await tokenThemesSetsSidebar.getByTestId("theme-select").click();
-    await page
-      .getByTestId("theme-select-dropdown")
-      .getByRole("option", { name: "Dark", exact: true })
-      .click();
-
-    await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "false");
-    await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "true");
-  });
-});

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

@@ -1,285 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
-
-// THEMES HELPERS
-
-const checkInputFieldWithError = async (
-  tokenThemeUpdateCreateModal,
-  inputLocator,
-) => {
-  await expect(inputLocator).toHaveAttribute("aria-invalid", "true");
-
-  const errorMessageId = await inputLocator.getAttribute("aria-describedby");
-  await expect(
-    tokenThemeUpdateCreateModal.locator(`#${errorMessageId}`),
-  ).toBeVisible();
-};
-
-const checkInputFieldWithoutError = async (inputLocator) => {
-  expect(await inputLocator.getAttribute("aria-invalid")).toBeNull();
-  expect(await inputLocator.getAttribute("aria-describedby")).toBeNull();
-};
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens Themes", () => {
-  test("User edits theme and activates it in the sidebar", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
-      await setupTokensFile(page);
-
-    await expect(tokenThemesSetsSidebar).toBeVisible();
-
-    await tokenThemesSetsSidebar.getByRole("button", { name: "Edit" }).click();
-
-    await expect(tokenThemeUpdateCreateModal).toBeVisible();
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", { name: "sets" })
-      .first()
-      .click();
-
-    await tokenThemeUpdateCreateModal.getByLabel("Theme").fill("Changed");
-
-    const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByTestId(
-      "tokens-set-group-item",
-      {
-        name: "LightDark",
-        exact: true,
-      },
-    );
-    await expect(lightDarkSetGroup).toBeVisible();
-
-    const lightSet = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "light",
-      exact: true,
-    });
-    const darkSet = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    // Mixed set group
-    await expect(lightSet.getByRole("checkbox")).toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
-
-    // Disable all
-    await lightDarkSetGroup.getByRole("checkbox").click();
-    await expect(lightSet.getByRole("checkbox")).not.toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
-
-    // Enable all
-    await lightDarkSetGroup.getByRole("checkbox").click();
-    await expect(lightSet.getByRole("checkbox")).toBeChecked();
-    await expect(darkSet.getByRole("checkbox")).toBeChecked();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", {
-        name: "save theme",
-      })
-      .click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed" + "4 active sets"),
-    ).toBeVisible();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button")
-      .getByText("close")
-      .click();
-    await expect(tokenThemeUpdateCreateModal).not.toBeVisible();
-
-    const themeSelect = tokenThemesSetsSidebar.getByRole("combobox");
-
-    await themeSelect.click();
-    await page
-      .getByTestId("theme-select-dropdown")
-      .getByRole("option", { name: "Changed" })
-      .click();
-
-    const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "light",
-      exact: true,
-    });
-    const sidebarDarkSet = tokenThemesSetsSidebar.getByRole("button", {
-      name: "dark",
-      exact: true,
-    });
-
-    await expect(sidebarLightSet.getByRole("checkbox")).toBeChecked();
-    await expect(sidebarDarkSet.getByRole("checkbox")).toBeChecked();
-  });
-});
-
-test.describe("Tokens: Themes modal", () => {
-  test("Delete theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
-    ).toHaveCount(2);
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", { name: "Delete theme" })
-      .first()
-      .click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByRole("button", { name: "Delete theme" }),
-    ).toHaveCount(1);
-  });
-
-  test("Add new theme in empty file", async ({ page }) => {
-    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
-      await setupEmptyTokensFile(page);
-
-    await tokenThemesSetsSidebar
-      .getByRole("button", { name: "Create one." })
-      .first()
-      .click();
-
-    await expect(tokenThemeUpdateCreateModal).toBeVisible();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("New Group name");
-    await nameInput.fill("New Theme name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Group name"),
-    ).toBeVisible();
-  });
-
-  test("Add new theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await tokenThemeUpdateCreateModal
-      .getByRole("button", {
-        name: "Add new theme",
-      })
-      .click();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("Core"); // Invalid because "Core / Light" theme already exists
-    await nameInput.fill("Light");
-
-    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
-    await expect(saveButton).toBeDisabled();
-
-    await groupInput.fill("New Group name");
-    await nameInput.fill("New Theme name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("New Group name"),
-    ).toBeVisible();
-  });
-
-  test("Edit theme", async ({ page }) => {
-    const { tokenThemeUpdateCreateModal, workspacePage } =
-      await setupTokensFile(page);
-
-    workspacePage.openTokenThemesModal();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("no sets"),
-    ).not.toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("3 active sets"),
-    ).toHaveCount(2);
-
-    await tokenThemeUpdateCreateModal
-      .getByText("3 active sets")
-      .first()
-      .click();
-
-    const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
-    const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
-    const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "Save theme",
-    });
-
-    await groupInput.fill("Core"); // Invalid because "Core / Dark" theme already exists
-    await nameInput.fill("Dark");
-
-    await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
-    await expect(saveButton).toBeDisabled();
-
-    await groupInput.fill("Core"); // Valid because "Core / Light" theme already exists
-    await nameInput.fill("Light"); // but it's the same theme we are editing
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    await nameInput.fill("Changed Theme name"); // New names should be also valid
-    await groupInput.fill("Changed Group name");
-
-    await checkInputFieldWithoutError(tokenThemeUpdateCreateModal);
-    await expect(saveButton).not.toBeDisabled();
-
-    expect(await nameInput.getAttribute("aria-invalid")).toBeNull();
-    expect(await nameInput.getAttribute("aria-describedby")).toBeNull();
-
-    const checkboxes = await tokenThemeUpdateCreateModal
-      .locator('[role="checkbox"]')
-      .all();
-
-    for (const checkbox of checkboxes) {
-      const isChecked = await checkbox.getAttribute("aria-checked");
-
-      if (isChecked === "true") {
-        await checkbox.click();
-      }
-    }
-
-    const firstButton = await tokenThemeUpdateCreateModal
-      .getByTestId("tokens-set-item")
-      .first();
-
-    await firstButton.click();
-
-    await expect(saveButton).not.toBeDisabled();
-
-    await saveButton.click();
-
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed Theme name"),
-    ).toBeVisible();
-    await expect(
-      tokenThemeUpdateCreateModal.getByText("Changed Group name"),
-    ).toBeVisible();
-  });
-});

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

@@ -1,32 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
-import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
-import { setupTokensFile, unfoldTokenTree } from "./helpers";
-
-test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
-});
-
-test.describe("Tokens - node tree", () => {
-  test("User fold/unfold color tokens", async ({ page }) => {
-    const { tokensSidebar } = await setupTokensFile(page);
-
-    await expect(tokensSidebar).toBeVisible();
-
-    const tokensColorGroup = tokensSidebar.getByRole("button", {
-      name: "Color 92",
-    });
-    await expect(tokensColorGroup).toBeVisible();
-    await tokensColorGroup.click();
-
-    await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
-
-    const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
-    });
-    await expect(colorToken).toBeVisible();
-    await tokensColorGroup.click();
-    await expect(colorToken).not.toBeVisible();
-  });
-});

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

@@ -332,33 +332,24 @@ test("Copy/paste properties", async ({ page, context }) => {
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Rectangle")
-    .first()
-    .click({ button: "right" });
+  await page.getByText("Rectangle").first().click({ button: "right" });
+  await page.getByText("Copy/Paste as").hover();
+  await page.getByText("Paste properties").click();
+
+  await page.getByText("Board").nth(2).click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
   await page
     .getByTestId("layer-item")
-    .getByText("Board")
+    .locator("div")
+    .filter({ hasText: "Path" })
     .nth(1)
     .click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Path")
-    .click({ button: "right" });
-  await page.getByText("Copy/Paste as").hover();
-  await page.getByText("Paste properties").click();
-
-  await page
-    .getByTestId("layer-item")
-    .getByText("Ellipse")
-    .click({ button: "right" });
+  await page.getByText("Ellipse").click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 });

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -245,6 +245,13 @@
   --assets-component-second-border-selected: var(--color-background-primary);
   --assets-component-hightlight: var(--color-accent-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-quaternary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-quaternary);
+
   --library-name-foreground-color: var(--color-foreground-primary);
   --library-content-foreground-color: var(--color-foreground-secondary);
 
@@ -417,6 +424,13 @@
   --tab-border-color: var(--color-background-tertiary);
   --tab-border-color-selected: var(--color-background-secondary);
 
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-primary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-secondary);
+
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 

frontend/resources/templates/index.mustache

@@ -17,17 +17,18 @@
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
-    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}
 
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script type="importmap">{{& manifest.importmap }}</script>
 
     <script type="module">
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/rasterizer.mustache

@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Penpot - Rasterizer</title>
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/render.mustache

@@ -4,10 +4,12 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Penpot - Render</title>
-    <link rel="icon" href="images/favicon.png" />
+
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
     </script>
 

frontend/scripts/_helpers.js

@@ -27,9 +27,11 @@ export function startWorker() {
   });
 }
 
-export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
+export const BUILD_TS = process.env.BUILD_TS || Date.now();
+export const VERSION = process.env.VERSION || "develop";
+export const VERSION_TAG = process.env.VERSION_TAG || VERSION;
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -172,6 +174,7 @@ export async function watch(baseDir, predicate, callback) {
   const watcher = new Watcher(baseDir, {
     persistent: true,
     recursive: true,
+    debounce: 500
   });
 
   watcher.on("change", (path) => {
@@ -179,8 +182,19 @@ export async function watch(baseDir, predicate, callback) {
       callback(path);
     }
   });
+
+
+  watcher.on("error", (cause) => {
+    console.log("WATCHER ERROR", cause);
+  });
 }
 
+export async function ensureDirectories() {
+  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
+  await fs.mkdir("./resources/public/css/", { recursive: true });
+}
+
+
 async function readManifestFile(resource) {
   const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -193,25 +207,25 @@ async function generateManifest() {
     render_main: "./js/render.js",
     rasterizer_main: "./js/rasterizer.js",
 
-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,
 
     importmap: JSON.stringify({
       "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
       }
     })
   };
@@ -222,11 +236,12 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
   const content = await fs.readFile(path, { encoding: "utf-8" });
 
-  const ts = Math.floor(new Date());
-
   context = Object.assign({}, context, {
-    ts: ts,
-    isDebug,
+    isDebug: IS_DEBUG,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
   });
 
   return mustache.render(content, context, partials);
@@ -257,6 +272,9 @@ const markedOptions = {
 marked.use(markedOptions);
 
 export async function compileTranslations() {
+  const outputDir = "resources/public/js/";
+  await fs.mkdir(outputDir, { recursive: true });
+
   const langs = [
     "ar",
     "ca",
@@ -338,7 +356,6 @@ export async function compileTranslations() {
     }
 
     const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
-    const outputDir = "resources/public/js/";
     const outputFile = ph.join(outputDir, "translation." + lang + ".js");
     await fs.writeFile(outputFile, esm);
   }
@@ -390,7 +407,6 @@ async function generateSvgSprites() {
 }
 
 async function generateTemplates() {
-  const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
   const manifest = await generateManifest();
@@ -415,10 +431,7 @@ async function generateTemplates() {
   };
 
   const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
+    manifest: manifest
   };
 
   content = await renderTemplate(
@@ -487,7 +500,7 @@ export async function compileStyles() {
   await fs.mkdir("./resources/public/css", { recursive: true });
   await fs.writeFile("./resources/public/css/main.css", result);
 
-  if (isDebug) {
+  if (IS_DEBUG) {
     let debugCSS = await compileSassDebug(worker);
     await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }
@@ -500,17 +513,43 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
   const start = process.hrtime();
   log.info("init: compile svgsprite");
-  await generateSvgSprites();
+  let error = false;
+
+  try {
+    await generateSvgSprites();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile svgsprite", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile svgsprite", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile svgsprite", `(${ppt(end)})`);
+  }
 }
 
 export async function compileTemplates() {
   const start = process.hrtime();
+  let error = false;
   log.info("init: compile templates");
-  await generateTemplates();
+
+  try {
+    await generateTemplates();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile templates", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile templates", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile templates", `(${ppt(end)})`);
+  }
 }
 
 export async function compilePolyfills() {

frontend/scripts/_worker.js

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

frontend/scripts/build

@@ -2,26 +2,26 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
+set -ex
+
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
 export INCLUDE_WASM=${BUILD_WASM:-yes};
-export CURRENT_VERSION=$1;
-export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
 export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
-export TS=$(date +%s);
+
+export BUILD_DATE=$(date -R);
+export BUILD_TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 # Some cljs reacts on this environment variable for define more
 # performant code on macros (example: rumext)
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
 
 corepack enable;
 corepack install;
-yarn install || exit 1;
+yarn install;
 
 rm -rf target/dist;
 rm -rf resources/public;
@@ -37,7 +37,7 @@ yarn run build:app:main $EXTRA_PARAMS;
 yarn run build:app:libs;
 yarn run build:app:assets;
 
-sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+sed -i "s/\.\/render.js/.\/render.js?version=$VERSION_TAG/g" resources/public/js/worker/main*.js
 
 rsync -avr resources/public/ target/dist/
 

frontend/scripts/build-app-assets.js

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

frontend/scripts/build-storybook

@@ -2,18 +2,16 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
-export CURRENT_VERSION=$1;
+set -ex
+
+export BUILD_TS=$(date +%s);
 export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
-export TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
-
 corepack enable;
 corepack install || exit 1;
 yarn install || exit 1;

frontend/scripts/watch.js

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

frontend/shadow-cljs.edn

@@ -75,6 +75,7 @@
     {:fn-invoke-direct true
      :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
      :source-map true
+     :pseudo-names true
      :elide-asserts true
      :anon-fn-naming-policy :off
      :cross-chunk-method-motion false

frontend/src/app/config.cljs

@@ -95,6 +95,7 @@
 (def browser              (parse-browser))
 (def platform             (parse-platform))
 
+(def version-tag          (obj/get global "penpotVersionTag"))
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI"))
 (def flex-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
@@ -190,9 +191,8 @@
 
 (defn resolve-href
   [resource]
-  (let [version (get version :full)
-        href    (-> public-uri
-                    (u/ensure-path-slash)
-                    (u/join resource)
-                    (get :path))]
-    (str href "?version=" version)))
+  (let [href (-> public-uri
+                 (u/ensure-path-slash)
+                 (u/join resource)
+                 (get :path))]
+    (str href "?version=" version-tag)))

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

@@ -61,11 +61,6 @@
 ;; Def micro-benchmark iterations
 (def micro-benchmark-iterations 1e6)
 
-;; Performance logs
-(defonce ^:private longtask-observer* (atom nil))
-(defonce ^:private stall-timer* (atom nil))
-(defonce ^:private current-op* (atom nil))
-
 ;; --- CONTEXT
 
 (defn- collect-context
@@ -469,72 +464,3 @@
 (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 ^boolean js/goog.DEBUG
-    (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))))

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

@@ -24,6 +24,20 @@
    [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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -116,9 +130,9 @@
                                       (not= hhea-descender win-descent)
                                       (and f-selection (or
                                                         (not= hhea-ascender os2-ascent)
-                                                        (not= hhea-descender os2-descent))))]
-
-              {:content {:data (js/Uint8Array. data)
+                                                        (not= hhea-descender os2-descent))))
+                  data            (js/Uint8Array. data)]
+              {:content {:data (chunk-array data default-chunk-size)
                          :name name
                          :type type}
                :font-family (or family "")

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

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

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

@@ -347,12 +347,6 @@
                                  (with-meta {:team-id team-id
                                              :file-id file-id}))))))
 
-              ;; Install dev perf observers once the workspace is ready
-              (->> stream
-                   (rx/filter (ptk/type? ::workspace-initialized))
-                   (rx/take 1)
-                   (rx/map (fn [_] (ev/init!))))
-
               (->> stream
                    (rx/filter (ptk/type? ::dps/persistence-notification))
                    (rx/take 1)

frontend/src/app/main/data/workspace/collapse.cljs

@@ -18,13 +18,13 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [expand-fn (fn [expanded]
-                        (let [parents-seqs (map (fn [x] (cfh/get-parent-ids objects x)) ids)
-                              flat-parents (apply concat parents-seqs)
-                              non-root-parents (remove #(= % uuid/zero) flat-parents)
-                              distinct-parents (into #{} non-root-parents)]
-                          (merge expanded
-                                 (into {}
-                                       (map (fn [id] {id true}) distinct-parents)))))]
+                        (merge expanded
+                               (->> ids
+                                    (map #(cfh/get-parent-ids objects %))
+                                    flatten
+                                    (remove #(= % uuid/zero))
+                                    (map (fn [id] {id true}))
+                                    (into {}))))]
         (update-in state [:workspace-local :expanded] expand-fn)))))
 
 

frontend/src/app/main/data/workspace/path/changes.cljs

@@ -70,20 +70,22 @@
                               (= (-> content last :command) :move-to))
                        (into [] (take (dec (count content)) content))
                        content)]
-         (-> state
-             (st/set-content content))))
+         (st/set-content state content)))
 
      ptk/WatchEvent
      (watch [it state _]
        (let [page-id     (:current-page-id state)
-             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)]
+             local       (get state :workspace-local)
+             id          (get local :edition)
+             objects     (dsh/lookup-page-objects state page-id)]
 
-         (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)))))))
+         ;; 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))))))))))
 
 

frontend/src/app/main/data/workspace/path/edition.cljs

@@ -8,7 +8,6 @@
   (: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]
@@ -289,34 +288,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)
-            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)))]
+            shape     (get objects id)]
 
-        (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))))
+        (-> 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))))))))
 
     ptk/WatchEvent
     (watch [_ _ stream]
-      (let [stopper (->> stream
-                         (rx/filter #(let [type (ptk/type %)]
-                                       (= type ::dwe/clear-edition-mode)
-                                       (= type ::start-path-edit))))]
+      (let [stopper (rx/filter #(let [type (ptk/type %)]
+                                  (= type ::dwe/clear-edition-mode)
+                                  (= type ::start-path-edit))
+                               stream)]
         (rx/concat
          (rx/of (undo/start-path-undo))
          (->> stream
@@ -325,7 +324,8 @@
               (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,13 +335,12 @@
     (watch [_ _ _]
       (rx/of (ptk/data-event :layout/update {:ids [id]})))))
 
-(defn split-segments
-  [{:keys [from-p to-p t]}]
+(defn- split-segments
+  [id {:keys [from-p to-p t]}]
   (ptk/reify ::split-segments
     ptk/UpdateEvent
     (update [_ state]
-      (let [id (st/get-path-id state)
-            content (st/get-path state :content)]
+      (let [content (st/get-path state :content)]
         (-> state
             (assoc-in [:workspace-local :edit-path id :old-content] content)
             (st/set-content (-> content
@@ -353,10 +352,10 @@
       (rx/of (changes/save-path-content {:preserve-move-to true})))))
 
 (defn create-node-at-position
-  [event]
+  [params]
   (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 event))))))
+               (split-segments id params))))))

frontend/src/app/main/data/workspace/selection.cljs

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

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -633,43 +633,6 @@
                            :shape-ids shape-ids
                            :on-update-shape on-update-shape}))))))))
 
-(defn toggle-border-radius-token
-  [{:keys [token attrs shape-ids expand-with-children]}]
-  (ptk/reify ::on-toggle-border-radius-token
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
-            shapes (into [] (keep (d/getf objects)) shape-ids)
-
-            shapes
-            (if expand-with-children
-              (into []
-                    (mapcat (fn [shape]
-                              (if (= (:type shape) :group)
-                                (keep objects (:shapes shape))
-                                [shape])))
-                    shapes)
-              shapes)
-
-            {:keys [attributes all-attributes]}
-            (get token-properties (:type token))
-
-            unapply-tokens?
-            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
-
-            shape-ids (map :id shapes)]
-
-        (if unapply-tokens?
-          (rx/of
-           (unapply-token {:attributes (or attrs all-attributes attributes)
-                           :token token
-                           :shape-ids shape-ids}))
-          (rx/of
-           (apply-token {:attributes attrs
-                         :token token
-                         :shape-ids shape-ids
-                         :on-update-shape update-shape-radius-for-corners})))))))
-
 
 (defn apply-token-on-selected
   [color-operations token]

frontend/src/app/main/data/workspace/tokens/import_export.cljs

@@ -74,7 +74,7 @@
   (when unknown-tokens
     (st/emit! (show-unknown-types-warning unknown-tokens)))
   (try
-    (->> (ctob/get-all-tokens-map tokens-lib)
+    (->> (ctob/get-all-tokens tokens-lib)
          (sd/resolve-tokens-with-verbose-errors)
          (rx/map (fn [_]
                    tokens-lib))

frontend/src/app/main/data/workspace/tokens/library_edit.cljs

@@ -11,7 +11,6 @@
    [app.common.files.helpers :as cfh]
    [app.common.geom.point :as gpt]
    [app.common.logic.tokens :as clt]
-   [app.common.path-names :as cpn]
    [app.common.types.shape :as cts]
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
@@ -23,7 +22,6 @@
    [app.main.data.workspace.tokens.propagation :as dwtp]
    [app.util.i18n :refer [tr]]
    [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
    [potok.v2.core :as ptk]))
 
 (declare set-selected-token-set-id)
@@ -462,35 +460,12 @@
 ;; TOKEN UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn clean-tokens-paths
-  []
-  (ptk/reify ::clean-tokens-paths
+(defn set-token-type-section-open
+  [token-type open?]
+  (ptk/reify ::set-token-type-section-open
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:workspace-tokens :unfolded-token-paths] []))))
-
-(defn toggle-token-path
-  [path]
-  (ptk/reify ::toggle-token-path
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:workspace-tokens :unfolded-token-paths]
-                 (fn [paths]
-                   (let [paths (or paths [])]
-                     (if (some #(= % path) paths)
-                       (vec (remove #(or (= % path)
-                                         (str/starts-with? % (str path ".")))
-                                    paths))
-                       (let [split-path (cpn/split-path path :separator ".")
-                             partial-paths (reduce
-                                            (fn [acc segment]
-                                              (let [new-acc (if (empty? acc)
-                                                              segment
-                                                              (str (last acc) "." segment))]
-                                                (conj acc new-acc)))
-                                            []
-                                            split-path)]
-                         (into paths partial-paths)))))))))
+      (update-in state [:workspace-tokens :open-status-by-type] assoc token-type open?))))
 
 (defn assign-token-context-menu
   [{:keys [position] :as params}]

frontend/src/app/main/data/workspace/tokens/propagation.cljs

@@ -22,9 +22,6 @@
    [clojure.set :as set]
    [potok.v2.core :as ptk]))
 
-;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
-(l/set-level! :warn)
-
 ;; Helpers ---------------------------------------------------------------------
 
 ;; TODO: see if this can be replaced by more standard functions

frontend/src/app/main/data/workspace/tokens/remapping.cljs

@@ -1,177 +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.tokens.remapping
-  "Core logic for token remapping functionality"
-  (:require
-   [app.common.files.changes-builder :as pcb]
-   [app.common.files.tokens :as cft]
-   [app.common.logging :as log]
-   [app.common.types.container :refer [shapes-seq]]
-   [app.common.types.file :refer [object-containers-seq]]
-   [app.common.types.token :as cto]
-   [app.common.types.tokens-lib :as ctob]
-   [app.main.data.changes :as dch]
-   [app.main.data.helpers :as dh]
-   [beicon.v2.core :as rx]
-   [cuerdas.core :as str]
-   [potok.v2.core :as ptk]))
-
-;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
-(log/set-level! :warn)
-
-;; Token Reference Scanning
-;; ========================
-
-(defn scan-shape-applied-tokens
-  "Scan a shape for applied token references to a specific token name"
-  [shape token-name container]
-  (when-let [applied-tokens (:applied-tokens shape)]
-    (for [[attribute applied-token-name] applied-tokens
-          :when (= applied-token-name token-name)]
-      {:type :applied-token
-       :shape-id (:id shape)
-       :attribute attribute
-       :token-name applied-token-name
-       :container container})))
-
-(defn scan-token-value-references
-  "Scan a token value for references to a specific token name (alias), supporting complex token values."
-  [token token-name]
-  (letfn [(find-all-token-value-references [token-value]
-            (cond
-              (string? token-value)
-              (filter #(= % token-name) (cto/find-token-value-references token-value))
-
-              (map? token-value)
-              (mapcat find-all-token-value-references (vals token-value))
-
-              (sequential? token-value)
-              (mapcat find-all-token-value-references token-value)
-
-              :else
-              []))]
-    (when-let [value (:value token)]
-      (for [referenced-token-name (find-all-token-value-references value)]
-        {:type :token-alias
-         :source-token-id (:id token)
-         :referenced-token-name referenced-token-name}))))
-
-(defn scan-workspace-token-references
-  "Scan entire workspace for all token references to a specific token"
-  [file-data old-token-name]
-  (let [tokens-lib (:tokens-lib file-data)
-        containers (object-containers-seq file-data)
-
-        ;; Scan all shapes for applied token references to the specific token
-        matching-applied (mapcat (fn [container]
-                                   (let [shapes (shapes-seq container)]
-                                     (mapcat #(scan-shape-applied-tokens % old-token-name container) shapes)))
-                                 containers)
-
-        ;; Scan tokens library for alias references to the specific token
-        matching-aliases (if tokens-lib
-                           (let [all-tokens (ctob/get-all-tokens tokens-lib)]
-                             (mapcat #(scan-token-value-references % old-token-name) all-tokens))
-                           [])]
-    (log/info :hint "token-scan-details"
-              :token-name old-token-name
-              :containers-count (count containers)
-              :total-applied-refs (count matching-applied)
-              :matching-applied (count matching-applied)
-              :total-alias-refs (count matching-aliases)
-              :matching-aliases (count matching-aliases))
-
-    {:applied-tokens matching-applied
-     :token-aliases matching-aliases
-     :total-references (+ (count matching-applied) (count matching-aliases))}))
-
-;; Token Remapping Core Logic
-;; ==========================
-
-(defn remap-tokens
-  "Main function to remap all token references when a token name changes"
-  [old-token-name new-token-name]
-  (ptk/reify ::remap-tokens
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [file-data (dh/lookup-file-data state)
-            scan-results (scan-workspace-token-references file-data old-token-name)
-            tokens-lib (:tokens-lib file-data)
-            sets (ctob/get-sets tokens-lib)
-            tokens-with-sets (mapcat (fn [set]
-                                       (map (fn [token]
-                                              {:token token :set set})
-                                            (vals (ctob/get-tokens tokens-lib (ctob/get-id set)))))
-                                     sets)
-
-            ;; Group applied token references by container
-            refs-by-container (group-by :container (:applied-tokens scan-results))
-
-            ;; Use apply-token logic to update shapes for both direct and alias references
-            shape-changes (reduce-kv
-                           (fn [changes container refs]
-                             (let [shape-ids (map :shape-id refs)
-                                   ;; Find the correct token to apply (new or alias)
-                                   token (or (some #(when (= (:name (:token %)) new-token-name) %) tokens-with-sets)
-                                             (some #(when (= (:name (:token %)) old-token-name) %) tokens-with-sets))
-                                   attributes (set (map :attribute refs))]
-                               (if token
-                                 (-> (pcb/with-container changes container)
-                                     (pcb/update-shapes shape-ids
-                                                        (fn [shape]
-                                                          (update shape :applied-tokens
-                                                                  #(merge % (cft/attributes-map attributes (:token token)))))))
-                                 changes)))
-                           (-> (pcb/empty-changes)
-                               (pcb/with-file-data file-data)
-                               (pcb/with-library-data file-data))
-                           refs-by-container)
-
-            ;; Create changes for updating token alias references
-            token-changes (reduce
-                           (fn [changes ref]
-                             (let [source-token-id (:source-token-id ref)]
-                               (when-let [{:keys [token set]} (some #(when (= (:id (:token %)) source-token-id) %) tokens-with-sets)]
-                                 (let [old-value (:value token)
-                                       new-value (cto/update-token-value-references old-value old-token-name new-token-name)]
-                                   (pcb/set-token changes (ctob/get-id set) (:id token)
-                                                  (assoc token :value new-value))))))
-                           shape-changes
-                           (:token-aliases scan-results))]
-
-        (log/info :hint "token-remapping"
-                  :old-name old-token-name
-                  :new-name new-token-name
-                  :references-count (:total-references scan-results))
-
-        (rx/of (dch/commit-changes token-changes))))))
-
-(defn validate-token-remapping
-  "Validate that a token remapping operation is safe to perform"
-  [old-name new-name]
-  (cond
-    (str/blank? new-name)
-    {:valid? false
-     :error :invalid-name
-     :message "Token name cannot be empty"}
-    (= old-name new-name)
-    {:valid? false
-     :error :no-change
-     :message "New name is the same as current name"}
-    :else
-    {:valid? true}))
-
-(defn count-token-references
-  "Count the number of references to a token in the workspace"
-  [file-data token-name]
-  (let [scan-results (scan-workspace-token-references file-data token-name)]
-    (log/info :hint "token-reference-scan"
-              :token-name token-name
-              :applied-refs (count (:applied-tokens scan-results))
-              :alias-refs (count (:token-aliases scan-results))
-              :total (:total-references scan-results))
-    (:total-references scan-results)))

frontend/src/app/main/refs.cljs

@@ -305,7 +305,7 @@
   (l/derived #(dsh/lookup-shape % page-id shape-id) st/state =))
 
 (def workspace-page-objects
-  (l/derived dsh/lookup-page-objects st/state identical?))
+  (l/derived dsh/lookup-page-objects st/state))
 
 (def workspace-read-only?
   (l/derived :read-only? workspace-global))
@@ -480,6 +480,9 @@
 (def workspace-token-sets-tree
   (l/derived (d/nilf ctob/get-set-tree) tokens-lib))
 
+(def workspace-all-tokens-map
+  (l/derived (d/nilf ctob/get-all-tokens) tokens-lib))
+
 (def workspace-active-theme-paths
   (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))
 

frontend/src/app/main/ui/components/file_uploader.cljs

@@ -10,9 +10,9 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(mf/defc file-uploader*
+(mf/defc file-uploader
   {::mf/forward-ref true}
-  [{:keys [accept multi label-text label-class input-id on-selected data-testid]} input-ref]
+  [{:keys [accept multi label-text label-class input-id on-selected data-testid] :as props} input-ref]
   (let [opt-pick-one #(if multi % (first %))
 
         on-files-selected

frontend/src/app/main/ui/components/forms.scss

@@ -315,8 +315,7 @@
     gap: deprecated.$s-4;
     max-height: deprecated.$s-136;
     padding: deprecated.$s-4 0;
-    overflow-y: auto;
-
+    overflow-y: scroll;
     .selected-item {
       .around {
         @include deprecated.flexRow;

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -0,0 +1,107 @@
+;; 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.ui.components.radio-buttons
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.formats :as fmt]
+   [app.util.dom :as dom]
+   [rumext.v2 :as mf]))
+
+(def context
+  (mf/create-context nil))
+
+(mf/defc radio-button
+  {::mf/props :obj}
+  [{:keys [icon id value disabled title icon-class type]}]
+  (let [context     (mf/use-ctx context)
+        allow-empty (unchecked-get context "allow-empty")
+        type        (if ^boolean type
+                      type
+                      (if ^boolean allow-empty
+                        "checkbox"
+                        "radio"))
+
+        on-change   (unchecked-get context "on-change")
+        selected    (unchecked-get context "selected")
+        name        (unchecked-get context "name")
+
+        encode-fn   (unchecked-get context "encode-fn")
+        checked?    (= selected value)
+
+        value       (encode-fn value)]
+
+
+    [:label {:html-for id
+             :data-testid id
+             :title title
+             :class (stl/css-case
+                     :radio-icon true
+                     :checked checked?
+                     :disabled disabled)}
+
+     (if (some? icon)
+       [:> icon* {:icon-id icon :class icon-class :aria-hidden true}]
+       [:span {:class (stl/css :title-name)} value])
+
+     [:input {:id id
+              :on-change on-change
+              :type type
+              :name name
+              :disabled disabled
+              :value value
+              :default-checked checked?}]]))
+
+(mf/defc radio-buttons
+  {::mf/props :obj}
+  [{:keys [name children on-change selected class wide encode-fn decode-fn allow-empty] :as props}]
+  (let [encode-fn (d/nilv encode-fn identity)
+        decode-fn (d/nilv decode-fn identity)
+        nitems    (if (array? children)
+                    (count (keep identity children))
+                    1)
+        ;; FIXME: we should handle this with CSS
+        width     (mf/with-memo [nitems]
+                    (if (= wide true)
+                      "unset"
+                      (fmt/format-pixels
+                       (+ (* 4 (- nitems 1))
+                          (* 32 nitems)))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps selected on-change)
+         (fn [event]
+           (let [input (dom/get-target event)
+                 value (dom/get-target-val event)
+
+                 ;; Only allow null values when the "allow-empty" prop is true
+                 value (when (or (not allow-empty)
+                                 (not= value selected)) value)]
+             (when (fn? on-change)
+               (on-change (decode-fn value) event))
+             (dom/blur! input))))
+
+        context-value
+        (mf/spread-object props
+                          ;; We pass a special metadata for disable
+                          ;; key casing transformation in this
+                          ;; concrete case, because this component
+                          ;; uses legacy mode and props are in
+                          ;; kebab-case style
+                          ^{::mf/transform false}
+                          {:on-change on-change'
+                           :encode-fn encode-fn
+                           :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
+            :style {:width  width}
+            :key (dm/str name "-" selected)}
+      children]]))

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -0,0 +1,79 @@
+// 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
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.radio-btn-wrapper {
+  @include deprecated.flexCenter;
+  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
+  background-color: var(--input-background-color);
+  gap: deprecated.$s-4;
+}
+
+.radio-icon {
+  --radio-icon-border-color: var(--radio-btn-border-color);
+
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
+  @include deprecated.focusRadio;
+  height: deprecated.$s-32;
+  flex-grow: 1;
+  border-radius: deprecated.$s-8;
+  box-sizing: border-box;
+  border: deprecated.$br-2 solid var(--radio-icon-border-color);
+
+  input {
+    display: none;
+  }
+  svg {
+    @extend .button-icon;
+    stroke: var(--radio-btn-foreground-color);
+  }
+  .title-name {
+    @include deprecated.uppercaseTitleTipography;
+    color: var(--radio-btn-foreground-color);
+  }
+  &:hover {
+    svg {
+      stroke: var(--radio-btn-foreground-color-selected);
+    }
+  }
+}
+
+.checked {
+  --radio-icon-border-color: var(--radio-btn-border-color-selected);
+
+  background-color: var(--radio-btn-background-color-selected);
+  svg {
+    stroke: var(--radio-btn-foreground-color-selected);
+  }
+  .title-name {
+    color: var(--radio-btn-foreground-color-selected);
+  }
+}
+
+.disabled {
+  cursor: default;
+  background-color: transparent;
+  border: deprecated.$s-2 solid transparent;
+  svg {
+    stroke: var(--button-foreground-color-disabled);
+  }
+  .title-name {
+    color: var(--button-foreground-color-disabled);
+  }
+  &:hover {
+    background-color: transparent;
+    border: deprecated.$s-2 solid transparent;
+    svg {
+      stroke: var(--button-foreground-color-disabled);
+    }
+    .title-name {
+      color: var(--button-foreground-color-disabled);
+    }
+  }
+}

frontend/src/app/main/ui/dashboard/deleted.scss

@@ -51,6 +51,10 @@
   padding: var(--sp-xxl) var(--sp-xxl) var(--sp-s) var(--sp-xxl);
   position: sticky;
   top: 0;
+
+  // We need to use the the deprecated z-index so it won't clash with the dashboard
+  // onboarding modals
+  z-index: deprecated.$z-index-3;
 }
 
 .nav-inside {

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

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

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

@@ -17,7 +17,7 @@
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -184,11 +184,11 @@
                  :on-click on-click
                  :tab-index "0"}
         [:span (tr "labels.add-custom-font")]
-        [:> file-uploader* {:input-id "font-upload"
-                            :accept accept-font-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-selected}]]
+        [:& file-uploader {:input-id "font-upload"
+                           :accept accept-font-types
+                           :multi true
+                           :ref input-ref
+                           :on-selected on-selected}]]
 
        (when-let [url cf/terms-of-service-uri]
          [:& context-notification {:content (tr "dashboard.fonts.hero-text2" url)

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

@@ -16,7 +16,7 @@
    [app.main.data.notifications :as ntf]
    [app.main.errors :as errors]
    [app.main.store :as st]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
@@ -58,10 +58,10 @@
   [{:keys [project-id on-finish-import]} external-ref]
   (let [on-file-selected (use-import-file project-id on-finish-import)]
     [:form.import-file {:aria-hidden "true"}
-     [:> file-uploader* {:accept ".penpot,.zip"
-                         :multi true
-                         :ref external-ref
-                         :on-selected on-file-selected}]]))
+     [:& file-uploader {:accept ".penpot,.zip"
+                        :multi true
+                        :ref external-ref
+                        :on-selected on-file-selected}]]))
 
 (defn- update-entry-name
   [entries file-id new-name]

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

@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.dashboard.change-owner]
    [app.main.ui.dashboard.subscription :refer [members-cta*
@@ -1315,10 +1315,10 @@
          [:img {:class (stl/css :team-image)
                 :src (cfg/resolve-team-photo-url team)}]
          (when can-edit
-           [:> file-uploader* {:accept "image/jpeg,image/png"
-                               :multi false
-                               :ref finput
-                               :on-selected on-file-selected}])]
+           [:& file-uploader {:accept "image/jpeg,image/png"
+                              :multi false
+                              :ref finput
+                              :on-selected on-file-selected}])]
         [:div {:class (stl/css :block-label)}
          (tr "dashboard.team-info")]
         [:div {:class (stl/css :block-text)}

frontend/src/app/main/ui/dashboard/team.scss

@@ -628,6 +628,7 @@
   width: $sz-400;
   padding: var(--sp-xxxl);
   background-color: var(--color-background-primary);
+  z-index: var(--z-index-set);
 
   &.hero {
     top: px2rem(216);

frontend/src/app/main/ui/delete_shared.cljs

@@ -11,10 +11,8 @@
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
+   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as k]
@@ -99,11 +97,8 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)} title]
-       [:> icon-button* {:variant "ghost"
-                         :class (stl/css :modal-close-btn)
-                         :icon i/close
-                         :aria-label (tr "labels.close")
-                         :on-click cancel-fn}]]
+       [:button {:class (stl/css :modal-close-btn)
+                 :on-click cancel-fn} deprecated-icon/close]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? subtitle) (not= subtitle ""))
@@ -129,10 +124,14 @@
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
         (when-not (= cancel-label :omit)
-          [:> button* {:variant "secondary"
-                       :on-click cancel-fn}
-           cancel-label])
+          [:input {:class (stl/css :cancel-button)
+                   :type "button"
+                   :value cancel-label
+                   :on-click cancel-fn}])
 
-        [:> button* {:variant (if (= accept-style :danger) "destructive" "primary")
-                     :on-click accept-fn}
-         accept-label]]]]]))
+        [:input {:class (stl/css-case :accept-btn true
+                                      :danger (= accept-style :danger)
+                                      :primary (= accept-style :primary))
+                 :type "button"
+                 :value accept-label
+                 :on-click accept-fn}]]]]]))

frontend/src/app/main/ui/delete_shared.scss

@@ -33,9 +33,7 @@
 }
 
 .modal-close-btn {
-  position: absolute;
-  top: var(--sp-s);
-  right: var(--sp-s);
+  @extend .modal-close-btn-base;
 }
 
 .modal-content {
@@ -55,6 +53,17 @@
   @extend .modal-action-btns;
 }
 
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+
+.accept-btn {
+  @extend .modal-accept-btn;
+  &.danger {
+    @extend .modal-danger-btn;
+  }
+}
+
 .modal-scd-msg {
   margin-block: 0;
 }

frontend/src/app/main/ui/ds.cljs

@@ -12,7 +12,6 @@
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.controls.switch :refer [switch*]]
    [app.main.ui.ds.controls.utilities.hint-message :refer [hint-message*]]
@@ -64,7 +63,6 @@
     :Select select*
     :Switch switch*
     :Checkbox checkbox*
-    :RadioButtons radio-buttons*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*

frontend/src/app/main/ui/ds/buttons/button.scss

@@ -15,7 +15,6 @@
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   column-gap: var(--sp-xs);
 }
 

frontend/src/app/main/ui/ds/controls/numeric_input.cljs

@@ -183,7 +183,6 @@
   [:map
    [:id {:optional true} :string]
    [:class {:optional true} :string]
-   [:inner-class {:optional true} :string]
    [:value {:optional true} [:maybe [:or
                                      :int
                                      :float
@@ -210,8 +209,7 @@
 
 (mf/defc numeric-input*
   {::mf/schema schema:numeric-input}
-  [{:keys [id class value default placeholder
-           icon disabled inner-class
+  [{:keys [id class value default placeholder icon disabled
            min max max-length step
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
@@ -626,7 +624,6 @@
         (mf/spread-props props {:ref ref
                                 :type "text"
                                 :id id
-                                :class inner-class
                                 :placeholder (if is-multiple?
                                                (tr "labels.mixed-values")
                                                placeholder)
@@ -647,7 +644,7 @@
                                                                    :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
-                                              (mf/html [:> icon-button* {:variant "ghost"
+                                              (mf/html [:> icon-button* {:variant "action"
                                                                          :icon i/tokens
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
@@ -672,7 +669,6 @@
                               :on-token-key-down on-token-key-down
                               :disabled disabled
                               :on-blur on-blur
-                              :class inner-class
                               :slot-start (when icon
                                             (mf/html [:> tooltip*
                                                       {:content property

frontend/src/app/main/ui/ds/controls/numeric_input.scss

@@ -33,17 +33,12 @@
 }
 
 .invisible-button {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
   opacity: var(--opacity-button);
-  background-color: var(--color-background-quaternary);
+
   &:hover {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
   &:focus {
-    background-color: var(--color-background-quaternary);
     --opacity-button: 1;
   }
 }

frontend/src/app/main/ui/ds/controls/radio_buttons.cljs

@@ -1,107 +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.ui.ds.controls.radio-buttons
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon-list]]
-   [app.util.dom :as dom]
-   [rumext.v2 :as mf]
-   [rumext.v2.util :as mfu]))
-
-(def ^:private schema:radio-button
-  [:map
-   [:id :string]
-   [:icon {:optional true}
-    [:and :string [:fn #(contains? icon-list %)]]]
-   [:label :string]
-   [:value [:or :keyword :string]]
-   [:disabled {:optional true} :boolean]])
-
-(def ^:private schema:radio-buttons
-  [:map
-   [:class {:optional true} :string]
-   [:variant {:optional true}
-    [:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]
-   [:extended {:optional true} :boolean]
-   [:name {:optional true} :string]
-   [:selected {:optional true}
-    [:maybe [:or :keyword :string]]]
-   [:allow-empty {:optional true} :boolean]
-   [:options [:vector {:min 1} schema:radio-button]]
-   [:on-change {:optional true} fn?]])
-
-(mf/defc radio-buttons*
-  {::mf/schema schema:radio-buttons}
-  [{:keys [class variant extended name selected allow-empty options on-change] :rest props}]
-  (let [options (if (array? options)
-                  (mfu/bean options)
-                  options)
-        type    (if allow-empty "checkbox" "radio")
-        variant (d/nilv variant "secondary")
-
-        handle-click
-        (mf/use-fn
-         (fn [event]
-           (let [target (dom/get-target event)
-                 label  (dom/get-parent-with-data target "label")]
-             (dom/prevent-default event)
-             (dom/stop-propagation event)
-             (dom/click label))))
-
-        handle-change
-        (mf/use-fn
-         (mf/deps selected on-change)
-         (fn [event]
-           (let [input (dom/get-target event)
-                 value (dom/get-target-val event)]
-             (when (fn? on-change)
-               (on-change value event))
-             (dom/blur! input))))
-
-        props
-        (mf/spread-props props {:key (dm/str name "-" selected)
-                                :class [class (stl/css-case :wrapper true
-                                                            :extended extended)]})]
-
-    [:> :div props
-     (for [[idx {:keys [id class value label icon disabled]}] (d/enumerate options)]
-       (let [checked? (= selected value)]
-         [:label {:key idx
-                  :html-for id
-                  :data-label true
-                  :data-testid id
-                  :class [class (stl/css-case :label true
-                                              :extended extended)]}
-
-          (if (some? icon)
-            [:> icon-button* {:variant variant
-                              :on-click handle-click
-                              :aria-pressed checked?
-                              :aria-label label
-                              :icon icon
-                              :disabled disabled}]
-            [:> button* {:variant variant
-                         :on-click handle-click
-                         :aria-pressed checked?
-                         :class (stl/css-case :button true
-                                              :extended extended)
-                         :disabled disabled}
-             label])
-
-          [:input {:id id
-                   :class (stl/css :input)
-                   :on-change handle-change
-                   :type type
-                   :name name
-                   :disabled disabled
-                   :value value
-                   :default-checked checked?}]]))]))

frontend/src/app/main/ui/ds/controls/radio_buttons.mdx

@@ -1,97 +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 */ }
-
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as RadioButtons from "./radio_buttons.stories";
-
-<Meta title="Controls/Radio Buttons" />
-
-# Radio Buttons
-
-The `radio-buttons*` component allows users to switch between two or more options that are mutually exclusive.
-
-## Variants
-
-Radio buttons with text only. The label will be the text of the button.
-
-<Canvas of={RadioButtons.Default} />
-
-```clj
-[:> radio-buttons* {:selected "left"
-                    :on-change handle-change
-                    :name "alignment"
-                    :extended false
-                    :allow-empty false
-                    :options [{:id "align-left"
-                               :label "Left"
-                               :value "left"}
-                              {:id "align-center"
-                               :label "Center"
-                               :value "center"}
-                              {:id "align-right"
-                               :label "Right"
-                               :value "right"}]}]
-```
-
-Radio buttons with icons only. In this case, the label will act as the tooltip of each button.
-
-<Canvas of={RadioButtons.WithIcons} />
-
-```clj
-(ns app.main.ui.foo
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i]))
-
-[:> radio-buttons* {:selected "left"
-                    :on-change handle-change
-                    :name "alignment"
-                    :extended false
-                    :allow-empty false
-                    :options [{:id "align-left"
-                               :icon i/text-align-left
-                               :label "Left align"
-                               :value "left"}
-                              {:id "align-center"
-                               :icon i/text-align-center
-                               :label "Center align"
-                               :value "center"}
-                              {:id "align-right"
-                               :icon i/text-align-right
-                               :label "Right align"
-                               :value "right"}]}]
-```
-
-## Anatomy
-
-Under the hood, each option is represented by
-- a button, which is the visible and clickable element. It may be either an icon button or a text button.
-- a radio input, which is not visible but retains the current state of the option.
-
-A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established,
-selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.
-
-The `selected` parameter should be set to the value of the option that is to be active. Otherwise, no option will be selected.
-
-If the parameter `allow-empty` is enabled, then the component will work with checkboxes instead of radio buttons,
-and therefore the selected option can be deselected. However, it will still only be possible to select one option.
-
-The `extended` parameter allows the component to use all the available space from the parent and distribute it equally
-among all elements.
-
-Any option can be individually disabled using the `disabled` parameter.
-
-## Usage Guidelines
-
-### When to Use
-
-- For multiple choice settings that take effect immediately.
-- In preference panels and configuration screens.
-
-### When Not to Use
-
-- For boolean settings (use switch or checkbox instead).
-- For actions that require confirmation (use buttons instead).
-- For temporary states that need explicit "Apply" action.

frontend/src/app/main/ui/ds/controls/radio_buttons.scss

@@ -1,40 +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
-
-@use "ds/_borders.scss" as *;
-@use "ds/spacing.scss" as *;
-
-.wrapper {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: fit-content;
-  border-radius: $br-8;
-  background-color: var(--color-background-tertiary);
-  gap: var(--sp-xs);
-
-  &.extended {
-    width: 100%;
-    display: flex;
-  }
-}
-
-.label {
-  &.extended {
-    display: flex;
-    flex: 1 1 0;
-  }
-}
-
-.button {
-  &.extended {
-    flex-grow: 1;
-  }
-}
-
-.input {
-  display: none;
-}

frontend/src/app/main/ui/ds/controls/radio_buttons.stories.jsx

@@ -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
-
-import * as React from "react";
-import Components from "@target/components";
-
-const { RadioButtons } = Components;
-
-const options = [
-  {id: "left", label: "Left", value: "left" },
-  {id: "center", label: "Center", value: "center" },
-  {id: "right", label: "Right", value: "right" },
-];
-
-const optionsIcon = [
-  {id: "left", label: "Left align", value: "left", icon: "text-align-left" },
-  {id: "center", label: "Center align", value: "center", icon: "text-align-center" },
-  {id: "right", label: "Right align", value: "right", icon: "text-align-right" },
-];
-
-export default {
-  title: "Controls/Radio Buttons",
-  component: RadioButtons,
-  argTypes: {
-    name: {
-      control: { type: "text" },
-      description: "Whether the checkbox is checked",
-    },
-    selected: {
-      control: { type: "select" },
-      options: ["", "left", "center", "right"],
-      description: "Whether the checkbox is checked",
-    },
-    extended: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    allowEmpty: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is disabled",
-    },
-  },
-  args: {
-    name: "alignment",
-    selected: "left",
-    extended: false,
-    allowEmpty: false,
-    options: options,
-    disabled: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ["options", "on-change"],
-    },
-  },
-  render: ({ ...args }) => <RadioButtons {...args} />,
-};
-
-export const Default = {};
-
-export const WithIcons = {
-  args: {
-    options: optionsIcon,
-  },
-};

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs

@@ -26,7 +26,7 @@
   [:map
    [:id {:optional true} :string]
    [:resolved-value {:optional true}
-    [:or :int :string :float]]
+    [:or :int :string]]
    [:name {:optional true} :string]
    [:icon {:optional true} schema:icon-list]
    [:label {:optional true} :string]

frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss

@@ -30,11 +30,11 @@
 }
 
 .left-align {
-  left: var(--dropdown-offset, 0);
+  left: 0;
 }
 
 .right-align {
-  right: var(--dropdown-offset, 0);
+  right: 0;
 }
 
 .option-separator {

frontend/src/app/main/ui/ds/controls/shared/token_option.cljs

@@ -18,7 +18,7 @@
   [:map
    [:id {:optiona true} :string]
    [:ref some?]
-   [:resolved {:optional true} [:or :int :string :float]]
+   [:resolved {:optional true} [:or :int :string]]
    [:name {:optional true} :string]
    [:on-click {:optional true} fn?]
    [:selected {:optional true} :boolean]

frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs

@@ -17,7 +17,7 @@
 
 (def ^:private schema:input-field
   [:map
-   [:class {:optional true} [:maybe :string]]
+   [:class {:optional true} :string]
    [:aria-label {:optional true} [:maybe :string]]
    [:id :string]
    [:icon {:optional true}
@@ -44,10 +44,9 @@
         tooltip-id (mf/use-id)
 
         props (mf/spread-props props
-                               {:class [class
-                                        (stl/css-case
-                                         :input true
-                                         :input-with-icon (some? icon))]
+                               {:class (stl/css-case
+                                        :input true
+                                        :input-with-icon (some? icon))
                                 :ref (or ref input-ref)
                                 :aria-invalid (when (and has-hint
                                                          (= hint-type "error"))