🔧 Improve surface rendering performance

When tiles are invalidated (during shape updates or page loading), the old tile
content is now kept visible until new content is rendered to replace it. This
provides a smoother visual experience during updates.

.travis.yml

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

CHANGES.md

@@ -29,7 +29,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
-
+- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)
 
 ## 2.12.1
 

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

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

docker/devenv/files/nginx.conf

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

docker/images/docker-compose.yaml

@@ -130,12 +130,6 @@ services:
     environment:
       << : [*penpot-flags, *penpot-public-uri, *penpot-http-body-size, *penpot-secret-key]
 
-      ## The PREPL host. Mainly used for external programatic access to penpot backend
-      ## (example: admin). By default it will listen on `localhost` but if you are going to use
-      ## the `admin`, you will need to uncomment this and set the host to `0.0.0.0`.
-
-      # PENPOT_PREPL_HOST: 0.0.0.0
-
       ## Database connection parameters. Don't touch them unless you are using custom
       ## postgresql connection parameters.
 
@@ -151,16 +145,16 @@ services:
       ## Default configuration for assets storage: using filesystem based with all files
       ## stored in a docker volume.
 
-      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
-      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
+      PENPOT_OBJECTS_STORAGE_BACKEND: fs
+      PENPOT_OBJECTS_STORAGE_FS_DIRECTORY: /opt/data/assets
 
       ## Also can be configured to to use a S3 compatible storage.
 
       # AWS_ACCESS_KEY_ID: <KEY_ID>
       # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
-      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>
 
       ## Telemetry. When enabled, a periodical process will send anonymous data about this
       ## instance. Telemetry data will enable us to learn how the application is used,

docker/images/files/nginx.conf.template

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

docs/technical-guide/configuration.md

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

docs/user-guide/account-teams/index.njk

@@ -19,6 +19,12 @@ desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorial
       <p>Create and manage your teams</p>
     </a>
   </li>
+  <li>
+    <a href="/user-guide/account-teams/projects-files">
+      <h2>Projects and Files →</h2>
+      <p>Organize your work with projects and files</p>
+    </a>
+  </li>
   <li>
     <a href="/user-guide/account-teams/comments/">
       <h2>Comments →</h2>

docs/user-guide/account-teams/projects-files.njk

@@ -0,0 +1,107 @@
+---
+title: Projects and Files
+order: 3
+desc: Learn how to organize your work in Penpot. Create, manage and organize projects and files, work with drafts, and handle deleted items.
+---
+
+<h1 id="projects-files">Projects and Files</h1>
+<p class="main-paragraph">Projects and files are the core organizational structure in Penpot. Projects work like folders that contain multiple design files, helping you organize your work efficiently. Files are your actual design documents where you create boards, pages, and all your design elements.</p>
+<p class="main-paragraph">Understanding how to manage projects and files will help you keep your workspace organized and make it easier to collaborate with your team.</p>
+
+<h2 id="projects-management">Projects</h2>
+<p>Projects are containers that help you organize and group related design files together. Think of them as folders in a file system. You can create as many projects as you need to organize your work by client, product, feature, or any other structure that fits your workflow.</p>
+<p>If you're working with others, projects should be created inside a team so that team members can collaborate on the files within them. Projects created in your personal space ("Your Penpot") remain private to you.</p>
+<figure>
+  <img src="/img/files-projects/01-projects.webp" alt="Projects view in dashboard" />
+</figure>
+
+<h3 id="create-project">Create a project</h3>
+<p>To create a new project, use the <strong>+ New project</strong> button in the dashboard. You can also use the keyboard shortcut <kbd>+</kbd> when you're on the dashboard. A dialog will appear where you can enter the project name. Once created, the project will appear in your projects list.</p>
+<p>When you create a project, you can immediately start adding files to it, or create files first and move them into the project later.</p>
+
+<h3 id="edit-project">Edit a project</h3>
+<p>To edit a project's name, right-click on the project in the sidebar or click the three-dot menu next to the project name. Select <strong>Edit</strong> or <strong>Rename</strong> to change the project name. You can also update the project's profile picture from the same menu.</p>
+
+<h3 id="pin-project">Pin a project</h3>
+<p>Projects can be pinned to the sidebar for quick access. Right-click on a project and select <strong>Pin</strong> to keep it visible in the sidebar even when you have many projects. Pinned projects appear at the top of your projects list for easy access.</p>
+<p>To unpin a project, right-click on it and select <strong>Unpin</strong>. The project will remain in your list but won't be pinned to the sidebar anymore.</p>
+<figure>
+  <img src="/img/files-projects/04-pin-project.webp" alt="Pin project option" />
+</figure>
+
+<h3 id="move-project">Move a project</h3>
+<p>Projects can be moved between teams. To move a project, right-click on it and select <strong>Move to</strong> from the context menu. A dialog will appear showing all available teams where you can move the project. Select the destination team and confirm the move.</p>
+<figure>
+  <img src="/img/files-projects/06-move-project.webp" alt="Move project to another team" />
+</figure>
+<p>When you move a project to another team, all files within the project are moved along with it. Team members of the destination team will gain access to the project and its files according to their permissions.</p>
+<p class="advice">Moving a project to another team changes its ownership and access permissions. Make sure the destination team has the appropriate members and permissions for the work contained in the project.</p>
+
+<h3 id="delete-project">Delete a project</h3>
+<p>To delete a project, right-click on it and select <strong>Delete</strong> from the menu. You'll be asked to confirm the deletion. Keep in mind that deleting a project will also delete all files within it. Make sure you have backed up any important files before deleting a project.</p>
+<p class="advice">Deleted projects and their files are moved to the trash area where they can be restored or permanently deleted.</p>
+
+<h2 id="files-management">Files</h2>
+<p>Files are your design documents in Penpot. Each file contains pages, boards, and all the design elements you create. Files can be created within a project or in the drafts section, and you can move them between projects as needed.</p>
+
+<h3 id="create-file">Create a file</h3>
+<p>To create a new file, you have several options:</p>
+<ul>
+  <li>Click the <strong>+</strong> button in a project to create a file inside that project</li>
+  <li>Use the keyboard shortcut <kbd>+</kbd> when you have a project selected</li>
+  <li>Create a file directly in the drafts section if you're not ready to organize it into a project yet</li>
+</ul>
+<figure>
+  <img src="/img/files-projects/05-create-file.webp" alt="Create a new file" />
+</figure>
+<p>When creating a file, you'll be asked to give it a name. The file will open in the workspace where you can start designing immediately.</p>
+
+<h3 id="edit-file">Edit a file</h3>
+<p>To rename a file, right-click on the file card in the dashboard and select <strong>Rename</strong>, or click on the three-dot menu on the file card. Enter the new name and confirm the change. You can also access file settings and other options from the file's context menu.</p>
+
+<h3 id="move-file">Move a file</h3>
+<p>Files can be moved between projects, from drafts to a project, or even to projects in other teams. To move a file, right-click on the file card and select <strong>Move to</strong> from the context menu. A dialog will appear showing all available projects across your teams where you can choose the destination. Select the project where you want to move the file and confirm.</p>
+<p>You can also drag and drop files between projects in the dashboard for a quick way to reorganize your files within the same team.</p>
+<p>When moving a file to a project in another team, the file becomes accessible to members of that team according to their permissions. Moving a file doesn't affect its content or any shared libraries it might be using. Only its location in your project structure changes.</p>
+<p class="advice">When moving files between teams, be aware that this changes who has access to the file. Make sure the destination team has the appropriate members and permissions for the work contained in the file.</p>
+
+<h3 id="duplicate-file">Duplicate a file</h3>
+<p>To create a copy of an existing file, right-click on the file card and select <strong>Duplicate</strong>. The duplicated file will be created in the same location (project or drafts) with the same name plus "Copy" added to it. You can then rename or move it as needed.</p>
+<p>Duplicating a file creates a complete copy including all pages, boards, and design elements. This is useful when you want to create variations of a design or use a file as a starting point for a new project.</p>
+
+<h3 id="delete-file">Delete a file</h3>
+<p>To delete a file, right-click on the file card and select <strong>Delete</strong>. You'll be asked to confirm the deletion. The file will be moved to the trash area where it can be restored or permanently deleted later.</p>
+<p class="advice">Deleting a file doesn't immediately remove it permanently. You can recover deleted files from the trash area within a certain time period.</p>
+
+<h2 id="drafts">Drafts</h2>
+<p>The drafts section is a fixed, non-deletable space in your dashboard where you can create and store files that aren't part of any specific project yet. This is useful for quick sketches, experimental designs, or files you're not ready to organize into projects.</p>
+<figure>
+  <img src="/img/files-projects/02-drafts.webp" alt="Drafts section" />
+</figure>
+<p>Drafts appear in a dedicated section in the dashboard sidebar, separate from your projects. All team members can see and access files in the drafts section, depending on their permissions.</p>
+<p>You can create files directly in drafts, or move existing files from projects into drafts if you want to temporarily remove them from a project's organization. Files in drafts work exactly like files in projects - they have the same functionality and features.</p>
+<p>When you're ready to organize a file from drafts, you can move it into an appropriate project using the move option in the file's context menu.</p>
+
+<h2 id="trash-area">Trash area</h2>
+<p>When you delete projects or files, they are not removed permanently. Instead, they are moved to a trash area, a dedicated space for deleted content. This allows you to recover mistakenly deleted content or permanently remove items when you're sure you don't need them anymore.</p>
+<p>The trash applies to both files and projects. Items in the trash remain there for a certain period depending on your Penpot subscription plan before being automatically deleted permanently.</p>
+
+<h3 id="access-trash">Access the trash</h3>
+<p>A <strong>Trash</strong> section is accessible from the dashboard navigation. When you access it, you'll see all your deleted files and projects, each clearly labeled so you can easily identify what you want to restore or permanently delete.</p>
+<figure>
+  <img src="/img/files-projects/03-trash.webp" alt="Trash area" />
+</figure>
+
+<h3 id="trash-permissions">Trash permissions</h3>
+<p>Access to the trash and the actions you can perform depend on your role in the team:</p>
+<ul>
+  <li><strong>Owner, Admin, and Editor:</strong> Can view the trash, restore deleted items, and permanently delete items from the trash.</li>
+  <li><strong>Viewer:</strong> Cannot access the trash or manage deleted content.</li>
+</ul>
+
+<h3 id="restore-items">Restore items</h3>
+<p>To restore a deleted file or project, access the trash area and find the item you want to recover. Select the item and choose <strong>Restore</strong>. The item will be restored to its original location (the project it belonged to, or the drafts section if it wasn't in a project).</p>
+
+<h3 id="permanently-delete">Permanently delete items</h3>
+<p>If you're sure you don't need an item anymore, you can permanently delete it from the trash. Select the item and choose <strong>Permanently delete</strong>. This action cannot be undone, so make sure you really want to remove the item permanently.</p>
+<p class="advice">Items in the trash are automatically deleted after a certain period depending on your subscription plan. If you want to keep something, restore it before the auto-deletion period expires.</p>

docs/user-guide/design-systems/design-tokens.njk

@@ -455,6 +455,43 @@ ExtraBold Italic
 <p>A <strong>Typography composite token</strong> can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.</p>
 <p>When applying a Typography composite token to a layer, any previously applied <em>Typography composite token</em> or <em>style</em> will be detached. The same happens in reverse. Only one of them can be active at a time.</p>
 
+<h3 id="design-tokens-shadow">Shadow</h3>
+<p>Shadow tokens are composite entities that encapsulate the properties of one or more shadows into a single token definition. This token can contain a single shadow or an array of multiple shadows that can be reordered.</p>
+<p>Shadow tokens support both <strong>Drop Shadow</strong> and <strong>Inner Shadow</strong> types. When creating or editing a shadow token, you can select the type of shadow you want to use. The default selection is Drop Shadow.</p>
+<figure>
+  <img src="/img/design-tokens/37-tokens-shadow-individual.webp" alt="Shadow token creation with individual values" />
+</figure>
+
+<h4 id="design-tokens-shadow-properties">Shadow properties</h4>
+<p>Each shadow within a shadow token contains a set of properties that define how the shadow appears:</p>
+<ul>
+  <li><strong>Color:</strong> The color of the shadow. Accepts the same values as <a href="#design-tokens-color">color tokens</a> (Hex, RGB, RGBA, ARGB, HSL, HSLA), and you can reference existing color tokens. The color picker is available when defining the value.</li>
+  <li><strong>X offset:</strong> The horizontal offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Y offset:</strong> The vertical offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Blur:</strong> The blur radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Spread:</strong> The spread radius of the shadow. Can be unit or unitless. You can use a number or reference a <a href="#design-tokens-number">number</a> or <a href="#design-tokens-dimensions">dimension</a> token.</li>
+  <li><strong>Type:</strong> Whether the shadow is a drop shadow or an inner shadow. Selected via a dropdown menu, with Drop Shadow as the default.</li>
+</ul>
+<p>Each property within a shadow token can reference existing tokens or be assigned hardcoded values. Shadows can also reference other shadow tokens (the type of shadow must match when using references).</p>
+<p class="advice">Not all properties are mandatory to save a shadow token. Some can be empty (and will be computed as 0). Only the color property is mandatory. In an array of shadows, if any shadow does not have the color set, the form cannot be saved.</p>
+
+<h4 id="design-tokens-shadow-create">Creating shadow tokens</h4>
+<p>To create a shadow token, click on the <strong>+</strong> next to <strong>Shadow</strong> in the Tokens panel. Shadow tokens can be created in two ways:</p>
+<ul>
+  <li><strong>Individual values:</strong> You can create one shadow or multiple shadows with individual property values. Click the <strong>+</strong> button to add more shadows to the array. New shadows are added at the top of the list.</li>
+  <li><strong>Single reference:</strong> You can reference another existing shadow token. When using a single reference, you cannot add more than one shadow. The resolved value will display the shadow or list of shadows that the referenced token contains.</li>
+</ul>
+<figure>
+  <img src="/img/design-tokens/38-tokens-shadow-reference.webp" alt="Shadow token creation with reference" />
+</figure>
+<p>When creating a shadow with individual values, the color value starts empty, but the other inputs have default values (X: 4, Y: 4, Blur: 4, Spread: 0). You can reorder shadows by hovering over a shadow form and using the reorder button to drag it to a different position.</p>
+<p>You can also reference another existing shadow token instead of defining each property manually. When doing so, Penpot resolves all shadow properties from the referenced token.</p>
+
+<h4 id="design-tokens-shadow-apply">Applying shadow tokens</h4>
+<p>Shadow tokens can be applied to any layer type. Clicking on a shadow token will apply it to the selected layer. Right-clicking on a shadow token shows the context menu with the <strong>Shadow</strong> option to apply it.</p>
+<p class="advice">Text elements in CSS do not support inner shadows, but Penpot does, since it uses the filter property internally instead of the box-shadow property.</p>
+<p>When applying a shadow token, any existing shadow on the layer will be overridden (whether it's a raw shadow or an applied token shadow). If the token contains an array of shadows, each shadow will be added in the same order as in the creation form.</p>
+<p class="advice">In Penpot, an element can have multiple shadows, but only one token of the same type can be applied. This means that applying a second shadow token would override the first one, regardless of how many shadows the shape currently has.</p>
 
 
 

frontend/resources/templates/index.mustache

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

frontend/resources/templates/rasterizer.mustache

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

frontend/resources/templates/render.mustache

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

frontend/resources/wasm-playground/clips.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill,

frontend/resources/wasm-playground/masks.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent

frontend/resources/wasm-playground/paths.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, draw_star,

frontend/resources/wasm-playground/plus.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, allocBytes,

frontend/resources/wasm-playground/rects.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
       getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill

frontend/resources/wasm-playground/texts.html

@@ -23,7 +23,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
     import {
       init, assignCanvas, setupInteraction, useShape, setShapeChildren, addTextShape, hexToU32ARGB,getRandomInt, getRandomColor, getRandomFloat, addShapeSolidFill, addShapeSolidStrokeFill
     } from './js/lib.js';
@@ -102,4 +102,4 @@
     });
   </script>
 </body>
-</html>
+</html>

frontend/scripts/_helpers.js

@@ -27,9 +27,11 @@ export function startWorker() {
   });
 }
 
-export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
+export const BUILD_TS = process.env.BUILD_TS || Date.now();
+export const VERSION = process.env.VERSION || "develop";
+export const VERSION_TAG = process.env.VERSION_TAG || VERSION;
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -193,25 +195,25 @@ async function generateManifest() {
     render_main: "./js/render.js",
     rasterizer_main: "./js/rasterizer.js",
 
-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,
 
     importmap: JSON.stringify({
       "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
       }
     })
   };
@@ -222,11 +224,12 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
   const content = await fs.readFile(path, { encoding: "utf-8" });
 
-  const ts = Math.floor(new Date());
-
   context = Object.assign({}, context, {
-    ts: ts,
-    isDebug,
+    isDebug: IS_DEBUG,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
   });
 
   return mustache.render(content, context, partials);
@@ -390,7 +393,6 @@ async function generateSvgSprites() {
 }
 
 async function generateTemplates() {
-  const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
   const manifest = await generateManifest();
@@ -415,10 +417,7 @@ async function generateTemplates() {
   };
 
   const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
+    manifest: manifest
   };
 
   content = await renderTemplate(
@@ -487,7 +486,7 @@ export async function compileStyles() {
   await fs.mkdir("./resources/public/css", { recursive: true });
   await fs.writeFile("./resources/public/css/main.css", result);
 
-  if (isDebug) {
+  if (IS_DEBUG) {
     let debugCSS = await compileSassDebug(worker);
     await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }

frontend/scripts/build

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

frontend/scripts/build-storybook

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

frontend/shadow-cljs.edn

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

frontend/src/app/config.cljs

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

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

@@ -61,6 +61,11 @@
 ;; Def micro-benchmark iterations
 (def micro-benchmark-iterations 1e6)
 
+;; Performance logs
+(defonce ^:private longtask-observer* (atom nil))
+(defonce ^:private stall-timer* (atom nil))
+(defonce ^:private current-op* (atom nil))
+
 ;; --- CONTEXT
 
 (defn- collect-context
@@ -464,3 +469,72 @@
 (defn event
   [props]
   (ptk/data-event ::event props))
+
+;; --- DEVTOOLS PERF LOGGING
+
+(defn install-long-task-observer! []
+  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
+    (let [observer (js/PerformanceObserver.
+                    (fn [list _]
+                      (doseq [entry (.getEntries list)]
+                        (let [dur (.-duration entry)
+                              start (.-startTime entry)
+                              attrib (.-attribution entry)
+                              attrib-count (when attrib (.-length attrib))
+                              first-attrib (when (and attrib-count (> attrib-count 0)) (aget attrib 0))
+                              attrib-name (when first-attrib (.-name first-attrib))
+                              attrib-ctype (when first-attrib (.-containerType first-attrib))
+                              attrib-cid (when first-attrib (.-containerId first-attrib))
+                              attrib-csrc (when first-attrib (.-containerSrc first-attrib))]
+
+                          (.warn js/console (str "[perf] long task " (Math/round dur) "ms at " (Math/round start) "ms"
+                                                 (when first-attrib
+                                                   (str " attrib:name=" attrib-name
+                                                        " ctype=" attrib-ctype
+                                                        " cid=" attrib-cid
+                                                        " csrc=" attrib-csrc))))))))]
+      (.observe observer #js{:entryTypes #js["longtask"]})
+      (reset! longtask-observer* observer))))
+
+(defn start-event-loop-stall-logger!
+  "Log event loop stalls by measuring setInterval drift.
+  interval-ms: base interval
+  threshold-ms: drift over which we report"
+  [interval-ms threshold-ms]
+  (when (nil? @stall-timer*)
+    (let [last (atom (.now js/performance))
+          id (js/setInterval
+              (fn []
+                (let [now (.now js/performance)
+                      expected (+ @last interval-ms)
+                      drift (- now expected)
+                      current-op @current-op*
+                      measures (.getEntriesByType js/performance "measure")
+                      mlen (.-length measures)
+                      last-measure (when (> mlen 0) (aget measures (dec mlen)))
+                      meas-name (when last-measure (.-name last-measure))
+                      meas-detail (when last-measure (.-detail last-measure))
+                      meas-count (when meas-detail (unchecked-get meas-detail "count"))]
+                  (reset! last now)
+                  (when (> drift threshold-ms)
+                    (.warn js/console
+                           (str "[perf] event loop stall: " (Math/round drift) "ms"
+                                (when current-op (str " op=" current-op))
+                                (when meas-name (str " last=" meas-name))
+                                (when meas-count (str " count=" meas-count)))))))
+              interval-ms)]
+      (reset! stall-timer* id))))
+
+(defn init!
+  "Install perf observers in dev builds. Safe to call multiple times."
+  []
+  (when ^boolean js/goog.DEBUG
+    (install-long-task-observer!)
+    (start-event-loop-stall-logger! 50 100)
+    ;; Expose simple API on window for manual control in devtools
+    (let [api #js {:reset (fn []
+                            (try
+                              (.clearMarks js/performance)
+                              (.clearMeasures js/performance)
+                              (catch :default _ nil)))}]
+      (aset js/window "PenpotPerf" api))))

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

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

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

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

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

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

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

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

frontend/src/app/main/refs.cljs

@@ -305,7 +305,7 @@
   (l/derived #(dsh/lookup-shape % page-id shape-id) st/state =))
 
 (def workspace-page-objects
-  (l/derived dsh/lookup-page-objects st/state))
+  (l/derived dsh/lookup-page-objects st/state identical?))
 
 (def workspace-read-only?
   (l/derived :read-only? workspace-global))

frontend/src/app/main/ui/ds/z-index.scss

@@ -10,6 +10,7 @@ $z-index-200: 200;
 $z-index-300: 300;
 $z-index-400: 400;
 $z-index-500: 500;
+$z-index-600: 600;
 
 :global(:root) {
   --z-index-auto: #{$z-index-auto}; // Index for elements such as workspace, rulers ...
@@ -18,4 +19,5 @@ $z-index-500: 500;
   --z-index-set: #{$z-index-300}; // Index for configuration elements like modals, color picker, grid edition elements
   --z-index-dropdown: #{$z-index-400}; // Index for dropdown like elements, selects, menus, dropdowns
   --z-index-notifications: #{$z-index-500}; // Index for notification
+  --z-index-loaders: #{$z-index-600}; // Index for loaders
 }

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

@@ -23,6 +23,7 @@
 
         touched?   (and (contains? (:data @form) input-name)
                         (get-in @form [:touched input-name]))
+
         error      (get-in @form [:errors input-name])
 
         value      (get-in @form [:data input-name] "")
@@ -52,7 +53,8 @@
   (let [form      (mf/use-ctx context)
         disabled? (or (and (some? form)
                            (or (not (:valid @form))
-                               (seq (:external-errors @form))))
+                               (seq (:async-errors @form))
+                               (seq (:extra-errors @form))))
                       (true? disabled))
         handle-key-down-save
         (mf/use-fn

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

@@ -31,6 +31,7 @@
    [app.main.ui.releases.v2-10]
    [app.main.ui.releases.v2-11]
    [app.main.ui.releases.v2-12]
+   [app.main.ui.releases.v2-13]
    [app.main.ui.releases.v2-2]
    [app.main.ui.releases.v2-3]
    [app.main.ui.releases.v2-4]
@@ -103,4 +104,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.12")))
+  (rc/render-release-notes (assoc params :version "2.13")))

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

@@ -0,0 +1,118 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.releases.v2-13
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+(defmethod c/render-release-notes "2.13"
+  [{: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.13-slide-0.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Penpot 2.13 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)}
+          [:span {:class (stl/css :feature-title)}
+           "The first release of the year, and we’re just getting started 🚀"]
+
+          [:p  {:class (stl/css :feature-content)}
+           "This is our first release of the year, and it sets the tone for what’s coming next. We’re kicking off an exciting year where we’ll take Penpot to a whole new level, with improved performance, stronger design system foundations, long-requested features, and new capabilities that unlock better workflows for teams."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "This release brings two highlights the community has been asking for, along with solid improvements under the hood to keep everything fast and smooth."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "Let’s dive in!"]]
+
+         [:div {:class (stl/css :navigation)}
+          [:button {:class (stl/css :next-btn)
+                    :on-click next} "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.13-trash.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "The Trash"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "The Trash"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Deleting a file no longer means it’s gone forever. Introducing The Trash, a dedicated space in the dashboard where deleted files and projects live before being permanently removed."]
+
+          [:p {:class (stl/css :feature-content)}
+           "From here, you can recover content deleted by mistake or clean things up for good when you’re sure you don’t need them anymore. The Trash works for both files and projects, and items are automatically removed after a period of time depending on your Penpot plan."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Highly requested, long overdue, and now officially here."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "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.13-shadow-tokens.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Shadow tokens: Reusable shadows, at last!"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Shadow tokens: Reusable shadows, at last!"]]
+         [:div {:class (stl/css :feature)}
+
+          [:p {:class (stl/css :feature-content)}
+           "With Shadow tokens, we’re introducing our second composite token, right after Typography tokens. This is a big step forward for design systems in Penpot."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Until now, shadows couldn’t be defined as reusable styles the way colors could before color tokens existed. Shadow tokens change that. You can now create reusable, consistent shadows, made of one or multiple layers, fully tokenized and ready to scale across your designs."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Each shadow can reference existing tokens or use custom values, supports both Drop Shadow and Inner Shadow, and even allows shadow tokens to reference other shadow tokens. A brand-new capability, unlocked."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 2}]
+
+          [:button {:on-click finish
+                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+

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

@@ -0,0 +1,102 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.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.flexCenter;
+  @include deprecated.headlineSmallTypography;
+  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.headlineLargeTypography;
+  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.bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.feature-content {
+  @include deprecated.bodyMediumTypography;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+
+.feature-list {
+  @include deprecated.bodyMediumTypography;
+  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;
+}

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

@@ -308,6 +308,16 @@
      [:div {:class (stl/css :sign-info)}
       [:button {:on-click on-click} (tr "labels.retry")]]]))
 
+(mf/defc webgl-context-lost*
+  []
+  (let [on-reload (mf/use-fn #(js/location.reload))]
+    [:> error-container* {}
+     [:div {:class (stl/css :main-message)} (tr "errors.webgl-context-lost.main-message")]
+     [:div {:class (stl/css :desc-message)} (tr "errors.webgl-context-lost.desc-message")]
+     [:div {:class (stl/css :buttons-container)}
+      [:> button* {:variant "primary" :on-click on-reload}
+       (tr "labels.reload-page")]]]))
+
 (defn- generate-report
   [data]
   (try
@@ -437,6 +447,7 @@
                        (rx/of default)
                        (rx/throw cause)))))))
 
+
 (mf/defc exception-section*
   {::mf/private true}
   [{:keys [data route] :as props}]
@@ -469,6 +480,9 @@
       :service-unavailable
       [:> service-unavailable*]
 
+      :webgl-context-lost
+      [:> webgl-context-lost*]
+
       [:> internal-error* props])))
 
 (mf/defc context-wrapper*

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

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

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

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

frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs

@@ -33,9 +33,24 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+;; Coalesce sidebar hover highlights to 1 frame to avoid long tasks
+(defonce ^:private sidebar-hover-queue (atom {:enter #{} :leave #{}}))
+(defonce ^:private sidebar-hover-pending? (atom false))
+
+(defn- schedule-sidebar-hover-flush []
+  (when (compare-and-set! sidebar-hover-pending? false true)
+    (ts/raf
+     (fn []
+       (let [{:keys [enter leave]} (swap! sidebar-hover-queue (constantly {:enter #{} :leave #{}}))]
+         (reset! sidebar-hover-pending? false)
+         (when (seq leave)
+           (apply st/emit! (map dw/dehighlight-shape leave)))
+         (when (seq enter)
+           (apply st/emit! (map dw/highlight-shape enter))))))))
+
 (mf/defc layer-item-inner
   {::mf/wrap-props false}
-  [{:keys [item depth parent-size name-ref children ref
+  [{:keys [item depth parent-size name-ref children ref style
            ;; Flags
            read-only? highlighted? selected? component-tree?
            filtered? expanded? dnd-over? dnd-over-top? dnd-over-bot? hide-toggle?
@@ -82,7 +97,8 @@
                     :dnd-over dnd-over?
                     :dnd-over-top dnd-over-top?
                     :dnd-over-bot dnd-over-bot?
-                    :root-board parent-board?)}
+                    :root-board parent-board?)
+            :style style}
       [:span {:class (stl/css-case
                       :tab-indentation true
                       :filtered filtered?)
@@ -166,10 +182,12 @@
 
      children]))
 
+;; Memoized for performance
 (mf/defc layer-item
   {::mf/props :obj
-   ::mf/memo true}
-  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
+   ::mf/wrap [mf/memo]}
+  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted style render-children?]
+    :or {render-children? true}}]
   (let [id                (:id item)
         blocked?          (:blocked item)
         hidden?           (:hidden item)
@@ -246,13 +264,21 @@
         (mf/use-fn
          (mf/deps id)
          (fn [_]
-           (st/emit! (dw/highlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (conj enter id))
+                                            (assoc :leave (disj leave id)))))
+           (schedule-sidebar-hover-flush)))
 
         on-pointer-leave
         (mf/use-fn
          (mf/deps id)
          (fn [_]
-           (st/emit! (dw/dehighlight-shape id))))
+           (swap! sidebar-hover-queue (fn [{:keys [enter leave] :as q}]
+                                        (-> q
+                                            (assoc :enter (disj enter id))
+                                            (assoc :leave (conj leave id)))))
+           (schedule-sidebar-hover-flush)))
 
         on-context-menu
         (mf/use-fn
@@ -338,14 +364,18 @@
         component-tree? (or component-child? (ctk/instance-root? item) (ctk/instance-head? item))
 
         enable-drag      (mf/use-fn #(reset! drag-disabled* false))
-        disable-drag     (mf/use-fn #(reset! drag-disabled* true))]
+        disable-drag     (mf/use-fn #(reset! drag-disabled* true))
+
+        ;; Lazy loading of child elements via IntersectionObserver
+        children-count*  (mf/use-state 0)
+        children-count   (deref children-count*)
+        lazy-ref         (mf/use-ref nil)
+        observer-var     (mf/use-var nil)
+        chunk-size       50]
 
     (mf/with-effect [selected? selected]
       (let [single? (= (count selected) 1)
             node (mf/ref-val ref)
-            ;; NOTE: Neither get-parent-at nor get-parent-with-selector
-            ;; work if the component template changes, so we need to
-            ;; seek for an alternate solution. Maybe use-context?
             scroll-node (dom/get-parent-with-data node "scroll-container")
             parent-node (dom/get-parent-at node 2)
             first-child-node (dom/get-first-child parent-node)
@@ -363,6 +393,61 @@
         #(when (some? subid)
            (rx/dispose! subid))))
 
+    ;; Setup scroll-driven lazy loading when expanded
+    ;; and ensures selected children are loaded immediately
+    (mf/with-effect [expanded? (:shapes item) selected]
+      (let [shapes-vec (:shapes item)
+            total (count shapes-vec)]
+        (if expanded?
+          (let [;; Children are rendered in reverse order, so index 0 in render = last in shapes-vec
+                ;; Find if any selected id is a direct child and get its render index
+                selected-child-render-idx
+                (when (and (> total chunk-size) (seq selected))
+                  (let [shapes-reversed (vec (reverse shapes-vec))]
+                    (some (fn [sel-id]
+                            (let [idx (.indexOf shapes-reversed sel-id)]
+                              (when (>= idx 0) idx)))
+                          selected)))
+                ;; Load at least enough to include the selected child plus extra
+                ;; for context (so it can be centered in the scroll view)
+                min-count (if selected-child-render-idx
+                            (+ selected-child-render-idx chunk-size)
+                            chunk-size)
+                current @children-count*
+                new-count (min total (max current chunk-size min-count))]
+            (reset! children-count* new-count))
+          (reset! children-count* 0)))
+      (fn []
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))))
+
+    ;; Re-observe sentinel whenever children-count changes (sentinel moves)
+    (mf/with-effect [children-count expanded?]
+      (let [total (count (:shapes item))
+            node (mf/ref-val ref)
+            scroll-node (dom/get-parent-with-data node "scroll-container")
+            lazy-node (mf/ref-val lazy-ref)]
+        ;; Disconnect previous observer
+        (when-let [obs ^js @observer-var]
+          (.disconnect obs)
+          (reset! observer-var nil))
+        ;; Setup new observer if there are more children to load
+        (when (and expanded?
+                   (< children-count total)
+                   scroll-node
+                   lazy-node)
+          (let [cb (fn [entries]
+                     (when (and (seq entries)
+                                (.-isIntersecting (first entries)))
+                       ;; Load next chunk when sentinel intersects
+                       (let [current @children-count*
+                             next-count (min total (+ current chunk-size))]
+                         (reset! children-count* next-count))))
+                observer (js/IntersectionObserver. cb #js {:root scroll-node})]
+            (.observe observer lazy-node)
+            (reset! observer-var observer)))))
+
     [:& layer-item-inner
      {:ref dref
       :item item
@@ -387,24 +472,32 @@
       :on-enable-drag enable-drag
       :on-disable-drag disable-drag
       :on-toggle-visibility toggle-visibility
-      :on-toggle-blocking toggle-blocking}
+      :on-toggle-blocking toggle-blocking
+      :style style}
 
-     (when (and (:shapes item) expanded?)
+     (when (and render-children?
+                (:shapes item)
+                expanded?)
        [:div {:class (stl/css-case
                       :element-children true
                       :parent-selected selected?
                       :sticky-children parent-board?)
               :data-testid (dm/str "children-" id)}
-        (for [[index id] (reverse (d/enumerate (:shapes item)))]
-          (when-let [item (get objects id)]
-            [:& layer-item
-             {:item item
-              :highlighted highlighted
-              :selected selected
-              :index index
-              :objects objects
-              :key (dm/str id)
-              :sortable? sortable?
-              :depth depth
-              :parent-size parent-size
-              :component-child? component-tree?}]))])]))
+        (let [all-children (reverse (d/enumerate (:shapes item)))
+              visible      (take children-count all-children)]
+          (for [[index id] visible]
+            (when-let [item (get objects id)]
+              [:& layer-item
+               {:item item
+                :highlighted highlighted
+                :selected selected
+                :index index
+                :objects objects
+                :key (dm/str id)
+                :sortable? sortable?
+                :depth depth
+                :parent-size parent-size
+                :component-child? component-tree?}])))
+        (when (< children-count (count (:shapes item)))
+          [:div {:ref lazy-ref
+                 :style {:min-height 1}}])])]))

frontend/src/app/main/ui/workspace/sidebar/options.cljs

@@ -116,13 +116,29 @@
         (->> (dm/get-in grid-edition [edition :selected])
              (map #(dm/get-in objects [edition :layout-grid-cells %])))
 
-        shapes-with-children
-        (mf/with-memo [selected objects shapes]
-          (let [xform    (comp (remove nil?)
-                               (mapcat #(cfh/get-children-ids objects %)))
-                selected (into selected xform selected)]
-            (sequence (keep (d/getf objects)) selected)))
+        shapes-with-children*
+        (mf/use-state nil)
 
+        _ (mf/use-effect
+           (mf/deps selected objects shapes)
+           (fn []
+             (reset! shapes-with-children* nil)
+             (let [result
+                   (loop [queue   (into #queue [] selected)
+                          visited selected]
+                     (if-let [id (peek queue)]
+                       (let [shape    (get objects id)
+                             children (:shapes shape)]
+                         (if (seq children)
+                           (let [new-children (remove visited children)]
+                             (recur (into (pop queue) new-children)
+                                    (into visited new-children)))
+                           (recur (pop queue) visited)))
+                       (sequence (keep (d/getf objects)) visited)))]
+               (reset! shapes-with-children* result))))
+
+        shapes-with-children
+        (deref shapes-with-children*)
 
         total-selected
         (count selected)]

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -13,6 +13,7 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
+   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar*]]
@@ -22,9 +23,11 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.badge :refer [badge-notification]]
+   [app.render-wasm.api :as wasm.api]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.timers :as timers]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -52,6 +55,8 @@
              refs/workspace-data
              =))
 
+
+
 ;; --- Page Item
 
 (mf/defc page-item
@@ -63,6 +68,22 @@
         navigate-fn  (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dcm/go-to-workspace :page-id id)))
         read-only?   (mf/use-ctx ctx/workspace-read-only?)
 
+        on-click
+        (mf/use-fn
+         (mf/deps id)
+         (fn []
+           ;; when using the wasm renderer, apply a blur effect to the viewport canvas
+           (if (features/active-feature? @st/state "render-wasm/v1")
+             (do
+               (wasm.api/capture-canvas-pixels)
+               (wasm.api/apply-canvas-blur)
+               ;; NOTE: it seems we need two RAF so the blur is actually applied and visible
+               ;;       in the canvas :(
+               (timers/raf
+                (fn []
+                  (timers/raf navigate-fn))))
+             (navigate-fn))))
+
         on-delete
         (mf/use-fn
          (mf/deps id)
@@ -155,7 +176,7 @@
                     :selected selected?)
             :data-testid (dm/str "page-" id)
             :tab-index "0"
-            :on-click navigate-fn
+            :on-click on-click
             :on-double-click on-double-click
             :on-context-menu on-context-menu}
       [:div {:class (stl/css :page-icon)}

frontend/src/app/main/ui/workspace/tokens/import/modal.cljs

@@ -273,4 +273,4 @@
                   {:label (tr "workspace.tokens.import-menu-folder-option") :value :folder}]
         :on-click handle-import-action
         :text-render render-button-text
-        :default :zip}]]]))
+        :default :file}]]]))

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs

@@ -236,12 +236,14 @@
    (on-composite-input-change form field value false))
   ([form field value trim?]
    (letfn [(clean-errors [errors]
-             (-> errors
-                 (dissoc field)
-                 (not-empty)))]
+             (some-> errors
+                     (update :value #(when (map? %) (dissoc % field)))
+                     (update :value #(when (seq %) %))
+                     (not-empty)))]
      (swap! form (fn [state]
                    (-> state
                        (assoc-in [:data :value field] (if trim? (str/trim value) value))
+                       (assoc-in [:touched :value field] true)
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
@@ -257,6 +259,9 @@
         value
         (get-in @form [:data :value input-name] "")
 
+        touched?
+        (get-in @form [:touched :value input-name])
+
         resolve-stream
         (mf/with-memo [token]
           (if-let [value (get-in token [:value input-name])]
@@ -284,7 +289,7 @@
                                 :hint-message (:message hint)
                                 :hint-type (:type hint)})
         props
-        (if error
+        (if (and touched? error)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
           props)
@@ -332,6 +337,7 @@
                                  message (tr "workspace.tokens.resolved-value" (or resolved-value value))]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
+                             (swap! form update :async-errors dissoc :reference)
                              (if (= input-value (str resolved-value))
                                (reset! hint* {})
                                (reset! hint* {:message message :type "hint"})))))))]

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -101,13 +101,6 @@
         active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
 
-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (reset! active-tab* new-tab))))
-
         token
         (mf/with-memo [token]
           (or token {:type token-type}))
@@ -144,6 +137,17 @@
         (fm/use-form :schema schema
                      :initial initial)
 
+        on-toggle-tab
+        (mf/use-fn
+         (mf/deps form)
+         (fn [new-tab]
+           (let [new-tab (keyword new-tab)]
+             (if (= new-tab :reference)
+               (swap! form assoc-in [:async-errors :reference]
+                      {:message "Need valid reference"})
+               (swap! form update :async-errors dissoc :reference))
+             (reset! active-tab* new-tab))))
+
         warning-name-change?
         (not= (get-in @form [:data :name])
               (:name initial))

frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs

@@ -291,6 +291,7 @@
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]
+
        (if (= active-tab :reference)
          [:reference {:optional false} ::sm/text]
          [:reference {:optional true} [:maybe :string]])]]

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -312,6 +312,11 @@
                                          (js/console.error "Error initializing canvas context:" e)
                                          false))]
                            (reset! canvas-init? init?)
+                           (when init?
+                             ;; Restore previous canvas pixels immediately after context initialization
+                             ;; This happens before initialize-viewport is called
+                             (wasm.api/apply-canvas-blur)
+                             (wasm.api/restore-previous-canvas-pixels))
                            (when-not init?
                              (js/alert "WebGL not supported")
                              (st/emit! (dcm/go-to-dashboard-recent))))))))
@@ -340,6 +345,7 @@
 
     (mf/with-effect [@canvas-init? zoom vbox background]
       (when (and @canvas-init? (not @initialized?))
+        (wasm.api/clear-canvas-pixels)
         (wasm.api/initialize-viewport base-objects zoom vbox background)
         (reset! initialized? true)))
 

frontend/src/app/plugins/shape.cljs

@@ -1185,7 +1185,6 @@
                        {:cmd :export-shapes
                         :profile-id (:profile-id @st/state)
                         :wait true
-                        :skip-children (:skip-children value false)
                         :exports [{:file-id   file-id
                                    :page-id   page-id
                                    :object-id id

frontend/src/app/render_wasm/api.cljs

@@ -10,6 +10,7 @@
    ["react-dom/server" :as rds]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.exceptions :as ex]
    [app.common.files.helpers :as cfh]
    [app.common.logging :as log]
    [app.common.math :as mth]
@@ -21,14 +22,15 @@
    [app.common.types.text :as txt]
    [app.common.uuid :as uuid]
    [app.config :as cf]
-   [app.main.data.render-wasm :as drw]
    [app.main.refs :as refs]
    [app.main.render :as render]
    [app.main.store :as st]
    [app.main.ui.shapes.text]
    [app.main.worker :as mw]
    [app.render-wasm.api.fonts :as f]
+   [app.render-wasm.api.shapes :as shapes]
    [app.render-wasm.api.texts :as t]
+   [app.render-wasm.api.webgl :as webgl]
    [app.render-wasm.deserializers :as dr]
    [app.render-wasm.helpers :as h]
    [app.render-wasm.mem :as mem]
@@ -37,7 +39,6 @@
    [app.render-wasm.serializers :as sr]
    [app.render-wasm.serializers.color :as sr-clr]
    [app.render-wasm.svg-filters :as svg-filters]
-   ;; FIXME: rename; confunsing name
    [app.render-wasm.wasm :as wasm]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -68,12 +69,25 @@
 (def ^:const DEBOUNCE_DELAY_MS 100)
 (def ^:const THROTTLE_DELAY_MS 10)
 
+;; Number of shapes to process before yielding to browser
+(def ^:const SHAPES_CHUNK_SIZE 100)
+;; Threshold below which we use synchronous processing (no chunking overhead)
+(def ^:const ASYNC_THRESHOLD 100)
+
 (def dpr
   (if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
 
 (def noop-fn
   (constantly nil))
 
+(defn- yield-to-browser
+  "Returns a promise that resolves after yielding to the browser's event loop.
+   Uses requestAnimationFrame for smooth visual updates during loading."
+  []
+  (p/create
+   (fn [resolve _reject]
+     (js/requestAnimationFrame (fn [_] (resolve nil))))))
+
 ;; Based on app.main.render/object-svg
 (mf/defc object-svg
   {::mf/props :obj}
@@ -120,17 +134,56 @@
               (aget buffer 3))
       (set! wasm/internal-frame-id nil))))
 
+(defn render-preview!
+  "Render a lightweight preview without tile caching.
+   Used during progressive loading for fast feedback."
+  []
+  (when (and wasm/context-initialized? (not @wasm/context-lost?))
+    (h/call wasm/internal-module "_render_preview")))
+
 
 (defonce pending-render (atom false))
+(defonce shapes-loading? (atom false))
+(defonce deferred-render? (atom false))
+
+(defn- register-deferred-render!
+  []
+  (reset! deferred-render? true))
 
 (defn request-render
   [_requester]
-  (when (and wasm/context-initialized? (not @pending-render) (not @wasm/context-lost?))
-    (reset! pending-render true)
-    (js/requestAnimationFrame
-     (fn [ts]
-       (reset! pending-render false)
-       (render ts)))))
+  (when (and wasm/context-initialized? (not @wasm/context-lost?))
+    (if @shapes-loading?
+      (register-deferred-render!)
+      (when-not @pending-render
+        (reset! pending-render true)
+        (let [frame-id
+              (js/requestAnimationFrame
+               (fn [ts]
+                 (reset! pending-render false)
+                 (set! wasm/internal-frame-id nil)
+                 (render ts)))]
+          (set! wasm/internal-frame-id frame-id))))))
+
+(defn- begin-shapes-loading!
+  []
+  (reset! shapes-loading? true)
+  (let [frame-id wasm/internal-frame-id
+        was-pending @pending-render]
+    (when frame-id
+      (js/cancelAnimationFrame frame-id)
+      (set! wasm/internal-frame-id nil))
+    (reset! pending-render false)
+    (reset! deferred-render? was-pending)))
+
+(defn- end-shapes-loading!
+  []
+  (let [was-loading (compare-and-set! shapes-loading? true false)]
+    (reset! deferred-render? false)
+    ;; Always trigger a render after loading completes
+    ;; This ensures shapes are displayed even if no deferred render was requested
+    (when was-loading
+      (request-render "set-objects:flush"))))
 
 (declare get-text-dimensions)
 
@@ -279,30 +332,6 @@
   [string]
   (+ (count string) 1))
 
-(defn- create-webgl-texture-from-image
-  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
-  [gl image-element]
-  (let [texture (.createTexture ^js gl)]
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
-    texture))
-
-(defn- get-webgl-context
-  "Gets the WebGL context from the WASM module"
-  []
-  (when wasm/context-initialized?
-    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
-      (when gl-obj
-        ;; Get the current WebGL context from Emscripten
-        ;; The GL object has a currentContext property that contains the context handle
-        (let [current-ctx (.-currentContext ^js gl-obj)]
-          (when current-ctx
-            (.-GLctx ^js current-ctx)))))))
 
 (defn- get-texture-id-for-gl-object
   "Registers a WebGL texture with Emscripten's GL object system and returns its ID"
@@ -332,8 +361,8 @@
        (->> (retrieve-image url)
             (rx/map
              (fn [img]
-               (when-let [gl (get-webgl-context)]
-                 (let [texture (create-webgl-texture-from-image gl img)
+               (when-let [gl (webgl/get-webgl-context)]
+                 (let [texture (webgl/create-webgl-texture-from-image gl img)
                        texture-id (get-texture-id-for-gl-object texture)
                        width  (.-width ^js img)
                        height (.-height ^js img)
@@ -919,24 +948,12 @@
         id           (dm/get-prop shape :id)
         type         (dm/get-prop shape :type)
 
-        parent-id    (get shape :parent-id)
         masked       (get shape :masked-group)
-        selrect      (get shape :selrect)
-        constraint-h (get shape :constraints-h)
-        constraint-v (get shape :constraints-v)
-        clip-content (if (= type :frame)
-                       (not (get shape :show-content))
-                       false)
-        rotation     (get shape :rotation)
-        transform    (get shape :transform)
 
         fills        (get shape :fills)
         strokes      (if (= type :group)
                        [] (get shape :strokes))
         children     (get shape :shapes)
-        blend-mode   (get shape :blend-mode)
-        opacity      (get shape :opacity)
-        hidden       (get shape :hidden)
         content      (let [content (get shape :content)]
                        (if (= type :text)
                          (ensure-text-content content)
@@ -945,22 +962,12 @@
         grow-type    (get shape :grow-type)
         blur         (get shape :blur)
         svg-attrs    (get shape :svg-attrs)
-        shadows      (get shape :shadow)
-        corners      (map #(get shape %) [:r1 :r2 :r3 :r4])]
+        shadows      (get shape :shadow)]
 
-    (use-shape id)
-    (set-parent-id parent-id)
-    (set-shape-type type)
-    (set-shape-clip-content clip-content)
-    (set-shape-constraints constraint-h constraint-v)
+    (shapes/set-shape-base-props shape)
 
-    (set-shape-rotation rotation)
-    (set-shape-transform transform)
-    (set-shape-blend-mode blend-mode)
-    (set-shape-opacity opacity)
-    (set-shape-hidden hidden)
+    ;; Remaining properties that need separate calls (variable-length or conditional)
     (set-shape-children children)
-    (set-shape-corners corners)
     (set-shape-blur blur)
     (when (= type :group)
       (set-masked (boolean masked)))
@@ -979,7 +986,7 @@
       (set-shape-grow-type grow-type))
 
     (set-shape-layout shape)
-    (set-shape-selrect selrect)
+    (set-layout-data shape)
 
     (let [pending_thumbnails (into [] (concat
                                        (set-shape-text-content id content)
@@ -1035,29 +1042,143 @@
   (let [{:keys [thumbnails full]} (set-object shape)]
     (process-pending [shape] thumbnails full noop-fn)))
 
+(defn- process-shapes-chunk
+  "Process a chunk of shapes synchronously, returning accumulated pending operations.
+   Returns {:thumbnails [...] :full [...] :next-index n}"
+  [shapes start-index chunk-size thumbnails-acc full-acc]
+  (let [total (count shapes)
+        end-index (min total (+ start-index chunk-size))]
+    (loop [index start-index
+           t-acc thumbnails-acc
+           f-acc full-acc]
+      (if (< index end-index)
+        (let [shape (nth shapes index)
+              {:keys [thumbnails full]} (set-object shape)]
+          (recur (inc index)
+                 (into t-acc thumbnails)
+                 (into f-acc full)))
+        {:thumbnails t-acc
+         :full f-acc
+         :next-index end-index}))))
+
+(defn- set-objects-async
+  "Asynchronously process shapes in chunks, yielding to the browser between chunks.
+   Returns a promise that resolves when all shapes are processed.
+   
+   Renders a preview only periodically during loading to show progress,
+   then does a full tile-based render at the end."
+  [shapes render-callback]
+  (let [total-shapes (count shapes)
+        total-chunks (mth/ceil (/ total-shapes SHAPES_CHUNK_SIZE))
+        ;; Render at 25%, 50%, 75% of loading
+        render-at-chunks (set [(mth/floor (* total-chunks 0.25))
+                               (mth/floor (* total-chunks 0.5))
+                               (mth/floor (* total-chunks 0.75))])]
+    (p/create
+     (fn [resolve _reject]
+       (letfn [(process-next-chunk [index thumbnails-acc full-acc chunk-count]
+                 (if (< index total-shapes)
+                   ;; Process one chunk
+                   (let [{:keys [thumbnails full next-index]}
+                         (process-shapes-chunk shapes index SHAPES_CHUNK_SIZE
+                                               thumbnails-acc full-acc)
+                         new-chunk-count (inc chunk-count)]
+                     ;; Only render at specific progress milestones
+                     (when (contains? render-at-chunks new-chunk-count)
+                       (render-preview!))
+
+                     ;; Yield to browser, then continue with next chunk
+                     (-> (yield-to-browser)
+                         (p/then (fn [_]
+                                   (process-next-chunk next-index thumbnails full new-chunk-count)))))
+                   ;; All chunks done - finalize
+                   (do
+                     (perf/end-measure "set-objects")
+                     (process-pending shapes thumbnails-acc full-acc noop-fn
+                                      (fn []
+                                        (end-shapes-loading!)
+                                        (if render-callback
+                                          (render-callback)
+                                          (render-finish))
+                                        (ug/dispatch! (ug/event "penpot:wasm:set-objects"))
+                                        (resolve nil))))))]
+         (process-next-chunk 0 [] [] 0))))))
+
+(defn- set-objects-sync
+  "Synchronously process all shapes (for small shape counts)."
+  [shapes render-callback]
+  (let [total-shapes (count shapes)
+        {:keys [thumbnails full]}
+        (loop [index 0 thumbnails-acc [] full-acc []]
+          (if (< index total-shapes)
+            (let [shape (nth shapes index)
+                  {:keys [thumbnails full]} (set-object shape)]
+              (recur (inc index)
+                     (into thumbnails-acc thumbnails)
+                     (into full-acc full)))
+            {:thumbnails thumbnails-acc :full full-acc}))]
+    (perf/end-measure "set-objects")
+    (process-pending shapes thumbnails full noop-fn
+                     (fn []
+                       (if render-callback
+                         (render-callback)
+                         (render-finish))
+                       (ug/dispatch! (ug/event "penpot:wasm:set-objects"))))))
+
+(defn- shapes-in-tree-order
+  "Returns shapes sorted in tree order (parents before children).
+   This ensures parent shapes are processed before their children,
+   maintaining proper shape reference consistency in WASM."
+  [objects]
+  ;; Get IDs in tree order starting from root (uuid/zero)
+  ;; If root doesn't exist (e.g., filtered thumbnail data), fall back to
+  ;; finding top-level shapes (those without a parent in objects) and
+  ;; traversing from there.
+  (if (contains? objects uuid/zero)
+    ;; Normal case: traverse from root
+    (let [ordered-ids (cfh/get-children-ids-with-self objects uuid/zero)]
+      (into []
+            (keep #(get objects %))
+            ordered-ids))
+    ;; Fallback for filtered data (thumbnails): find top-level shapes and traverse
+    (let [;; Find shapes whose parent is not in the objects map (top-level in this subset)
+          top-level-ids (->> (vals objects)
+                             (filter (fn [shape]
+                                       (not (contains? objects (:parent-id shape)))))
+                             (map :id))
+          ;; Get all children in order for each top-level shape
+          all-ordered-ids (into []
+                                (mapcat #(cfh/get-children-ids-with-self objects %))
+                                top-level-ids)]
+      (into []
+            (keep #(get objects %))
+            all-ordered-ids))))
+
 (defn set-objects
+  "Set all shape objects for rendering.
+
+   Shapes are processed in tree order (parents before children)
+   to maintain proper shape reference consistency in WASM."
   ([objects]
    (set-objects objects nil))
   ([objects render-callback]
    (perf/begin-measure "set-objects")
-   (let [shapes        (into [] (vals objects))
-         total-shapes  (count shapes)
-         ;; Collect pending operations - set-object returns {:thumbnails [...] :full [...]}
-         {:keys [thumbnails full]}
-         (loop [index 0 thumbnails-acc [] full-acc []]
-           (if (< index total-shapes)
-             (let [shape    (nth shapes index)
-                   {:keys [thumbnails full]} (set-object shape)]
-               (recur (inc index)
-                      (into thumbnails-acc thumbnails)
-                      (into full-acc full)))
-             {:thumbnails thumbnails-acc :full full-acc}))]
-     (perf/end-measure "set-objects")
-     (process-pending shapes thumbnails full noop-fn
-                      (fn []
-                        (when render-callback (render-callback))
-                        (render-finish)
-                        (ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))
+   (let [shapes (shapes-in-tree-order objects)
+         total-shapes (count shapes)]
+     (if (< total-shapes ASYNC_THRESHOLD)
+       (set-objects-sync shapes render-callback)
+       (do
+         (begin-shapes-loading!)
+         (try
+           (-> (set-objects-async shapes render-callback)
+               (p/catch (fn [error]
+                          (end-shapes-loading!)
+                          (js/console.error "Async WASM shape loading failed" error))))
+           (catch :default error
+             (end-shapes-loading!)
+             (js/console.error "Async WASM shape loading failed" error)
+             (throw error)))
+         nil)))))
 
 (defn clear-focus-mode
   []
@@ -1236,7 +1357,8 @@
   (dom/prevent-default event)
   (reset! wasm/context-lost? true)
   (log/warn :hint "WebGL context lost")
-  (st/emit! (drw/context-lost)))
+  (ex/raise :type :webgl-context-lost
+            :hint "WebGL context lost"))
 
 (defn init-canvas-context
   [canvas]
@@ -1383,8 +1505,9 @@
         all-children
         (->> ids
              (mapcat #(cfh/get-children-with-self objects %)))]
+
     (h/call wasm/internal-module "_init_shapes_pool" (count all-children))
-    (run! (partial set-object objects) all-children)
+    (run! set-object all-children)
 
     (let [content (-> (calculate-bool* bool-type ids)
                       (path.impl/path-data))]
@@ -1447,6 +1570,12 @@
 
       result)))
 
+(defn apply-canvas-blur
+  []
+  (when wasm/canvas
+    (dom/set-style! wasm/canvas "filter" "blur(4px)")))
+
+
 (defn init-wasm-module
   [module]
   (let [default-fn (unchecked-get module "default")
@@ -1468,3 +1597,8 @@
                 (js/console.error cause)
                 (p/resolved false)))))
       (p/resolved false))))
+
+;; Re-export public WebGL functions
+(def capture-canvas-pixels webgl/capture-canvas-pixels)
+(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
+(def clear-canvas-pixels webgl/clear-canvas-pixels)

frontend/src/app/render_wasm/api/shapes.cljs

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

frontend/src/app/render_wasm/api/webgl.cljs

@@ -0,0 +1,166 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.render-wasm.api.webgl
+  "WebGL utilities for pixel capture and rendering"
+  (:require
+   [app.common.logging :as log]
+   [app.render-wasm.wasm :as wasm]
+   [app.util.dom :as dom]))
+
+(defn get-webgl-context
+  "Gets the WebGL context from the WASM module"
+  []
+  (when wasm/context-initialized?
+    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
+      (when gl-obj
+        ;; Get the current WebGL context from Emscripten
+        ;; The GL object has a currentContext property that contains the context handle
+        (let [current-ctx (.-currentContext ^js gl-obj)]
+          (when current-ctx
+            (.-GLctx ^js current-ctx)))))))
+
+(defn create-webgl-texture-from-image
+  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
+  [gl image-element]
+  (let [texture (.createTexture ^js gl)]
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+    texture))
+
+;; FIXME: temporary function until we are able to keep the same <canvas> across pages.
+(defn- draw-imagedata-to-webgl
+  "Draws ImageData to a WebGL2 context by creating a texture"
+  [gl image-data]
+  (let [width (.-width ^js image-data)
+        height (.-height ^js image-data)
+        texture (.createTexture ^js gl)]
+    ;; Bind texture and set parameters
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-data)
+
+    ;; Set up viewport
+    (.viewport ^js gl 0 0 width height)
+
+    ;; Vertex & Fragment shaders
+    ;; Since we are only calling this function once (on page switch), we don't need
+    ;; to cache the compiled shaders somewhere else (cannot be reused in a differen context).
+    (let [vertex-shader-source "#version 300 es
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}"
+          fragment-shader-source "#version 300 es
+precision highp float;
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+out vec4 fragColor;
+void main() {
+  fragColor = texture(u_texture, v_texCoord);
+}"
+          vertex-shader (.createShader ^js gl (.-VERTEX_SHADER ^js gl))
+          fragment-shader (.createShader ^js gl (.-FRAGMENT_SHADER ^js gl))
+          program (.createProgram ^js gl)]
+      (.shaderSource ^js gl vertex-shader vertex-shader-source)
+      (.compileShader ^js gl vertex-shader)
+      (when-not (.getShaderParameter ^js gl vertex-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Vertex shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl vertex-shader)))
+
+      (.shaderSource ^js gl fragment-shader fragment-shader-source)
+      (.compileShader ^js gl fragment-shader)
+      (when-not (.getShaderParameter ^js gl fragment-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Fragment shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl fragment-shader)))
+
+      (.attachShader ^js gl program vertex-shader)
+      (.attachShader ^js gl program fragment-shader)
+      (.linkProgram ^js gl program)
+
+      (if (.getProgramParameter ^js gl program (.-LINK_STATUS ^js gl))
+        (do
+          (.useProgram ^js gl program)
+
+          ;; Create full-screen quad vertices (normalized device coordinates)
+          (let [position-location (.getAttribLocation ^js gl program "a_position")
+                texcoord-location (.getAttribLocation ^js gl program "a_texCoord")
+                position-buffer (.createBuffer ^js gl)
+                texcoord-buffer (.createBuffer ^js gl)
+                positions #js [-1.0 -1.0  1.0 -1.0  -1.0 1.0  -1.0 1.0  1.0 -1.0  1.0 1.0]
+                texcoords #js [0.0 0.0  1.0 0.0  0.0 1.0  0.0 1.0  1.0 0.0  1.0 1.0]]
+            ;; Set up position buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) position-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. positions) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl position-location)
+            (.vertexAttribPointer ^js gl position-location 2 (.-FLOAT ^js gl) false 0 0)
+           ;; Set up texcoord buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) texcoord-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. texcoords) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl texcoord-location)
+            (.vertexAttribPointer ^js gl texcoord-location 2 (.-FLOAT ^js gl) false 0 0)
+            ;; Set texture uniform
+            (.activeTexture ^js gl (.-TEXTURE0 ^js gl))
+            (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+            (let [texture-location (.getUniformLocation ^js gl program "u_texture")]
+              (.uniform1i ^js gl texture-location 0))
+
+            ;; draw
+            (.drawArrays ^js gl (.-TRIANGLES ^js gl) 0 6)
+
+            ;; cleanup
+            (.deleteBuffer ^js gl position-buffer)
+            (.deleteBuffer ^js gl texcoord-buffer)
+            (.deleteShader ^js gl vertex-shader)
+            (.deleteShader ^js gl fragment-shader)
+            (.deleteProgram ^js gl program)))
+        (log/error :hint "Program linking failed"
+                   :log (.getProgramInfoLog ^js gl program)))
+
+      (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+      (.deleteTexture ^js gl texture))))
+
+(defn restore-previous-canvas-pixels
+  "Restores previous canvas pixels into the new canvas"
+  []
+  (when-let [previous-canvas-pixels wasm/canvas-pixels]
+    (when-let [gl wasm/gl-context]
+      (draw-imagedata-to-webgl gl previous-canvas-pixels)
+      (set! wasm/canvas-pixels nil))))
+
+(defn clear-canvas-pixels
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context]
+      (.clearColor ^js context 0 0 0 0.0)
+      (.clear ^js context (.-COLOR_BUFFER_BIT ^js context))
+      (.clear ^js context (.-DEPTH_BUFFER_BIT ^js context))
+      (.clear ^js context (.-STENCIL_BUFFER_BIT ^js context)))
+    (dom/set-style! wasm/canvas "filter" "none")
+    (set! wasm/canvas-pixels nil)))
+
+(defn capture-canvas-pixels
+  "Captures the pixels of the viewport canvas"
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context
+          width (.-width wasm/canvas)
+          height (.-height wasm/canvas)
+          buffer (js/Uint8ClampedArray. (* width height  4))
+          _ (.readPixels ^js context 0 0 width height (.-RGBA ^js context) (.-UNSIGNED_BYTE ^js context) buffer)
+          image-data (js/ImageData. buffer width height)]
+      (set! wasm/canvas-pixels image-data))))

frontend/src/app/render_wasm/shape.cljs

@@ -227,7 +227,7 @@
         :svg-attrs
         (do
           (api/set-shape-svg-attrs v)
-          ;; Always update fills/blur/shadow to clear previous state if filters disappear          
+          ;; Always update fills/blur/shadow to clear previous state if filters disappear
           (api/set-shape-fills id (:fills shape) false)
           (api/set-shape-blur (:blur shape))
           (api/set-shape-shadows (:shadow shape)))
@@ -397,12 +397,18 @@
                    (next es))
             (throw (js/Error. "conj on a map takes map entries or seqables of map entries"))))))))
 
+(def ^:private xf:without-id-and-type
+  (remove (fn [kvpair]
+            (let [k (key kvpair)]
+              (or (= k :id)
+                  (= k :type))))))
+
 (defn create-shape
   "Instanciate a shape from a map"
   [attrs]
   (ShapeProxy. (:id attrs)
                (:type attrs)
-               (dissoc attrs :id :type)))
+               (into {} xf:without-id-and-type attrs)))
 
 (t/add-handlers!
  ;; We only add a write handler, read handler uses the dynamic dispatch

frontend/src/app/render_wasm/wasm.cljs

@@ -12,6 +12,8 @@
 
 ;; Reference to the HTML canvas element.
 (defonce canvas nil)
+;; Reference to the captured pixels of the canvas (for page switching effect)
+(defonce canvas-pixels nil)
 
 ;; Reference to the Emscripten GL context wrapper.
 (defonce gl-context-handle nil)
@@ -56,3 +58,4 @@
        :stroke-linecap shared/RawStrokeLineCap
        :stroke-linejoin shared/RawStrokeLineJoin
        :fill-rule shared/RawFillRule})
+

frontend/src/app/util/i18n.cljs

@@ -114,7 +114,7 @@
 
 (defn- load
   [locale]
-  (let [path (str "./translation." locale ".js?version=" (:full cf/version))]
+  (let [path (str "./translation." locale ".js?version=" cf/version-tag)]
     (->> (mod/import path)
          (p/fmap (fn [result] (unchecked-get result "default")))
          (p/fnly (fn [data cause]

frontend/src/app/worker/index.cljs

@@ -58,6 +58,8 @@
 
         (swap! state update ::snap snap/update-page old-page new-page)
         (swap! state update ::selection selection/update-page old-page new-page))
+      (catch :default cause
+        (log/error :hint "error updating page index" :id page-id :cause cause))
       (finally
         (let [elapsed (tpoint)]
           (log/dbg :hint "page index updated" :id page-id :elapsed elapsed ::log/sync? true))))

frontend/src/app/worker/thumbnails.cljs

@@ -179,6 +179,7 @@
 
                       (->> (render-canvas-blob canvas width height bgcolor)
                            (p/fnly (fn [data cause]
+                                     (wasm.api/clear-canvas)
                                      (if cause
                                        (rx/error! subs cause)
                                        (rx/push! subs

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -242,7 +242,6 @@ export class SelectionController extends EventTarget {
         continue;
       }
       let styleValue = element.style.getPropertyValue(styleName);
-
       if (styleName === "font-family") {
         styleValue = sanitizeFontFamily(styleValue);
       }
@@ -277,22 +276,29 @@ export class SelectionController extends EventTarget {
     this.#applyDefaultStylesToCurrentStyle();
     const root = startNode.parentElement.parentElement.parentElement;
     this.#applyStylesFromElementToCurrentStyle(root);
-    // FIXME: I don't like this approximation. Having to iterate nodes twice
-    // is bad for performance. I think we need another way of "computing"
-    // the cascade.
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const paragraph = textNode.parentElement.parentElement;
+    if (startNode === endNode) {
+      const paragraph = startNode.parentElement.parentElement;
       this.#applyStylesFromElementToCurrentStyle(paragraph);
-    }
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const textSpan = textNode.parentElement;
-      this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      const textSpan = startNode.parentElement;
+      this.#applyStylesFromElementToCurrentStyle(textSpan);
+    } else {
+      // FIXME: I don't like this approximation. Having to iterate nodes twice
+      // is bad for performance. I think we need another way of "computing"
+      // the cascade.
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const paragraph = textNode.parentElement.parentElement;
+        this.#applyStylesFromElementToCurrentStyle(paragraph);
+      }
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const textSpan = textNode.parentElement;
+        this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      }
     }
     return this;
   }

frontend/translations/en.po

@@ -1559,6 +1559,12 @@ msgstr "Old password is incorrect"
 msgid "feedback.description"
 msgstr "Description"
 
+msgid "errors.webgl-context-lost.main-message"
+msgstr "Oops! The canvas context was lost"
+
+msgid "errors.webgl-context-lost.desc-message"
+msgstr "WebGL has stopped working. Please reload the page to reset it"
+
 #: src/app/main/ui/settings/feedback.cljs:122
 msgid "feedback.description-placeholder"
 msgstr "Please describe the reason of your feedback"
@@ -2521,6 +2527,9 @@ msgstr "Release notes"
 msgid "labels.reload-file"
 msgstr "Reload file"
 
+msgid "labels.reload-page"
+msgstr "Reload page"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
@@ -7551,6 +7560,10 @@ msgstr "Remap Token References"
 msgid "workspace.tokens.renaming-token-from-to"
 msgstr "Renaming token from '%s' to '%s'"
 
+#: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+msgid "workspace.tokens.warning-name-change"
+msgstr "Renaming this token will break any reference to its old name"
+
 #: src/app/main/ui/workspace/tokens/remapping_modal.cljs
 msgid "workspace.tokens.references-found"
 msgstr "%s references found in your design"

frontend/translations/es.po

@@ -1552,6 +1552,12 @@ msgstr "El email o la contraseña son incorrectos."
 msgid "errors.wrong-old-password"
 msgstr "La contraseña anterior no es correcta"
 
+msgid "errors.webgl-context-lost.main-message"
+msgstr "Ups! Se ha perdido el contexto del canvas"
+
+msgid "errors.webgl-context-lost.desc-message"
+msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaurarlo"
+
 #: src/app/main/ui/settings/feedback.cljs:120
 msgid "feedback.description"
 msgstr "Descripción"
@@ -2502,6 +2508,9 @@ msgstr "Notas de versión"
 msgid "labels.reload-file"
 msgstr "Recargar archivo"
 
+msgid "labels.reload-page"
+msgstr "Recargar página"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
@@ -4428,6 +4437,10 @@ msgstr "Actualizar referencias de token"
 msgid "workspace.tokens.renaming-token-from-to"
 msgstr "Renombrando el token de '%s' a '%s'"
 
+#: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+msgid "workspace.tokens.warning-name-change"
+msgstr "Cambiar el nombre de este token romperá cualquier referencia a su nombre anterior."
+
 #: src/app/main/ui/workspace/tokens/remapping_modal.cljs
 msgid "workspace.tokens.references-found"
 msgstr "%s referencias encontradas en tu diseño"
@@ -7753,7 +7766,7 @@ msgstr "Line height (multiplicador, px o %) o {alias}"
 
 #: src/app/main/data/workspace/tokens/errors.cljs:57
 msgid "workspace.tokens.missing-references"
-msgstr "Referéncias de tokens no encontradas:"
+msgstr "Referencias de tokens no encontradas: "
 
 #: src/app/main/ui/workspace/tokens/management/token_pill.cljs:123
 msgid "workspace.tokens.more-options"

render-wasm/_build_env

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-export CURRENT_VERSION=${CURRENT_VERSION:-develop};
+export VERSION_TAG=${VERSION:-develop};
 
 if [ "$NODE_ENV" = "production" ];  then
     export BUILD_MODE="release";
@@ -81,7 +81,7 @@ function copy_artifacts {
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;
 
-    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$VERSION_TAG/g" $DEST/$BUILD_NAME.js;
 
     yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
         --log-level=error \

render-wasm/src/main.rs

@@ -23,7 +23,7 @@ use std::collections::HashMap;
 use utils::uuid_from_u32_quartet;
 use uuid::Uuid;
 
-pub(crate) static mut STATE: Option<Box<State<'static>>> = None;
+pub(crate) static mut STATE: Option<Box<State>> = None;
 
 #[macro_export]
 macro_rules! with_state_mut {
@@ -191,6 +191,20 @@ pub extern "C" fn render_from_cache(_: i32) {
     });
 }
 
+#[no_mangle]
+pub extern "C" fn set_preview_mode(enabled: bool) {
+    with_state_mut!(state, {
+        state.render_state.set_preview_mode(enabled);
+    });
+}
+
+#[no_mangle]
+pub extern "C" fn render_preview() {
+    with_state_mut!(state, {
+        state.render_preview(performance::get_time());
+    });
+}
+
 #[no_mangle]
 pub extern "C" fn process_animation_frame(timestamp: i32) {
     let result = std::panic::catch_unwind(|| {
@@ -284,6 +298,7 @@ pub extern "C" fn set_view_end() {
             performance::end_measure!("set_view_end::clear_tile_index");
             performance::end_timed_log!("clear_tile_index", _clear_start);
         }
+        state.render_state.sync_cached_viewbox();
         performance::end_measure!("set_view_end");
         performance::end_timed_log!("set_view_end", _end_start);
         #[cfg(feature = "profile-macros")]

render-wasm/src/render/fills.rs

@@ -18,7 +18,7 @@ fn draw_image_fill(
     }
 
     let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
     let container = &shape.selrect;
     let path_transform = shape.to_path_transform();
 

render-wasm/src/render/filters.rs

@@ -40,41 +40,21 @@ pub fn render_with_filter_surface<F>(
 where
     F: FnOnce(&mut RenderState, SurfaceId),
 {
-    if let Some((image, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
-        let canvas = render_state.surfaces.canvas(target_surface);
+    if let Some((mut surface, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
+        let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
 
         // If we scaled down, we need to scale the source rect and adjust the destination
         if scale < 1.0 {
-            // The image was rendered at a smaller scale, so we need to scale it back up
-            let scaled_width = bounds.width() * scale;
-            let scaled_height = bounds.height() * scale;
-            let src_rect = skia::Rect::from_xywh(0.0, 0.0, scaled_width, scaled_height);
-
             canvas.save();
             canvas.scale((1.0 / scale, 1.0 / scale));
-            canvas.draw_image_rect_with_sampling_options(
-                image,
-                Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
-                skia::Rect::from_xywh(
-                    bounds.left * scale,
-                    bounds.top * scale,
-                    scaled_width,
-                    scaled_height,
-                ),
-                render_state.sampling_options,
-                &skia::Paint::default(),
-            );
+            canvas.translate((bounds.left * scale, bounds.top * scale));
+            surface.draw(canvas, (0.0, 0.0), render_state.sampling_options, None);
             canvas.restore();
         } else {
-            // No scaling needed, draw normally
-            let src_rect = skia::Rect::from_xywh(0.0, 0.0, bounds.width(), bounds.height());
-            canvas.draw_image_rect_with_sampling_options(
-                image,
-                Some((&src_rect, skia::canvas::SrcRectConstraint::Strict)),
-                bounds,
-                render_state.sampling_options,
-                &skia::Paint::default(),
-            );
+            canvas.save();
+            canvas.translate((bounds.left, bounds.top));
+            surface.draw(canvas, (0.0, 0.0), render_state.sampling_options, None);
+            canvas.restore();
         }
         true
     } else {
@@ -93,7 +73,7 @@ pub fn render_into_filter_surface<F>(
     render_state: &mut RenderState,
     bounds: Rect,
     draw_fn: F,
-) -> Option<(skia::Image, f32)>
+) -> Option<(skia::Surface, f32)>
 where
     F: FnOnce(&mut RenderState, SurfaceId),
 {
@@ -129,5 +109,6 @@ where
 
     render_state.surfaces.canvas(filter_id).restore();
 
-    Some((render_state.surfaces.snapshot(filter_id), scale))
+    let filter_surface = render_state.surfaces.surface_clone(filter_id);
+    Some((filter_surface, scale))
 }

render-wasm/src/render/shadows.rs

@@ -135,7 +135,7 @@ pub fn render_text_shadows(
 
     let canvas = render_state
         .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::TextDropShadows));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::TextDropShadows));
 
     for shadow in shadows {
         let shadow_layer = SaveLayerRec::default().paint(shadow);

render-wasm/src/render/strokes.rs

@@ -387,7 +387,7 @@ fn draw_image_stroke_in_container(
     }
 
     let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
     let container = &shape.selrect;
     let path_transform = shape.to_path_transform();
     let svg_attrs = shape.svg_attrs.as_ref();
@@ -606,7 +606,7 @@ fn render_internal(
 
     let scale = render_state.get_scale();
     let target_surface = surface_id.unwrap_or(SurfaceId::Strokes);
-    let canvas = render_state.surfaces.canvas(target_surface);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
     let selrect = shape.selrect;
     let path_transform = shape.to_path_transform();
     let svg_attrs = shape.svg_attrs.as_ref();
@@ -688,7 +688,7 @@ pub fn render_text_paths(
     let scale = render_state.get_scale();
     let canvas = render_state
         .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Strokes));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Strokes));
     let selrect = &shape.selrect;
     let svg_attrs = shape.svg_attrs.as_ref();
     let mut paint: skia_safe::Handle<_> =

render-wasm/src/render/surfaces.rs

@@ -55,6 +55,8 @@ pub struct Surfaces {
     tiles: TileTextureCache,
     sampling_options: skia::SamplingOptions,
     margins: skia::ISize,
+    // Tracks which surfaces have content (dirty flag bitmask)
+    dirty_surfaces: u32,
 }
 
 #[allow(dead_code)]
@@ -105,6 +107,7 @@ impl Surfaces {
             tiles,
             sampling_options,
             margins,
+            dirty_surfaces: 0,
         }
     }
 
@@ -147,10 +150,55 @@ impl Surfaces {
         None
     }
 
+    /// Returns a mutable reference to the canvas and automatically marks
+    /// render surfaces as dirty when accessed. This tracks which surfaces
+    /// have content for optimization purposes.
+    pub fn canvas_and_mark_dirty(&mut self, id: SurfaceId) -> &skia::Canvas {
+        // Automatically mark render surfaces as dirty when accessed
+        // This tracks which surfaces have content for optimization
+        match id {
+            SurfaceId::Fills
+            | SurfaceId::Strokes
+            | SurfaceId::InnerShadows
+            | SurfaceId::TextDropShadows => {
+                self.mark_dirty(id);
+            }
+            _ => {}
+        }
+        self.canvas(id)
+    }
+
+    /// Returns a mutable reference to the canvas without any side effects.
+    /// Use this when you only need to read or manipulate the canvas state
+    /// without marking the surface as dirty.
     pub fn canvas(&mut self, id: SurfaceId) -> &skia::Canvas {
         self.get_mut(id).canvas()
     }
 
+    pub fn surface_clone(&self, id: SurfaceId) -> skia::Surface {
+        self.get(id).clone()
+    }
+
+    /// Marks a surface as having content (dirty)
+    pub fn mark_dirty(&mut self, id: SurfaceId) {
+        self.dirty_surfaces |= id as u32;
+    }
+
+    /// Checks if a surface has content
+    pub fn is_dirty(&self, id: SurfaceId) -> bool {
+        (self.dirty_surfaces & id as u32) != 0
+    }
+
+    /// Clears the dirty flag for a surface or set of surfaces
+    pub fn clear_dirty(&mut self, ids: u32) {
+        self.dirty_surfaces &= !ids;
+    }
+
+    /// Clears all dirty flags
+    pub fn clear_all_dirty(&mut self) {
+        self.dirty_surfaces = 0;
+    }
+
     pub fn flush_and_submit(&mut self, gpu_state: &mut GpuState, id: SurfaceId) {
         let surface = self.get_mut(id);
         gpu_state.context.flush_and_submit_surface(surface, None);
@@ -159,9 +207,24 @@ impl Surfaces {
     pub fn draw_into(&mut self, from: SurfaceId, to: SurfaceId, paint: Option<&skia::Paint>) {
         let sampling_options = self.sampling_options;
 
-        self.get_mut(from)
-            .clone()
-            .draw(self.canvas(to), (0.0, 0.0), sampling_options, paint);
+        self.get_mut(from).clone().draw(
+            self.canvas_and_mark_dirty(to),
+            (0.0, 0.0),
+            sampling_options,
+            paint,
+        );
+    }
+
+    /// Draws the cache surface directly to the target canvas.
+    /// This avoids creating an intermediate snapshot, reducing GPU stalls.
+    pub fn draw_cache_to_target(&mut self) {
+        let sampling_options = self.sampling_options;
+        self.cache.clone().draw(
+            self.target.canvas(),
+            (0.0, 0.0),
+            sampling_options,
+            Some(&skia::Paint::default()),
+        );
     }
 
     pub fn apply_mut(&mut self, ids: u32, mut f: impl FnMut(&mut skia::Surface)) {
@@ -212,18 +275,33 @@ impl Surfaces {
 
     pub fn update_render_context(&mut self, render_area: skia::Rect, scale: f32) {
         let translation = self.get_render_context_translation(render_area, scale);
-        self.apply_mut(
-            SurfaceId::Fills as u32
-                | SurfaceId::Strokes as u32
-                | SurfaceId::InnerShadows as u32
-                | SurfaceId::TextDropShadows as u32,
-            |s| {
-                let canvas = s.canvas();
-                canvas.reset_matrix();
-                canvas.scale((scale, scale));
-                canvas.translate(translation);
-            },
-        );
+
+        // When context changes (zoom/pan/tile), clear all render surfaces first
+        // to remove any residual content from previous tiles, then mark as dirty
+        // so they get redrawn with new transformations
+        let surface_ids = SurfaceId::Fills as u32
+            | SurfaceId::Strokes as u32
+            | SurfaceId::InnerShadows as u32
+            | SurfaceId::TextDropShadows as u32;
+
+        // Clear surfaces before updating transformations to remove residual content
+        self.apply_mut(surface_ids, |s| {
+            s.canvas().clear(skia::Color::TRANSPARENT);
+        });
+
+        // Mark all render surfaces as dirty so they get redrawn
+        self.mark_dirty(SurfaceId::Fills);
+        self.mark_dirty(SurfaceId::Strokes);
+        self.mark_dirty(SurfaceId::InnerShadows);
+        self.mark_dirty(SurfaceId::TextDropShadows);
+
+        // Update transformations
+        self.apply_mut(surface_ids, |s| {
+            let canvas = s.canvas();
+            canvas.reset_matrix();
+            canvas.scale((scale, scale));
+            canvas.translate(translation);
+        });
     }
 
     #[inline]
@@ -243,6 +321,22 @@ impl Surfaces {
         }
     }
 
+    fn get(&self, id: SurfaceId) -> &skia::Surface {
+        match id {
+            SurfaceId::Target => &self.target,
+            SurfaceId::Filter => &self.filter,
+            SurfaceId::Cache => &self.cache,
+            SurfaceId::Current => &self.current,
+            SurfaceId::DropShadows => &self.drop_shadows,
+            SurfaceId::InnerShadows => &self.inner_shadows,
+            SurfaceId::TextDropShadows => &self.text_drop_shadows,
+            SurfaceId::Fills => &self.shape_fills,
+            SurfaceId::Strokes => &self.shape_strokes,
+            SurfaceId::Debug => &self.debug,
+            SurfaceId::UI => &self.ui,
+        }
+    }
+
     fn reset_from_target(&mut self, target: skia::Surface) {
         let dim = (target.width(), target.height());
         self.target = target;
@@ -264,19 +358,21 @@ impl Surfaces {
     pub fn draw_rect_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
         if let Some(corners) = shape.shape_type.corners() {
             let rrect = RRect::new_rect_radii(shape.selrect, &corners);
-            self.canvas(id).draw_rrect(rrect, paint);
+            self.canvas_and_mark_dirty(id).draw_rrect(rrect, paint);
         } else {
-            self.canvas(id).draw_rect(shape.selrect, paint);
+            self.canvas_and_mark_dirty(id)
+                .draw_rect(shape.selrect, paint);
         }
     }
 
     pub fn draw_circle_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
-        self.canvas(id).draw_oval(shape.selrect, paint);
+        self.canvas_and_mark_dirty(id)
+            .draw_oval(shape.selrect, paint);
     }
 
     pub fn draw_path_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
         if let Some(path) = shape.get_skia_path() {
-            self.canvas(id).draw_path(&path, paint);
+            self.canvas_and_mark_dirty(id).draw_path(&path, paint);
         }
     }
 
@@ -304,6 +400,9 @@ impl Surfaces {
         self.canvas(SurfaceId::UI)
             .clear(skia::Color::TRANSPARENT)
             .reset_matrix();
+
+        // Clear all dirty flags after reset
+        self.clear_all_dirty();
     }
 
     pub fn cache_current_tile_texture(
@@ -319,14 +418,22 @@ impl Surfaces {
             self.current.height() - TILE_SIZE_MULTIPLIER * self.margins.height,
         );
 
-        if let Some(snapshot) = self.current.image_snapshot_with_bounds(rect) {
-            self.tiles.add(tile_viewbox, tile, snapshot.clone());
+        let snapshot = self.current.image_snapshot();
+        let mut direct_context = self.current.direct_context();
+        let tile_image_opt = snapshot
+            .make_subset(direct_context.as_mut(), rect)
+            .or_else(|| self.current.image_snapshot_with_bounds(rect));
+
+        if let Some(tile_image) = tile_image_opt {
+            // Draw to cache first (takes reference), then move to tile cache
             self.cache.canvas().draw_image_rect(
-                snapshot.clone(),
+                &tile_image,
                 None,
                 tile_rect,
                 &skia::Paint::default(),
             );
+
+            self.tiles.add(tile_viewbox, tile, tile_image);
         }
     }
 
@@ -334,25 +441,65 @@ impl Surfaces {
         self.tiles.has(tile)
     }
 
-    pub fn remove_cached_tile_surface(&mut self, tile: Tile, rect: skia::Rect, color: skia::Color) {
-        // Clear the specific tile area in the cache surface with color
-        let mut paint = skia::Paint::default();
-        paint.set_color(color);
-        self.cache.canvas().draw_rect(rect, &paint);
+    pub fn remove_cached_tile_surface(&mut self, tile: Tile) {
+        // Mark tile as invalid
+        // Old content stays visible until new tile overwrites it atomically,
+        // preventing flickering during tile re-renders.
         self.tiles.remove(tile);
     }
 
     pub fn draw_cached_tile_surface(&mut self, tile: Tile, rect: skia::Rect, color: skia::Color) {
-        let image = self.tiles.get(tile).unwrap();
+        if let Some(image) = self.tiles.get(tile) {
+            let mut paint = skia::Paint::default();
+            paint.set_color(color);
 
+            self.target.canvas().draw_rect(rect, &paint);
+
+            self.target
+                .canvas()
+                .draw_image_rect(&image, None, rect, &skia::Paint::default());
+        }
+    }
+
+    /// Draws the current tile directly to the target and cache surfaces without
+    /// creating a snapshot. This avoids GPU stalls from ReadPixels but doesn't
+    /// populate the tile texture cache (suitable for one-shot renders like tests).
+    pub fn draw_current_tile_direct(&mut self, tile_rect: &skia::Rect, color: skia::Color) {
+        let sampling_options = self.sampling_options;
+        let src_rect = IRect::from_xywh(
+            self.margins.width,
+            self.margins.height,
+            self.current.width() - TILE_SIZE_MULTIPLIER * self.margins.width,
+            self.current.height() - TILE_SIZE_MULTIPLIER * self.margins.height,
+        );
+        let src_rect_f = skia::Rect::from(src_rect);
+
+        // Draw background
         let mut paint = skia::Paint::default();
         paint.set_color(color);
+        self.target.canvas().draw_rect(tile_rect, &paint);
 
-        self.target.canvas().draw_rect(rect, &paint);
+        // Draw current surface directly to target (no snapshot)
+        self.current.clone().draw(
+            self.target.canvas(),
+            (
+                tile_rect.left - src_rect_f.left,
+                tile_rect.top - src_rect_f.top,
+            ),
+            sampling_options,
+            None,
+        );
 
-        self.target
-            .canvas()
-            .draw_image_rect(&image, None, rect, &skia::Paint::default());
+        // Also draw to cache for render_from_cache
+        self.current.clone().draw(
+            self.cache.canvas(),
+            (
+                tile_rect.left - src_rect_f.left,
+                tile_rect.top - src_rect_f.top,
+            ),
+            sampling_options,
+            None,
+        );
     }
 
     pub fn remove_cached_tiles(&mut self, color: skia::Color) {
@@ -425,9 +572,11 @@ impl TileTextureCache {
         }
     }
 
-    pub fn get(&mut self, tile: Tile) -> Result<&mut skia::Image, String> {
-        let image = self.grid.get_mut(&tile).unwrap();
-        Ok(image)
+    pub fn get(&mut self, tile: Tile) -> Option<&mut skia::Image> {
+        if self.removed.contains(&tile) {
+            return None;
+        }
+        self.grid.get_mut(&tile)
     }
 
     pub fn remove(&mut self, tile: Tile) {

render-wasm/src/render/text.rs

@@ -192,7 +192,7 @@ pub fn render(
             }
         }
 
-        let canvas = render_state.surfaces.canvas(target_surface);
+        let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
         render_text_on_canvas(canvas, shape, paragraph_builders, shadow, blur);
         return;
     }
@@ -371,7 +371,7 @@ pub fn render_as_path(
 ) {
     let canvas = render_state
         .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Fills));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Fills));
 
     for (path, paint) in paths {
         // Note: path can be empty
@@ -397,7 +397,7 @@ pub fn render_position_data(
         let rect = Rect::from_xywh(pd.x, pd.y, pd.width, pd.height);
         render_state
             .surfaces
-            .canvas(surface_id)
+            .canvas_and_mark_dirty(surface_id)
             .draw_rect(rect, &paint);
     }
 }

render-wasm/src/shapes.rs

@@ -90,6 +90,18 @@ impl Type {
         }
     }
 
+    pub fn clear_corners(&mut self) {
+        match self {
+            Type::Rect(data) => {
+                data.corners = None;
+            }
+            Type::Frame(data) => {
+                data.corners = None;
+            }
+            _ => {}
+        }
+    }
+
     pub fn path(&self) -> Option<&Path> {
         match self {
             Type::Path(path) => Some(path),
@@ -694,9 +706,11 @@ impl Shape {
     pub fn set_corners(&mut self, raw_corners: (f32, f32, f32, f32)) {
         if let Some(corners) = make_corners(raw_corners) {
             self.shape_type.set_corners(corners);
-            self.invalidate_bounds();
-            self.invalidate_extrect();
+        } else {
+            self.shape_type.clear_corners();
         }
+        self.invalidate_bounds();
+        self.invalidate_extrect();
     }
 
     pub fn set_svg(&mut self, svg: skia::svg::Dom) {
@@ -920,8 +934,13 @@ impl Shape {
             }
 
             Type::Group(_) | Type::Frame(_) if !self.clip_content => {
+                // For frames and groups, we must always calculate extrect for all children
+                // to ensure accurate bounds that include nested content across all tiles.
+                // Using selrect for children can cause frames to be incorrectly omitted from
+                // tiles where they have nested content.
                 for child_id in self.children_ids_iter(false) {
                     if let Some(child_shape) = shapes_pool.get(child_id) {
+                        // Always calculate full extrect for children to ensure accurate bounds
                         let child_extrect = child_shape.calculate_extrect(shapes_pool, scale);
                         rect.join(child_extrect);
                     }
@@ -1419,6 +1438,100 @@ impl Shape {
         !self.fills.is_empty()
     }
 
+    /// Determines if this frame or group can be flattened (doesn't affect children visually)
+    /// A container can be flattened if it has no visual effects that affect its children
+    /// and doesn't render its own content (no fills/strokes)
+    pub fn can_flatten(&self) -> bool {
+        // Only frames and groups can be flattened
+        if !matches!(self.shape_type, Type::Frame(_) | Type::Group(_)) {
+            return false;
+        }
+
+        // Cannot flatten if it has visual effects that affect children:
+
+        if self.clip_content {
+            return false;
+        }
+
+        if !self.transform.is_identity() {
+            return false;
+        }
+
+        if self.opacity != 1.0 {
+            return false;
+        }
+
+        if self.blend_mode() != BlendMode::default() {
+            return false;
+        }
+
+        if self.blur.is_some() {
+            return false;
+        }
+
+        if !self.shadows.is_empty() {
+            return false;
+        }
+
+        if let Type::Group(group) = &self.shape_type {
+            if group.masked {
+                return false;
+            }
+        }
+
+        if self.hidden {
+            return false;
+        }
+
+        // If the container itself has fills/strokes, it renders something visible
+        // We cannot flatten containers that render their own background/border
+        // because they need to be rendered even if they don't affect children
+        if self.has_fills() || self.has_visible_strokes() {
+            return false;
+        }
+
+        true
+    }
+
+    /// Checks if this shape needs a layer for rendering due to visual effects
+    /// (opacity < 1.0, non-default blend mode, or frame clip layer blur)
+    pub fn needs_layer(&self) -> bool {
+        self.opacity() < 1.0
+            || self.blend_mode().0 != skia::BlendMode::SrcOver
+            || self.has_frame_clip_layer_blur()
+            || (matches!(self.shape_type, Type::Group(g) if g.masked))
+    }
+
+    /// Checks if this frame has clip layer blur (affects children)
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn has_frame_clip_layer_blur(&self) -> bool {
+        self.frame_clip_layer_blur().is_some()
+    }
+
+    /// Returns the frame clip layer blur if this frame has one
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn frame_clip_layer_blur(&self) -> Option<Blur> {
+        use crate::shapes::BlurType;
+        match self.shape_type {
+            Type::Frame(_) if self.clip_content => self.blur.filter(|blur| {
+                !blur.hidden && blur.blur_type == BlurType::LayerBlur && blur.value > 0.0
+            }),
+            _ => None,
+        }
+    }
+
+    /// Checks if this shape has visual effects that might extend its bounds beyond selrect
+    /// Shapes with these effects require expensive extrect calculation for accurate visibility checks
+    pub fn has_effects_that_extend_bounds(&self) -> bool {
+        !self.shadows.is_empty()
+            || self.blur.is_some()
+            || !self.strokes.is_empty()
+            || !self.transform.is_identity()
+            || !math::is_close_to(self.rotation, 0.0)
+            || matches!(self.shape_type, Type::Group(_) | Type::Frame(_))
+            || matches!(self.shape_type, Type::Text(_))
+    }
+
     pub fn count_visible_inner_strokes(&self) -> usize {
         self.visible_strokes()
             .filter(|s| s.kind == StrokeKind::Inner)
@@ -1492,6 +1605,13 @@ mod tests {
         } else {
             unreachable!();
         }
+
+        shape.set_corners((0.0, 0.0, 0.0, 0.0));
+        if let Type::Rect(Rect { corners, .. }) = shape.shape_type {
+            assert_eq!(corners, None);
+        } else {
+            unreachable!();
+        }
     }
 
     #[test]

render-wasm/src/state.rs

@@ -18,16 +18,16 @@ use crate::shapes::modifiers::grid_layout::grid_cell_data;
 /// It is created by [init] and passed to the other exported functions.
 /// Note that rust-skia data structures are not thread safe, so a state
 /// must not be shared between different Web Workers.
-pub(crate) struct State<'a> {
+pub(crate) struct State {
     pub render_state: RenderState,
     pub text_editor_state: TextEditorState,
     pub current_id: Option<Uuid>,
     pub current_browser: u8,
-    pub shapes: ShapesPool<'a>,
-    pub saved_shapes: Option<ShapesPool<'a>>,
+    pub shapes: ShapesPool,
+    pub saved_shapes: Option<ShapesPool>,
 }
 
-impl<'a> State<'a> {
+impl State {
     pub fn new(width: i32, height: i32) -> Self {
         State {
             render_state: RenderState::new(width, height),
@@ -100,6 +100,16 @@ impl<'a> State<'a> {
     }
 
     pub fn start_render_loop(&mut self, timestamp: i32) -> Result<(), String> {
+        // If zoom changed, we MUST rebuild the tile index before using it.
+        // Otherwise, the index will have tiles from the old zoom level, causing visible
+        // tiles to appear empty. This can happen if start_render_loop() is called before
+        // set_view_end() finishes rebuilding the index, or if set_view_end() hasn't been
+        // called yet.
+        let zoom_changed = self.render_state.zoom_changed();
+        if zoom_changed {
+            self.rebuild_tiles_shallow();
+        }
+
         self.render_state
             .start_render_loop(None, &self.shapes, timestamp, false)?;
         Ok(())
@@ -213,17 +223,14 @@ impl<'a> State<'a> {
         self.render_state.rebuild_touched_tiles(&self.shapes);
     }
 
+    pub fn render_preview(&mut self, timestamp: i32) {
+        let _ = self.render_state.render_preview(&self.shapes, timestamp);
+    }
+
     pub fn rebuild_modifier_tiles(&mut self, ids: Vec<Uuid>) {
-        // SAFETY: We're extending the lifetime of the mutable borrow to 'a.
-        // This is safe because:
-        // 1. shapes has lifetime 'a in the struct
-        // 2. The reference won't outlive the struct
-        // 3. No other references to shapes exist during this call
-        unsafe {
-            let shapes_ptr = &mut self.shapes as *mut ShapesPool<'a>;
-            self.render_state
-                .rebuild_modifier_tiles(&mut *shapes_ptr, ids);
-        }
+        // Index-based storage is safe
+        self.render_state
+            .rebuild_modifier_tiles(&mut self.shapes, ids);
     }
 
     pub fn font_collection(&self) -> &FontCollection {

render-wasm/src/state/shapes_pool.rs

@@ -28,29 +28,44 @@ const SHAPES_POOL_ALLOC_MULTIPLIER: f32 = 1.3;
 /// Shapes are stored in a `Vec<Shape>`, which keeps the `Shape` instances
 /// in a contiguous memory block.
 ///
-pub struct ShapesPoolImpl<'a> {
+/// # Index-based Design
+///
+/// All auxiliary HashMaps (modifiers, structure, scale_content, modified_shape_cache)
+/// use `usize` indices instead of `&'a Uuid` references. This eliminates:
+/// - Unsafe lifetime extensions
+/// - The need for `rebuild_references()` after Vec reallocation
+/// - Complex lifetime annotations
+///
+/// The `uuid_to_idx` HashMap maps `Uuid` (owned) to indices, avoiding lifetime issues.
+///
+pub struct ShapesPoolImpl {
     shapes: Vec<Shape>,
     counter: usize,
 
-    shapes_uuid_to_idx: HashMap<&'a Uuid, usize>,
+    /// Maps UUID to index in the shapes Vec. Uses owned Uuid, no lifetime needed.
+    uuid_to_idx: HashMap<Uuid, usize>,
 
-    modified_shape_cache: HashMap<&'a Uuid, OnceCell<Shape>>,
-    modifiers: HashMap<&'a Uuid, skia::Matrix>,
-    structure: HashMap<&'a Uuid, Vec<StructureEntry>>,
-    scale_content: HashMap<&'a Uuid, f32>,
+    /// Cache for modified shapes, keyed by index
+    modified_shape_cache: HashMap<usize, OnceCell<Shape>>,
+    /// Transform modifiers, keyed by index
+    modifiers: HashMap<usize, skia::Matrix>,
+    /// Structure entries, keyed by index
+    structure: HashMap<usize, Vec<StructureEntry>>,
+    /// Scale content values, keyed by index
+    scale_content: HashMap<usize, f32>,
 }
 
-// Type aliases to avoid writing lifetimes everywhere
-pub type ShapesPool<'a> = ShapesPoolImpl<'a>;
-pub type ShapesPoolRef<'a> = &'a ShapesPoolImpl<'a>;
-pub type ShapesPoolMutRef<'a> = &'a mut ShapesPoolImpl<'a>;
+// Type aliases - no longer need lifetimes!
+pub type ShapesPool = ShapesPoolImpl;
+pub type ShapesPoolRef<'a> = &'a ShapesPoolImpl;
+pub type ShapesPoolMutRef<'a> = &'a mut ShapesPoolImpl;
 
-impl<'a> ShapesPoolImpl<'a> {
+impl ShapesPoolImpl {
     pub fn new() -> Self {
         ShapesPoolImpl {
             shapes: vec![],
             counter: 0,
-            shapes_uuid_to_idx: HashMap::default(),
+            uuid_to_idx: HashMap::default(),
 
             modified_shape_cache: HashMap::default(),
             modifiers: HashMap::default(),
@@ -62,15 +77,14 @@ impl<'a> ShapesPoolImpl<'a> {
     pub fn initialize(&mut self, capacity: usize) {
         performance::begin_measure!("shapes_pool_initialize");
         self.counter = 0;
-        self.shapes_uuid_to_idx = HashMap::with_capacity(capacity);
+        self.uuid_to_idx = HashMap::with_capacity(capacity);
 
         let additional = capacity as i32 - self.shapes.len() as i32;
         if additional <= 0 {
             return;
         }
 
-        // Reserve exact capacity to avoid any future reallocations
-        // This is critical because we store &'a Uuid references that would be invalidated
+        // Reserve extra capacity to avoid future reallocations
         let target_capacity = (capacity as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize;
         self.shapes
             .reserve_exact(target_capacity.saturating_sub(self.shapes.len()));
@@ -81,15 +95,15 @@ impl<'a> ShapesPoolImpl<'a> {
     }
 
     pub fn add_shape(&mut self, id: Uuid) -> &mut Shape {
-        let did_reallocate = if self.counter >= self.shapes.len() {
-            // We need more space. Check if we'll need to reallocate the Vec.
+        if self.counter >= self.shapes.len() {
+            // We need more space
             let current_capacity = self.shapes.capacity();
-            let additional = (self.shapes.len() as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize;
+            // Ensure we add at least 1 shape when the pool is empty
+            let additional =
+                ((self.shapes.len() as f32 * SHAPES_POOL_ALLOC_MULTIPLIER) as usize).max(1);
             let needed_capacity = self.shapes.len() + additional;
 
-            let will_reallocate = needed_capacity > current_capacity;
-
-            if will_reallocate {
+            if needed_capacity > current_capacity {
                 // Reserve extra space to minimize future reallocations
                 let extra_reserve = (needed_capacity as f32 * 0.5) as usize;
                 self.shapes
@@ -98,165 +112,68 @@ impl<'a> ShapesPoolImpl<'a> {
 
             self.shapes
                 .extend(iter::repeat_with(|| Shape::new(Uuid::nil())).take(additional));
-
-            will_reallocate
-        } else {
-            false
-        };
+        }
 
         let idx = self.counter;
         let new_shape = &mut self.shapes[idx];
         new_shape.id = id;
 
-        // Get a reference to the id field in the shape with lifetime 'a
-        // SAFETY: This is safe because:
-        // 1. We pre-allocate enough capacity to avoid Vec reallocation
-        // 2. The shape and its id field won't move within the Vec
-        // 3. The reference won't outlive the ShapesPoolImpl
-        let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
-
-        self.shapes_uuid_to_idx.insert(id_ref, idx);
+        // Simply store the UUID -> index mapping. No unsafe lifetime tricks needed!
+        self.uuid_to_idx.insert(id, idx);
         self.counter += 1;
 
-        // If the Vec reallocated, we need to rebuild all references in the HashMaps
-        // because the old references point to deallocated memory
-        if did_reallocate {
-            self.rebuild_references();
-        }
-
         &mut self.shapes[idx]
     }
-
-    /// Rebuilds all &'a Uuid references in the HashMaps after a Vec reallocation.
-    /// This is necessary because Vec reallocation invalidates all existing references.
-    fn rebuild_references(&mut self) {
-        // Rebuild shapes_uuid_to_idx with fresh references
-        let mut new_map = HashMap::with_capacity(self.shapes_uuid_to_idx.len());
-        for (_, idx) in self.shapes_uuid_to_idx.drain() {
-            let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
-            new_map.insert(id_ref, idx);
-        }
-        self.shapes_uuid_to_idx = new_map;
-
-        // Rebuild modifiers with fresh references
-        if !self.modifiers.is_empty() {
-            let old_modifiers: Vec<(Uuid, skia::Matrix)> = self
-                .modifiers
-                .drain()
-                .map(|(uuid_ref, matrix)| (*uuid_ref, matrix))
-                .collect();
-
-            for (uuid, matrix) in old_modifiers {
-                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                    self.modifiers.insert(uuid_ref, matrix);
-                }
-            }
-        }
-
-        // Rebuild structure with fresh references
-        if !self.structure.is_empty() {
-            let old_structure: Vec<(Uuid, Vec<StructureEntry>)> = self
-                .structure
-                .drain()
-                .map(|(uuid_ref, entries)| (*uuid_ref, entries))
-                .collect();
-
-            for (uuid, entries) in old_structure {
-                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                    self.structure.insert(uuid_ref, entries);
-                }
-            }
-        }
-
-        // Rebuild scale_content with fresh references
-        if !self.scale_content.is_empty() {
-            let old_scale_content: Vec<(Uuid, f32)> = self
-                .scale_content
-                .drain()
-                .map(|(uuid_ref, scale)| (*uuid_ref, scale))
-                .collect();
-
-            for (uuid, scale) in old_scale_content {
-                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                    self.scale_content.insert(uuid_ref, scale);
-                }
-            }
-        }
-        // Rebuild modified_shape_cache with fresh references
-        if !self.modified_shape_cache.is_empty() {
-            let old_cache: Vec<(Uuid, OnceCell<Shape>)> = self
-                .modified_shape_cache
-                .drain()
-                .map(|(uuid_ref, cell)| (*uuid_ref, cell))
-                .collect();
-
-            for (uuid, cell) in old_cache {
-                if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                    self.modified_shape_cache.insert(uuid_ref, cell);
-                }
-            }
-        }
-    }
+    // No longer needed! Index-based storage means no references to rebuild.
+    // The old rebuild_references() function has been removed entirely.
 
     pub fn len(&self) -> usize {
-        self.shapes_uuid_to_idx.len()
+        self.uuid_to_idx.len()
     }
 
     pub fn has(&self, id: &Uuid) -> bool {
-        self.shapes_uuid_to_idx.contains_key(&id)
+        self.uuid_to_idx.contains_key(id)
     }
 
     pub fn get_mut(&mut self, id: &Uuid) -> Option<&mut Shape> {
-        let idx = *self.shapes_uuid_to_idx.get(&id)?;
+        let idx = *self.uuid_to_idx.get(id)?;
         Some(&mut self.shapes[idx])
     }
 
-    pub fn get(&self, id: &Uuid) -> Option<&'a Shape> {
-        let idx = *self.shapes_uuid_to_idx.get(&id)?;
+    /// Get a shape by UUID. Returns the modified shape if modifiers/structure
+    /// are applied, otherwise returns the base shape.
+    pub fn get(&self, id: &Uuid) -> Option<&Shape> {
+        let idx = *self.uuid_to_idx.get(id)?;
 
-        // SAFETY: We're extending the lifetimes to 'a.
-        // This is safe because:
-        // 1. All internal HashMaps and the shapes Vec have fields with lifetime 'a
-        // 2. The shape at idx won't be moved or reallocated (pre-allocated Vec)
-        // 3. The id is stored in shapes[idx].id which has lifetime 'a
-        // 4. The references won't outlive the ShapesPoolImpl
-        unsafe {
-            let shape_ptr = &self.shapes[idx] as *const Shape;
-            let modifiers_ptr = &self.modifiers as *const HashMap<&'a Uuid, skia::Matrix>;
-            let structure_ptr = &self.structure as *const HashMap<&'a Uuid, Vec<StructureEntry>>;
-            let scale_content_ptr = &self.scale_content as *const HashMap<&'a Uuid, f32>;
-            let cache_ptr = &self.modified_shape_cache as *const HashMap<&'a Uuid, OnceCell<Shape>>;
+        let shape = &self.shapes[idx];
 
-            // Extend the lifetime of id to 'a - safe because it's the same Uuid stored in shapes[idx].id
-            let id_ref: &'a Uuid = &*(id as *const Uuid);
+        // Check if this shape needs modification (has modifiers, structure changes, or is a bool)
+        let needs_modification = shape.is_bool()
+            || self.modifiers.contains_key(&idx)
+            || self.structure.contains_key(&idx)
+            || self.scale_content.contains_key(&idx);
 
-            if (*shape_ptr).is_bool()
-                || (*modifiers_ptr).contains_key(&id_ref)
-                || (*structure_ptr).contains_key(&id_ref)
-                || (*scale_content_ptr).contains_key(&id_ref)
-            {
-                if let Some(cell) = (*cache_ptr).get(&id_ref) {
-                    Some(cell.get_or_init(|| {
-                        let mut shape = (*shape_ptr).transformed(
-                            (*modifiers_ptr).get(&id_ref),
-                            (*structure_ptr).get(&id_ref),
-                        );
+        if needs_modification {
+            // Check if we have a cached modified version
+            if let Some(cell) = self.modified_shape_cache.get(&idx) {
+                Some(cell.get_or_init(|| {
+                    let mut modified_shape =
+                        shape.transformed(self.modifiers.get(&idx), self.structure.get(&idx));
 
-                        if self.to_update_bool(&shape) {
-                            math_bools::update_bool_to_path(&mut shape, self);
-                        }
+                    if self.to_update_bool(&modified_shape) {
+                        math_bools::update_bool_to_path(&mut modified_shape, self);
+                    }
 
-                        if let Some(scale) = (*scale_content_ptr).get(&id_ref) {
-                            shape.scale_content(*scale);
-                        }
-                        shape
-                    }))
-                } else {
-                    Some(&*shape_ptr)
-                }
+                    if let Some(scale) = self.scale_content.get(&idx) {
+                        modified_shape.scale_content(*scale);
+                    }
+                    modified_shape
+                }))
             } else {
-                Some(&*shape_ptr)
+                Some(shape)
             }
+        } else {
+            Some(shape)
         }
     }
 
@@ -275,69 +192,68 @@ impl<'a> ShapesPoolImpl<'a> {
     }
 
     pub fn set_modifiers(&mut self, modifiers: HashMap<Uuid, skia::Matrix>) {
-        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
-        // Initialize the cache cells because later we don't want to have the mutable pointer
+        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
+        // Initialize the cache cells for affected shapes
 
         let mut ids = Vec::<Uuid>::new();
+        let mut modifiers_with_idx = HashMap::with_capacity(modifiers.len());
 
-        let mut modifiers_with_refs = HashMap::with_capacity(modifiers.len());
         for (uuid, matrix) in modifiers {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                // self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
-                modifiers_with_refs.insert(uuid_ref, matrix);
-                ids.push(*uuid_ref);
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                modifiers_with_idx.insert(idx, matrix);
+                ids.push(uuid);
             }
         }
-        self.modifiers = modifiers_with_refs;
+        self.modifiers = modifiers_with_idx;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                self.modified_shape_cache.insert(idx, OnceCell::new());
             }
         }
     }
 
     pub fn set_structure(&mut self, structure: HashMap<Uuid, Vec<StructureEntry>>) {
-        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
-        // Initialize the cache cells because later we don't want to have the mutable pointer
-        let mut structure_with_refs = HashMap::with_capacity(structure.len());
+        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
+        // Initialize the cache cells for affected shapes
+        let mut structure_with_idx = HashMap::with_capacity(structure.len());
         let mut ids = Vec::<Uuid>::new();
 
         for (uuid, entries) in structure {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                structure_with_refs.insert(uuid_ref, entries);
-                ids.push(*uuid_ref);
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                structure_with_idx.insert(idx, entries);
+                ids.push(uuid);
             }
         }
-        self.structure = structure_with_refs;
+        self.structure = structure_with_idx;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                self.modified_shape_cache.insert(idx, OnceCell::new());
             }
         }
     }
 
     pub fn set_scale_content(&mut self, scale_content: HashMap<Uuid, f32>) {
-        // Convert HashMap<Uuid, V> to HashMap<&'a Uuid, V> using references from shapes and
-        // Initialize the cache cells because later we don't want to have the mutable pointer
-        let mut scale_content_with_refs = HashMap::with_capacity(scale_content.len());
+        // Convert HashMap<Uuid, V> to HashMap<usize, V> using indices
+        // Initialize the cache cells for affected shapes
+        let mut scale_content_with_idx = HashMap::with_capacity(scale_content.len());
         let mut ids = Vec::<Uuid>::new();
 
         for (uuid, value) in scale_content {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                scale_content_with_refs.insert(uuid_ref, value);
-                ids.push(*uuid_ref);
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                scale_content_with_idx.insert(idx, value);
+                ids.push(uuid);
             }
         }
-        self.scale_content = scale_content_with_refs;
+        self.scale_content = scale_content_with_idx;
 
         let all_ids = shapes::all_with_ancestors(&ids, self, true);
         for uuid in all_ids {
-            if let Some(uuid_ref) = self.get_uuid_ref(&uuid) {
-                self.modified_shape_cache.insert(uuid_ref, OnceCell::new());
+            if let Some(idx) = self.uuid_to_idx.get(&uuid).copied() {
+                self.modified_shape_cache.insert(idx, OnceCell::new());
             }
         }
     }
@@ -349,47 +265,33 @@ impl<'a> ShapesPoolImpl<'a> {
         self.scale_content = HashMap::default();
     }
 
-    /// Get a reference to the Uuid stored in a shape, if it exists
-    pub fn get_uuid_ref(&self, id: &Uuid) -> Option<&'a Uuid> {
-        let idx = *self.shapes_uuid_to_idx.get(&id)?;
-        // SAFETY: We're returning a reference with lifetime 'a to a Uuid stored
-        // in the shapes Vec. This is safe because the Vec is stable (pre-allocated)
-        // and won't be reallocated.
-        unsafe { Some(&*(&self.shapes[idx].id as *const Uuid)) }
-    }
-
-    pub fn subtree(&self, id: &Uuid) -> ShapesPoolImpl<'a> {
+    pub fn subtree(&self, id: &Uuid) -> ShapesPoolImpl {
         let Some(shape) = self.get(id) else {
             panic!("Subtree not found");
         };
 
         let mut shapes = vec![];
-        let mut idx = 0;
-        let mut shapes_uuid_to_idx = HashMap::default();
+        let mut new_idx = 0;
+        let mut uuid_to_idx = HashMap::default();
 
-        for id in shape.all_children_iter(self, true, true) {
-            let Some(shape) = self.get(&id) else {
+        for child_id in shape.all_children_iter(self, true, true) {
+            let Some(child_shape) = self.get(&child_id) else {
                 panic!("Not found");
             };
-            shapes.push(shape.clone());
-
-            let id_ref: &'a Uuid = unsafe { &*(&self.shapes[idx].id as *const Uuid) };
-            shapes_uuid_to_idx.insert(id_ref, idx);
-            idx += 1;
+            shapes.push(child_shape.clone());
+            uuid_to_idx.insert(child_id, new_idx);
+            new_idx += 1;
         }
 
-        let mut result = ShapesPoolImpl {
+        ShapesPoolImpl {
             shapes,
-            counter: idx,
-            shapes_uuid_to_idx,
+            counter: new_idx,
+            uuid_to_idx,
             modified_shape_cache: HashMap::default(),
             modifiers: HashMap::default(),
             structure: HashMap::default(),
             scale_content: HashMap::default(),
-        };
-        result.rebuild_references();
-
-        result
+        }
     }
 
     fn to_update_bool(&self, shape: &Shape) -> bool {
@@ -398,11 +300,21 @@ impl<'a> ShapesPoolImpl<'a> {
         }
 
         let default = &Matrix::default();
-        let parent_modifier = self.modifiers.get(&shape.id).unwrap_or(default);
+
+        // Get parent modifier by index
+        let parent_idx = self.uuid_to_idx.get(&shape.id);
+        let parent_modifier = parent_idx
+            .and_then(|idx| self.modifiers.get(idx))
+            .unwrap_or(default);
 
         // Returns true if the transform of any child is different to the parent's
-        shape.all_children_iter(self, true, false).any(|id| {
-            !math::is_close_matrix(parent_modifier, self.modifiers.get(&id).unwrap_or(default))
+        shape.all_children_iter(self, true, false).any(|child_id| {
+            let child_modifier = self
+                .uuid_to_idx
+                .get(&child_id)
+                .and_then(|idx| self.modifiers.get(idx))
+                .unwrap_or(default);
+            !math::is_close_matrix(parent_modifier, child_modifier)
         })
     }
 }

render-wasm/src/wasm/layouts.rs

@@ -3,7 +3,7 @@ use crate::{with_current_shape_mut, STATE};
 use macros::ToJs;
 
 mod align;
-mod constraints;
+pub mod constraints;
 mod flex;
 mod grid;
 

render-wasm/src/wasm/shapes/base_props.rs

@@ -0,0 +1,173 @@
+use crate::mem;
+use crate::shapes::{BlendMode, ConstraintH, ConstraintV};
+use crate::utils::uuid_from_u32_quartet;
+use crate::uuid::Uuid;
+use crate::wasm::blend::RawBlendMode;
+use crate::wasm::layouts::constraints::{RawConstraintH, RawConstraintV};
+use crate::{with_state_mut, STATE};
+
+use super::RawShapeType;
+
+/// Binary layout for batched shape base properties:
+///
+/// | Offset | Size | Field        | Type                              |
+/// |--------|------|--------------|-----------------------------------|
+/// | 0      | 16   | id           | UUID (4 × u32 LE)                 |
+/// | 16     | 16   | parent_id    | UUID (4 × u32 LE)                 |
+/// | 32     | 1    | shape_type   | u8                                |
+/// | 33     | 1    | flags        | u8 (bit0: clip, bit1: hidden)     |
+/// | 34     | 1    | blend_mode   | u8                                |
+/// | 35     | 1    | constraint_h | u8 (0xFF = None)                  |
+/// | 36     | 1    | constraint_v | u8 (0xFF = None)                  |
+/// | 37     | 3    | padding      | -                                 |
+/// | 40     | 4    | opacity      | f32 LE                            |
+/// | 44     | 4    | rotation     | f32 LE                            |
+/// | 48     | 24   | transform    | 6 × f32 LE (a,b,c,d,e,f)          |
+/// | 72     | 16   | selrect      | 4 × f32 LE (x1,y1,x2,y2)          |
+/// | 88     | 16   | corners      | 4 × f32 LE (r1,r2,r3,r4)          |
+/// |--------|------|--------------|-----------------------------------|
+/// | Total  | 104  |              |                                   |
+pub const BASE_PROPS_SIZE: usize = 104;
+
+const FLAG_CLIP_CONTENT: u8 = 0b0000_0001;
+const FLAG_HIDDEN: u8 = 0b0000_0010;
+const CONSTRAINT_NONE: u8 = 0xFF;
+
+/// Reads a f32 from a byte slice at the given offset (little-endian)
+#[inline]
+fn read_f32_le(bytes: &[u8], offset: usize) -> f32 {
+    f32::from_le_bytes([
+        bytes[offset],
+        bytes[offset + 1],
+        bytes[offset + 2],
+        bytes[offset + 3],
+    ])
+}
+
+/// Reads a u32 from a byte slice at the given offset (little-endian)
+#[inline]
+fn read_u32_le(bytes: &[u8], offset: usize) -> u32 {
+    u32::from_le_bytes([
+        bytes[offset],
+        bytes[offset + 1],
+        bytes[offset + 2],
+        bytes[offset + 3],
+    ])
+}
+
+/// Parses UUID from bytes at given offset
+#[inline]
+fn read_uuid(bytes: &[u8], offset: usize) -> Uuid {
+    uuid_from_u32_quartet(
+        read_u32_le(bytes, offset),
+        read_u32_le(bytes, offset + 4),
+        read_u32_le(bytes, offset + 8),
+        read_u32_le(bytes, offset + 12),
+    )
+}
+
+#[no_mangle]
+pub extern "C" fn set_shape_base_props() {
+    let bytes = mem::bytes();
+
+    if bytes.len() < BASE_PROPS_SIZE {
+        return;
+    }
+
+    // Parse all fields from the buffer
+    let id = read_uuid(&bytes, 0);
+    let parent_id = read_uuid(&bytes, 16);
+    let shape_type = bytes[32];
+    let flags = bytes[33];
+    let blend_mode = bytes[34];
+    let constraint_h = bytes[35];
+    let constraint_v = bytes[36];
+    // bytes[37..40] are padding
+
+    let opacity = read_f32_le(&bytes, 40);
+    let rotation = read_f32_le(&bytes, 44);
+
+    // Transform matrix (a, b, c, d, e, f)
+    let transform_a = read_f32_le(&bytes, 48);
+    let transform_b = read_f32_le(&bytes, 52);
+    let transform_c = read_f32_le(&bytes, 56);
+    let transform_d = read_f32_le(&bytes, 60);
+    let transform_e = read_f32_le(&bytes, 64);
+    let transform_f = read_f32_le(&bytes, 68);
+
+    // Selrect (x1, y1, x2, y2)
+    let selrect_x1 = read_f32_le(&bytes, 72);
+    let selrect_y1 = read_f32_le(&bytes, 76);
+    let selrect_x2 = read_f32_le(&bytes, 80);
+    let selrect_y2 = read_f32_le(&bytes, 84);
+
+    // Corners (r1, r2, r3, r4)
+    let corner_r1 = read_f32_le(&bytes, 88);
+    let corner_r2 = read_f32_le(&bytes, 92);
+    let corner_r3 = read_f32_le(&bytes, 96);
+    let corner_r4 = read_f32_le(&bytes, 100);
+
+    // Decode flags
+    let clip_content = (flags & FLAG_CLIP_CONTENT) != 0;
+    let hidden = (flags & FLAG_HIDDEN) != 0;
+
+    // Convert raw enum values
+    let shape_type_enum = RawShapeType::from(shape_type);
+    let blend_mode_enum: BlendMode = RawBlendMode::from(blend_mode).into();
+
+    let constraint_h_opt: Option<ConstraintH> = if constraint_h == CONSTRAINT_NONE {
+        None
+    } else {
+        Some(RawConstraintH::from(constraint_h).into())
+    };
+
+    let constraint_v_opt: Option<ConstraintV> = if constraint_v == CONSTRAINT_NONE {
+        None
+    } else {
+        Some(RawConstraintV::from(constraint_v).into())
+    };
+
+    with_state_mut!(state, {
+        // Select/create the shape
+        state.use_shape(id);
+
+        // Set parent relationship
+        state.set_parent_for_current_shape(parent_id);
+
+        // Mark shape as touched
+        state.touch_current();
+
+        // Apply all properties to the current shape
+        if let Some(shape) = state.current_shape_mut() {
+            // Type
+            shape.set_shape_type(shape_type_enum.into());
+
+            // Boolean flags
+            shape.set_clip(clip_content);
+            shape.set_hidden(hidden);
+
+            // Blend mode and opacity
+            shape.set_blend_mode(blend_mode_enum);
+            shape.set_opacity(opacity);
+
+            // Constraints
+            shape.set_constraint_h(constraint_h_opt);
+            shape.set_constraint_v(constraint_v_opt);
+
+            // Transform
+            shape.set_rotation(rotation);
+            shape.set_transform(
+                transform_a,
+                transform_b,
+                transform_c,
+                transform_d,
+                transform_e,
+                transform_f,
+            );
+
+            // Geometry
+            shape.set_selrect(selrect_x1, selrect_y1, selrect_x2, selrect_y2);
+            shape.set_corners((corner_r1, corner_r2, corner_r3, corner_r4));
+        }
+    });
+}

render-wasm/src/wasm/shapes/mod.rs

@@ -1,3 +1,5 @@
+mod base_props;
+
 use macros::ToJs;
 
 use crate::shapes::{Bool, Frame, Group, Path, Rect, SVGRaw, TextContent, Type};