🐛 Fix inspect tab styles on viewer

🐛 Fix incorrect resource lifetime handling on exporter

.github/workflows/build-tag.yml

@@ -11,7 +11,7 @@ jobs:
     secrets: inherit
     with:
       gh_ref: ${{ github.ref_name }}
-      build_wasm: "no"
+      build_wasm: "yes"
       build_storybook: "yes"
 
   build-docker:

CHANGES.md

@@ -93,7 +93,8 @@ example. It's still usable as before, we just removed the example.
 - Fix unpublish library modal not scrolling a long file list [Taiga #12285](https://tree.taiga.io/project/penpot/issue/12285)
 - Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
 - Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
-
+- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
+- Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
 ## 2.11.1
 
 - Fix WEBP shape export on docker images [Taiga #3838](https://tree.taiga.io/project/penpot/issue/3838)

backend/resources/app/onboarding.edn

@@ -3,7 +3,7 @@
   :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Tokens%20starter%20kit.penpot"}
  {:id "penpot-design-system"
   :name "Penpot Design System | Pencil"
-  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/penpot-app.penpot"}
+  :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Pencil-Penpot-Design-System.penpot"}
  {:id "wireframing-kit"
   :name "Wireframe library"
   :file-uri "https://github.com/penpot/penpot-files/raw/refs/heads/main/Wireframing%20kit%20v1.1.penpot"}

exporter/package.json

@@ -21,6 +21,7 @@
     "raw-body": "^3.0.1",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
+    "undici": "^7.16.0",
     "xml-js": "^1.6.11",
     "xregexp": "^5.1.2"
   },

exporter/scripts/wait-and-start.sh

@@ -7,5 +7,4 @@ bb -i '(babashka.wait/wait-for-port "localhost" 9630)';
 bb -i '(babashka.wait/wait-for-path "target/app.js")';
 sleep 2;
 
-export NODE_TLS_REJECT_UNAUTHORIZED=0
 exec node target/app.js

exporter/src/app/handlers/export_shapes.cljs

@@ -107,12 +107,12 @@
                                     :on-progress on-progress)
 
         append      (fn [{:keys [filename path] :as resource}]
-                      (rsc/add-to-zip! zip path (str/replace filename sanitize-file-regex "_")))
+                      (rsc/add-to-zip zip path (str/replace filename sanitize-file-regex "_")))
 
         proc        (->> exports
                          (map (fn [export] (rd/render export append)))
                          (p/all)
-                         (p/fnly (fn [_] (.finalize zip)))
+                         (p/mcat (fn [_] (rsc/close-zip zip)))
                          (p/fmap (constantly resource))
                          (p/mcat (partial rsc/upload-resource auth-token))
                          (p/fmap (fn [resource]

exporter/src/app/handlers/resources.cljs

@@ -11,6 +11,7 @@
    ["node:fs" :as fs]
    ["node:fs/promises" :as fsp]
    ["node:path" :as path]
+   ["undici" :as http]
    [app.common.exceptions :as ex]
    [app.common.transit :as t]
    [app.common.uri :as u]
@@ -53,30 +54,40 @@
     (.pipe zip out)
     zip))
 
-(defn add-to-zip!
+(defn add-to-zip
   [zip path name]
   (.file ^js zip path #js {:name name}))
 
-(defn close-zip!
+(defn close-zip
   [zip]
-  (.finalize ^js zip))
+  (p/create (fn [resolve]
+              (.on ^js zip "close" resolve)
+              (.finalize ^js zip))))
 
 (defn upload-resource
   [auth-token resource]
   (->> (fsp/readFile (:path resource))
        (p/fmap (fn [buffer]
+                 (js/console.log buffer)
                  (new js/Blob #js [buffer] #js {:type (:mtype resource)})))
        (p/mcat (fn [blob]
-                 (let [fdata (new js/FormData)
-                       uri   (-> (cf/get :public-uri)
-                                 (u/ensure-path-slash)
-                                 (u/join "api/management/methods/upload-tempfile")
-                                 (str))]
+                 (let [fdata  (new http/FormData)
+                       agent  (new http/Agent #js {:connect #js {:rejectUnauthorized false}})
+                       headers #js {"X-Shared-Key" cf/management-key
+                                    "Authorization" (str "Bearer " auth-token)}
+
+                       request #js {:headers headers
+                                    :method "POST"
+                                    :body fdata
+                                    :dispatcher agent}
+                       uri     (-> (cf/get :public-uri)
+                                   (u/ensure-path-slash)
+                                   (u/join "api/management/methods/upload-tempfile")
+                                   (str))]
+
                    (.append fdata "content" blob (:filename resource))
-                   (js/fetch uri #js {:headers #js {"X-Shared-Key" cf/management-key
-                                                    "Authorization" (str "Bearer " auth-token)}
-                                      :method "POST"
-                                      :body fdata}))))
+                   (http/fetch uri request))))
+
        (p/mcat (fn [response]
                  (if (not= (.-status response) 200)
                    (ex/raise :type :internal

exporter/src/app/util/shell.cljs

@@ -75,7 +75,8 @@
   [path]
   (->> (.stat fs/promises path)
        (p/fmap (fn [data]
-                 {:created-at (inst-ms (.-ctime ^js data))
+                 {:path path
+                  :created-at (inst-ms (.-ctime ^js data))
                   :size (.-size data)}))
        (p/merr (fn [_cause]
                  (p/resolved nil)))))

exporter/yarn.lock

@@ -582,6 +582,7 @@ __metadata:
     raw-body: "npm:^3.0.1"
     source-map-support: "npm:^0.5.21"
     svgo: "penpot/svgo#v3.1"
+    undici: "npm:^7.16.0"
     ws: "npm:^8.18.3"
     xml-js: "npm:^1.6.11"
     xregexp: "npm:^5.1.2"
@@ -1513,6 +1514,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^7.16.0":
+  version: 7.16.0
+  resolution: "undici@npm:7.16.0"
+  checksum: 10c0/efd867792e9f233facf9efa0a087e2d9c3e4415c0b234061b9b40307ca4fa01d945fee4d43c7b564e1b80e0d519bcc682f9f6e0de13c717146c00a80e2f1fb0f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^4.0.0":
   version: 4.0.0
   resolution: "unique-filename@npm:4.0.0"

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

@@ -301,7 +301,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -331,7 +331,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");
@@ -371,7 +371,7 @@ test.describe("Inspect tab - Styles", () => {
       );
       await openInspectTab(workspacePage);
 
-      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      const panel = await getPanelByTitle(workspacePage, "Size and position");
       await expect(panel).toBeVisible();
 
       const propertyRow = panel.getByTestId("property-row");

frontend/scripts/build

@@ -20,21 +20,24 @@ echo $PATH
 set -ex
 
 corepack enable;
-corepack install || exit 1;
+corepack install;
 yarn install || exit 1;
 
-rm -rf resources/public;
 rm -rf target/dist;
+rm -rf resources/public;
+
+mkdir -p resources/public;
+
+pushd ../render-wasm;
+./build
+popd
 
 yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS;
-
-if [ "$INCLUDE_WASM" = "yes" ];  then
-    yarn run build:wasm || exit 1;
-fi
-
 yarn run build:app:libs || exit 1;
 yarn run build:app:assets || exit 1;
 
+sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+
 mkdir -p target/dist;
 rsync -avr resources/public/ target/dist/
 

frontend/shadow-cljs.edn

@@ -94,7 +94,7 @@
    {:main
     {:entries [app.worker]
      :web-worker true
-     :prepend-js "importScripts('/js/worker/render.js');"
+     :prepend-js "importScripts('./render.js');"
      :depends-on #{}}}
 
    :js-options

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

@@ -53,6 +53,6 @@
 
 
 (mf/defc inspect-title-bar*
-  [{:keys [class title]}]
+  [{:keys [class title title-class]}]
   [:div {:class [(stl/css :title-bar) class]}
-   [:div {:class (stl/css :title-only :inspect-title)} title]])
+   [:div {:class [title-class (stl/css :title-only :inspect-title)]} title]])

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

@@ -45,7 +45,7 @@
 .element-list {
   @include t.use-typography("body-large");
   color: var(--modal-text-foreground-color);
-  overflow-y: scroll;
+  overflow-y: auto;
   margin-block: 0;
 }
 

frontend/src/app/main/ui/inspect/attributes.scss

@@ -12,14 +12,17 @@
   flex-direction: column;
   gap: var(--sp-l);
   width: 100%;
-  height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
   padding-top: var(--sp-s);
+  padding-inline: var(--sp-m);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  background-color: var(--low-emphasis-background);
 }
 
 .workspace-element-options {
-  height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
   padding-inline: var(--sp-m);
+  background-color: var(--low-emphasis-background);
 }

frontend/src/app/main/ui/inspect/attributes/blur.cljs

@@ -24,7 +24,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.blur")
-         :class (stl/css :title-spacing-blur)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :blur-attr-title)}
         (when (= (count shapes) 1)
           [:> copy-button* {:data  (css/get-css-property objects (first shapes) :filter)
                             :class (stl/css :copy-btn-title)}])]

frontend/src/app/main/ui/inspect/attributes/blur.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-blur {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.blur-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .blur-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/fill.cljs

@@ -68,7 +68,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.fill")
-         :class (stl/css :title-spacing-fill)}]
+         :class (stl/css :title-wrapper)
+         :class-title (stl/css :fill-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/fill.scss

@@ -5,16 +5,30 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-fill {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.fill-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-content {
   display: grid;
   gap: deprecated.$s-4;
 }
+
+.attributes-fill-block {
+  block-size: $sz-36;
+}

frontend/src/app/main/ui/inspect/attributes/geometry.cljs

@@ -44,7 +44,8 @@
   [:div {:class (stl/css :attributes-block)}
    [:> inspect-title-bar*
     {:title (tr "inspect.attributes.size")
-     :class (stl/css :title-spacing-geometry)}
+     :class (stl/css :title-wrapper)
+     :title-class (stl/css :geometry-attr-title)}
 
     (when (= (count shapes) 1)
       [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/geometry.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-geometry {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.geometry-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .geometry-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/layout.cljs

@@ -57,7 +57,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title "Layout"
-         :class (stl/css :title-spacing-layout)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :layout-attr-title)}
 
         (when (= (count shapes) 1)
           [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/layout.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-layout {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.layout-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .layout-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/layout_element.cljs

@@ -69,7 +69,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> title-bar* {:collapsable false
                        :title       menu-title
-                       :class       (stl/css :title-spacing-layout-element)}
+                       :class       (stl/css :title-wrapper)
+                       :title-class (stl/css :layout-element-attr-title)}
         (when (= (count shapes) 1)
           [:> copy-button* {:data  (css/get-shape-properties-css objects (first shapes) properties)
                             :class (stl/css :copy-btn-title)}])]

frontend/src/app/main/ui/inspect/attributes/layout_element.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-layout-element {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.layout-element-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .layout-element-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,6 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/attributes/shadow.cljs

@@ -63,7 +63,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.shadow")
-         :class (stl/css :title-spacing-shadow)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :shadow-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/shadow.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-shadow {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.shadow-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .shadow-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {

frontend/src/app/main/ui/inspect/attributes/stroke.cljs

@@ -88,7 +88,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "inspect.attributes.stroke")
-         :class (stl/css :title-spacing-stroke)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :stroke-attr-title)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/inspect/attributes/stroke.scss

@@ -5,21 +5,34 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-stroke {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.stroke-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-stroke-block {
-  @include deprecated.flexColumn;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
 }
 
 .stroke-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -28,5 +41,5 @@
 
 .attributes-content {
   display: grid;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
 }

frontend/src/app/main/ui/inspect/attributes/svg.cljs

@@ -54,5 +54,6 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title (tr "workspace.sidebar.options.svg-attrs.title")
-         :class (stl/css :title-spacing-svg)}]
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :svg-attr-title)}]
        [:& svg-block {:shape shape}]])))

frontend/src/app/main/ui/inspect/attributes/svg.scss

@@ -5,17 +5,29 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-svg {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.svg-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .svg-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,12 +35,12 @@
 }
 
 .attributes-subtitle {
-  @include deprecated.uppercaseTitleTipography;
+  @include use-typography("headline-small");
   display: flex;
   justify-content: space-between;
-  height: deprecated.$s-32;
+  block-size: $sz-32;
   span {
-    height: deprecated.$s-32;
+    block-size: $sz-32;
     display: flex;
     align-items: center;
   }

frontend/src/app/main/ui/inspect/attributes/text.cljs

@@ -157,7 +157,8 @@
     [:div {:class (stl/css :attributes-block)}
      [:> inspect-title-bar*
       {:title (tr "inspect.attributes.typography")
-       :class (stl/css :title-spacing-text)}]
+       :class (stl/css :title-wrapper)
+       :title-class (stl/css :text-atrr-title)}]
 
      (for [shape shapes]
        [:& text-block {:shape shape

frontend/src/app/main/ui/inspect/attributes/text.scss

@@ -5,23 +5,37 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-text {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.text-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .attributes-content {
-  @include deprecated.flexColumn;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
 }
 
 .text-row {
   @extend .attr-row;
-  height: unset;
-  min-height: deprecated.$s-32;
+  block-size: unset;
+  min-block-size: $sz-36;
   :global(.attr-value) {
     align-items: center;
   }
@@ -32,20 +46,20 @@
 }
 
 .attributes-content-row {
-  max-width: deprecated.$s-240;
-  min-height: calc(deprecated.$s-2 + deprecated.$s-32);
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-1 solid var(--menu-border-color-disabled);
-  margin-top: deprecated.$s-4;
+  max-inline-size: px2rem(240);
+  min-block-size: px2rem(34);
+  border-radius: $br-8;
+  border: $b-1 solid var(--menu-border-color-disabled);
+  margin-block-start: var(--sp-xs);
   .content {
-    @include deprecated.bodySmallTypography;
+    @include use-typography("body-small");
     width: 100%;
-    padding: deprecated.$s-4 0;
+    padding: var(--sp-xs) 0;
     color: var(--color-foreground-secondary);
   }
 
   &:hover {
-    border: deprecated.$s-1 solid var(--color-background-tertiary);
+    border: $b-1 solid var(--color-background-tertiary);
     background-color: var(--menu-background-color);
     .content {
       color: var(--menu-foreground-color-hover);

frontend/src/app/main/ui/inspect/attributes/variant.cljs

@@ -42,7 +42,8 @@
     [:div {:class (stl/css :attributes-block)}
      [:> inspect-title-bar*
       {:title (if is-container? (tr "inspect.attributes.variants") (tr "inspect.attributes.variant"))
-       :class (stl/css :title-spacing-variant)}]
+       :class (stl/css :title-wrapper)
+       :title-class (stl/css :variant-attr-title)}]
 
      (for [[pos property] (map-indexed vector properties)]
        [:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value (:value property)}])]))

frontend/src/app/main/ui/inspect/attributes/variant.scss

@@ -5,18 +5,29 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-variant {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.variant-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .variant-row {
   @extend .attr-row;
-  height: fit-content;
+  block-size: fit-content;
+  min-block-size: $sz-36;
 }
 
 .button-children {

frontend/src/app/main/ui/inspect/attributes/visibility.cljs

@@ -51,7 +51,8 @@
       [:div {:class (stl/css :attributes-block)}
        [:> inspect-title-bar*
         {:title "Visibility"
-         :class (stl/css :title-spacing-visibility)}
+         :class (stl/css :title-wrapper)
+         :title-class (stl/css :visibility-attr-title)}
 
         (when (= (count shapes) 1)
           [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/inspect/attributes/visibility.scss

@@ -5,17 +5,28 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .attributes-block {
-  @include deprecated.flexColumn;
+  --box-border-color: var(--color-background-primary);
+  display: flex;
+  flex-direction: column;
+  border-block-end: $b-2 solid var(--box-border-color);
 }
 
-.title-spacing-visibility {
-  @extend .attr-title;
+.title-wrapper {
+  margin-inline-start: 0;
+}
+
+.visibility-attr-title {
+  color: var(--entry-foreground-color-hover);
+  padding-block: var(--sp-s);
 }
 
 .visibility-row {
   @extend .attr-row;
+  block-size: $sz-36;
 }
 
 .button-children {
@@ -23,5 +34,5 @@
 }
 
 .copy-btn-title {
-  max-width: deprecated.$s-28;
+  max-inline-size: $sz-28;
 }

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -185,6 +185,7 @@
               [:> styles-tab* {:color-space color-space
                                :objects objects
                                :shapes shapes
+                               :from from
                                :libraries libraries
                                :file-id file-id}]
               :computed

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -24,10 +24,6 @@
   }
 }
 
-.viewer-code {
-  padding-inline-start: var(--sp-s);
-}
-
 .tool-windows {
   block-size: 100%;
   display: grid;

frontend/src/app/main/ui/inspect/styles.cljs

@@ -90,7 +90,7 @@
     :multiple))
 
 (mf/defc styles-tab*
-  [{:keys [color-space shapes libraries objects file-id]}]
+  [{:keys [color-space shapes libraries objects file-id from]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
         first-component    (ctkl/get-component data (:component-id first-shape))
@@ -131,7 +131,8 @@
          (mf/deps shorthands*)
          (fn [shorthand]
            (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
-    [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
+    [:ol {:class (stl/css-case :styles-tab true
+                               :styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
      ;;  TOKENS PANEL
      (when (or (seq active-themes) (seq active-sets))
        [:li

frontend/src/app/main/ui/inspect/styles.scss

@@ -7,5 +7,9 @@
 @use "ds/_utils.scss" as *;
 
 .styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  block-size: calc(100vh - px2rem(140)); // TODO: Fix this hardcoded value
+}
+
+.styles-tab-workspace {
+  block-size: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
 }

frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss

@@ -60,6 +60,7 @@
 }
 
 .property-detail-text {
+  @include use-typography("body-small");
   color: var(--detail-color);
 }
 

frontend/src/app/main/ui/inspect/styles/style_box.cljs

@@ -19,7 +19,7 @@
   (case type
     :variant    (tr "inspect.tabs.styles.variants-panel")
     :token      (tr "inspect.tabs.styles.token-panel")
-    :geometry   (tr "inspect.tabs.styles.geometry-panel")
+    :geometry   (tr "inspect.attributes.size")
     :fill       (tr "labels.fill")
     :stroke     (tr "labels.stroke")
     :text       (tr "labels.text")

frontend/src/app/main/ui/inspect/styles/style_box.scss

@@ -33,7 +33,6 @@
   display: flex;
   align-items: center;
   gap: var(--title-gap);
-  padding-block: var(--title-padding);
 }
 
 .disclosure-button {
@@ -52,4 +51,5 @@
   @include use-typography("headline-small");
   flex: 1;
   color: var(--title-color);
+  padding-block: var(--title-padding);
 }

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

@@ -68,7 +68,7 @@
 
 (mf/defc color-token-row*
   {::mf/private true}
-  [{:keys [active-tokens color-token color on-swatch-click-token detach-token open-modal-from-token]}]
+  [{:keys [active-tokens applied-token-name color on-swatch-click-token detach-token open-modal-from-token]}]
   (let [;; `active-tokens` may be provided as a `delay` (lazy computation).
         ;; In that case we must deref it (`@active-tokens`) to force evaluation
         ;; and obtain the actual value. If it’s already realized (not a delay),
@@ -77,21 +77,22 @@
                         @active-tokens
                         active-tokens)
 
-        color-tokens (:color active-tokens)
+        active-color-tokens (:color active-tokens)
 
-        token (some #(when (= (:name %) color-token) %) color-tokens)
+        token (some #(when (= (:name %) applied-token-name) %) active-color-tokens)
 
         on-detach-token
         (mf/use-fn
-         (mf/deps detach-token token color-token)
+         (mf/deps detach-token token applied-token-name)
          (fn []
-           (let [token (or token color-token)]
+           (let [token (or token applied-token-name)]
              (detach-token token))))
 
         has-errors (some? (:errors token))
         token-name (:name token)
         resolved (:resolved-value token)
-        not-active (and (some? active-tokens) (nil? token))
+        not-active (and (empty? active-tokens)
+                        (nil? token))
         id (dm/str (:id token) "-name")
         swatch-tooltip-content (cond
                                  not-active
@@ -109,7 +110,7 @@
                                #(mf/html
                                  [:div
                                   [:span (dm/str (tr "workspace.tokens.token-name") ": ")]
-                                  [:span {:class (stl/css :token-name-tooltip)} color-token]]))]
+                                  [:span {:class (stl/css :token-name-tooltip)} applied-token-name]]))]
 
     [:div {:class (stl/css :color-info)}
      [:div {:class (stl/css-case :token-color-wrapper true
@@ -128,7 +129,7 @@
                     :class (stl/css :token-tooltip)}
        [:div {:class (stl/css :token-name)
               :aria-labelledby id}
-        (or token-name color-token)]]
+        (or token-name applied-token-name)]]
       [:div {:class (stl/css :token-actions)}
        [:> icon-button*
         {:variant "action"
@@ -146,7 +147,11 @@
            on-change on-reorder on-detach on-open on-close on-remove origin on-detach-token
            disable-drag on-focus on-blur select-only select-on-focus on-token-change applied-token]}]
 
-  (let [token-color      (contains? cfg/flags :token-color)
+  (let [;; TODO: Remove this workaround fixing `get-attrs*` fn on sidebar/options/shapes/multiple.cljs
+        applied-token (if (= :multiple applied-token)
+                        nil
+                        applied-token)
+        token-color      (contains? cfg/flags :token-color)
         libraries        (mf/deref refs/files)
 
         color-without-hash (mf/use-memo
@@ -177,7 +182,6 @@
                                 (-> (deref active-tokens*)
                                     (select-keys (get tk/tokens-by-input origin))
                                     (not-empty)))))
-
         on-focus'
         (mf/use-fn
          (mf/deps on-focus)
@@ -352,7 +356,7 @@
      (cond
        (and token-color applied-token)
        [:> color-token-row* {:active-tokens tokens
-                             :color-token applied-token
+                             :applied-token-name applied-token
                              :color (dissoc color :ref-id :ref-file)
                              :on-swatch-click-token  on-swatch-click-token
                              :detach-token detach-token

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

@@ -63,7 +63,8 @@
            :data {:index index})
           [nil nil])
 
-        stroke-color-token (:stroke-color applied-tokens)
+        stroke-color-token
+        (:stroke-color applied-tokens)
 
         on-color-change-refactor
         (mf/use-fn

render-wasm/_build_env

@@ -63,6 +63,12 @@ function clean {
     cargo clean;
 }
 
+function setup {
+    corepack enable;
+    corepack install;
+    yarn install;
+}
+
 function build {
     cargo build $CARGO_PARAMS;
 }
@@ -70,12 +76,14 @@ function build {
 function copy_artifacts {
     DEST=$1;
 
+    mkdir -p $DEST;
+
     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;
 
-    npx esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
+    yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
         --log-level=error \
         --outfile=$DEST/worker/render.js \
         --platform=neutral \

render-wasm/build

@@ -2,8 +2,6 @@
 
 EMSDK_QUIET=1 . /opt/emsdk/emsdk_env.sh
 
-set -x
-
 _BUILD_NAME="${_BUILD_NAME:-render_wasm}"
 
 _SCRIPT_DIR=$(dirname $0);
@@ -11,8 +9,9 @@ pushd $_SCRIPT_DIR;
 
 . ./_build_env
 
-set -x;
+set -ex;
 
+setup;
 build;
 copy_artifacts "../frontend/resources/public/js";
 copy_shared_artifact;

render-wasm/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "penpot-render-wasm",
+  "version": "1.20.0",
+  "license": "MPL-2.0",
+  "author": "Kaleidos INC",
+  "private": true,
+  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/penpot/penpot"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "esbuild": "^0.25.9"
+  }
+}

render-wasm/watch

@@ -1,5 +1,4 @@
 #!/usr/bin/env bash
-set -x
 
 _SCRIPT_DIR=$(dirname $0);
 pushd $_SCRIPT_DIR;

render-wasm/yarn.lock

@@ -0,0 +1,302 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10c0
+
+"@esbuild/aix-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/aix-ppc64@npm:0.25.12"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm64@npm:0.25.12"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-arm@npm:0.25.12"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/android-x64@npm:0.25.12"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-arm64@npm:0.25.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/darwin-x64@npm:0.25.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.12"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/freebsd-x64@npm:0.25.12"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm64@npm:0.25.12"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-arm@npm:0.25.12"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ia32@npm:0.25.12"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-loong64@npm:0.25.12"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-mips64el@npm:0.25.12"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-ppc64@npm:0.25.12"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-riscv64@npm:0.25.12"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-s390x@npm:0.25.12"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/linux-x64@npm:0.25.12"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.12"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/netbsd-x64@npm:0.25.12"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.12"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openbsd-x64@npm:0.25.12"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openharmony-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.12"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/sunos-x64@npm:0.25.12"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-arm64@npm:0.25.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-ia32@npm:0.25.12"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.25.12":
+  version: 0.25.12
+  resolution: "@esbuild/win32-x64@npm:0.25.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@types/node@npm:^20.12.7":
+  version: 20.19.26
+  resolution: "@types/node@npm:20.19.26"
+  dependencies:
+    undici-types: "npm:~6.21.0"
+  checksum: 10c0/68e7d92dd2b7bddff9dffabb9c740e655906ceac428dcf070915cdcae720579e4d72261c55ed7eccbfa907a75cbb1ff3a9148ea49878a07a72d5dd6c9e06d9d7
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.25.9":
+  version: 0.25.12
+  resolution: "esbuild@npm:0.25.12"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.12"
+    "@esbuild/android-arm": "npm:0.25.12"
+    "@esbuild/android-arm64": "npm:0.25.12"
+    "@esbuild/android-x64": "npm:0.25.12"
+    "@esbuild/darwin-arm64": "npm:0.25.12"
+    "@esbuild/darwin-x64": "npm:0.25.12"
+    "@esbuild/freebsd-arm64": "npm:0.25.12"
+    "@esbuild/freebsd-x64": "npm:0.25.12"
+    "@esbuild/linux-arm": "npm:0.25.12"
+    "@esbuild/linux-arm64": "npm:0.25.12"
+    "@esbuild/linux-ia32": "npm:0.25.12"
+    "@esbuild/linux-loong64": "npm:0.25.12"
+    "@esbuild/linux-mips64el": "npm:0.25.12"
+    "@esbuild/linux-ppc64": "npm:0.25.12"
+    "@esbuild/linux-riscv64": "npm:0.25.12"
+    "@esbuild/linux-s390x": "npm:0.25.12"
+    "@esbuild/linux-x64": "npm:0.25.12"
+    "@esbuild/netbsd-arm64": "npm:0.25.12"
+    "@esbuild/netbsd-x64": "npm:0.25.12"
+    "@esbuild/openbsd-arm64": "npm:0.25.12"
+    "@esbuild/openbsd-x64": "npm:0.25.12"
+    "@esbuild/openharmony-arm64": "npm:0.25.12"
+    "@esbuild/sunos-x64": "npm:0.25.12"
+    "@esbuild/win32-arm64": "npm:0.25.12"
+    "@esbuild/win32-ia32": "npm:0.25.12"
+    "@esbuild/win32-x64": "npm:0.25.12"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/c205357531423220a9de8e1e6c6514242bc9b1666e762cd67ccdf8fdfdc3f1d0bd76f8d9383958b97ad4c953efdb7b6e8c1f9ca5951cd2b7c5235e8755b34a6b
+  languageName: node
+  linkType: hard
+
+"penpot-render-wasm@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "penpot-render-wasm@workspace:."
+  dependencies:
+    "@types/node": "npm:^20.12.7"
+    esbuild: "npm:^0.25.9"
+  languageName: unknown
+  linkType: soft
+
+"undici-types@npm:~6.21.0":
+  version: 6.21.0
+  resolution: "undici-types@npm:6.21.0"
+  checksum: 10c0/c01ed51829b10aa72fc3ce64b747f8e74ae9b60eafa19a7b46ef624403508a54c526ffab06a14a26b3120d055e1104d7abe7c9017e83ced038ea5cf52f8d5e04
+  languageName: node
+  linkType: hard