🐛 Fix auto width/height texts on variant swithching

* ✨ Move devtools perf logging helpers to util.perf ns

* 💄 Move flag check to the entry point instead of initialize event

* ♻️ Make performance events consistent with other events

.clj-kondo/config.edn

@@ -45,6 +45,15 @@
   :potok/reify-type
   {:level :error}
 
+  :redundant-primitive-coercion
+  {:level :off}
+
+  :unused-excluded-var
+  {:level :off}
+
+  :unresolved-excluded-var
+  {:level :off}
+
   :missing-protocol-method
   {:level :off}
 

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

@@ -7,11 +7,11 @@ on:
       - staging
       - main
     paths:
-      - "plugins/libs/plugin-types/index.d.ts"
-      - "plugins/libs/plugin-types/REAME.md"
-      - "plugins/tools/typedoc.css"
-      - "plugins/CHANGELOG.md"
-      - "plugins/wrangler-penpot-plugins-api-doc.toml"
+      - 'plugins/libs/plugin-types/index.d.ts'
+      - 'plugins/libs/plugin-types/REAME.md'
+      - 'plugins/tools/typedoc.css'
+      - 'plugins/CHANGELOG.md'
+      - 'plugins/wrangler-penpot-plugins-api-doc.toml'
   workflow_dispatch:
     inputs:
       gh_ref:
@@ -86,12 +86,24 @@ jobs:
         run: |
           REF="${{ steps.vars.outputs.gh_ref }}"
           case "$REF" in
-            main) echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV ;;
-            staging) echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV ;;
-            develop) echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV ;;
+            main)
+              echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV
+              echo "WORKER_URI=doc.plugins.penpot.app" >> $GITHUB_ENV ;;
+            staging)
+              echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV
+              echo "WORKER_URI=doc.plugins.penpot.dev" >> $GITHUB_ENV ;;
+            develop)
+              echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV
+              echo "WORKER_URI=doc.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
             *) echo "Unsupported branch ${REF}" && exit 1 ;;
           esac
 
+      - name: Set the custom url
+        working-directory: plugins
+        shell: bash
+        run: |
+          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" wrangler-penpot-plugins-api-doc.toml
+
       - name: Deploy to Cloudflare Workers
         uses: cloudflare/wrangler-action@v3
         with:

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

@@ -0,0 +1,123 @@
+name: Plugins/styles-doc deployer
+
+on:
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+    paths:
+      - 'plugins/apps/example-styles/**'
+      - 'plugins/libs/plugins-styles/**'
+      - 'plugins/wrangler-penpot-plugins-styles-doc.toml'
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch'
+        type: choice
+        required: true
+        default: 'develop'
+        options:
+          - develop
+          - staging
+          - main
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Extract some useful variables
+        id: vars
+        run: |
+          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ steps.vars.outputs.gh_ref }}
+
+      # START: Setup Node and PNPM enabling cache
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable PNPM
+        working-directory: ./plugins
+        shell: bash
+        run: |
+          corepack enable;
+          corepack install;
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        working-directory: ./plugins
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-store.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('plugins/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+      # END: Setup Node and PNPM enabling cache
+
+      - name: Install deps
+        working-directory: ./plugins
+        shell: bash
+        run: |
+          pnpm install --no-frozen-lockfile;
+          pnpm add -D -w wrangler@latest;
+
+      - name: Build styles
+        working-directory: plugins
+        shell: bash
+        run: npx nx run example-styles:build
+
+      - name: Select Worker name
+        run: |
+          REF="${{ steps.vars.outputs.gh_ref }}"
+          case "$REF" in
+            main)
+              echo "WORKER_NAME=penpot-plugins-styles-doc-pro" >> $GITHUB_ENV
+              echo "WORKER_URI=styles-doc.plugins.penpot.app" >> $GITHUB_ENV ;;
+            staging)
+              echo "WORKER_NAME=penpot-plugins-styles-doc-pre" >> $GITHUB_ENV
+              echo "WORKER_URI=styles-doc.plugins.penpot.dev" >> $GITHUB_ENV ;;
+            develop)
+              echo "WORKER_NAME=penpot-plugins-styles-doc-hourly" >> $GITHUB_ENV
+              echo "WORKER_URI=styles-doc.plugins.hourly.penpot.dev" >> $GITHUB_ENV ;;
+            *) echo "Unsupported branch ${REF}" && exit 1 ;;
+          esac
+
+      - name: Set the custom url
+        working-directory: plugins
+        shell: bash
+        run: |
+          sed -i "s/WORKER_URI/${{ env.WORKER_URI }}/g" wrangler-penpot-plugins-styles-doc.toml
+
+      - name: Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
+        with:
+          workingDirectory: plugins
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy --config wrangler-penpot-plugins-styles-doc.toml --name ${{ env.WORKER_NAME }}
+
+      - name: Notify Mattermost
+        if: failure()
+        uses: mattermost/action-mattermost-notify@master
+        with:
+          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
+          MATTERMOST_CHANNEL: bot-alerts-cicd
+          TEXT: |
+            ❌ 🧩💅 *[PENPOT PLUGINS] Error deploying Styles documentation.*
+            📄 Triggered from ref: `${{ inputs.gh_ref }}`
+            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+            @infra

backend/src/app/binfile/v3.clj

@@ -873,11 +873,8 @@
   (import-storage-objects cfg)
 
   (let [files  (get manifest :files)
-        result (reduce (fn [result {:keys [id] :as file}]
+        result (reduce (fn [result file]
                          (let [name' (get file :name)
-                               name' (if (map? name)
-                                       (get name id)
-                                       name')
                                file (assoc file :name name')]
                            (conj result (import-file cfg file))))
                        []

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

@@ -79,7 +79,7 @@
       (db/insert-many! pool :audit-log event-columns events))))
 
 (def valid-event-types
-  #{"action" "identify"})
+  #{"action" "identify" "trigger"})
 
 (def schema:event
   [:map {:title "Event"}

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

@@ -2017,7 +2017,9 @@
   (let [;; We need to sync only the position relative to the origin of the component.
         ;; (see update-attrs for a full explanation)
         previous-shape (reposition-shape previous-shape prev-root current-root)
-        touched        (get previous-shape :touched #{})]
+        touched        (get previous-shape :touched #{})
+        text-auto?     (and (cfh/text-shape? current-shape)
+                            (contains? #{:auto-height :auto-width} (:grow-type current-shape)))]
 
     (loop [attrs       updatable-attrs
            roperations [{:type :set-touched :touched (:touched previous-shape)}]
@@ -2026,6 +2028,10 @@
         (let [attr-group (get ctk/sync-attrs attr)
               skip-operations?
               (or
+               ;; For auto text, avoid copying geometry-driven attrs on switch.
+               (and text-auto?
+                    (contains? #{:points :selrect :width :height :position-data} attr))
+
                ;; If the attribute is not valid for the destiny, don't copy it
                (not (cts/is-allowed-switch-keep-attr? attr (:type current-shape)))
 

docs/plugins/api.md

@@ -6,4 +6,4 @@ desc: Create, deploy, and use the Penpot plugin API with our comprehensive docum
 
 # Penpot plugins API
 
-We've got all the documentation you need for the API right <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/">here</a>.
+We've got all the documentation you need for the API right <a target="_blank" href="https://doc.plugins.penpot.app/">here</a>.

docs/plugins/beta-changelog.md

@@ -9,13 +9,13 @@ desc: See the Penpot plugin API changelog for version 1.0! Find breaking changes
 ### <g-emoji class="g-emoji" alias="boom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png"><img class="emoji" alt="boom" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png"></g-emoji> Epics and highlights</code>
 - This marks the release of version 1.0, and from this point forward, we’ll do our best to avoid making any more breaking changes (or make deprecations backward compatible).
 - We’ve redone the documentation. You can check the API here:
-[https://penpot-plugins-api-doc.pages.dev/](https://penpot-plugins-api-doc.pages.dev/)
+[https://doc.plugins.penpot.app/](https://doc.plugins.penpot.app/)
 - New samples repository with lots of samples to use the API:
 [https://github.com/penpot/penpot-plugins-samples](https://github.com/penpot/penpot-plugins-samples)
 
 ### <g-emoji class="g-emoji" alias="boom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"><img class="emoji" alt="boom" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"></g-emoji> Breaking changes & Deprecations
 
-- Changed types names to remove the Penpot prefix. So for example: <code class="language-js">PenpotShape</code> becomes <code class="language-js">Shape</code>; <code class="language-js">PenpotFile</code> becomes <code class="language-js">File</code>, and so on. Check the [API documentation](https://penpot-plugins-api-doc.pages.dev/) for more details.
+- Changed types names to remove the Penpot prefix. So for example: <code class="language-js">PenpotShape</code> becomes <code class="language-js">Shape</code>; <code class="language-js">PenpotFile</code> becomes <code class="language-js">File</code>, and so on. Check the [API documentation](https://doc.plugins.penpot.app/) for more details.
 - Changes on the <code class="language-js">penpot.on</code> and <code class="language-js">penpot.off</code> methods.
 Previously you had to send the original callback to the off method in order to remove an event listener. Now, <code class="language-js">penpot.on</code> will return an *id* that you can pass to the <code class="language-js">penpot.off</code> method in order to remove the listener.
 

docs/plugins/create-a-plugin.md

@@ -49,7 +49,7 @@ There are two libraries that can help you with your plugin's development. They a
 
 ### Plugin styles
 
-<code class="language-js">@penpot/plugin-styles</code> contains styles to help build the UI for Penpot plugins. To check the styles go to <a target="_blank" href="https://penpot-plugins-styles.pages.dev/">Plugin styles</a>.
+<code class="language-js">@penpot/plugin-styles</code> contains styles to help build the UI for Penpot plugins. To check the styles go to <a target="_blank" href="https://styles-doc.plugins.penpot.app/">Plugin styles</a>.
 
 ```bash
 npm install @penpot/plugin-styles
@@ -139,7 +139,7 @@ parent.postMessage(responseMessage, targetOrigin);
 
 By using these message-based events, any data retrieved through the Penpot API can be communicated to and from your plugin interface seamlessly.
 
-For more detailed information, refer to the [Penpot Plugins API Documentation](https://penpot-plugins-api-doc.pages.dev/).
+For more detailed information, refer to the [Penpot Plugins API Documentation](https://doc.plugins.penpot.app/).
 
 ## 2.5. Step 5. Build the plugin file
 

docs/plugins/examples-templates.md

@@ -86,7 +86,7 @@ penpot.library.local.createTypography();
 
 Penpot has dark and light modes, and you can easily add this to your plugin so your interface adapts to both themes. When you add theme support, your plugin will automatically sync with Penpot's interface settings, so the user experience is consistent no matter which mode is selected. This makes your plugin look better and also ensures it stays in line with Penpot's overall design.
 
-Just a heads-up: if you use the <a target="_blank" href="https://penpot-plugins-styles.pages.dev/">plugin-styles library</a>, many elements will automatically adapt to dark or light mode without any extra effort from you. However, if you need to customize specific elements, be sure to use the selectors provided in the <code class="language-bash">styles.css</code> of the example.
+Just a heads-up: if you use the <a target="_blank" href="https://styles-doc.plugins.penpot.app/">plugin-styles library</a>, many elements will automatically adapt to dark or light mode without any extra effort from you. However, if you need to customize specific elements, be sure to use the selectors provided in the <code class="language-bash">styles.css</code> of the example.
 
 <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/theme">Theme example</a>
 

docs/plugins/faq.md

@@ -40,7 +40,7 @@ The plugin <a target="_blank" href="https://www.npmjs.com/package/@penpot/plugin
 
 ### Is the API ready to use the prototyping features?
 
-Absolutely! You can definitely create flows and interactions in the same elements as in the interface, like frames, shapes, and groups. Just check out the API documentation for the methods: createFlow, addInteraction, or removeInteraction. And if you need more help, you can always check out the <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/PenpotFlow">PenpotFlow</a> or <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/PenpotInteraction">PenpotInteraction</a> interfaces.
+Absolutely! You can definitely create flows and interactions in the same elements as in the interface, like frames, shapes, and groups. Just check out the API documentation for the methods: createFlow, addInteraction, or removeInteraction. And if you need more help, you can always check out the <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Flow">Flow</a> or <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Interaction">Interaction</a> interfaces.
 
 ### Are there any security or quality criteria I should be aware of?
 
@@ -48,7 +48,8 @@ There are no set requirements. However, we can recommend the use of <a target="_
 
 ### Is it necessary to create plugins with a UI?
 
-No, it’s completely optional, in fact, we have an example of a plugin without UI. Try the plugin using this url to install it: <code class="language-js">https:\/\/create-palette-penpot-plugin.pages.dev/assets/manifest.json</code> or check the code <a target="_blank" href="https://github.com/penpot/penpot-plugins/tree/main/apps/create-palette-plugin">here</a>
+No, it’s completely optional, in fact, we have an example of a plugin without UI. Try the plugin using this url to install it: <code class="language-js">https:\/\/create-palette.plugins.penpot.app/assets/manifest.json</code> or check the code <a target="_blank" href="https://github.com/penpot/penpot/tree/main/plugins/apps/create-palette-plugin">here</a>
+
 
 ### Can I create components?
 
@@ -58,7 +59,7 @@ Yes, it is possible to create components using:
 createComponent(shapes: Shape[]): LibraryComponent;
 ```
 
-Take a look at the Penpot Library methods in the <a target="_blank" href="https://penpot-plugins-api-doc.pages.dev/interfaces/Library">API documentation</a> or this <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/components-library">simple example</a>.
+Take a look at the Penpot Library methods in the <a target="_blank" href="https://doc.plugins.penpot.app/interfaces/Library">API documentation</a> or this <a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/components-library">simple example</a>.
 
 ### Is there a place where I can share my plugin?
 

docs/plugins/getting-started.md

@@ -69,12 +69,13 @@ You need to provide the plugin's manifest URL for the installation. If there are
 
 | Name          | URL                                                                 |
 | ------------- | ------------------------------------------------------------------- |
-| Lorem Ipsum   | https://lorem-ipsum-penpot-plugin.pages.dev/assets/manifest.json    |
-| Contrast      | https://contrast-penpot-plugin.pages.dev/assets/manifest.json       |
-| Feather icons | https://icons-penpot-plugin.pages.dev/assets/manifest.json          |
-| Tables        | https://table-penpot-plugin.pages.dev/assets/manifest.json          |
-| Color palette | https://create-palette-penpot-plugin.pages.dev/assets/manifest.json |
-| Rename layers | https://rename-layers-penpot-plugin.pages.dev/assets/manifest.json  |
+| Color palette |	https://create-palette.plugins.penpot.app/assets/manifest.json      |
+| Contrast	    | https://contrast.plugins.penpot.app/assets/manifest.json            |
+| Feather icons	| https://icons.plugins.penpot.app/assets/manifest.json               |
+| Lorem ipsum	  | https://lorem-ipsum.plugins.penpot.app/assets/manifest.json         |
+| Rename layers |	https://rename-layers.plugins.penpot.app/assets/manifest.json       |
+| Tables	      | https://table.plugins.penpot.app/assets/manifest.json               |
+
 
 ## 1.4. Plugin's basics
 

frontend/src/app/main.cljs

@@ -16,6 +16,7 @@
    [app.main.data.profile :as dp]
    [app.main.data.websocket :as ws]
    [app.main.errors]
+   [app.main.features :as feat]
    [app.main.rasterizer :as thr]
    [app.main.store :as st]
    [app.main.ui :as ui]
@@ -65,8 +66,11 @@
     ptk/WatchEvent
     (watch [_ _ stream]
       (rx/merge
-       (rx/of (ev/initialize)
-              (dp/refresh-profile))
+       (if (contains? cf/flags :audit-log)
+         (rx/of (ev/initialize))
+         (rx/empty))
+
+       (rx/of (dp/refresh-profile))
 
        ;; Watch for profile deletion events
        (->> stream
@@ -87,7 +91,12 @@
             (rx/map deref)
             (rx/filter dp/is-authenticated?)
             (rx/take 1)
-            (rx/map #(ws/initialize)))))))
+            (rx/map #(ws/initialize)))))
+
+    ptk/EffectEvent
+    (effect [_ state _]
+      (when-not (feat/active-feature? state "render-wasm/v1")
+        (thr/init!)))))
 
 (defn ^:export init
   [options]
@@ -97,7 +106,7 @@
   (mw/init!)
   (i18n/init)
   (cur/init-styles)
-  (thr/init!)
+
   (init-ui)
   (st/emit! (plugins/initialize)
             (initialize)))

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

@@ -31,40 +31,34 @@
 (l/set-level! :info)
 
 ;; Defines the maximum buffer size, after events start discarding.
-(def max-buffer-size 1024)
+(def ^:private ^:const max-buffer-size 1024)
 
 ;; Defines the maximum number of events that can go in a single batch.
-(def max-chunk-size 100)
+(def ^:private ^:const max-chunk-size 100)
 
 ;; Defines the time window (in ms) within events belong to the same session.
-(def session-timeout (* 1000 60 30))
-
+(def ^:private ^:const session-timeout (* 1000 60 30))
 
 ;; Min time for a long task to be reported to telemetry
-(def min-longtask-time 1000)
+(def ^:private ^:const min-longtask-time 1000)
 
 ;; Min time between long task reports
-(def debounce-longtask-time 1000)
+(def ^:private ^:const debounce-longtask-time 1000)
 
 ;; Min time for a long task to be reported to telemetry
-(def min-browser-event-time 1000)
+(def ^:private ^:const min-browser-event-time 1000)
 
 ;; Min time between long task reports
-(def debounce-browser-event-time 1000)
+(def ^:private ^:const debounce-browser-event-time 1000)
 
 ;; Min time for a long task to be reported to telemetry
-(def min-performace-event-time 1000)
+(def ^:private ^:const min-performace-event-time 1000)
 
 ;; Min time between long task reports
-(def debounce-performance-event-time 1000)
+(def ^:private ^:const debounce-performance-event-time 1000)
 
-;; 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))
+;; Default micro-benchmark iterations
+(def ^:private ^:const micro-benchmark-iterations 1e6)
 
 ;; --- CONTEXT
 
@@ -142,12 +136,12 @@
              data
              data))
 
-(defn add-external-context-info
+(defn- add-external-context-info
   [context]
   (let [external-context-info  (json/->clj (cf/external-context-info))]
     (merge context external-context-info)))
 
-(defn- process-event-by-proto
+(defn- make-proto-event
   [event]
   (let [data    (d/deep-merge (-data event) (meta event))
         type    (ptk/type event)
@@ -156,7 +150,6 @@
                     (assoc :event-origin (::origin data))
                     (assoc :event-namespace (namespace type))
                     (assoc :event-symbol ev-name)
-                    (add-external-context-info)
                     (d/without-nils))
         props   (-> data d/without-qualified simplify-props)]
 
@@ -165,7 +158,7 @@
      :context context
      :props props}))
 
-(defn- process-data-event
+(defn- make-data-event
   [event]
   (let [data (deref event)
         name (::name data)]
@@ -174,7 +167,6 @@
       (let [type    (::type data "action")
             context (-> (::context data)
                         (assoc :event-origin (::origin data))
-                        (add-external-context-info)
                         (d/without-nils))
             props   (-> data d/without-qualified simplify-props)]
         {:type    type
@@ -182,57 +174,62 @@
          :context context
          :props   props}))))
 
-(defn performance-payload
+(defn- make-event
+  "Create a standard event"
   ([result]
    (let [props      (aget result 0)
          profile-id (aget result 1)]
-     (performance-payload profile-id props)))
+     (make-event profile-id props)))
+  ([profile-id event]
+   (when-let [event (cond
+                      (satisfies? Event event)
+                      (make-proto-event event)
+
+                      (ptk/data-event? event)
+                      (make-data-event event))]
+     (assoc event :profile-id profile-id))))
+
+(defn- make-performance-event
+  "Create a performance trigger event"
+  ([result]
+   (let [props      (aget result 0)
+         profile-id (aget result 1)]
+     (make-performance-event profile-id props)))
   ([profile-id props]
-   (let [{:keys [performance-info]} @st/state]
-     {:type    "action"
-      :name    "performance"
-      :context (merge @context performance-info)
-      :props   props
+   (let [perf-info (get @st/state :performance-info)
+         name      (get props ::name)]
+     {:type    "trigger"
+      :name    (str "performance-" name)
+      :context {:file-stats (:counters perf-info)}
+      :props   (-> props
+                   (dissoc ::name)
+                   (assoc :file-id (:file-id perf-info)))
       :profile-id profile-id})))
 
 (defn- process-performance-event
+  "Process performance sensitive events"
   [result]
   (let [event      (aget result 0)
         profile-id (aget result 1)]
-
-    (if (and (satisfies? PerformanceEvent event)
-             (exists? js/globalThis)
-             (exists? (.-requestAnimationFrame js/globalThis))
-             (exists? (.-scheduler js/globalThis))
-             (exists? (.-postTask (.-scheduler js/globalThis))))
+    (if (satisfies? PerformanceEvent event)
       (rx/create
        (fn [subs]
-         (let [start (perf/timestamp)]
+         (let [start (perf/now)]
            (js/requestAnimationFrame
-            #(js/scheduler.postTask
-              (fn []
-                (let [time (- (perf/timestamp) start)]
-                  (when (> time min-performace-event-time)
-                    (rx/push!
-                     subs
-                     (performance-payload
-                      profile-id
-                      {::event (str (ptk/type event))
-                       :time time}))))
-                (rx/end! subs))
-              #js {"priority" "user-blocking"})))
-         nil))
+            #(.postTask js/scheduler
+                        (fn []
+                          (let [time (- (perf/now) start)]
+                            (when (> time min-performace-event-time)
+                              (rx/push! subs
+                                        (make-performance-event profile-id
+                                                                {::name "blocking-event"
+                                                                 :event-name (d/name (ptk/type event))
+                                                                 :duration time})))
+                            (rx/end! subs)))
+                        #js {:priority "user-blocking"}))
+           nil)))
       (rx/empty))))
 
-(defn- process-event
-  [event]
-  (cond
-    (satisfies? Event event)
-    (process-event-by-proto event)
-
-    (ptk/data-event? event)
-    (process-data-event event)))
-
 ;; --- MAIN LOOP
 
 (defn- append-to-buffer
@@ -260,7 +257,8 @@
     (rx/of nil)))
 
 
-(defn performance-observer-event-stream
+(defn- user-input-observer
+  "Create user interaction/input event observer. Returns rx stream."
   []
   (if (and (exists? js/globalThis)
            (exists? (.-PerformanceObserver js/globalThis)))
@@ -273,18 +271,17 @@
                  (fn [entry]
                    (when (and (= "event" (.-entryType entry))
                               (> (.-duration entry) min-browser-event-time))
-                     (rx/push!
-                      subs
-                      {::event :observer-event
-                       :duration (.-duration entry)
-                       :event-name (.-name entry)})))
+                     (rx/push! subs {::name "user-input"
+                                     :duration (.-duration entry)
+                                     :event-name (.-name entry)})))
                  (.getEntries list))))]
          (.observe observer #js {:entryTypes #js ["event"]})
          (fn []
            (.disconnect observer)))))
     (rx/empty)))
 
-(defn performance-observer-longtask-stream
+(defn- longtask-observer
+  "Create a Long-Task performance observer. Returns rx stream."
   []
   (if (and (exists? js/globalThis)
            (exists? (.-PerformanceObserver js/globalThis)))
@@ -298,7 +295,7 @@
                    (when (and (= "longtask" (.-entryType entry))
                               (> (.-duration entry) min-longtask-time))
                      (rx/push! subs
-                               {::event :observer-longtask
+                               {::name "long-task"
                                 :duration (.-duration entry)})))
                  (.getEntries list))))]
          (.observe observer #js {:entryTypes #js ["longtask"]})
@@ -306,238 +303,156 @@
            (.disconnect observer)))))
     (rx/empty)))
 
-(defn- save-performance-info
-  []
-  (ptk/reify ::save-performance-info
-    ptk/UpdateEvent
-    (update [_ state]
-      (letfn [(count-shapes [file]
-                (->> file :data :pages-index
-                     (reduce-kv
-                      (fn [sum _ page]
-                        (+ sum (count (:objects page))))
-                      0)))
-              (count-library-data [files {:keys [id]}]
-                (let [data (dm/get-in files [id :data])]
-                  {:components (count (:components data))
-                   :colors (count (:colors data))
-                   :typographies (count (:typographies data))}))]
-        (let [file-id (get state :current-file-id)
-              file (get-in state [:files file-id])
-              file-size (count-shapes file)
+(defn- snapshot-performance-info
+  [{:keys [file-id]}]
 
-              libraries
-              (-> (refs/select-libraries (:files state) (:id file))
-                  (d/update-vals (partial count-library-data (:files state))))
+  (letfn [(count-shapes [file]
+            (->> file :data :pages-index
+                 (reduce-kv
+                  (fn [sum _ page]
+                    (+ sum (count (:objects page))))
+                  0)))
 
-              lib-sizes
-              (->> libraries
-                   (reduce-kv
-                    (fn [acc _ {:keys [components colors typographies]}]
-                      (-> acc
-                          (update :components + components)
-                          (update :colors + colors)
-                          (update :typographies + typographies)))
-                    {}))]
-          (update state :performance-info
-                  (fn [info]
-                    (-> info
-                        (assoc :file-size file-size)
-                        (assoc :library-sizes lib-sizes)
-                        (assoc :file-start-time (perf/now))))))))))
+          (add-libraries-counters [state files]
+            (reduce (fn [state library-id]
+                      (let [data (dm/get-in files [library-id :data])]
+                        (-> state
+                            (update :total-components + (count (:components data)))
+                            (update :total-colors + (count (:colors data)))
+                            (update :total-typographies + (count (:typographies data))))))
+                    state
+                    (refs/select-libraries files file-id)))]
 
-(defn store-performace-info
-  []
-  (letfn [(micro-benchmark [state]
-            (let [start (perf/now)]
-              (loop [i micro-benchmark-iterations]
-                (when-not (zero? i)
-                  (* (math/sin i) (math/sqrt i))
-                  (recur (dec i))))
-              (let [end (perf/now)]
-                (update state :performance-info assoc :bench-result (- end start)))))]
-
-    (ptk/reify ::store-performace-info
+    (ptk/reify ::snapshot-performance-info
       ptk/UpdateEvent
       (update [_ state]
-        (-> state
-            micro-benchmark
-            (assoc-in [:performance-info :app-start-time] (perf/now))))
+        (update state :performance-info
+                (fn [info]
+                  (let [files (get state :files)
+                        file  (get files file-id)]
+                    (-> info
+                        (assoc :file-id file-id)
+                        (update :counters assoc :total-shapes (count-shapes file))
+                        (update :counters add-libraries-counters files)))))))))
 
-      ptk/WatchEvent
-      (watch [_ _ stream]
-        (->> stream
-             (rx/filter (ptk/type? :app.main.data.workspace/all-libraries-resolved))
-             (rx/take 1)
-             (rx/map save-performance-info))))))
+(defn- store-performace-info
+  []
+  (ptk/reify ::store-performace-info
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [start (perf/now)
+            _     (loop [i micro-benchmark-iterations]
+                    (when-not (zero? i)
+                      (* (math/sin i) (math/sqrt i))
+                      (recur (dec i))))
+            end   (perf/now)]
+
+        (update state :performance-info assoc :bench (- end start))))
+
+    ptk/WatchEvent
+    (watch [_ _ stream]
+      (->> stream
+           (rx/filter (ptk/type? :app.main.data.workspace/all-libraries-resolved))
+           (rx/take 1)
+           (rx/map deref)
+           (rx/map snapshot-performance-info)))))
 
 (defn initialize
   []
-  (when (contains? cf/flags :audit-log)
-    (ptk/reify ::initialize
-      ptk/WatchEvent
-      (watch [_ _ _]
-        (rx/of (store-performace-info)))
+  (ptk/reify ::initialize
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/of (store-performace-info)))
 
-      ptk/EffectEvent
-      (effect [_ _ stream]
-        (let [session (atom nil)
-              stopper (rx/filter (ptk/type? ::initialize) stream)
-              buffer  (atom #queue [])
-              profile (->> (rx/from-atom storage/user {:emit-current-value? true})
-                           (rx/map :profile)
-                           (rx/map :id)
-                           (rx/pipe (rxo/distinct-contiguous)))]
+    ptk/EffectEvent
+    (effect [_ _ stream]
+      (let [session (atom nil)
+            stopper (rx/filter (ptk/type? ::initialize) stream)
+            buffer  (atom #queue [])
+            profile (->> (rx/from-atom storage/user {:emit-current-value? true})
+                         (rx/map :profile)
+                         (rx/map :id)
+                         (rx/pipe (rxo/distinct-contiguous)))]
 
-          (l/debug :hint "event instrumentation initialized")
+        (l/debug :hint "event instrumentation initialized")
 
-          (->> (rx/merge
-                (->> (rx/from-atom buffer)
-                     (rx/filter #(pos? (count %)))
-                     (rx/debounce 2000))
-                (->> stream
-                     (rx/filter (ptk/type? :app.main.data.profile/logout))
-                     (rx/observe-on :async)))
-               (rx/map (fn [_]
-                         (into [] (take max-buffer-size) @buffer)))
-               (rx/with-latest-from profile)
-               (rx/mapcat (fn [[chunk profile-id]]
-                            (let [events (filterv #(= profile-id (:profile-id %)) chunk)]
-                              (->> (persist-events events)
-                                   (rx/tap (fn [_]
-                                             (l/debug :hint "events chunk persisted" :total (count chunk))))
-                                   (rx/map (constantly chunk))))))
-               (rx/take-until stopper)
-               (rx/subs! (fn [chunk]
-                           (swap! buffer remove-from-buffer (count chunk)))
-                         (fn [cause]
-                           (l/error :hint "unexpected error on audit persistence" :cause cause))
-                         (fn []
-                           (l/debug :hint "audit persistence terminated"))))
+        (->> (rx/merge
+              (->> (rx/from-atom buffer)
+                   (rx/filter #(pos? (count %)))
+                   (rx/debounce 2000))
+              (->> stream
+                   (rx/filter (ptk/type? :app.main.data.profile/logout))
+                   (rx/observe-on :async)))
+             (rx/map (fn [_]
+                       (into [] (take max-chunk-size) @buffer)))
+             (rx/with-latest-from profile)
+             (rx/mapcat (fn [[chunk profile-id]]
+                          (let [events (filterv #(= profile-id (:profile-id %)) chunk)]
+                            (->> (persist-events events)
+                                 (rx/tap (fn [_]
+                                           (l/debug :hint "events chunk persisted" :total (count chunk))))
+                                 (rx/map (constantly chunk))))))
+             (rx/take-until stopper)
+             (rx/subs! (fn [chunk]
+                         (swap! buffer remove-from-buffer (count chunk)))
+                       (fn [cause]
+                         (l/error :hint "unexpected error on audit persistence" :cause cause))
+                       (fn []
+                         (l/debug :hint "audit persistence terminated"))))
 
-          (->> (rx/merge
-                (->> stream
-                     (rx/with-latest-from profile)
-                     (rx/map (fn [result]
-                               (let [event      (aget result 0)
-                                     profile-id (aget result 1)]
-                                 (some-> (process-event event)
-                                         (update :profile-id #(or % profile-id)))))))
+        (->> (rx/merge
+              (->> stream
+                   (rx/with-latest-from profile)
+                   (rx/map make-event))
 
-                (->> (performance-observer-event-stream)
-                     (rx/with-latest-from profile)
-                     (rx/map performance-payload)
-                     (rx/debounce debounce-browser-event-time))
+              (->> (user-input-observer)
+                   (rx/with-latest-from profile)
+                   (rx/map make-performance-event)
+                   (rx/debounce debounce-browser-event-time))
 
-                (->> (performance-observer-longtask-stream)
-                     (rx/with-latest-from profile)
-                     (rx/map performance-payload)
-                     (rx/debounce debounce-longtask-time))
+              (->> (longtask-observer)
+                   (rx/with-latest-from profile)
+                   (rx/map make-performance-event)
+                   (rx/debounce debounce-longtask-time))
 
+              (if (and (exists? js/globalThis)
+                       (exists? (.-requestAnimationFrame js/globalThis))
+                       (exists? (.-scheduler js/globalThis))
+                       (exists? (.-postTask (.-scheduler js/globalThis))))
                 (->> stream
                      (rx/with-latest-from profile)
                      (rx/merge-map process-performance-event)
-                     (rx/debounce debounce-performance-event-time)))
+                     (rx/debounce debounce-performance-event-time))
+                (rx/empty)))
 
-               (rx/filter :profile-id)
-               (rx/map (fn [event]
-                         (let [session* (or @session (ct/now))
-                               context  (-> @context
-                                            (merge (:context event))
-                                            (assoc :session session*)
-                                            (assoc :external-session-id (cf/external-session-id))
-                                            (d/without-nils))]
-                           (reset! session session*)
-                           (-> event
-                               (assoc :timestamp (ct/now))
-                               (assoc :context context)))))
+             (rx/filter :profile-id)
+             (rx/map (fn [event]
+                       (let [session* (or @session (ct/now))
+                             context  (-> @context
+                                          (merge (:context event))
+                                          (assoc :session session*)
+                                          (assoc :external-session-id (cf/external-session-id))
+                                          (add-external-context-info)
+                                          (d/without-nils))]
+                         (reset! session session*)
+                         (-> event
+                             (assoc :timestamp (ct/now))
+                             (assoc :context context)))))
 
-               (rx/tap (fn [event]
-                         (l/debug :hint "event enqueued")
-                         (swap! buffer append-to-buffer event)))
+             (rx/tap (fn [event]
+                       (l/debug :hint "event enqueued")
+                       (swap! buffer append-to-buffer event)))
 
-               (rx/switch-map #(rx/timer session-timeout))
-               (rx/take-until stopper)
-               (rx/subs! (fn [_]
-                           (l/debug :hint "session reinitialized")
-                           (reset! session nil))
-                         (fn [cause]
-                           (l/error :hint "error on event batching stream" :cause cause))
-                         (fn []
-                           (l/debug :hitn "events batching stream terminated")))))))))
+             (rx/switch-map #(rx/timer session-timeout))
+             (rx/take-until stopper)
+             (rx/subs! (fn [_]
+                         (l/debug :hint "session reinitialized")
+                         (reset! session nil))
+                       (fn [cause]
+                         (l/error :hint "error on event batching stream" :cause cause))
+                       (fn []
+                         (l/debug :hitn "events batching stream terminated"))))))))
 
 (defn event
   [props]
   (ptk/data-event ::event props))
-
-;; --- DEVTOOLS PERF LOGGING
-
-(defn install-long-task-observer! []
-  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
-    (let [observer (js/PerformanceObserver.
-                    (fn [list _]
-                      (when (contains? cf/flags :perf-logs)
-                        (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 []
-                (when (contains? cf/flags :perf-logs)
-                  (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.
-  Perf logs are disabled by default. Enable them with the :perf-logs flag in config."
-  []
-  (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

@@ -24,6 +24,7 @@
    [app.common.types.shape :as cts]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
+   [app.config :as cf]
    [app.main.data.changes :as dch]
    [app.main.data.comments :as dcmt]
    [app.main.data.common :as dcm]
@@ -75,6 +76,7 @@
    [app.util.dom :as dom]
    [app.util.globals :as ug]
    [app.util.http :as http]
+   [app.util.perf :as perf]
    [app.util.storage :as storage]
    [app.util.timers :as tm]
    [app.util.webapi :as wapi]
@@ -195,7 +197,7 @@
                        (rx/of (check-libraries-synchronization file-id libraries))))))
 
               ;; This events marks that all the libraries have been resolved
-              (rx/of (ptk/data-event ::all-libraries-resolved)))
+              (rx/of (ptk/data-event ::all-libraries-resolved {:file-id file-id})))
              (rx/take-until stopper-s))))))
 
 (defn- workspace-initialized
@@ -348,10 +350,11 @@
                                              :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!))))
+              (when (contains? cf/flags :perf-logs)
+                (->> stream
+                     (rx/filter (ptk/type? ::workspace-initialized))
+                     (rx/take 1)
+                     (rx/tap (fn [_] (perf/setup)))))
 
               (->> stream
                    (rx/filter (ptk/type? ::dps/persistence-notification))

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

@@ -46,7 +46,9 @@
    [app.main.data.workspace.thumbnails :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.data.workspace.zoom :as dwz]
+   [app.main.features :as features]
    [app.main.features.pointer-map :as fpmap]
    [app.main.refs :as refs]
    [app.main.repo :as rp]
@@ -1012,6 +1014,13 @@
 
             updated-objects  (pcb/get-objects changes)
             new-children-ids (cfh/get-children-ids-with-self updated-objects (:id new-shape))
+            new-text-ids     (->> new-children-ids
+                                  (keep (fn [id]
+                                          (when-let [child (get updated-objects id)]
+                                            (when (and (cfh/text-shape? child)
+                                                       (not= :fixed (:grow-type child)))
+                                              id))))
+                                  (vec))
 
             [changes parents-of-swapped]
             (if keep-touched?
@@ -1021,6 +1030,9 @@
         (rx/of
          (dwu/start-undo-transaction undo-id)
          (dch/commit-changes changes)
+         (when (and (features/active-feature? state "render-wasm/v1")
+                    (seq new-text-ids))
+           (dwwt/resize-wasm-text-all new-text-ids))
          (ptk/data-event :layout/update {:ids update-layout-ids :undo-group undo-group})
          (dwu/commit-undo-transaction undo-id)
          (dws/select-shape (:id new-shape) false))))))

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

@@ -105,9 +105,15 @@
       (if (dsh/lookup-page state file-id page-id)
         (rx/concat
          (rx/of (initialize-page* file-id page-id)
-                (fdf/fix-deleted-fonts-for-page file-id page-id)
-                (dwth/watch-state-changes file-id page-id)
-                (dwl/watch-component-changes))
+                (fdf/fix-deleted-fonts-for-page file-id page-id))
+
+         ;; Disable thumbnail generation in wasm renderer
+         (if (features/active-feature? state "render-wasm/v1")
+           (rx/empty)
+           (rx/of (dwth/watch-state-changes file-id page-id)))
+
+         (rx/of (dwl/watch-component-changes))
+
          (let [profile (:profile state)
                props   (get profile :props)]
            (when (not (:workspace-visited props))

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

@@ -11,7 +11,6 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
-   [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
@@ -29,10 +28,10 @@
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.router :as rt]
-   [app.render-wasm.api :as wasm.api]
    [app.util.text-editor :as ted]
    [app.util.text.content.styles :as styles]
    [app.util.timers :as ts]
@@ -52,50 +51,6 @@
 (declare v2-update-text-shape-content)
 (declare v2-update-text-editor-styles)
 
-(defn resize-wasm-text-modifiers
-  ([shape]
-   (resize-wasm-text-modifiers shape (:content shape)))
-
-  ([{:keys [id points selrect grow-type] :as shape} content]
-   (wasm.api/use-shape id)
-   (wasm.api/set-shape-text-content id content)
-   (wasm.api/set-shape-text-images id content)
-
-   (let [dimension (wasm.api/get-text-dimensions)
-         width-scale (if (#{:fixed :auto-height} grow-type)
-                       1.0
-                       (/ (:width dimension) (:width selrect)))
-         height-scale (if (= :fixed grow-type)
-                        1.0
-                        (/ (:height dimension) (:height selrect)))
-         resize-v  (gpt/point width-scale height-scale)
-         origin    (first points)]
-
-     {id
-      {:modifiers
-       (ctm/resize-modifiers
-        resize-v
-        origin
-        (:transform shape (gmt/matrix))
-        (:transform-inverse shape (gmt/matrix)))}})))
-
-(defn resize-wasm-text
-  [id]
-  (ptk/reify ::resize-wasm-text
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
-            shape   (get objects id)]
-        (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))))))
-
-(defn resize-wasm-text-all
-  [ids]
-  (ptk/reify ::resize-wasm-text-all
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (->> (rx/from ids)
-           (rx/map resize-wasm-text)))))
-
 ;; -- Content helpers
 
 (defn- v2-content-has-text?
@@ -178,7 +133,7 @@
                      {:undo-group (when new-shape? id)})
 
                     (dwm/apply-wasm-modifiers
-                     (resize-wasm-text-modifiers shape content)
+                     (dwwt/resize-wasm-text-modifiers shape content)
                      {:undo-group (when new-shape? id)})))))
 
               (let [content (d/merge (ted/export-content content)
@@ -823,7 +778,7 @@
            (when (features/active-feature? state "render-wasm/v1")
              ;; This delay is to give time for the font to be correctly rendered
              ;; in wasm.
-             (cond->> (rx/of (resize-wasm-text id))
+             (cond->> (rx/of (dwwt/resize-wasm-text id))
                (contains? attrs :font-id)
                (rx/delay 200)))))))
 
@@ -973,11 +928,11 @@
 
             (if (and (not= :fixed (:grow-type shape)) finalize?)
               (dwm/apply-wasm-modifiers
-               (resize-wasm-text-modifiers shape content)
+               (dwwt/resize-wasm-text-modifiers shape content)
                {:undo-group (when new-shape? id)})
 
               (dwm/set-wasm-modifiers
-               (resize-wasm-text-modifiers shape content)
+               (dwwt/resize-wasm-text-modifiers shape content)
                {:undo-group (when new-shape? id)})))
 
            (when finalize?

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

@@ -191,59 +191,63 @@
   [page-id [event [old-data new-data]]]
 
   (let [changes (:changes event)
-        lookup-data-objects
-        (fn [data page-id]
-          (dm/get-in data [:pages-index page-id :objects]))
+        ;; cache for the get-frame-ids function
+        frame-id-cache (atom {})]
 
+    (letfn [(lookup-data-objects [data page-id]
+              (dm/get-in data [:pages-index page-id :objects]))
 
-        extract-ids
-        (fn [{:keys [page-id type] :as change}]
-          (case type
-            :add-obj [[page-id (:id change)]]
-            :mod-obj [[page-id (:id change)]]
-            :del-obj [[page-id (:id change)]]
-            :mov-objects (->> (:shapes change) (map #(vector page-id %)))
-            []))
+            (extract-ids [{:keys [page-id type] :as change}]
+              (case type
+                :add-obj [[page-id (:id change)]]
+                :mod-obj [[page-id (:id change)]]
+                :del-obj [[page-id (:id change)]]
+                :mov-objects (->> (:shapes change) (map #(vector page-id %)))
+                []))
 
-        get-frame-ids
-        (fn get-frame-ids [id]
-          (let [old-objects     (lookup-data-objects old-data page-id)
-                new-objects     (lookup-data-objects new-data page-id)
+            (get-frame-ids [id]
+              (let [old-objects     (lookup-data-objects old-data page-id)
+                    new-objects     (lookup-data-objects new-data page-id)
 
-                new-shape       (get new-objects id)
-                old-shape       (get old-objects id)
+                    new-shape       (get new-objects id)
+                    old-shape       (get old-objects id)
 
-                old-frame-id    (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
-                new-frame-id    (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))
+                    old-frame-id    (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
+                    new-frame-id    (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))
 
-                root-frame-old? (cfh/root-frame? old-objects old-frame-id)
-                root-frame-new? (cfh/root-frame? new-objects new-frame-id)
-                instance-root?  (ctc/instance-root? new-shape)]
+                    root-frame-old? (cfh/root-frame? old-objects old-frame-id)
+                    root-frame-new? (cfh/root-frame? new-objects new-frame-id)
+                    instance-root?  (ctc/instance-root? new-shape)]
 
-            (cond-> #{}
-              root-frame-old?
-              (conj ["frame" old-frame-id])
+                (cond-> #{}
+                  root-frame-old?
+                  (conj ["frame" old-frame-id])
 
-              root-frame-new?
-              (conj ["frame" new-frame-id])
+                  root-frame-new?
+                  (conj ["frame" new-frame-id])
 
-              instance-root?
-              (conj ["component" id])
+                  instance-root?
+                  (conj ["component" id])
 
-              (and (uuid? (:frame-id old-shape))
-                   (not= uuid/zero (:frame-id old-shape)))
-              (into (get-frame-ids (:frame-id old-shape)))
+                  (and (uuid? (:frame-id old-shape))
+                       (not= uuid/zero (:frame-id old-shape)))
+                  (into (get-frame-ids (:frame-id old-shape)))
 
-              (and (uuid? (:frame-id new-shape))
-                   (not= uuid/zero (:frame-id new-shape)))
-              (into (get-frame-ids (:frame-id new-shape))))))]
+                  (and (uuid? (:frame-id new-shape))
+                       (not= uuid/zero (:frame-id new-shape)))
+                  (into (get-frame-ids (:frame-id new-shape))))))
 
-    (into #{}
-          (comp (mapcat extract-ids)
-                (filter (fn [[page-id']] (= page-id page-id')))
-                (map (fn [[_ id]] id))
-                (mapcat get-frame-ids))
-          changes)))
+            (get-frame-ids-cached [id]
+              (or (get @frame-id-cache id)
+                  (let [result (get-frame-ids id)]
+                    (swap! frame-id-cache assoc id result)
+                    result)))]
+      (into #{}
+            (comp (mapcat extract-ids)
+                  (filter (fn [[page-id']] (= page-id page-id')))
+                  (map (fn [[_ id]] id))
+                  (mapcat get-frame-ids-cached))
+            changes))))
 
 (defn watch-state-changes
   "Watch the state for changes inside frames. If a change is detected will force a rendering

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

@@ -27,9 +27,9 @@
    [app.main.data.workspace.colors :as wdc]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.shapes :as dwsh]
-   [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.store :as st]
@@ -315,7 +315,7 @@
           (and affects-layout?
                (features/active-feature? state "render-wasm/v1"))
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
 
 (defn update-line-height
   ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -374,7 +374,7 @@
                                             :page-id page-id}))
           (features/active-feature? state "render-wasm/v1")
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
 
 (defn- create-font-family-text-attrs
   [value]
@@ -451,7 +451,7 @@
                                             :page-id page-id}))
           (features/active-feature? state "render-wasm/v1")
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/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/data/workspace/wasm_text.cljs

@@ -0,0 +1,72 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.data.workspace.wasm-text
+  "Helpers/events to resize wasm text shapes without depending on workspace.texts.
+
+  This exists to avoid circular deps:
+  workspace.texts -> workspace.libraries -> workspace.texts"
+  (:require
+   [app.common.files.helpers :as cfh]
+   [app.common.geom.matrix :as gmt]
+   [app.common.geom.point :as gpt]
+   [app.common.types.modifiers :as ctm]
+   [app.main.data.helpers :as dsh]
+   [app.main.data.workspace.modifiers :as dwm]
+   [app.render-wasm.api :as wasm.api]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]))
+
+(defn resize-wasm-text-modifiers
+  ([shape]
+   (resize-wasm-text-modifiers shape (:content shape)))
+
+  ([{:keys [id points selrect grow-type] :as shape} content]
+   (wasm.api/use-shape id)
+   (wasm.api/set-shape-text-content id content)
+   (wasm.api/set-shape-text-images id content)
+
+   (let [dimension (wasm.api/get-text-dimensions)
+         width-scale (if (#{:fixed :auto-height} grow-type)
+                       1.0
+                       (/ (:width dimension) (:width selrect)))
+         height-scale (if (= :fixed grow-type)
+                        1.0
+                        (/ (:height dimension) (:height selrect)))
+         resize-v  (gpt/point width-scale height-scale)
+         origin    (first points)]
+
+     {id
+      {:modifiers
+       (ctm/resize-modifiers
+        resize-v
+        origin
+        (:transform shape (gmt/matrix))
+        (:transform-inverse shape (gmt/matrix)))}})))
+
+(defn resize-wasm-text
+  "Resize a single text shape (auto-width/auto-height) by id.
+  No-op if the id is not a text shape or is :fixed."
+  [id]
+  (ptk/reify ::resize-wasm-text
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects (dsh/lookup-page-objects state)
+            shape   (get objects id)]
+        (if (and (some? shape)
+                 (cfh/text-shape? shape)
+                 (not= :fixed (:grow-type shape)))
+          (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))
+          (rx/empty))))))
+
+(defn resize-wasm-text-all
+  "Resize all text shapes (auto-width/auto-height) from a collection of ids."
+  [ids]
+  (ptk/reify ::resize-wasm-text-all
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (->> (rx/from ids)
+           (rx/map resize-wasm-text)))))

frontend/src/app/main/rasterizer.cljs

@@ -108,6 +108,7 @@
   "Initializes the rasterizer."
   []
   (let [iframe (dom/create-element "iframe")]
+    (dom/set-attribute! iframe "id" "rasterizer")
     (dom/set-attribute! iframe "src" origin)
     (dom/set-attribute! iframe "hidden" true)
     (.addEventListener js/window "message" on-message)

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

@@ -15,6 +15,7 @@
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -138,7 +139,7 @@
               (dwsh/update-shapes ids #(assoc % :grow-type grow-type)))
 
              (when (features/active-feature? @st/state "render-wasm/v1")
-               (st/emit! (dwt/resize-wasm-text-all ids)))
+               (st/emit! (dwwt/resize-wasm-text-all ids)))
              ;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
              (ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
            (when (some? on-blur) (on-blur))))]

frontend/src/app/util/perf.cljs

@@ -169,3 +169,81 @@
            (let [end (timestamp)]
              (println (str "[" event "]" (- end start)))))
          #js {"priority" "user-blocking"})))))
+
+;; --- DEVTOOLS PERF LOGGING
+
+(defonce ^:private longtask-observer* (atom nil))
+(defonce ^:private stall-timer* (atom nil))
+(defonce ^:private current-op* (atom nil))
+
+(defn- install-long-task-observer
+  []
+  (when (and (some? (.-PerformanceObserver js/window)) (nil? @longtask-observer*))
+    (let [observer (js/PerformanceObserver.
+                    (fn [list _]
+                      (doseq [entry (.getEntries list)]
+                        (let [dur (.-duration entry)
+                              start (.-startTime entry)
+                              attrib (.-attribution entry)
+                              attrib-count (when attrib (.-length attrib))
+                              first-attrib (when (and attrib-count (> attrib-count 0)) (aget attrib 0))
+                              attrib-name (when first-attrib (.-name first-attrib))
+                              attrib-ctype (when first-attrib (.-containerType first-attrib))
+                              attrib-cid (when first-attrib (.-containerId first-attrib))
+                              attrib-csrc (when first-attrib (.-containerSrc first-attrib))]
+
+                          (.warn js/console (str "[perf] long task " (Math/round dur) "ms at " (Math/round start) "ms"
+                                                 (when first-attrib
+                                                   (str " attrib:name=" attrib-name
+                                                        " ctype=" attrib-ctype
+                                                        " cid=" attrib-cid
+                                                        " csrc=" attrib-csrc))))))))]
+      (.observe observer #js{:entryTypes #js["longtask"]})
+      (reset! longtask-observer* observer))))
+
+(defn- start-event-loop-stall-logger
+  "Log event loop stalls by measuring setInterval drift.
+
+  Params:
+    - interval-ms: base interval
+    - threshold-ms: drift over which we report
+  "
+  [interval-ms threshold-ms]
+  (when (nil? @stall-timer*)
+    (let [last (atom (.now js/performance))
+          id (js/setInterval
+              (fn []
+                (let [now (.now js/performance)
+                      expected (+ @last interval-ms)
+                      drift (- now expected)
+                      current-op @current-op*
+                      measures (.getEntriesByType js/performance "measure")
+                      mlen (.-length measures)
+                      last-measure (when (> mlen 0) (aget measures (dec mlen)))
+                      meas-name (when last-measure (.-name last-measure))
+                      meas-detail (when last-measure (.-detail last-measure))
+                      meas-count (when meas-detail (unchecked-get meas-detail "count"))]
+                  (reset! last now)
+                  (when (> drift threshold-ms)
+                    (.warn js/console
+                           (str "[perf] event loop stall: " (Math/round drift) "ms"
+                                (when current-op (str " op=" current-op))
+                                (when meas-name (str " last=" meas-name))
+                                (when meas-count (str " count=" meas-count)))))))
+              interval-ms)]
+      (reset! stall-timer* id))))
+
+(defn setup
+  "Install perf observers in dev builds. Safe to call multiple times.
+  Perf logs are disabled by default. Enable them with the :perf-logs
+  flag in config."
+  []
+  (install-long-task-observer)
+  (start-event-loop-stall-logger 50 100)
+  ;; Expose simple API on window for manual control in devtools
+  (let [api #js {:reset (fn []
+                          (try
+                            (.clearMarks js/performance)
+                            (.clearMeasures js/performance)
+                            (catch :default _ nil)))}]
+    (unchecked-set js/window "PenpotPerf" api)))

plugins/CONTRIBUTING.md

@@ -7,7 +7,7 @@ different parts of the platform, please refer to `docs/` directory.
 
 ## Reporting Bugs
 
-We are using [GitHub Issues](https://github.com/penpot/penpot-plugins/issues)
+We are using [GitHub Issues](https://github.com/penpot/penpot/issues)
 for our public bugs. We keep a close eye on this and try to make it
 clear when we have an internal fix in progress. Before filing a new
 task, try to make sure your problem doesn't already exist.

plugins/apps/colors-to-tokens-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/colors-to-tokens-plugin/tsconfig.app.json",
         "assets": [
+          "apps/colors-to-tokens-plugin/src/_headers",
           "apps/colors-to-tokens-plugin/src/favicon.ico",
           "apps/colors-to-tokens-plugin/src/assets"
         ],

plugins/apps/colors-to-tokens-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/contrast-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/contrast-plugin/tsconfig.app.json",
         "assets": [
+          "apps/contrast-plugin/src/_headers",
           "apps/contrast-plugin/src/favicon.ico",
           "apps/contrast-plugin/src/assets"
         ],

plugins/apps/contrast-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/create-palette-plugin/public/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/icons-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/icons-plugin/tsconfig.app.json",
         "assets": [
+          "apps/icons-plugin/src/_headers",
           "apps/icons-plugin/src/favicon.ico",
           "apps/icons-plugin/src/assets"
         ],

plugins/apps/icons-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/lorem-ipsum-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/lorem-ipsum-plugin/tsconfig.app.json",
         "assets": [
+          "apps/lorem-ipsum-plugin/src/_headers",
           "apps/lorem-ipsum-plugin/src/favicon.ico",
           "apps/lorem-ipsum-plugin/src/assets"
         ],

plugins/apps/lorem-ipsum-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/rename-layers-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/rename-layers-plugin/tsconfig.app.json",
         "assets": [
+          "apps/rename-layers-plugin/src/_headers",
           "apps/rename-layers-plugin/src/favicon.ico",
           "apps/rename-layers-plugin/src/assets"
         ],

plugins/apps/rename-layers-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/apps/table-plugin/project.json

@@ -16,6 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/table-plugin/tsconfig.app.json",
         "assets": [
+          "apps/table-plugin/src/_headers",
           "apps/table-plugin/src/favicon.ico",
           "apps/table-plugin/src/assets"
         ],

plugins/apps/table-plugin/src/_headers

@@ -0,0 +1,4 @@
+/*
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type

plugins/docs/api-docs.md

@@ -19,7 +19,7 @@ the latest changes from the `main` branch. This will trigger the
 deployment at Cloudfare if the `libs/plugin-types/index.d.ts` or the
 `tools/typedoc.css` files have been updated.
 
-Take a look at the [Penpot plugins API](https://penpot-plugins-api-doc.pages.dev/) to see what's new.
+Take a look at the [Penpot plugins API](https://doc.plugins.penpot.app/) to see what's new.
 
 #### Styles
 

plugins/libs/plugins-styles/README.md

@@ -20,7 +20,7 @@ Import the CSS file into your project:
 
 For detailed examples and to see how to use the styles and components, visit the documentation at:
 
-[Penpot Plugin Styles Documentation](https://penpot-plugins-styles.pages.dev)
+[Penpot Plugin Styles Documentation](https://styles-doc.plugins.penpot.app)
 
 #### Icons
 

plugins/wrangler-penpot-plugins-api-doc.toml

@@ -2,3 +2,7 @@ name = "penpot-plugins-api-doc"
 compatibility_date = "2025-01-01"
 
 assets = { directory = "dist/doc" }
+
+[[routes]]
+pattern = "WORKER_URI"
+custom_domain = true

plugins/wrangler-penpot-plugins-styles-doc.toml

@@ -0,0 +1,8 @@
+name = "penpot-plugins-style-doc"
+compatibility_date = "2025-01-01"
+
+assets = { directory = "dist/apps/example-styles" }
+
+[[routes]]
+pattern = "WORKER_URI"
+custom_domain = true

render-wasm/src/render/strokes.rs

@@ -27,8 +27,8 @@ fn draw_stroke_on_rect(
     // - The same rect if it's a center stroke
     // - A bigger rect if it's an outer stroke
     // - A smaller rect if it's an outer stroke
-    let stroke_rect = stroke.outer_rect(rect);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, scale, antialias);
+    let stroke_rect = stroke.aligned_rect(rect, scale);
+    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
@@ -63,8 +63,8 @@ fn draw_stroke_on_circle(
     // - The same oval if it's a center stroke
     // - A bigger oval if it's an outer stroke
     // - A smaller oval if it's an outer stroke
-    let stroke_rect = stroke.outer_rect(rect);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, scale, antialias);
+    let stroke_rect = stroke.aligned_rect(rect, scale);
+    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
@@ -131,7 +131,6 @@ pub fn draw_stroke_on_path(
     selrect: &Rect,
     path_transform: Option<&Matrix>,
     svg_attrs: Option<&SvgAttrs>,
-    scale: f32,
     shadow: Option<&ImageFilter>,
     blur: Option<&ImageFilter>,
     antialias: bool,
@@ -142,7 +141,7 @@ pub fn draw_stroke_on_path(
     let is_open = path.is_open();
 
     let mut paint: skia_safe::Handle<_> =
-        stroke.to_stroked_paint(is_open, selrect, svg_attrs, scale, antialias);
+        stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
 
     let filter = compose_filters(blur, shadow);
     paint.set_image_filter(filter);
@@ -166,7 +165,6 @@ pub fn draw_stroke_on_path(
         canvas,
         is_open,
         svg_attrs,
-        scale,
         blur,
         antialias,
     );
@@ -218,7 +216,6 @@ fn handle_stroke_caps(
     canvas: &skia::Canvas,
     is_open: bool,
     svg_attrs: Option<&SvgAttrs>,
-    scale: f32,
     blur: Option<&ImageFilter>,
     antialias: bool,
 ) {
@@ -233,8 +230,7 @@ fn handle_stroke_caps(
         let first_point = points.first().unwrap();
         let last_point = points.last().unwrap();
 
-        let mut paint_stroke =
-            stroke.to_stroked_paint(is_open, selrect, svg_attrs, scale, antialias);
+        let mut paint_stroke = stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
 
         if let Some(filter) = blur {
             paint_stroke.set_image_filter(filter.clone());
@@ -405,7 +401,7 @@ fn draw_image_stroke_in_container(
 
     // Draw the stroke based on the shape type, we are using this stroke as
     // a "selector" of the area of the image we want to show.
-    let outer_rect = stroke.outer_rect(container);
+    let outer_rect = stroke.aligned_rect(container, scale);
 
     match &shape.shape_type {
         shape_type @ (Type::Rect(_) | Type::Frame(_)) => {
@@ -450,8 +446,7 @@ fn draw_image_stroke_in_container(
                     }
                 }
                 let is_open = p.is_open();
-                let mut paint =
-                    stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, scale, antialias);
+                let mut paint = stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, antialias);
                 canvas.draw_path(&path, &paint);
                 if stroke.render_kind(is_open) == StrokeKind::Outer {
                     // Small extra inner stroke to overlap with the fill
@@ -466,7 +461,6 @@ fn draw_image_stroke_in_container(
                     canvas,
                     is_open,
                     svg_attrs,
-                    scale,
                     shape.image_filter(1.).as_ref(),
                     antialias,
                 );
@@ -662,7 +656,6 @@ fn render_internal(
                         &selrect,
                         path_transform.as_ref(),
                         svg_attrs,
-                        scale,
                         shadow,
                         shape.image_filter(1.).as_ref(),
                         antialias,
@@ -685,14 +678,13 @@ pub fn render_text_paths(
     shadow: Option<&ImageFilter>,
     antialias: bool,
 ) {
-    let scale = render_state.get_scale();
     let canvas = render_state
         .surfaces
         .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<_> =
-        stroke.to_text_stroked_paint(false, selrect, svg_attrs, scale, antialias);
+        stroke.to_text_stroked_paint(false, selrect, svg_attrs, antialias);
 
     if let Some(filter) = shadow {
         paint.set_image_filter(filter.clone());

render-wasm/src/shapes/strokes.rs

@@ -1,3 +1,4 @@
+use crate::math::is_close_to;
 use crate::shapes::fills::{Fill, SolidColor};
 use skia_safe::{self as skia, Rect};
 
@@ -144,6 +145,15 @@ impl Stroke {
         }
     }
 
+    pub fn aligned_rect(&self, rect: &Rect, scale: f32) -> Rect {
+        let stroke_rect = self.outer_rect(rect);
+        if self.kind != StrokeKind::Center {
+            return stroke_rect;
+        }
+
+        align_rect_to_half_pixel(&stroke_rect, self.width, scale)
+    }
+
     pub fn outer_corners(&self, corners: &Corners) -> Corners {
         let offset = match self.kind {
             StrokeKind::Center => 0.0,
@@ -162,7 +172,6 @@ impl Stroke {
         &self,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
         let mut paint = self.fill.to_paint(rect, antialias);
@@ -171,7 +180,7 @@ impl Stroke {
         let width = match self.kind {
             StrokeKind::Inner => self.width,
             StrokeKind::Center => self.width,
-            StrokeKind::Outer => self.width + (1. / scale),
+            StrokeKind::Outer => self.width,
         };
 
         paint.set_stroke_width(width);
@@ -230,10 +239,9 @@ impl Stroke {
         is_open: bool,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
-        let mut paint = self.to_paint(rect, svg_attrs, scale, antialias);
+        let mut paint = self.to_paint(rect, svg_attrs, antialias);
         match self.render_kind(is_open) {
             StrokeKind::Inner => {
                 paint.set_stroke_width(2. * paint.stroke_width());
@@ -254,10 +262,9 @@ impl Stroke {
         is_open: bool,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
-        let mut paint = self.to_paint(rect, svg_attrs, scale, antialias);
+        let mut paint = self.to_paint(rect, svg_attrs, antialias);
         match self.render_kind(is_open) {
             StrokeKind::Inner => {
                 paint.set_stroke_width(2. * paint.stroke_width());
@@ -284,6 +291,38 @@ impl Stroke {
     }
 }
 
+fn align_rect_to_half_pixel(rect: &Rect, stroke_width: f32, scale: f32) -> Rect {
+    if scale <= 0.0 {
+        return *rect;
+    }
+
+    let stroke_pixels = stroke_width * scale;
+    let stroke_pixels_rounded = stroke_pixels.round();
+    if !is_close_to(stroke_pixels, stroke_pixels_rounded) {
+        return *rect;
+    }
+
+    if (stroke_pixels_rounded as i32) % 2 == 0 {
+        return *rect;
+    }
+
+    let left_px = rect.left * scale;
+    let top_px = rect.top * scale;
+    let target_frac = 0.5;
+    let dx_px = target_frac - (left_px - left_px.floor());
+    let dy_px = target_frac - (top_px - top_px.floor());
+
+    if is_close_to(dx_px, 0.0) && is_close_to(dy_px, 0.0) {
+        return *rect;
+    }
+
+    Rect::from_xywh(
+        rect.left + (dx_px / scale),
+        rect.top + (dy_px / scale),
+        rect.width(),
+        rect.height(),
+    )
+}
 fn cap_margin_for_cap(cap: Option<StrokeCap>, width: f32) -> f32 {
     match cap {
         Some(StrokeCap::LineArrow)