🐛 Fix problem in plugins api when removing interactions

Added a new section for Penpot Enterprise detailing its features and benefits for organizations.

Signed-off-by: Elenzakaleidos <elena.scilinguo@kaleidos.net>

.agents/skills/planner/SKILL.md

@@ -1,13 +1,11 @@
 ---
 name: planner
-description: Read-only planning and architecture analysis for Penpot — produce a structured implementation plan with task breakdown, acceptance criteria, sizing, and checkpoints. Always output to the user with the plan's save path (saved or suggested) and the next steps.
+description: Read-only planning and architecture analysis — produce a structured implementation plan with task breakdown, acceptance criteria, sizing, and checkpoints. Always output to the user with the plan, suggested save path and the next steps.
 ---
 
 # Planner
 
-Read-only senior software architect role for Penpot. Produces structured
-implementation plans with task breakdowns that engineers or other agents can
-execute. Never writes or modifies code.
+Produce a plan that another engineer or agent can execute without guessing.
 
 ## When to Use
 
@@ -21,24 +19,7 @@ execute. Never writes or modifies code.
 - A task feels too large or vague to start.
 - Work needs to be parallelized across multiple agents or sessions.
 
-Do **not** use this skill to actually implement anything — it is read-only.
-
-**When NOT to use:** Single-file changes with obvious scope, or when the spec
-already contains well-defined tasks.
-
-## Role
-
-You help users understand the Penpot codebase, design solutions, and produce
-implementation plans that other agents or developers can execute. The plan
-tells them what to build and how to verify it, task by task.
-
-The implementer reads the project's agent docs (`AGENTS.md`, project memories
-such as `mem:critical-info`, `mem:testing`, and each module's core memory)
-before working. Reference those memories instead of re-explaining tooling,
-conventions, or test design — explain in the plan only what they do not cover.
-
-Do **not** suggest commit messages or commit names anywhere in your plans or
-responses — committing is the implementer's responsibility.
+Do not use for a small change with obvious scope or an existing executable plan.
 
 ## CRITICAL: Required Reading Before Planning
 
@@ -55,67 +36,36 @@ Before drafting any plan, work through the project's own guidance:
 
 Skipping this step is the #1 cause of incorrect or incomplete plans.
 
----
+## Constraints
 
-## The Planning Process
+- You are **analysis-only** — never create, edit, or delete source code. The
+  only file you may write is the plan itself, and only when the command or
+  user explicitly instructs you to save it.
+- You do **not** run builds, tests, linters, or any commands that modify state.
+- You do **not** create git commits or interact with version control.
+- You do **not** execute shell commands beyond read-only searches (`rg`, `ls`,
+  `find`, `cat`, `bat`).
+- Your output is a structured plan or analysis, ready for handoff to an
+  engineer agent or developer.
 
-### Phase 1: Architecture Analysis
+## Planning Process
 
-1. Read the spec, requirements, or feature request.
-2. Analyze the codebase architecture and identify affected modules.
-3. Read project conventions (starting with `critical-info` and module core
-   memories) before drafting.
-4. Map dependencies between components (see the dependency graph in
-   `critical-info`).
-5. Identify risks, edge cases, performance implications, and breaking changes.
+1. Define the problem, desired outcome, constraints, and exclusions.
+2. Trace the current behavior through the affected modules.
+3. Map dependencies and choose an implementation order that builds foundations
+   before their consumers.
+4. Identify open product or architecture decisions. Resolve implementation
+   details from existing conventions when they do not affect public behavior.
+5. Identify edge cases, security and data risks, performance bounds, breaking
+   changes, and external dependencies.
+6. Split the work into small, ordered tasks. Prefer complete testable slices
+   over unrelated layer-wide batches. Apply DRY and KISS to the proposed
+   implementation.
+7. Define exact acceptance criteria and verification for every task.
+8. Add a checkpoint after every two or three tasks in a longer plan.
+9. State which tasks can run in parallel and which must remain sequential.
 
-### Phase 2: Task Breakdown
-
-#### Identify the Dependency Graph
-
-Map what depends on what, following the monorepo's module dependency graph:
-
-```
-common (shared types, schemas — no deps)
-    │
-    ├── backend (depends common)
-    │       ├── RPC handlers
-    │       └── persistence / migrations
-    │
-    ├── frontend (depends common, render-wasm)
-    │       ├── UI components
-    │       └── state / API integration
-    │
-    ├── exporter (depends common)
-    │
-    └── render-wasm (consumed by frontend)
-```
-
-Implementation order follows the dependency graph bottom-up: build shared
-foundations first, then layer consumers on top.
-
-#### Slice Vertically
-
-Instead of building all of common, then all of backend, then all of frontend —
-build one complete feature path at a time:
-
-**Bad (horizontal slicing):**
-```
-Task 1: Build all common types
-Task 2: Build all backend handlers
-Task 3: Build all frontend components
-```
-
-**Good (vertical slicing):**
-```
-Task 1: common data types + schema             ← foundation
-Task 2: backend RPC handler + persistence
-Task 3: frontend UI component + API integration
-```
-
-Each vertical slice delivers working, testable functionality.
-
-#### Write Tasks
+## Task Format
 
 Each task follows this structure:
 
@@ -152,17 +102,16 @@ implementation. Omit when the task is mechanical.
 **Estimated scope:** [XS: 1 file | S: 1-2 files | M: 3-5 files | L: 5+ files]
 ```
 
-Replace "module-specific test command" with the actual commands for the module
-(e.g. `clojure -M:dev:test` for backend/common,
-`npx shadow-cljs compile test && npx karma start` for frontend, or the
-commands noted in the module's core memory).
+Use commands from `mem:testing` and affected module memories. Never substitute
+generic text such as "run the tests" when the project documents an exact
+command.
 
-When possible, design each task with TDD in mind: acceptance criteria double
-as a test list, and the natural first step of the task is writing those tests
-before the implementation. Some tasks resist this (config, migrations, pure
-wiring) — for those, keep the usual verification steps.
+When possible, design each task with TDD in mind: acceptance criteria double as a test
+list, and the natural first step of the task is writing those tests before the
+implementation. Some tasks resist this (config, migrations, pure wiring) — for those, keep
+the usual verification steps.
 
-#### Estimate Scope
+## Task Sizing
 
 | Size | Files | Scope | Example |
 |------|-------|-------|---------|
@@ -172,16 +121,11 @@ wiring) — for those, keep the usual verification steps.
 | **L** | 5-8 | Multi-component feature | Search with filtering and pagination |
 | **XL** | 8+ | **Too large — break it down further** | — |
 
-If a task is XL, it should be broken into smaller tasks. Agents perform best
-on S and M tasks.
+Split a task when it contains independent outcomes, spans unrelated systems, or cannot be
+completed and verified in one focused session (if a task is XL, it should be broken into
+smaller tasks; agents perform best on S and M tasks).
 
-**When to break a task down further:**
-- It would take more than one focused session
-- You cannot describe the acceptance criteria in 3 or fewer bullet points
-- It touches two or more independent subsystems
-- You find yourself writing "and" in the task title (a sign it is two tasks)
-
-#### Order and Checkpoints
+## Task order and checkpoints
 
 Arrange tasks so that:
 
@@ -197,153 +141,43 @@ Add explicit checkpoints with the relevant module commands:
 - [ ] Relevant tests pass (module-specific command).
 - [ ] The relevant build or compilation passes, if applicable.
 - [ ] The core flow works end-to-end.
-- [ ] Review with human before proceeding.
 ```
 
-## Requirements
-
-- Analyze the codebase architecture and identify affected modules.
-- Read project conventions before drafting (start with `critical-info` and
-  affected module core memories).
-- Break down complex features or bugs into atomic, actionable steps.
-- Propose solutions with clear rationale, trade-offs, and sequencing.
-- Identify risks, edge cases, performance implications, and breaking changes.
-- Apply DRY and KISS principles to the proposed implementation.
-- Define a testing strategy aligned with each affected module's tooling.
-- Every task must have acceptance criteria and verification steps.
-- Checkpoints must exist after every 2-3 tasks.
-
-## Constraints
-
-- You are **analysis-only** — never create, edit, or delete source code. The
-  only file you may write is the plan itself, and only when the command or
-  user explicitly instructs you to save it.
-- You do **not** run builds, tests, linters, or any commands that modify state.
-- You do **not** create git commits or interact with version control.
-- You do **not** execute shell commands beyond read-only searches (`rg`, `ls`,
-  `find`, `cat`, `bat`).
-- Your output is a structured plan or analysis, ready for handoff to an
-  engineer agent or developer.
-
 ## Output Format
 
 The plan is always delivered in the response so the user sees it regardless
-of which agent is running the skill. By default you never write the plan file;
-announce the path instead. Write the file only when the command or user
-explicitly instructs you to save it — and then only that file.
+of which agent is running the skill. File writes follow `Constraints` —
+by default announce the path instead of writing.
 
-Announce the suggested save path:
-
-```
-.agents/plans/YYYY-MM-DD-<plan-one-line-title>.md
-```
-
-Use today's date in the user's local timezone. The `<plan-one-line-title>`
-slug is lowercase, hyphen-separated, and a short summary of the task
-(e.g. `add-batch-get-profiles-for-file-comments`). If the user explicitly
-provides a target file path, announce that path instead of the default.
+Announce the save path `.agents/plans/YYYY-MM-DD-<slug>.md` (today's date,
+lowercase hyphen-separated slug, e.g. `2026-09-10-add-batch-get-profiles`;
+an explicit user path wins).
 
 End the response by suggesting the next steps: `/review-plan` to get a second
 opinion on the plan and `/implement-plan` to execute it.
 
-### Plan Document Template
+### Plan Structure
+
+Use this document shape:
 
 ```markdown
-# Plan: [Feature/Project Name]
+# Plan: Title
 
 ## Context
-[One paragraph: what is the problem or feature request? Why is it needed?]
-
 ## Affected Modules
-[Which modules of the monorepo are involved? Reference module paths and any
-`mem:` memories that were consulted.]
-
 ## Architecture Decisions
-- [Key decision 1 and rationale]
-- [Key decision 2 and rationale]
-
-## Risks & Considerations
-[Edge cases, performance implications, breaking changes, migration concerns,
-security implications.]
-
+## Risks and Considerations
 ## Approach
-[A short strategy summary: 3-5 sentences describing the overall approach and
-the shape of the dependency graph (what depends on what, what gets built
-first). High-level only — the task-by-task detail lives in the Task List.]
-
 ## Task List
-
-Each task uses the full task structure defined in
-[Write Tasks](#write-tasks) — description, rationale, acceptance criteria,
-verification, dependencies, files, estimated scope, and optional code sketch.
-Never reduce a task to a one-line checkbox; the plan must be self-contained
-and executable without other context.
-
-Tasks are a flat, ordered list — a plan is not a roadmap. Do not group tasks
-into phases, milestones, or sprints; ordering and dependencies are already
-captured per task. Insert a checkpoint after every 2-3 tasks.
-
-## Task 1: [Short descriptive title]
-
-**Description:** [What this task accomplishes.]
-
-**Rationale:** [Why this approach over the alternatives.]
-
-**Acceptance criteria:**
-- [ ] [Specific, testable condition]
-
-**Verification:**
-- [ ] Relevant tests pass (module-specific command).
-
-**Dependencies:** None
-
-**Files likely touched:**
-- `path/to/file`
-
-**Estimated scope:** [XS: 1 file | S: 1-2 files | M: 3-5 files | L: 5+ files]
-
-**Code sketch (optional):** [Short contract-level example, only if the shape
-is non-obvious.]
-
-## Task 2: [Short descriptive title]
-
-[Same structure as Task 1.]
-
-## Task 3: [Short descriptive title]
-
-[Same structure as Task 1.]
-
-### Checkpoint: After Tasks 1-3
-- [ ] Relevant tests pass (module-specific command).
-- [ ] The relevant build or compilation passes, if applicable.
-- [ ] The core flow works end-to-end.
-- [ ] Review with human before proceeding.
-
-## Task 4: [Short descriptive title]
-
-[Same structure as Task 1.]
-
-## Task 5: [Short descriptive title]
-
-[Same structure as Task 1.]
-
-## Verification & Testing
-[How to verify each task and the whole plan: the project's real test, lint,
-build, and run commands (extracted during Required Reading), coverage
-expectations, and manual checks. Consult each module's core memory for the
-exact commands.]
-
-## Parallelization Opportunities
-- **Safe to parallelize:** Independent feature slices across separate
-  modules, tests for already-implemented features, documentation
-- **Must be sequential:** Shared common schema changes, database migrations
-- **Needs coordination:** Features that share a contract (define the contract
-  first, then parallelize)
-
+## Verification and Testing
+## Parallelization
 ## Open Questions
-- [Question needing human input]
 ```
 
+Omit empty sections only when they do not apply. Every implementation task
+still requires acceptance criteria, verification, dependencies, likely files,
+and scope.
+
 When the plan is purely analytical (e.g. a code review or feasibility study
 with no implementation), skip the **Approach** and **Task List** sections and
 lead with **Findings** instead, keeping the rest of the structure.
@@ -357,15 +191,6 @@ lead with **Findings** instead, keeping the rest of the structure.
 | "Planning is overhead" | Planning is the task. Implementation without a plan is just typing. |
 | "I can hold it all in my head" | Context windows are finite. Written plans survive session boundaries and compaction. |
 
-## Red Flags
-
-- Delivering prose without a task breakdown
-- Tasks that say "implement the feature" without acceptance criteria
-- No verification steps in the plan
-- All tasks are XL-sized
-- No checkpoints between tasks
-- Dependency order isn't considered
-
 ## Verification Checklist
 
 Before delivering the plan, confirm:

.github/workflows/build-adhoc.yml

@@ -0,0 +1,44 @@
+name: _ADHOC
+
+run-name: >-
+  _ADHOC (${{ inputs.gh_ref }}${{ inputs.nitrate_ref != '' && format(' / nitrate:{0}', inputs.nitrate_ref) || '' }})
+
+on:
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Branch/ref to build in penpot/penpot'
+        type: string
+        required: true
+      nitrate_ref:
+        description: 'Branch/ref to build admin-console in penpot/penpot-nitrate (defaults to gh_ref)'
+        type: string
+        required: false
+      force:
+        description: 'Rebuild and overwrite even if already built/promoted'
+        type: boolean
+        required: false
+        default: false
+
+jobs:
+  build-bundle:
+    uses: ./.github/workflows/build-bundle.yml
+    secrets: inherit
+    with:
+      gh_ref: ${{ inputs.gh_ref }}
+      force: ${{ inputs.force }}
+
+  build-docker:
+    needs: build-bundle
+    uses: ./.github/workflows/build-docker.yml
+    secrets: inherit
+    with:
+      gh_ref: ${{ inputs.gh_ref }}
+      force: ${{ inputs.force }}
+
+  build-docker-admin-console:
+    uses: ./.github/workflows/build-docker-admin-console.yml
+    secrets: inherit
+    with:
+      gh_ref: ${{ inputs.nitrate_ref || inputs.gh_ref }}
+      force: ${{ inputs.force }}

.github/workflows/build-bundle.yml

@@ -9,6 +9,11 @@ on:
         type: string
         required: true
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if this version already exists in S3'
+        type: boolean
+        required: false
+        default: false
   workflow_call:
     inputs:
       gh_ref:
@@ -16,20 +21,31 @@ on:
         type: string
         required: true
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if this version already exists in S3'
+        type: boolean
+        required: false
+        default: false
 
+# Literal group name: under `workflow_call`, `github.workflow` resolves to the
+# caller's workflow, which put this workflow and the other reusable one called
+# by the same caller into a single shared group, and left a manual dispatch of
+# the same ref in a group of its own, free to race on the same artifacts.
 concurrency:
-  group: ${{ github.workflow }}-${{ inputs.gh_ref }}
+  group: build-bundle-${{ inputs.gh_ref }}
   cancel-in-progress: true
 
 jobs:
   # ── 1. Decide whether there is anything to build ───────────────────────
   check:
     name: Check current bundle
-    runs-on: penpot-runner-01
+    runs-on: penpot-standar-runner
     timeout-minutes: 10
     outputs:
       gh_ref: ${{ steps.vars.outputs.gh_ref }}
       bundle_version: ${{ steps.vars.outputs.bundle_version }}
+      sha: ${{ steps.vars.outputs.sha }}
+      commit_title: ${{ steps.vars.outputs.commit_title }}
       exists: ${{ steps.check.outputs.exists }}
 
     steps:
@@ -44,10 +60,12 @@ jobs:
         run: |
           echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
           echo "bundle_version=$(git describe --tags --always)" >> $GITHUB_OUTPUT
+          echo "sha=$(git rev-parse --short=12 HEAD)" >> $GITHUB_OUTPUT
+          echo "commit_title=$(git log -1 --pretty=%s)" >> $GITHUB_OUTPUT
 
       # The uploaded zip carries its version as S3 metadata. If the
       # existing object was already built from this same commit, the
-      # whole build job is skipped.
+      # whole build job is skipped. `force` bypasses this check entirely.
       - name: Check if this bundle is already built
         id: check
         env:
@@ -55,6 +73,16 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_DEFAULT_REGION: ${{ secrets.AWS_REGION }}
         run: |
+          if [ "${{ inputs.force }}" = "true" ]; then
+            echo "exists=false" >> $GITHUB_OUTPUT
+            {
+              echo "### 🔁 Bundle build forced"
+              echo ""
+              echo "\`force: true\` — skipping the S3 version check."
+            } >> "$GITHUB_STEP_SUMMARY"
+            exit 0
+          fi
+
           EXISTING_VERSION=$(aws s3api head-object \
             --bucket ${{ secrets.S3_BUCKET }} \
             --key "penpot-${{ steps.vars.outputs.gh_ref }}.zip" \
@@ -75,7 +103,7 @@ jobs:
   # ── 2. Build and upload, only when needed ──────────────────────────────
   build:
     name: Build and Upload Penpot Bundle
-    runs-on: penpot-runner-01
+    runs-on: penpot-standar-runner
     timeout-minutes: 90
     needs: check
     if: needs.check.outputs.exists == 'false'
@@ -113,10 +141,20 @@ jobs:
             s3://${{ secrets.S3_BUCKET }}/penpot-${{ needs.check.outputs.gh_ref }}.zip \
             --metadata bundle-version=${{ needs.check.outputs.bundle_version }}
 
+      - name: Write step summary
+        run: |
+          {
+            echo "### ✅ Bundle built"
+            echo ""
+            echo "- Version: \`${{ needs.check.outputs.bundle_version }}\` (\`git describe --tags --always\`)"
+            echo "- Commit: [\`${{ needs.check.outputs.sha }}\`](https://github.com/${{ github.repository }}/commit/${{ needs.check.outputs.sha }}) — ${{ needs.check.outputs.commit_title }}"
+            echo "- Built at: $(date -u +'%Y-%m-%d %H:%M:%S UTC')"
+          } >> "$GITHUB_STEP_SUMMARY"
+
   # ── 3. Single failure notification for the whole workflow ─────────────
   notify:
     name: Notify failure
-    runs-on: penpot-runner-01
+    runs-on: penpot-standar-runner
     timeout-minutes: 5
     needs: [check, build]
     if: failure()

.github/workflows/build-develop.yml

@@ -1,16 +1,30 @@
 name: _DEVELOP
 
+run-name: >-
+  _DEVELOP (develop @ ${{ github.sha }})
+
 on:
   workflow_dispatch:
+    inputs:
+      force:
+        description: 'Rebuild and overwrite even if already built/promoted'
+        type: boolean
+        required: false
+        default: false
   schedule:
     - cron: '16 5-20 * * 1-5'
 
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
 jobs:
   build-bundle:
     uses: ./.github/workflows/build-bundle.yml
     secrets: inherit
     with:
       gh_ref: "develop"
+      force: ${{ inputs.force || false }}
 
   build-docker:
     needs: build-bundle
@@ -18,9 +32,11 @@ jobs:
     secrets: inherit
     with:
       gh_ref: "develop"
+      force: ${{ inputs.force || false }}
 
-  build-admin-console-docker:
+  build-docker-admin-console:
     uses: ./.github/workflows/build-docker-admin-console.yml
     secrets: inherit
     with:
       gh_ref: "develop"
+      force: ${{ inputs.force || false }}

.github/workflows/build-docker-admin-console.yml

@@ -13,6 +13,11 @@ on:
         type: string
         required: false
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if already built'
+        type: boolean
+        required: false
+        default: false
   workflow_call:
     inputs:
       gh_ref:
@@ -24,6 +29,11 @@ on:
         type: string
         required: false
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if already built'
+        type: boolean
+        required: false
+        default: false
     secrets:
       ORG_WORKFLOW_TOKEN:
         description: 'Token with Actions write access on penpot-nitrate'
@@ -47,6 +57,7 @@ jobs:
 
           gh workflow run "$WORKFLOW" --repo "$REPO" --ref "$DISPATCH_REF" \
             -f gh_ref="$GH_REF" \
+            -f force="${{ inputs.force }}" \
             -f caller_run_id="$DISTINCT_ID" \
             -f caller_run_url="$CALLER_URL"
 

.github/workflows/build-docker-devenv.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   build-and-push:
     name: Build and push DevEnv Docker image
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
 
     steps:
       - name: Set common environment variables

.github/workflows/build-docker.yml

@@ -8,6 +8,11 @@ on:
         type: string
         required: true
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if this sha is already promoted'
+        type: boolean
+        required: false
+        default: false
   workflow_call:
     inputs:
       gh_ref:
@@ -15,9 +20,18 @@ on:
         type: string
         required: true
         default: 'develop'
+      force:
+        description: 'Rebuild and overwrite even if this sha is already promoted'
+        type: boolean
+        required: false
+        default: false
 
+# Literal group name: under `workflow_call`, `github.workflow` resolves to the
+# caller's workflow, which put this workflow and the other reusable one called
+# by the same caller into a single shared group, and left a manual dispatch of
+# the same ref in a group of its own, free to race on the same artifacts.
 concurrency:
-  group: ${{ github.workflow }}-${{ inputs.gh_ref }}
+  group: build-docker-${{ inputs.gh_ref }}
   cancel-in-progress: true
 
 env:
@@ -32,12 +46,13 @@ jobs:
   # ── 1. Resolve the build key and check the whole set at once ───────────
   prepare:
     name: Prepare
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     timeout-minutes: 15
     outputs:
       gh_ref: ${{ steps.vars.outputs.gh_ref }}
       bundle_version: ${{ steps.vars.outputs.bundle_version }}
       sha: ${{ steps.vars.outputs.sha }}
+      commit_title: ${{ steps.vars.outputs.commit_title }}
       exists: ${{ steps.check.outputs.exists }}
 
     steps:
@@ -56,6 +71,7 @@ jobs:
           GH_REF="${{ inputs.gh_ref || github.ref_name }}"
           echo "gh_ref=$GH_REF" >> $GITHUB_OUTPUT
           echo "sha=$(git rev-parse --short=12 HEAD)" >> $GITHUB_OUTPUT
+          echo "commit_title=$(git log -1 --pretty=%s)" >> $GITHUB_OUTPUT
 
           BUNDLE_VERSION=$(aws s3api head-object \
             --bucket ${{ secrets.S3_BUCKET }} \
@@ -67,7 +83,8 @@ jobs:
       # The image set is a single block, so a single set-level check is
       # enough: `promote` drops a marker object in S3 only after every
       # image was built AND every branch tag was moved. Marker present
-      # means there is nothing at all to do for this commit.
+      # means there is nothing at all to do for this commit. `force`
+      # bypasses this check entirely.
       - name: Check if this image set is already built
         id: check
         env:
@@ -75,6 +92,21 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_DEFAULT_REGION: ${{ secrets.AWS_REGION }}
         run: |
+          if [ "${{ inputs.force }}" = "true" ]; then
+            echo "exists=false" >> $GITHUB_OUTPUT
+            mkdir -p "$BUNDLE_CACHE"
+            find "$BUNDLE_CACHE" -type f -mtime +1 -delete || true
+            ZIP="$BUNDLE_CACHE/penpot-${{ steps.vars.outputs.bundle_version }}.zip"
+            aws s3 cp "s3://${{ secrets.S3_BUCKET }}/penpot-${{ steps.vars.outputs.gh_ref }}.zip" "$ZIP.$$.tmp"
+            mv "$ZIP.$$.tmp" "$ZIP"
+            {
+              echo "### 🔁 Image set build forced"
+              echo ""
+              echo "\`force: true\` — skipping the S3 marker check."
+            } >> "$GITHUB_STEP_SUMMARY"
+            exit 0
+          fi
+
           if aws s3api head-object \
                --bucket ${{ secrets.S3_BUCKET }} \
                --key "markers/images-sha-${{ steps.vars.outputs.sha }}" \
@@ -103,7 +135,7 @@ jobs:
   # ── 2. One build per image, in parallel, only when needed ──────────────
   build:
     name: Build ${{ matrix.image }}
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     timeout-minutes: 60
     needs: prepare
     if: needs.prepare.outputs.exists == 'false'
@@ -134,7 +166,7 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      # To avoid the “429 Too Many Requests” error when downloading
+      # To avoid the "429 Too Many Requests" error when downloading
       # images from DockerHub for unregistered users.
       # https://docs.docker.com/docker-hub/usage/
       - name: Login to DockerHub Registry
@@ -216,7 +248,7 @@ jobs:
   # the S3 marker guarantees the branch tags were already moved.
   promote:
     name: Promote image set
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     timeout-minutes: 10
     needs: [prepare, build]
 
@@ -254,16 +286,23 @@ jobs:
         run: |
           echo "${{ github.run_id }}" | aws s3 cp - \
             "s3://${{ secrets.S3_BUCKET }}/markers/images-sha-${{ needs.prepare.outputs.sha }}"
+
+      - name: Write step summary
+        run: |
           {
             echo "### ✅ Image set promoted"
             echo ""
+            echo "- Version: \`${{ needs.prepare.outputs.bundle_version }}\` (\`git describe --tags --always\`)"
+            echo "- Commit: [\`${{ needs.prepare.outputs.sha }}\`](https://github.com/${{ github.repository }}/commit/${{ needs.prepare.outputs.sha }}) — ${{ needs.prepare.outputs.commit_title }}"
+            echo "- Built at: $(date -u +'%Y-%m-%d %H:%M:%S UTC')"
+            echo ""
             echo "All \`:${{ needs.prepare.outputs.gh_ref }}\` tags now point to \`sha-${{ needs.prepare.outputs.sha }}\`."
           } >> "$GITHUB_STEP_SUMMARY"
 
   # ── 4. Single failure notification for the whole workflow ─────────────
   notify:
     name: Notify failure
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     timeout-minutes: 5
     needs: [prepare, build, promote]
     if: failure()

.github/workflows/build-staging.yml

@@ -1,16 +1,30 @@
 name: _STAGING
 
+run-name: >-
+  _STAGING (staging)
+
 on:
   workflow_dispatch:
+    inputs:
+      force:
+        description: 'Rebuild and overwrite even if already built/promoted'
+        type: boolean
+        required: false
+        default: false
   schedule:
     - cron: '36 5-20 * * 1-5'
 
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
 jobs:
   build-bundle:
     uses: ./.github/workflows/build-bundle.yml
     secrets: inherit
     with:
       gh_ref: "staging"
+      force: ${{ inputs.force || false }}
 
   build-docker:
     needs: build-bundle
@@ -18,9 +32,11 @@ jobs:
     secrets: inherit
     with:
       gh_ref: "staging"
+      force: ${{ inputs.force || false }}
 
-  build-admin-console-docker:
+  build-docker-admin-console:
     uses: ./.github/workflows/build-docker-admin-console.yml
     secrets: inherit
     with:
       gh_ref: "staging"
+      force: ${{ inputs.force || false }}

.github/workflows/build-tag.yml

@@ -1,17 +1,33 @@
 name: _TAG
 
+run-name: >-
+  _TAG (${{ github.ref_name }} @ ${{ github.sha }})
+
 on:
   workflow_dispatch:
+    inputs:
+      force:
+        description: 'Rebuild and overwrite even if already built/promoted (manual re-releases only)'
+        type: boolean
+        required: false
+        default: false
   push:
     tags:
       - '*'
 
+# Keyed by ref and never cancelling: pushing 2.17.2 shortly after 2.17.2-RC1
+# must not abort the release already in flight.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+  cancel-in-progress: false
+
 jobs:
   build-bundle:
     uses: ./.github/workflows/build-bundle.yml
     secrets: inherit
     with:
       gh_ref: ${{ github.ref_name }}
+      force: ${{ inputs.force || false }}
 
   build-docker:
     needs: build-bundle
@@ -19,11 +35,21 @@ jobs:
     secrets: inherit
     with:
       gh_ref: ${{ github.ref_name }}
+      force: ${{ inputs.force || false }}
+
+  build-docker-admin-console:
+    uses: ./.github/workflows/build-docker-admin-console.yml
+    secrets: inherit
+    with:
+      gh_ref: ${{ github.ref_name }}
+      force: ${{ inputs.force || false }}
 
   notify:
     name: Notifications
     runs-on: ubuntu-24.04
-    needs: build-docker
+    needs:
+      - build-docker
+      - build-docker-admin-console
     steps:
       - name: Notify Mattermost
         uses: mattermost/action-mattermost-notify@ae31bb6f9e26a54336e79696f108a2c91cf55b4e # v2.1.0
@@ -37,7 +63,9 @@ jobs:
 
   publish-final-tag:
     if: ${{ !contains(github.ref_name, '-RC') && !contains(github.ref_name, '-alpha') && !contains(github.ref_name, '-beta')  && contains(github.ref_name, '.') }}
-    needs: build-docker
+    needs:
+      - build-docker
+      - build-docker-admin-console
     uses: ./.github/workflows/release.yml
     secrets: inherit
     with:

.github/workflows/build-tmp-tokens.yml

@@ -0,0 +1,24 @@
+name: _TMP TOKENS
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '46 5-20 * * 1-5'
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  build-bundle:
+    uses: ./.github/workflows/build-bundle.yml
+    secrets: inherit
+    with:
+      gh_ref: "hiru-tokens-in-libs"
+
+  build-docker:
+    needs: build-bundle
+    uses: ./.github/workflows/build-docker.yml
+    secrets: inherit
+    with:
+      gh_ref: "hiru-tokens-in-libs"

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

@@ -34,7 +34,7 @@ permissions:
 
 jobs:
   deploy:
-    runs-on: penpot-runner-01
+    runs-on: penpot-standar-runner
     steps:
       - name: Checkout
         uses: actions/checkout@v6

.github/workflows/tests-backend.yml

@@ -32,7 +32,7 @@ jobs:
   test-backend:
     if: ${{ !github.event.pull_request.draft }}
     name: "Backend Tests"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-common.yml

@@ -30,7 +30,7 @@ jobs:
   test-common:
     if: ${{ !github.event.pull_request.draft }}
     name: "Common Tests"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-composable-suite.yml

@@ -38,7 +38,7 @@ jobs:
   composable-test-suite:
     if: ${{ !github.event.pull_request.draft }}
     name: "Run composable test suite (mocked backend)"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-frontend.yml

@@ -34,7 +34,7 @@ jobs:
   test-frontend:
     if: ${{ !github.event.pull_request.draft }}
     name: "Frontend Tests"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-integration.yml

@@ -5,11 +5,37 @@ defaults:
     shell: bash
 
 on:
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch or ref'
+        type: string
+        required: true
+        default: 'develop'
+
+      shards:
+        description: 'Shard layout (JSON array)'
+        type: choice
+        required: true
+        default: '[1, 2, 3, 4]'
+        options:
+          - '[1, 2, 3, 4]'
+          - '[1, 2, 3, 4, 5, 6]'
+          - '[1, 2]'
+          - '[1]'
+
+      workers:
+        description: 'Playwright workers per shard'
+        type: string
+        required: true
+        default: '2'
+
   pull_request:
     paths:
       - 'frontend/**'
       - 'common/**'
       - 'render-wasm/**'
+      - '.github/workflows/tests-integration.yml'
 
     types:
       - opened
@@ -25,25 +51,41 @@ on:
       - 'frontend/**'
       - 'common/**'
       - 'render-wasm/**'
+      - '.github/workflows/tests-integration.yml'
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || inputs.gh_ref || github.ref }}
   cancel-in-progress: true
 
 jobs:
   build-integration:
     if: ${{ !github.event.pull_request.draft }}
     name: "Build Integration Bundle"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
+    timeout-minutes: 30
     container:
       image: penpotapp/devenv:latest
       volumes:
         - /var/cache/github-runner/m2:/root/.m2
         - /var/cache/github-runner/gitlib:/root/.gitlibs
 
+    outputs:
+      bundle_key: ${{ steps.vars.outputs.bundle_key }}
+
     steps:
+      # An empty `ref` makes checkout fall back to its default (the PR merge
+      # ref on pull_request, the pushed ref on push).
       - name: Checkout repository
         uses: actions/checkout@v6
+        with:
+          ref: ${{ inputs.gh_ref }}
+
+      # The cache key must come from the SHA actually checked out: on a manual
+      # run `github.sha` points at the dispatching ref, not at `gh_ref`.
+      - name: Extract cache key
+        id: vars
+        run: |
+          echo "bundle_key=integration-bundle-$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
 
       - name: Build Bundle
         working-directory: ./frontend
@@ -53,58 +95,142 @@ jobs:
       - name: Store Bundle Cache
         uses: actions/cache@v5
         with:
-          key: "integration-bundle-${{ github.sha }}"
+          key: ${{ steps.vars.outputs.bundle_key }}
           path: frontend/resources/public
 
   test-integration:
     if: ${{ !github.event.pull_request.draft }}
-    name: "Integration Tests"
-    runs-on: penpot-runner-02
+    name: "Integration Tests (${{ matrix.shard }})"
+    runs-on: penpot-extended-runner
+    timeout-minutes: 40
+
+    needs: build-integration
+
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: ${{ fromJSON(inputs.shards || '[1, 2, 3, 4]') }}
+
+    container:
+      image: penpotapp/devenv:latest
+      volumes:
+        - /var/cache/github-runner/m2:/root/.m2
+        - /var/cache/github-runner/gitlib:/root/.gitlibs
+        - /var/cache/github-runner/ms-playwright:/ms-playwright
+      env:
+        PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ inputs.gh_ref }}
+
+      - name: Restore Cache
+        uses: actions/cache/restore@v5
+        with:
+          key: ${{ needs.build-integration.outputs.bundle_key }}
+          path: frontend/resources/public
+
+      - name: Install deps
+        working-directory: ./frontend
+        run: |
+          corepack enable;
+          corepack install;
+          pnpm install --frozen-lockfile;
+
+      # No-op once the shared volume is warm; keeps the first run working.
+      - name: Install Playwright Chromium
+        working-directory: ./frontend
+        run: pnpm exec playwright install chromium
+
+      # `strategy.job-total` is the matrix size, so the shard denominator
+      # follows the `shards` input without being hardcoded.
+      - name: Run Tests
+        working-directory: ./frontend
+        env:
+          WORKERS: ${{ inputs.workers }}
+        run: |
+          WORKERS=${WORKERS:-2}
+          echo "Running shard ${{ matrix.shard }}/${{ strategy.job-total }} with $WORKERS workers"
+          pnpm exec playwright test --project default \
+            --workers="$WORKERS" \
+            --shard=${{ matrix.shard }}/${{ strategy.job-total }} \
+            --reporter=blob
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: integration-blob-report-${{ matrix.shard }}
+          path: frontend/blob-report/
+          overwrite: true
+          retention-days: 3
+
+      - name: Upload test result
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: integration-tests-result-${{ matrix.shard }}
+          path: frontend/test-results/
+          overwrite: true
+          if-no-files-found: ignore
+          retention-days: 3
+
+  merge-reports:
+    if: ${{ always() && !github.event.pull_request.draft && needs.test-integration.result != 'skipped' }}
+    name: "Merge Integration Reports"
+    runs-on: penpot-extended-runner
+    timeout-minutes: 15
+
+    needs: test-integration
+
     container:
       image: penpotapp/devenv:latest
       volumes:
         - /var/cache/github-runner/m2:/root/.m2
         - /var/cache/github-runner/gitlib:/root/.gitlibs
 
-    needs: build-integration
-
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v6
-
-      - name: Restore Cache
-        uses: actions/cache/restore@v5
         with:
-          key: "integration-bundle-${{ github.sha }}"
-          path: frontend/resources/public
+          ref: ${{ inputs.gh_ref }}
 
-      - name: Run Tests
+      - name: Install deps
+        working-directory: ./frontend
+        run: |
+          corepack enable;
+          corepack install;
+          pnpm install --frozen-lockfile;
+
+      - name: Download blob reports
+        uses: actions/download-artifact@v7
+        with:
+          path: frontend/all-blob-reports
+          pattern: integration-blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML report
         working-directory: ./frontend
         env:
-          PLAYWRIGHT_REPORTER: list,json
           PLAYWRIGHT_JSON_OUTPUT_NAME: report.json
         run: |
-          ./scripts/test-e2e
+          pnpm exec playwright merge-reports \
+            --reporter=html,json,list ./all-blob-reports
 
-      - name: Flaky summary
+      - name: Test summary
         if: always()
         working-directory: ./frontend
         run: |
           if [ ! -f report.json ]; then
-            echo "No report.json produced (the run failed early)." >> "$GITHUB_STEP_SUMMARY"
+            echo "No report produced (all shards failed early)." >> "$GITHUB_STEP_SUMMARY"
             exit 0
           fi
+          jq -r -f ../.github/scripts/playwright-summary.jq report.json >> "$GITHUB_STEP_SUMMARY"
 
-          jq -r '
-            [ .. | objects
-              | select(has("tests") and has("file"))
-              | select(any(.tests[]; .status == "flaky"))
-              | "- `\(.file):\(.line)` — \(.title)"
-            ] as $f
-            | "## Flaky tests: \($f | length)\n"
-              + (if ($f | length) == 0 then "_none_" else ($f | join("\n")) end)
-          ' report.json >> "$GITHUB_STEP_SUMMARY"
-
+      # Kept for 30 days so flakiness rates can be aggregated across runs
+      # without scraping job logs.
       - name: Upload JSON report
         uses: actions/upload-artifact@v7
         if: always()
@@ -112,13 +238,13 @@ jobs:
           name: integration-json-report
           path: frontend/report.json
           overwrite: true
+          if-no-files-found: ignore
           retention-days: 30
 
-      - name: Upload test result
+      - name: Upload HTML report
         uses: actions/upload-artifact@v7
-        if: always()
         with:
-          name: integration-tests-result
-          path: frontend/test-results/
+          name: integration-html-report
+          path: frontend/playwright-report/
           overwrite: true
-          retention-days: 3
+          retention-days: 7

.github/workflows/tests-library.yml

@@ -32,7 +32,7 @@ jobs:
   test-library:
     if: ${{ !github.event.pull_request.draft }}
     name: "Library Tests"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-mcp.yml

@@ -28,7 +28,7 @@ jobs:
   test-mcp:
     if: ${{ !github.event.pull_request.draft }}
     name: "Test MCP"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container: penpotapp/devenv:latest
 
     steps:

.github/workflows/tests-plugin-api-suite.yml

@@ -53,7 +53,7 @@ jobs:
   api-test-suite-mocked:
     if: ${{ github.event_name != 'workflow_dispatch' && !github.event.pull_request.draft }}
     name: "Run Plugin API Test Suite (mocked)"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:
@@ -95,7 +95,7 @@ jobs:
   # api-test-suite-live:
   #   if: ${{ github.event_name == 'workflow_dispatch' }}
   #   name: Run Plugin API Test Suite (live)
-  #   runs-on: penpot-runner-02
+  #   runs-on: penpot-extended-runner
   #   container:
   #     image: penpotapp/devenv:latest
   # 

.github/workflows/tests-plugins.yml

@@ -30,7 +30,7 @@ jobs:
   test-plugins:
     if: ${{ !github.event.pull_request.draft }}
     name: Plugins Runtime Linter & Tests
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.github/workflows/tests-wasm.yml

@@ -30,7 +30,7 @@ jobs:
   test-render-wasm:
     if: ${{ !github.event.pull_request.draft }}
     name: "Render WASM Tests"
-    runs-on: penpot-runner-02
+    runs-on: penpot-extended-runner
     container:
       image: penpotapp/devenv:latest
       volumes:

.serena/memories/workflow/updating-pnpm.md

@@ -52,10 +52,12 @@ file (never pipe tool output through filters).
   then re-run `corepack use pnpm@<tag>` in that directory.
 - A workspace may fail with `ERR_PNPM_IGNORED_BUILDS`, and pnpm then writes
   a placeholder scaffold into its `pnpm-workspace.yaml`:
-  `allowBuilds: esbuild: set this to true or false` plus
-  `ignoredBuiltDependencies`. Repo convention is `allowBuilds: esbuild: true`.
-  Replace the placeholder and drop the `ignoredBuiltDependencies` entry,
-  then re-run.
+  `allowBuilds: esbuild: set this to true or false`. Current pnpm writes
+  only the `allowBuilds` placeholder; any legacy key still present
+  (`ignoredBuiltDependencies`, `onlyBuiltDependencies`,
+  `neverBuiltDependencies`) is ignored since pnpm 11. Repo convention is
+  `allowBuilds: esbuild: true`. Replace the placeholder and drop the
+  legacy entry, then re-run.
 - `plugins/apps/composable-test-suite` once had its own
   `pnpm-workspace.yaml` and acted as a nested workspace root. That state is
   gone on purpose: pnpm picks the nearest `pnpm-workspace.yaml` walking up,

AGENTS.md

@@ -14,6 +14,9 @@
 - **Never pipe test output directly to filters** (`| head`, `| tail`, `| grep`, etc.).
   Always redirect to a file first: `command > /tmp/output.txt 2>&1`, then read/grep the file.
   This prevents hiding test failures. See `mem:testing` for details.
+- **`.claude/skills` is a symlink to `.agents/skills`.**
+  Edit skills only in their canonical location (`.agents/skills`); never edit
+  through `.claude/skills`.
 - **Read the workflow memory BEFORE the corresponding action**:
   - Before `git commit` → `mem:workflow/creating-commits` (commit format, AI-assisted-by trailer)
   - Before `gh issue create` → `mem:workflow/creating-issues` (title derivation, body template, Issue Type)

CHANGES.md

@@ -2,6 +2,12 @@
 
 ## 2.18.0 (Unreleased)
 
+### :rocket: Epics and highlights
+
+- Group toolbar drawing tools into shape and free-draw flyouts [#9316](https://github.com/penpot/penpot/issues/9316) (PR: [#9480](https://github.com/penpot/penpot/pull/9480), [#10354](https://github.com/penpot/penpot/pull/10354))
+- Add dedicated Line and Arrow drawing tools (by @davidv399) [#9145](https://github.com/penpot/penpot/issues/9145) (PR: [#9146](https://github.com/penpot/penpot/pull/9146))
+- Show and manage comments while designing in the workspace [#10239](https://github.com/penpot/penpot/issues/10239) (PR: [#10275](https://github.com/penpot/penpot/pull/10275))
+
 ### :bug: Bugs fixed
 
 - Fix MCP integration hanging when the Penpot tab is backgrounded or frozen by the browser [#10323](https://github.com/penpot/penpot/issues/10323) (PR: [#10392](https://github.com/penpot/penpot/pull/10392))
@@ -103,6 +109,21 @@
 - Fix incorrect permission handling when managing share links on a file [#11289](https://github.com/penpot/penpot/issues/11289) (PR: [#11290](https://github.com/penpot/penpot/pull/11290))
 - Fix backend session remaining valid after logout when the auth-token cookie is replayed [#11316](https://github.com/penpot/penpot/issues/11316) (PR: [#11317](https://github.com/penpot/penpot/pull/11317))
 - Fix get-team-invitation-token requiring only read permissions [#11358](https://github.com/penpot/penpot/issues/11358) (PR: [#11359](https://github.com/penpot/penpot/pull/11359))
+- Fix missing text in legacy SVG board thumbnails [#10182](https://github.com/penpot/penpot/issues/10182) (PR: [#11552](https://github.com/penpot/penpot/pull/11552))
+- Fix workspace crash when applying transform modifiers in the WASM renderer [#10894](https://github.com/penpot/penpot/issues/10894) (PR: [#10896](https://github.com/penpot/penpot/pull/10896))
+- Limit ZIP entry count and object size on V3 binfile import [#11021](https://github.com/penpot/penpot/issues/11021) (PR: [#11022](https://github.com/penpot/penpot/pull/11022))
+- Block plugin UI iframe URLs targeting the Penpot domain [#11271](https://github.com/penpot/penpot/issues/11271) (PR: [#11273](https://github.com/penpot/penpot/pull/11273))
+- Restrict the MCP REPL code execution endpoint to development environments [#11283](https://github.com/penpot/penpot/issues/11283) (PR: [#11282](https://github.com/penpot/penpot/pull/11282))
+- Filter share-link tokens from the get-view-only-bundle response [#11285](https://github.com/penpot/penpot/issues/11285) (PR: [#11286](https://github.com/penpot/penpot/pull/11286))
+- Disable MCP developer tools in multi-user mode [#11291](https://github.com/penpot/penpot/issues/11291) (PR: [#11310](https://github.com/penpot/penpot/pull/11310))
+- Fix Hide comments setting being ignored after opening the Comments section [#11308](https://github.com/penpot/penpot/issues/11308) (PR: [#11492](https://github.com/penpot/penpot/pull/11492))
+- Block NAT64/6to4/Teredo IPv6 transition addresses in the SSRF guard [#11319](https://github.com/penpot/penpot/issues/11319) (PR: [#11320](https://github.com/penpot/penpot/pull/11320))
+- Prevent team admins from removing the team owner [#11367](https://github.com/penpot/penpot/issues/11367) (PR: [#11368](https://github.com/penpot/penpot/pull/11368))
+- Enforce share-link comment permissions and page scope [#11370](https://github.com/penpot/penpot/issues/11370) (PR: [#11371](https://github.com/penpot/penpot/pull/11371))
+- Clean up orphaned teams, projects and files on profile deletion [#11394](https://github.com/penpot/penpot/issues/11394) (PR: [#11395](https://github.com/penpot/penpot/pull/11395))
+- Fix crash when pressing Ctrl+D with no shape selected [#11448](https://github.com/penpot/penpot/issues/11448) (PR: [#11491](https://github.com/penpot/penpot/pull/11491))
+- Fix text layout not updating when auto-width is set by double-clicking the bounding box [#11480](https://github.com/penpot/penpot/issues/11480) (PR: [#11541](https://github.com/penpot/penpot/pull/11541))
+- Fix boolean shapes rendering deformed in the WASM renderer and exports [#11482](https://github.com/penpot/penpot/issues/11482) (PR: [#11551](https://github.com/penpot/penpot/pull/11551))
 
 ### :sparkles: New features & Enhancements
 

README.md

@@ -56,6 +56,7 @@ If your organization is scaling and needs extra support, we’re here to help. [
 
 - [Why Penpot](#why-penpot)
 - [Getting Started](#getting-started)
+- [Penpot Enterprise](#penpot-enterprise)
 - [Community](#community)
 - [Contributing](#contributing)
 - [Resources](#resources)
@@ -93,6 +94,12 @@ Penpot is the only design & prototype platform that is deployment agnostic. You
 
 Learn how to install it with Docker, Kubernetes, Elestio or other options on [our website](https://penpot.app/self-host).
 
+<img width="100%" height="1010" alt="2" src="https://github.com/user-attachments/assets/243e796e-a140-481a-b68f-b24be6a70e37" />
+
+## Penpot Enterprise ##
+
+Penpot Enterprise is our paid plan for organizations that need to scale their design work across multiple teams with advanced governance, security, and administration. Manage teams and access from a centralized **Admin Console**, configure advanced permissions, and connect your **identity provider through SSO**. Available for cloud and self-hosted environments, it combines enterprise controls with Penpot’s open-source foundation and open standards.
+
 ## Community ##
 
 We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and [improve](https://community.penpot.app/c/help-us-improve-penpot/7) Penpot. All your designs, code and ideas are welcome!

backend/src/app/http/client.clj

@@ -15,6 +15,7 @@
   (:require
    [app.common.schema :as sm]
    [app.util.ssrf :as ssrf]
+   [app.worker :as-alias wrk]
    [cuerdas.core :as str]
    [integrant.core :as ig]
    [java-http-clj.core :as http])
@@ -23,6 +24,8 @@
    java.net.URI))
 
 (def default-max-redirects 5)
+(def default-connect-timeout 30000)
+(def default-request-timeout 30000)
 
 (defn client?
   [o]
@@ -33,15 +36,17 @@
   :pred client?})
 
 (defmethod ig/init-key ::client
-  [_ _]
-  (http/build-client {:connect-timeout 30000
+  [_ {:keys [::wrk/executor]}]
+  (http/build-client {:connect-timeout default-connect-timeout
+                      :executor executor
                       :follow-redirects :never}))
 
 (defn send!
   ([client req] (send! client req {}))
   ([client req {:keys [response-type] :or {response-type :string}}]
    (assert (client? client) "expected valid http client")
-   (http/send req {:client client :as response-type})))
+   (http/send (merge {:timeout default-request-timeout} req)
+              {:client client :as response-type})))
 
 (defn- resolve-client
   [params]

backend/src/app/main.clj

@@ -200,7 +200,7 @@
    {::db/pool (ig/ref ::db/pool)}
 
    ::http.client/client
-   {}
+   {::wrk/executor (ig/ref ::wrk/executor)}
 
    ::session/manager
    {::db/pool (ig/ref ::db/pool)}

backend/src/app/media/remote.clj

@@ -75,10 +75,10 @@
                            {:method method
                             :uri uri
                             :body body
-                            :headers headers}
+                            :headers headers
+                            :timeout timeout}
                            {:response-type :input-stream
-                            :skip-ssrf-check? true
-                            :timeout timeout})
+                            :skip-ssrf-check? true})
             status (:status resp)]
         (when (not (<= 200 status 299))
           (let [body (:body resp)]

backend/src/app/rpc/management/nitrate.clj

@@ -41,6 +41,7 @@
    [app.rpc.notifications :as notifications]
    [app.storage :as sto]
    [app.util.services :as sv]
+   [app.util.ssrf :as ssrf]
    [app.worker :as wrk]
    [cuerdas.core :as str]))
 
@@ -960,13 +961,18 @@ RETURNING id, deleted_at;")
 (sv/defmethod ::check-organization-sso
   "Validate an organization SSO configuration by generating a login redirect URL.
   Nitrate calls this while configuring SSO to verify client credentials and OIDC
-  discovery before saving the settings."
+  discovery before saving the settings. The issuer URL is nitrate-supplied
+  (customer-configured), so it is checked against the SSRF blocklist before
+  any outbound request is attempted."
   {::doc/added "2.18"
    ::sm/params cto/schema:nitrate-sso
    ::sm/result schema:check-organization-sso-result
    ::rpc/auth false}
   [cfg params]
-  {:valid (oidc/is-organization-sso-config-valid? cfg params)})
+  (let [issuer (oidc/organization-sso-discovery-uri params)]
+    {:valid (boolean (and issuer
+                          (ssrf/safe-url? issuer)
+                          (oidc/is-organization-sso-config-valid? cfg params)))}))
 
 ;; ---- API: notify-organization-sso-change
 (sv/defmethod ::notify-organization-sso-change

backend/test/backend_tests/http_client_test.clj

@@ -0,0 +1,30 @@
+;; 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 Sucursal en España SL
+
+(ns backend-tests.http-client-test
+  (:require
+   [app.http.client :as http]
+   [clojure.test :as t]
+   [java-http-clj.core :as jhttp]
+   [mockery.core :refer [with-mocks]]))
+
+(t/deftest send-injects-default-timeout-when-absent
+  (with-mocks [mock {:target 'java-http-clj.core/send
+                     :return {:status 200 :body ""}}]
+    (let [client (jhttp/build-client {})]
+      (http/send! client {:method :get :uri "https://example.com/"})
+      (let [[req _opts] (:call-args @mock)]
+        (t/is (= http/default-request-timeout (:timeout req)))))))
+
+(t/deftest send-preserves-caller-supplied-timeout
+  (with-mocks [mock {:target 'java-http-clj.core/send
+                     :return {:status 200 :body ""}}]
+    (let [client (jhttp/build-client {})]
+      (http/send! client {:method :get
+                          :uri "https://example.com/"
+                          :timeout 5000})
+      (let [[req _opts] (:call-args @mock)]
+        (t/is (= 5000 (:timeout req)))))))

backend/test/backend_tests/media_remote_test.clj

@@ -8,6 +8,7 @@
   (:require
    [app.common.exceptions :as ex]
    [app.config :as cf]
+   [app.http.client :as http]
    [app.media.remote :as media.remote]
    [app.setup :as-alias setup]
    [app.util.json :as json]
@@ -500,6 +501,22 @@
                      :headers {}})]
           (t/is (= 200 (:status resp))))))))
 
+(t/deftest service-request-puts-configured-timeout-in-request
+  (t/testing "service-request puts media-processing-service-timeout on the http request"
+    (let [captured (atom nil)]
+      (with-redefs [cf/get (th/config-get-mock config-mock)
+                    http/req (fn [_client request _opts]
+                               (reset! captured request)
+                               {:status 200
+                                :body (json-stream {:width 100 :height 100})})]
+        (media.remote/service-request
+         (mk-system)
+         {:method :post
+          :uri "http://localhost:6065/api/image/info"
+          :body nil
+          :headers {}})
+        (t/is (= 5000 (:timeout @captured)))))))
+
 ;; ---------------------------------------------------------------------------
 ;; Shared key
 ;; ---------------------------------------------------------------------------

backend/test/backend_tests/rpc_management_nitrate_test.clj

@@ -17,6 +17,7 @@
    [app.msgbus :as mbus]
    [app.nitrate :as nitrate]
    [app.rpc :as-alias rpc]
+   [app.util.ssrf :as ssrf]
    [app.worker :as wrk]
    [backend-tests.helpers :as th]
    [clojure.set :as set]
@@ -1806,13 +1807,14 @@
 
 (t/deftest check-organization-sso-returns-valid-true
   (let [organization-id (uuid/random)
-        out    (with-redefs [oidc/is-organization-sso-config-valid? (constantly true)]
-                 (th/management-command!
-                  {::th/type :check-organization-sso
-                   :organization-id organization-id
-                   :client-id "test-client"
-                   :client-secret "test-secret"
-                   :issuer "https://idp.example.com"}))]
+        out             (with-redefs [ssrf/safe-url? (constantly true)
+                                      oidc/is-organization-sso-config-valid? (constantly true)]
+                          (th/management-command!
+                           {::th/type :check-organization-sso
+                            :organization-id organization-id
+                            :client-id "test-client"
+                            :client-secret "test-secret"
+                            :issuer "https://idp.example.com"}))]
     (t/is (th/success? out))
     (t/is (true? (-> out :result :valid)))))
 
@@ -1827,19 +1829,36 @@
 
 (t/deftest check-organization-sso-passes-issuer-to-validation
   (let [organization-id (uuid/random)
-        out    (with-redefs [oidc/is-organization-sso-config-valid?
-                             (fn [_cfg sso]
-                               (and (= "test-client" (:client-id sso))
-                                    (= "https://idp.example.com/" (:issuer sso))))]
-                 (th/management-command!
-                  {::th/type :check-organization-sso
-                   :organization-id organization-id
-                   :client-id "test-client"
-                   :client-secret "test-secret"
-                   :issuer "https://idp.example.com/"}))]
+        out             (with-redefs [ssrf/safe-url? (constantly true)
+                                      oidc/is-organization-sso-config-valid?
+                                      (fn [_cfg sso]
+                                        (and (= "test-client" (:client-id sso))
+                                             (= "https://idp.example.com/" (:issuer sso))))]
+                          (th/management-command!
+                           {::th/type :check-organization-sso
+                            :organization-id organization-id
+                            :client-id "test-client"
+                            :client-secret "test-secret"
+                            :issuer "https://idp.example.com/"}))]
     (t/is (th/success? out))
     (t/is (true? (-> out :result :valid)))))
 
+(t/deftest check-organization-sso-returns-valid-false-on-ssrf-blocked-issuer
+  (t/testing "an SSRF-blocked issuer must not reach the OIDC validation flow"
+    (let [called? (atom false)
+          out     (with-redefs [oidc/is-organization-sso-config-valid?
+                                (fn [_cfg _sso] (reset! called? true) true)]
+                    (th/management-command!
+                     {::th/type :check-organization-sso
+                      :organization-id (uuid/random)
+                      :client-id "test-client"
+                      :client-secret "test-secret"
+                      :issuer "http://127.0.0.1/idp"}))]
+      (t/is (th/success? out))
+      (t/is (false? (-> out :result :valid)))
+      (t/is (false? @called?)
+            "OIDC validation should not run when the issuer is SSRF-blocked"))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; PUSH AUDIT EVENTS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

common/src/app/common/types/shape/interactions.cljc

@@ -712,14 +712,21 @@
   (conj (or interactions []) interaction))
 
 (defn remove-interaction
+  "Interactions without the one at `index`; unchanged when `index` addresses none."
   [interactions index]
   (let [interactions (or interactions [])]
-    (into (subvec interactions 0 index)
-          (subvec interactions (inc index)))))
+    (if (and (int? index) (< -1 index (count interactions)))
+      (into (subvec interactions 0 index)
+            (subvec interactions (inc index)))
+      interactions)))
 
 (defn update-interaction
+  "Interactions with `update-fn` applied at `index`; unchanged when `index`
+  addresses none."
   [interactions index update-fn]
-  (update interactions index update-fn))
+  (if (and (int? index) (< -1 index (count interactions)))
+    (update interactions index update-fn)
+    interactions))
 
 (defn remap-interactions
   "Update all interactions whose destination points to a shape in the

common/test/common_tests/types/shape_interactions_test.cljc

@@ -858,7 +858,20 @@
     (t/testing "Update interaction"
       (let [new-interactions (ctsi/update-interaction interactions 1 #(ctsi/set-action-type % :open-url))]
         (t/is (= (count new-interactions) 2))
-        (t/is (= (:action-type (last new-interactions)) :open-url))))))
+        (t/is (= (:action-type (last new-interactions)) :open-url))))
+
+    (t/testing "Remove interaction with an index out of range"
+      (t/is (= interactions (ctsi/remove-interaction interactions 2)))
+      (t/is (= interactions (ctsi/remove-interaction interactions -1)))
+      (t/is (= interactions (ctsi/remove-interaction interactions nil)))
+      (t/is (= [] (ctsi/remove-interaction nil 0))))
+
+    (t/testing "Update interaction with an index out of range"
+      (let [update-fn #(ctsi/set-action-type % :open-url)]
+        (t/is (= interactions (ctsi/update-interaction interactions 2 update-fn)))
+        (t/is (= interactions (ctsi/update-interaction interactions -1 update-fn)))
+        (t/is (= interactions (ctsi/update-interaction interactions nil update-fn)))
+        (t/is (nil? (ctsi/update-interaction nil 0 update-fn)))))))
 
 
 (t/deftest remap-interactions

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

@@ -291,8 +291,6 @@
   --modal-link-foreground-color: var(--color-accent-primary);
   --modal-border-color: var(--color-background-quaternary);
   --modal-separator-background-color: var(--color-background-quaternary);
-  --modal-navigator-foreground-color-rest: var(--color-background-quaternary);
-  --modal-navigator-foreground-color-active: var(--color-accent-primary);
 
   // ALERTS, NOTIFICATION, TOAST & BADGES
 

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

@@ -36,6 +36,7 @@
    [app.main.ui.releases.v2-15]
    [app.main.ui.releases.v2-16]
    [app.main.ui.releases.v2-17]
+   [app.main.ui.releases.v2-18]
    [app.main.ui.releases.v2-2]
    [app.main.ui.releases.v2-3]
    [app.main.ui.releases.v2-4]
@@ -107,4 +108,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.17")))
+  (rc/render-release-notes (assoc params :version "2.18")))

frontend/src/app/main/ui/releases/base.scss

@@ -0,0 +1,116 @@
+// 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 Sucursal en España SL
+
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-set);
+  background-color: var(--color-overlay-default);
+}
+
+.modal-container {
+  display: grid;
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
+}
+
+.start-image {
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
+}
+
+.modal-content {
+  padding: $sz-40;
+  display: grid;
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
+}
+
+.modal-header {
+  display: grid;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
+}
+
+.version-tag {
+  @include use-typography("headline-small");
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
+}
+
+.modal-title {
+  @include use-typography("headline-large");
+
+  color: var(--color-foreground-primary);
+}
+
+.features-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-s);
+}
+
+.feature-title {
+  @include use-typography("body-large");
+
+  color: var(--color-foreground-primary);
+}
+
+.feature-content {
+  @include use-typography("body-medium");
+
+  margin: 0;
+  color: var(--color-foreground-secondary);
+}
+
+.feature-list {
+  @include use-typography("body-medium");
+
+  color: var(--color-foreground-secondary);
+  list-style: disc;
+  display: grid;
+  gap: var(--sp-s);
+}
+
+.navigation {
+  inline-size: 100%;
+  display: grid;
+  grid-template-areas: "bullets button";
+}
+
+.next-btn {
+  justify-self: flex-end;
+  grid-area: button;
+}

frontend/src/app/main/ui/releases/common.scss

@@ -4,28 +4,29 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .step-dots {
   display: grid;
   grid-template-columns: none;
   grid-auto-flow: column;
-  gap: deprecated.$s-8;
-  height: fit-content;
-  width: fit-content;
+  gap: var(--sp-s);
+  block-size: fit-content;
+  inline-size: fit-content;
   margin: 0;
   padding: 0;
   place-self: center flex-start;
 }
 
 .dot {
-  height: deprecated.$s-12;
-  width: deprecated.$s-12;
-  border-radius: deprecated.$br-circle;
-  background-color: var(--modal-navigator-foreground-color-rest);
-  cursor: pointer;
+  block-size: $sz-12;
+  inline-size: $sz-12;
+  border-radius: $br-circle;
+  background-color: var(--color-background-quaternary);
 }
 
 .current {
-  background-color: var(--modal-navigator-foreground-color-active);
+  background-color: var(--color-accent-primary);
 }

frontend/src/app/main/ui/releases/v2_0.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -57,8 +58,10 @@
            " Ready to dive in? Let 's get started!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -97,8 +100,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -131,8 +136,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -166,8 +173,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -198,6 +207,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_0.scss

@@ -4,101 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_1.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -43,6 +44,7 @@
            " Ready to dive in? Let 's get started!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click finish} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_1.scss

@@ -4,80 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_10.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -79,8 +82,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -107,7 +112,8 @@
            "And one more thing…Tune into our product showcase to see future plans and help us shape Penpot. Come for the insights, stay for the community…"]
 
           [:p {:class (stl/css :feature-content)}
-           [:a {:href "https://penpot.app/penpotfest"
+           [:a {:class (stl/css :link)
+                :href "https://penpot.app/penpotfest"
                 :target "_blank"}
             "Get your tickets"]
            " now to join us 8-10 October, in Madrid!"]]
@@ -118,8 +124,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -148,8 +156,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -179,6 +189,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_10.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_11.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -49,8 +50,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -79,8 +82,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -115,8 +120,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -153,8 +160,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -184,6 +193,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_11.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_12.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -85,8 +88,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -121,8 +126,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
 
      2
@@ -157,6 +164,7 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_12.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_13.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -79,8 +82,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -113,6 +118,7 @@
             :navigate navigate
             :total 2}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_13.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_14.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -79,8 +82,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -109,8 +114,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -139,8 +146,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -173,6 +182,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_14.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_15.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -79,8 +82,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -120,8 +125,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -154,6 +161,7 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_15.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_16.cljs

@@ -2,12 +2,13 @@
 ;; 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
+;; Copyright (c) KALEIDOS INC Sucursal en España SL
 
 (ns app.main.ui.releases.v2-16
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -44,8 +45,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -74,8 +77,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -104,8 +109,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -134,8 +141,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -177,8 +186,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      4
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -207,6 +218,7 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_16.scss

@@ -2,107 +2,6 @@
 // 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
+// Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_17.cljs

@@ -2,12 +2,13 @@
 ;; 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
+;; Copyright (c) KALEIDOS INC Sucursal en España SL
 
 (ns app.main.ui.releases.v2-17
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -44,8 +45,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -74,8 +77,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -104,8 +109,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -134,8 +141,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -171,8 +180,10 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      4
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -213,5 +224,7 @@
             :navigate navigate
             :total 5}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_17.scss

@@ -2,107 +2,6 @@
 // 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
+// Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_18.cljs

@@ -0,0 +1,252 @@
+;; 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 Sucursal en España SL
+
+(ns app.main.ui.releases.v2-18
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+(defmethod c/render-release-notes "2.18"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-slide-0.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Penpot 2.18 is here!"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "What’s new in Penpot?"]
+
+          [:div {:class (stl/css :version-tag)}
+           (dm/str "Version " version)]]
+
+         [:div {:class (stl/css :features-block)}
+
+          [:p  {:class (stl/css :feature-content)}
+           "Say hello to Penpot Enterprise, our new paid plan, shipping alongside the most requested stroke-to-path functionality and a fresh batch of features and fixes."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "Penpot stays free, unlimited, and open source. Enterprise is meant for organisations that need to govern over people, workflows or content."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "Let’s dive in!"]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     0
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-enterprise.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Introducing Penpot Enterprise"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Introducing Penpot Enterprise"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "As an open source product, Penpot brings the most advanced features to everyone for free."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Penpot Enterprise is a paid layer that overrides, tweaks or restricts how these features can be used at scale."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     1
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-sso.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "One Sign in for everyone"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "One Sign in for everyone"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Let your whole organization sign in through your own corporate identity provider, whether that's a generic OpenID Connect provider, Azure Active Directory, or Google."]
+
+          [:p {:class (stl/css :feature-content)}
+           "One consistent way into your organization’s teams and files, governed by the directory you already run. From the Admin Console, you’ll be able to configure your identity provider setup to Penpot in just a few steps."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     2
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-permissions.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Advanced permissions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Advanced permissions"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Decide who can do what across every team at once, who can create, edit, administer teams, projects, and files, and who's allowed to invite new people in."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Your rules sit on top of everyone's normal role, so the whole organization stays aligned with how you want to work, and every change takes effect the moment you make it."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     3
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-console.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "An Admin Panel to rule them all"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "An Admin Panel to rule them all"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "A separate Admin Panel allows authorized users to create independent Organisations to which certain rules can be applied."]
+
+          [:p {:class (stl/css :feature-content)}
+           "We are starting with something straightforward; Per-Organisation SSO (choose between multiple identity providers) and advanced permissions (decide who can do what across every team)."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     4
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-billing.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Penpot Enterprise billing"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Penpot Enterprise billing"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "This is equally important. Whether on a monthly or annual subscription, customers using Penpot Enterprise only pay once per identifiable user (email address), regardless of the number of organisations this user is a member of."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Bulk adding or removing users is trivial and we are making sure that you have total transparency and ergonomics around your billing cycle and what it contains."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
+
+     5
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.18-stroke2path.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Stroke to Paths and new drawing tools"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Stroke to Paths and new drawing tools"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Paths can now convert their stroke into a separate, editable path shape, letting you reshape or style the outline independently of the original path. Currently available under the new WebGL renderer."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Lots of smaller wins add up this cycle. A few favorites:"]
+
+          [:p {:class (stl/css :feature-content)}
+           "• Draw faster with new shape and free-draw tool flyouts in the toolbar."]
+          [:p {:class (stl/css :feature-content)}
+           "• Dedicated Line and Arrow drawing tools (by @davidv399)."]
+
+          [:p {:class (stl/css :feature-content)}
+           "On top of that, 2.18 ships plugin API improvements, a broad round of bug fixes, and community-contributed fixes (thanks to @Krishcode264, @filipsajdak, @sawirricardo, and many more)."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:> c/navigation-bullets*
+           {:slide slide
+            :navigate navigate
+            :total 6}]
+
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_18.scss

@@ -0,0 +1,7 @@
+// 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 Sucursal en España SL
+
+@use "base";

frontend/src/app/main/ui/releases/v2_2.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,6 +47,7 @@
            "Thanks again to our awesome community for their amazing contributions to this release!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click finish} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_2.scss

@@ -4,80 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-480;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_3.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -47,8 +48,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -77,8 +80,10 @@
             :navigate navigate
             :total 2}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
 
      1
@@ -98,7 +103,10 @@
           [:p {:class (stl/css :feature-content)}
            "Penpot plugins are quite easy to install."]
           [:p {:class (stl/css :feature-content)}
-           "Be sure to keep an eye on our evolving " [:a {:href "https://penpot.app/penpothub" :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
+           "Be sure to keep an eye on our evolving "
+           [:a {:class (stl/css :link)
+                :href "https://penpot.app/penpothub"
+                :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
 
           [:p {:class (stl/css :feature-content)}
            "This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]]
@@ -110,6 +118,7 @@
             :navigate navigate
             :total 2}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_3.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_4.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -47,8 +48,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -77,8 +80,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -107,8 +112,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -136,6 +143,7 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_4.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_5.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -47,8 +48,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -77,8 +80,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -107,8 +112,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -141,8 +148,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -170,6 +179,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_5.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_6.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -48,8 +49,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -89,8 +92,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -125,8 +130,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -164,6 +171,7 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_6.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_7.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -76,8 +79,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -106,8 +111,10 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -137,6 +144,7 @@
             :navigate navigate
             :total 3}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_7.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_8.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -88,8 +91,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -121,8 +126,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      2
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -154,8 +161,10 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      3
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -191,6 +200,7 @@
             :navigate navigate
             :total 4}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_8.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/main/ui/releases/v2_9.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.releases.common :as c]
    [rumext.v2 :as mf]))
 
@@ -46,8 +47,10 @@
            "Let’s dive in!"]]
 
          [:div {:class (stl/css :navigation)}
-          [:button {:class (stl/css :next-btn)
-                    :on-click next} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      0
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -76,8 +79,10 @@
             :navigate navigate
             :total 2}]
 
-          [:button {:on-click next
-                    :class (stl/css :next-btn)} "Continue"]]]]]]
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click next
+                       :variant "primary"}
+           "Continue"]]]]]]
 
      1
      [:div {:class (stl/css-case :modal-overlay true)}
@@ -107,6 +112,7 @@
             :navigate navigate
             :total 2}]
 
-          [:button {:on-click finish
-                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
-
+          [:> button* {:class (stl/css :next-btn)
+                       :on-click finish
+                       :variant "primary"}
+           "Let's go"]]]]]])))

frontend/src/app/main/ui/releases/v2_9.scss

@@ -4,105 +4,4 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
-
-.modal-overlay {
-  @extend %modal-overlay-base;
-}
-
-.modal-container {
-  display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
-}
-
-.start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-}
-
-.modal-content {
-  padding: deprecated.$s-40;
-  display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
-}
-
-.modal-header {
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
-}
-
-.modal-title {
-  @include deprecated.headline-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.features-block {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  gap: deprecated.$s-8;
-}
-
-.feature-title {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-title-foreground-color);
-}
-
-.feature-content {
-  @include deprecated.body-medium-typography;
-
-  margin: 0;
-  color: var(--modal-text-foreground-color);
-}
-
-.feature-list {
-  @include deprecated.body-medium-typography;
-
-  color: var(--modal-text-foreground-color);
-  list-style: disc;
-  display: grid;
-  gap: deprecated.$s-8;
-}
-
-.navigation {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "bullets button";
-}
-
-.next-btn {
-  @extend %button-primary;
-
-  width: deprecated.$s-100;
-  justify-self: flex-end;
-  grid-area: button;
-}
+@use "base";

frontend/src/app/plugins/shape.cljs

@@ -80,89 +80,102 @@
   (obj/type-of? p "InteractionProxy"))
 
 (defn interaction-proxy
-  [plugin-id file-id page-id shape-id index]
-  (obj/reify {:name "InteractionProxy"}
-    :$plugin {:enumerable false :get (fn [] plugin-id)}
-    :$file   {:enumerable false :get (fn [] file-id)}
-    :$page   {:enumerable false :get (fn [] page-id)}
-    :$shape  {:enumerable false :get (fn [] shape-id)}
-    :$index  {:enumerable false :get (fn [] index)}
+  "Proxy over one interaction of a shape.
 
-    ;; Not enumerable so we don't have an infinite loop
-    :shape
-    {:enumerable false
-     :get (fn [] (shape-proxy plugin-id file-id page-id shape-id))}
+  Interactions are addressed by position, which shifts as interactions are added
+  or removed, so the position is resolved on each access from `interaction`,
+  kept up to date with the writes made through the proxy."
+  [plugin-id file-id page-id shape-id interaction index]
+  (let [current      (atom interaction)
+        locate-index (fn [] (u/locate-interaction-index file-id page-id shape-id @current index))]
+    (obj/reify {:name "InteractionProxy"}
+      :$plugin {:enumerable false :get (fn [] plugin-id)}
+      :$file   {:enumerable false :get (fn [] file-id)}
+      :$page   {:enumerable false :get (fn [] page-id)}
+      :$shape  {:enumerable false :get (fn [] shape-id)}
+      :$index  {:enumerable false :get locate-index}
 
-    :trigger
-    {:this true
-     :get #(-> % u/proxy->interaction :event-type format/format-key)
-     :set
-     (fn [_ value]
-       (let [value (parser/parse-keyword value)]
+      ;; Not enumerable so we don't have an infinite loop
+      :shape
+      {:enumerable false
+       :get (fn [] (shape-proxy plugin-id file-id page-id shape-id))}
+
+      :trigger
+      {:this true
+       :get #(-> % u/proxy->interaction :event-type format/format-key)
+       :set
+       (fn [_ value]
+         (let [value (parser/parse-keyword value)]
+           (cond
+             (not (contains? ctsi/event-types value))
+             (u/not-valid plugin-id :trigger value)
+
+             (not (r/check-permission plugin-id "content:write"))
+             (u/not-valid plugin-id :trigger "Plugin doesn't have 'content:write' permission")
+
+             :else
+             (do
+               (st/emit! (dwi/update-interaction
+                          (u/locate-shape file-id page-id shape-id)
+                          (locate-index)
+                          #(assoc % :event-type value)
+                          {:page-id page-id}))
+               (swap! current assoc :event-type value)))))}
+
+      :delay
+      {:this true
+       :get #(-> % u/proxy->interaction :delay)
+       :set
+       (fn [_ value]
          (cond
-           (not (contains? ctsi/event-types value))
-           (u/not-valid plugin-id :trigger value)
+           (or (not (sm/valid-safe-int? value)) (neg? value))
+           (u/not-valid plugin-id :delay value)
 
            (not (r/check-permission plugin-id "content:write"))
-           (u/not-valid plugin-id :trigger "Plugin doesn't have 'content:write' permission")
+           (u/not-valid plugin-id :delay "Plugin doesn't have 'content:write' permission")
 
            :else
-           (st/emit! (dwi/update-interaction
-                      (u/locate-shape file-id page-id shape-id)
-                      index
-                      #(assoc % :event-type value)
-                      {:page-id page-id})))))}
+           (do
+             (st/emit! (dwi/update-interaction
+                        (u/locate-shape file-id page-id shape-id)
+                        (locate-index)
+                        #(assoc % :delay value)
+                        {:page-id page-id}))
+             (swap! current assoc :delay value))))}
 
-    :delay
-    {:this true
-     :get #(-> % u/proxy->interaction :delay)
-     :set
-     (fn [_ value]
-       (cond
-         (or (not (sm/valid-safe-int? value)) (neg? value))
-         (u/not-valid plugin-id :delay value)
+      :action
+      {:this true
+       :get #(-> % u/proxy->interaction (format/format-action plugin-id file-id page-id))
+       :set
+       (fn [self value]
+         (let [params (parser/parse-action value)
+               interaction
+               (-> (u/proxy->interaction self)
+                   (d/patch-object params))]
+           (cond
+             (not (sm/validate ctsi/schema:interaction interaction))
+             (u/not-valid plugin-id :action interaction)
 
-         (not (r/check-permission plugin-id "content:write"))
-         (u/not-valid plugin-id :delay "Plugin doesn't have 'content:write' permission")
+             (not (r/check-permission plugin-id "content:write"))
+             (u/not-valid plugin-id :action "Plugin doesn't have 'content:write' permission")
 
-         :else
-         (st/emit! (dwi/update-interaction
-                    (u/locate-shape file-id page-id shape-id)
-                    index
-                    #(assoc % :delay value)
-                    {:page-id page-id}))))}
+             :else
+             (do
+               (st/emit! (dwi/update-interaction
+                          (u/locate-shape file-id page-id shape-id)
+                          (locate-index)
+                          #(d/patch-object % params)
+                          {:page-id page-id}))
+               (reset! current interaction)))))}
 
-    :action
-    {:this true
-     :get #(-> % u/proxy->interaction (format/format-action plugin-id file-id page-id))
-     :set
-     (fn [self value]
-       (let [params (parser/parse-action value)
-             interaction
-             (-> (u/proxy->interaction self)
-                 (d/patch-object params))]
-         (cond
-           (not (sm/validate ctsi/schema:interaction interaction))
-           (u/not-valid plugin-id :action interaction)
+      :remove
+      (fn []
+        (cond
+          (not (r/check-permission plugin-id "content:write"))
+          (u/not-valid plugin-id :remove "Plugin doesn't have 'content:write' permission")
 
-           (not (r/check-permission plugin-id "content:write"))
-           (u/not-valid plugin-id :action "Plugin doesn't have 'content:write' permission")
-
-           :else
-           (st/emit! (dwi/update-interaction
-                      (u/locate-shape file-id page-id shape-id)
-                      index
-                      #(d/patch-object % params)
-                      {:page-id page-id})))))}
-
-    :remove
-    (fn []
-      (cond
-        (not (r/check-permission plugin-id "content:write"))
-        (u/not-valid plugin-id :remove "Plugin doesn't have 'content:write' permission")
-
-        :else
-        (st/emit! (dwi/remove-interaction {:id shape-id} index))))))
+          :else
+          (st/emit! (dwi/remove-interaction {:id shape-id} (locate-index))))))))
 
 (def lib-typography-proxy? nil)
 (def lib-component-proxy nil)
@@ -980,8 +993,9 @@
             (fn [self]
               (let [interactions (-> self u/proxy->shape :interactions)]
                 (format/format-array
-                 #(interaction-proxy plugin-id file-id page-id id %)
-                 (range 0 (count interactions)))))}
+                 (fn [[index interaction]]
+                   (interaction-proxy plugin-id file-id page-id id interaction index))
+                 (d/enumerate interactions))))}
 
            ;; Methods
            :resize
@@ -1626,7 +1640,7 @@
                    (st/emit!
                     (dwi/add-interaction page-id id interaction)
                     (se/event plugin-id "add-interaction"))
-                   (interaction-proxy plugin-id file-id page-id id index)))))
+                   (interaction-proxy plugin-id file-id page-id id interaction index)))))
 
            :removeInteraction
            (fn [interaction]
@@ -1637,6 +1651,9 @@
                (not (r/check-permission plugin-id "content:write"))
                (u/not-valid plugin-id :removeInteraction "Plugin doesn't have 'content:write' permission")
 
+               (not= id (obj/get interaction "$shape"))
+               (u/not-valid plugin-id :removeInteraction "The interaction doesn't belong to this shape")
+
                :else
                (st/emit!
                 (dwi/remove-interaction {:id id} (obj/get interaction "$index"))

frontend/src/app/plugins/utils.cljs

@@ -206,6 +206,15 @@
   (when-let [shape (locate-shape file-id page-id shape-id)]
     (get-in shape [:interactions index])))
 
+(defn locate-interaction-index
+  "Position of `interaction` within the shape's current interactions, falling
+  back to `index` while it addresses an existing interaction."
+  [file-id page-id shape-id interaction index]
+  (let [interactions (-> (locate-shape file-id page-id shape-id) :interactions)]
+    (or (d/index-of interactions interaction)
+        (when (and (int? index) (< -1 index (count interactions)))
+          index))))
+
 (defn proxy->interaction
   [proxy]
   (let [file-id (obj/get proxy "$file")

frontend/src/app/render_wasm/api.cljs

@@ -658,7 +658,9 @@
 
 (defn use-shape
   [id]
-  (when (initialized?)
+  ;; Use `wasm/live?` (not `initialized?`) so context-restore reload can
+  ;; select shapes while `reloading?` still blocks external app callers.
+  (when (wasm/live?)
     (let [buffer (uuid/get-u32 id)]
       (h/call wasm/internal-module "_use_shape"
               (aget buffer 0)
@@ -668,7 +670,7 @@
 
 (defn has-shape
   [id]
-  (when (initialized?)
+  (when (wasm/live?)
     (let [buffer (uuid/get-u32 id)
 
           result
@@ -686,9 +688,11 @@
   ;; Cache content for text editor sync
   (text-editor/cache-shape-text-content! shape-id content)
 
-  ;; The WASM design state may not be ready (e.g. while switching renderer
-  ;; with a text shape being edited). Skip the WASM layout calls in that case.
-  (when (initialized?)
+  ;; Skip when the GL/WASM context is not usable. Use `wasm/live?` (not
+  ;; `initialized?`) so context-restore reload can re-upload text while
+  ;; `reloading?` still blocks external app callers. Geometry shapes already
+  ;; use `live?` via `set-shape-base-props`; text must match that path.
+  (when (wasm/live?)
     (h/call wasm/internal-module "_clear_shape_text")
 
     (set-shape-vertical-align (get content :vertical-align))

frontend/translations/en.po

@@ -1770,7 +1770,7 @@ msgstr "At least 1 uppercase letter"
 
 #: src/app/main/ui/settings/password.cljs, src/app/main/ui/auth/register.cljs
 msgid "errors.weak-password.insufficient-digits"
-msgstr "At least 1 digit"
+msgstr "At least 1 number"
 
 #: src/app/main/ui/settings/password.cljs, src/app/main/ui/auth/register.cljs
 msgid "errors.weak-password.insufficient-special"

frontend/translations/es.po

@@ -1735,7 +1735,7 @@ msgstr "Al menos 1 letra mayúscula"
 
 #: src/app/main/ui/settings/password.cljs, src/app/main/ui/auth/register.cljs
 msgid "errors.weak-password.insufficient-digits"
-msgstr "Al menos 1 dígito"
+msgstr "Al menos 1 número"
 
 #: src/app/main/ui/settings/password.cljs, src/app/main/ui/auth/register.cljs
 msgid "errors.weak-password.insufficient-special"

plugins/CHANGELOG.md

@@ -8,6 +8,8 @@
 
 ### 🩹 Fixes
 
+- **plugins-runtime**: An interaction obtained from `Shape.interactions` now keeps addressing that interaction instead of the position it held when the array was read. Removing every interaction of a shape from a single read removes all of them rather than leaving some behind, and writing through a held interaction after an earlier one is removed no longer lands on a different interaction.
+- **plugins-runtime**: `Shape.removeInteraction()` now rejects an interaction belonging to a different shape with a validation error, instead of removing whichever interaction sat at the same position on the target shape.
 - **plugins-runtime**: `Library.createComponent()` now rejects invalid input (an empty shape list, or a shape inside a component copy) with a validation error instead of returning a component proxy pointing at nothing.
 - **plugins-runtime**: Setting an individual padding/margin side (`leftPadding`, `topMargin`, …) now re-derives the padding/margin type, switching to `multiple` when the four sides stop being symmetric (so the value is actually painted) and back to `simple` once top/bottom and left/right are mirrored again.
 

plugins/apps/plugin-api-test-suite/src/tests/interactions.test.ts

@@ -349,6 +349,70 @@ describe('Interactions', () => {
     expect(r.interactions.length).toBe(before - 1);
   });
 
+  // Removing an interaction shifts the ones after it, so draining a shape from
+  // a single read of the array must reach every interaction it returned. Both
+  // removal entry points are covered.
+  test('every interaction can be removed from one read of the array', async (ctx) => {
+    const r = rect(ctx);
+    r.addInteraction('click', { type: 'open-url', url: 'https://a.example' });
+    await ctx.penpot.waitForLayoutUpdate();
+    r.addInteraction('mouse-enter', {
+      type: 'open-url',
+      url: 'https://b.example',
+    });
+    await ctx.penpot.waitForLayoutUpdate();
+    expect(r.interactions).toHaveLength(2);
+
+    for (const interaction of r.interactions) {
+      interaction.remove();
+      await ctx.penpot.waitForLayoutUpdate();
+    }
+    expect(r.interactions).toHaveLength(0);
+  });
+
+  test('removeInteraction can drain a shape from one read of the array', async (ctx) => {
+    const r = rect(ctx);
+    r.addInteraction('click', { type: 'open-url', url: 'https://a.example' });
+    await ctx.penpot.waitForLayoutUpdate();
+    r.addInteraction('mouse-enter', {
+      type: 'open-url',
+      url: 'https://b.example',
+    });
+    await ctx.penpot.waitForLayoutUpdate();
+    expect(r.interactions).toHaveLength(2);
+
+    for (const interaction of r.interactions) {
+      r.removeInteraction(interaction);
+      await ctx.penpot.waitForLayoutUpdate();
+    }
+    expect(r.interactions).toHaveLength(0);
+  });
+
+  // A held interaction addresses itself rather than a position, so a write
+  // reaches it even once an earlier interaction has shifted it.
+  test('an interaction still writes to itself after an earlier one is removed', async (ctx) => {
+    const r = rect(ctx);
+    for (const trigger of ['click', 'mouse-enter', 'mouse-leave'] as const) {
+      r.addInteraction(trigger, {
+        type: 'open-url',
+        url: `https://${trigger}.example`,
+      });
+      await ctx.penpot.waitForLayoutUpdate();
+    }
+    const [first, , last] = r.interactions;
+
+    first.remove();
+    await ctx.penpot.waitForLayoutUpdate();
+    last.delay = 500;
+    await ctx.penpot.waitForLayoutUpdate();
+
+    expect(r.interactions.map((i) => i.trigger)).toEqual([
+      'mouse-enter',
+      'mouse-leave',
+    ]);
+    expect(r.interactions.map((i) => i.delay)).toEqual([null, 500]);
+  });
+
   test('interaction trigger can be changed', (ctx) => {
     const dest = board(ctx);
     const r = rect(ctx);

render-wasm/pnpm-workspace.yaml

@@ -2,5 +2,3 @@ storeDir: ../.pnpm-store
 
 allowBuilds:
   esbuild: true
-onlyBuiltDependencies:
-  - esbuild