♻️ Refactor general token tes tto use new render

The font specific error string was never added to en.po (my own mistake).

Looking further into it, there is no need to add more work to
translators when a generic error goes a long way.

Specially since this is not expected to happen.

.github/workflows/build-develop.yml

@@ -1,6 +1,7 @@
 name: _DEVELOP
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '16 5-20 * * 1-5'
 

.github/workflows/build-staging-render.yml

@@ -1,6 +1,7 @@
 name: _STAGING RENDER
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '36 5-20 * * 1-5'
 

.github/workflows/build-staging.yml

@@ -1,6 +1,7 @@
 name: _STAGING
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '36 5-20 * * 1-5'
 

.github/workflows/build-tag.yml

@@ -1,6 +1,7 @@
 name: _TAG
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - '*'

CHANGES.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## 2.14.0 (Unreleased)
+## 2.15.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
 
@@ -10,6 +10,20 @@
 
 ### :sparkles: New features & Enhancements
 
+- Add MCP server integration [Taiga #13112](https://tree.taiga.io/project/penpot/us/13112), [Taiga #13114](https://tree.taiga.io/project/penpot/us/13114)
+- Add woff2 support on user uploaded fonts (by @Nivl) [Github #8248](https://github.com/penpot/penpot/pull/8248)
+- Option to download custom fonts (by @dfelinto) [Github #8320](https://github.com/penpot/penpot/issues/8320)
+- Add copy as image to clipboard option to workspace context menu (by @dfelinto) [Github #8313](https://github.com/penpot/penpot/pull/8313)
+
+### :bug: Bugs fixed
+
+- Fix Alt/Option to draw shapes from center point (by @offreal) [Github #8361](https://github.com/penpot/penpot/pull/8361)
+
+
+## 2.14.0 (Unreleased)
+
+### :sparkles: New features & Enhancements
+
 - Access to design tokens in Penpot Plugins [Taiga #8990](https://tree.taiga.io/project/penpot/us/8990)
 - Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
 - Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
@@ -34,13 +48,20 @@
 - Fix boolean operators in menu for boards [Taiga #13174](https://tree.taiga.io/project/penpot/issue/13174)
 - Fix viewer can update library [Taiga #13186](https://tree.taiga.io/project/penpot/issue/13186)
 - Fix remove fill affects different element than selected [Taiga #13128](https://tree.taiga.io/project/penpot/issue/13128)
+- Fix unable to finish the create account form using keyboard [Taiga #11333](https://tree.taiga.io/project/penpot/issue/11333)
+
+## 2.13.3
+
+### :bug: Bugs fixed
+
+- Revert yetti (http server) update, because that caused a regression on multipart uploads
 
 ## 2.13.2
 
 ### :bug: Bugs fixed
 
 - Fix modifying shapes by apply negative tokens to border radius [Taiga #13317](https://tree.taiga.io/project/penpot/issue/13317)
-- Fix security issue (Path Traversal Vulnerability) on fonts related RPC method
+- Fix arbitrary file read security issue on create-font-variant rpc method (https://github.com/penpot/penpot/security/advisories/GHSA-xp3f-g8rq-9px2)
 
 
 ## 2.13.1

backend/deps.edn

@@ -28,8 +28,8 @@
   com.google.guava/guava {:mvn/version "33.4.8-jre"}
 
   funcool/yetti
-  {:git/tag "v11.9"
-   :git/sha "5fad7a9"
+  {:git/tag "v11.8"
+   :git/sha "1d1b33f"
    :git/url "https://github.com/funcool/yetti.git"
    :exclusions [org.slf4j/slf4j-api]}
 

backend/src/app/http/sse.clj

@@ -53,6 +53,7 @@
      ::yres/status 200
      ::yres/body (yres/stream-body
                   (fn [_ output]
+
                     (let [channel  (sp/chan :buf buf :xf (keep encode))
                           listener (events/spawn-listener
                                     channel

backend/src/app/media.clj

@@ -54,7 +54,7 @@
    [:path ::fs/path]
    [:mtype {:optional true} ::sm/text]])
 
-(def ^:private check-input
+(def check-input
   (sm/check-fn schema:input))
 
 (defn validate-media-type!
@@ -381,6 +381,22 @@
               (when (zero? (:exit res))
                 (:out res))))
 
+          (woff2->sfnt [data]
+            ;; woff2_decompress outputs to same directory with .ttf extension
+            (let [finput  (tmp/tempfile :prefix "penpot.font." :suffix ".woff2")
+                  foutput (fs/path (str/replace (str finput) #"\.woff2$" ".ttf"))]
+              (try
+                (io/write* finput data)
+                (let [res (sh/sh "woff2_decompress" (str finput))]
+                  (if (zero? (:exit res))
+                    foutput
+                    (do
+                      (when (fs/exists? foutput)
+                        (fs/delete foutput))
+                      nil)))
+                (finally
+                  (fs/delete finput)))))
+
           ;; Documented here:
           ;; https://docs.microsoft.com/en-us/typography/opentype/spec/otff#table-directory
           (get-sfnt-type [data]
@@ -430,4 +446,27 @@
 
               (= stype :ttf)
               (-> (assoc "font/otf" (ttf->otf sfnt))
-                  (assoc "font/ttf" sfnt)))))))))
+                  (assoc "font/ttf" sfnt)))))
+
+        (contains? current "font/woff2")
+        (let [data    (get input "font/woff2")
+              foutput (woff2->sfnt data)]
+          (when-not foutput
+            (ex/raise :type :validation
+                      :code :invalid-woff2-file
+                      :hint "invalid woff2 file"))
+          (try
+            (let [sfnt  (io/read* foutput)
+                  type (get-sfnt-type sfnt)]
+              (cond-> input
+                (= type :otf)
+                (-> (assoc "font/otf" sfnt)
+                    (assoc "font/ttf" (otf->ttf sfnt))
+                    (update "font/woff" gen-if-nil #(ttf-or-otf->woff sfnt)))
+
+                (= type :ttf)
+                (-> (assoc "font/ttf" sfnt)
+                    (assoc "font/otf" (ttf->otf sfnt))
+                    (update "font/woff" gen-if-nil #(ttf-or-otf->woff sfnt)))))
+            (finally
+              (fs/delete foutput))))))))

backend/src/app/migrations.clj

@@ -463,8 +463,10 @@
     :fn (mg/resource "app/migrations/sql/0144-mod-server-error-report-table.sql")}
 
    {:name "0145-fix-plugins-uri-on-profile"
-    :fn mg0145/migrate}])
+    :fn mg0145/migrate}
 
+   {:name "0146-mod-access-token-table"
+    :fn (mg/resource "app/migrations/sql/0146-mod-access-token-table.sql")}])
 
 (defn apply-migrations!
   [pool name migrations]

backend/src/app/migrations/sql/0146-mod-access-token-table.sql

@@ -0,0 +1,2 @@
+ALTER TABLE access_token
+ ADD COLUMN type text NULL;

backend/src/app/nitrate.clj

@@ -87,6 +87,10 @@
   [:map
    [:valid ::sm/boolean]])
 
+(def ^:private schema:connectivity
+  [:map
+   [:licenses ::sm/boolean]])
+
 (defn- get-team-org
   [cfg {:keys [team-id] :as params}]
   (let [baseuri (cf/get :nitrate-backend-uri)]
@@ -97,6 +101,11 @@
   (let [baseuri (cf/get :nitrate-backend-uri)]
     (request-to-nitrate cfg :get (str baseuri "/api/users/" (str profile-id)) schema:user params)))
 
+(defn- get-connectivity
+  [cfg params]
+  (let [baseuri (cf/get :nitrate-backend-uri)]
+    (request-to-nitrate cfg :get (str baseuri "/api/connectivity") schema:connectivity params)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; INITIALIZATION
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -105,7 +114,8 @@
   [_ cfg]
   (when (contains? cf/flags :nitrate)
     {:get-team-org (partial get-team-org cfg)
-     :is-valid-user (partial is-valid-user cfg)}))
+     :is-valid-user (partial is-valid-user cfg)
+     :connectivity (partial get-connectivity cfg)}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; UTILS
@@ -128,3 +138,7 @@
   (let [params (assoc (or params {}) :team-id (:id team))
         org (call cfg :get-team-org params)]
     (assoc team :organization-id (:id org) :organization-name (:name org))))
+
+(defn connectivity
+  [cfg]
+  (call cfg :connectivity {}))

backend/src/app/rpc.clj

@@ -73,9 +73,13 @@
                                      (if (nil? result)
                                        204
                                        200))
-                         headers (cond-> (::http/headers mdata {})
-                                   (yres/stream-body? result)
+
+                         headers (::http/headers mdata {})
+                         headers (cond-> headers
+                                   (and (yres/stream-body? result)
+                                        (not (contains? headers "content-type")))
                                    (assoc "content-type" "application/octet-stream"))]
+
                      {::yres/status  status
                       ::yres/headers headers
                       ::yres/body    result}))]
@@ -258,6 +262,7 @@
           'app.rpc.commands.ldap
           'app.rpc.commands.management
           'app.rpc.commands.media
+          'app.rpc.commands.nitrate
           'app.rpc.commands.profile
           'app.rpc.commands.projects
           'app.rpc.commands.search

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

@@ -23,7 +23,7 @@
   (dissoc row :perms))
 
 (defn create-access-token
-  [{:keys [::db/conn] :as cfg} profile-id name expiration]
+  [{:keys [::db/conn] :as cfg} profile-id name expiration type]
   (let [token-id   (uuid/next)
         expires-at (some-> expiration (ct/in-future))
         created-at (ct/now)
@@ -36,6 +36,7 @@
                                {:id token-id
                                 :name name
                                 :token token
+                                :type type
                                 :profile-id profile-id
                                 :created-at created-at
                                 :updated-at created-at
@@ -50,17 +51,18 @@
 (def ^:private schema:create-access-token
   [:map {:title "create-access-token"}
    [:name [:string {:max 250 :min 1}]]
-   [:expiration {:optional true} ::ct/duration]])
+   [:expiration {:optional true} ::ct/duration]
+   [:type {:optional true} :string]])
 
 (sv/defmethod ::create-access-token
   {::doc/added "1.18"
    ::sm/params schema:create-access-token}
-  [cfg {:keys [::rpc/profile-id name expiration]}]
+  [cfg {:keys [::rpc/profile-id name expiration type]}]
 
   (quotes/check! cfg {::quotes/id ::quotes/access-tokens-per-profile
                       ::quotes/profile-id profile-id})
 
-  (db/tx-run! cfg create-access-token profile-id name expiration))
+  (db/tx-run! cfg create-access-token profile-id name expiration type))
 
 (def ^:private schema:delete-access-token
   [:map {:title "delete-access-token"}
@@ -83,5 +85,22 @@
   (->> (db/query pool :access-token
                  {:profile-id profile-id}
                  {:order-by [[:expires-at :asc] [:created-at :asc]]
-                  :columns [:id :name :perms :created-at :updated-at :expires-at]})
+                  :columns [:id :name :perms :type :created-at :updated-at :expires-at]})
        (mapv decode-row)))
+
+
+(def ^:private schema:get-current-mcp-token
+  [:map {:title "get-current-mcp-token"}])
+
+(sv/defmethod ::get-current-mcp-token
+  {::doc/added "2.15"
+   ::sm/params schema:get-current-mcp-token}
+  [{:keys [::db/pool]} {:keys [::rpc/profile-id ::rpc/request-at]}]
+  (->> (db/query pool :access-token
+                 {:profile-id profile-id
+                  :type "mcp"}
+                 {:order-by [[:expires-at :asc] [:created-at :asc]]
+                  :columns [:token :expires-at]})
+       (remove #(ct/is-after? (:expires-at %) request-at))
+       (map decode-row)
+       (first)))

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

@@ -9,12 +9,14 @@
    [app.binfile.common :as bfc]
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
+   [app.common.media :as cmedia]
    [app.common.schema :as sm]
    [app.common.time :as ct]
    [app.common.uuid :as uuid]
    [app.db :as db]
    [app.db.sql :as-alias sql]
    [app.features.logical-deletion :as ldel]
+   [app.http :as-alias http]
    [app.loggers.audit :as-alias audit]
    [app.loggers.webhooks :as-alias webhooks]
    [app.media :as media]
@@ -34,7 +36,9 @@
    java.io.InputStream
    java.io.OutputStream
    java.io.SequenceInputStream
-   java.util.Collections))
+   java.util.Collections
+   java.util.zip.ZipEntry
+   java.util.zip.ZipOutputStream))
 
 (set! *warn-on-reflection* true)
 
@@ -296,3 +300,98 @@
     (rph/with-meta (rph/wrap)
       {::audit/props {:font-family (:font-family variant)
                       :font-id (:font-id variant)}})))
+
+;; --- DOWNLOAD FONT
+
+(defn- make-temporal-storage-object
+  [cfg profile-id content]
+  (let [storage (sto/resolve cfg)
+        content (media/check-input content)
+        hash    (sto/calculate-hash (:path content))
+        data    (-> (sto/content (:path content))
+                    (sto/wrap-with-hash hash))
+        mtype   (:mtype content "application/octet-stream")
+        content {::sto/content data
+                 ::sto/deduplicate? true
+                 ::sto/touched-at (ct/in-future {:minutes 30})
+                 :profile-id profile-id
+                 :content-type mtype
+                 :bucket "tempfile"}]
+
+    (sto/put-object! storage content)))
+
+(defn- make-variant-filename
+  [v mtype]
+  (str (:font-family v) "-" (:font-weight v)
+       (when-not (= "normal" (:font-style v)) (str "-" (:font-style v)))
+       (cmedia/mtype->extension mtype)))
+
+(def ^:private schema:download-font
+  [:map {:title "download-font"}
+   [:id ::sm/uuid]])
+
+(sv/defmethod ::download-font
+  "Download the font file. Returns a http redirect to the asset resource uri."
+  {::doc/added "2.15"
+   ::sm/params schema:download-font}
+  [{:keys [::sto/storage ::db/pool] :as cfg} {:keys [::rpc/profile-id id]}]
+  (let [variant (db/get pool :team-font-variant {:id id})]
+    (teams/check-read-permissions! pool profile-id (:team-id variant))
+
+    ;; Try to get the best available font format (prefer TTF for broader compatibility).
+    (let [media-id (or (:ttf-file-id variant)
+                       (:otf-file-id variant)
+                       (:woff2-file-id variant)
+                       (:woff1-file-id variant))
+          sobj     (sto/get-object storage media-id)
+          mtype    (-> sobj meta :content-type)]
+
+      {:id (:id sobj)
+       :uri (files/resolve-public-uri (:id sobj))
+       :name (make-variant-filename variant mtype)})))
+
+(def ^:private schema:download-font-family
+  [:map {:title "download-font-family"}
+   [:font-id ::sm/uuid]])
+
+(sv/defmethod ::download-font-family
+  "Download the entire font family as a zip file. Returns the zip
+  bytes on the body, without encoding it on transit or json."
+  {::doc/added "2.15"
+   ::sm/params schema:download-font-family}
+  [{:keys [::sto/storage ::db/pool] :as cfg} {:keys [::rpc/profile-id font-id]}]
+  (let [variants (db/query pool :team-font-variant
+                           {:font-id font-id
+                            :deleted-at nil})]
+
+    (when-not (seq variants)
+      (ex/raise :type :not-found
+                :code :object-not-found))
+
+    (teams/check-read-permissions! pool profile-id (:team-id (first variants)))
+
+    (let [tempfile (tmp/tempfile :suffix ".zip")
+          ffamily  (-> variants first :font-family)]
+
+      (with-open [^OutputStream output (io/output-stream tempfile)
+                  ^OutputStream output (ZipOutputStream. output)]
+        (doseq [v variants]
+          (let [media-id (or (:ttf-file-id v)
+                             (:otf-file-id v)
+                             (:woff2-file-id v)
+                             (:woff1-file-id v))
+                sobj     (sto/get-object storage media-id)
+                mtype    (-> sobj meta :content-type)
+                name     (make-variant-filename v mtype)]
+
+            (with-open [input (sto/get-object-data storage sobj)]
+              (.putNextEntry ^ZipOutputStream output (ZipEntry. ^String name))
+              (io/copy input output :size (:size sobj))
+              (.closeEntry ^ZipOutputStream output)))))
+
+      (let [{:keys [id] :as sobj} (make-temporal-storage-object cfg profile-id
+                                                                {:mtype "application/zip"
+                                                                 :path tempfile})]
+        {:id id
+         :uri (files/resolve-public-uri id)
+         :name (str ffamily ".zip")}))))

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

@@ -0,0 +1,20 @@
+(ns app.rpc.commands.nitrate
+  (:require
+   [app.common.schema :as sm]
+   [app.nitrate :as nitrate]
+   [app.rpc :as-alias rpc]
+   [app.rpc.doc :as-alias doc]
+   [app.util.services :as sv]))
+
+
+(def schema:connectivity
+  [:map {:title "nitrate-connectivity"}
+   [:licenses ::sm/boolean]])
+
+(sv/defmethod ::get-nitrate-connectivity
+  {::rpc/auth false
+   ::doc/added "1.18"
+   ::sm/params [:map]
+   ::sm/result schema:connectivity}
+  [cfg _params]
+  (nitrate/connectivity cfg))

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

@@ -48,6 +48,7 @@
 (def schema:props
   [:map {:title "ProfileProps"}
    [:plugins {:optional true} schema:plugin-registry]
+   [:mcp-status {:optional true} ::sm/boolean]
    [:newsletter-updates {:optional true} ::sm/boolean]
    [:newsletter-news {:optional true} ::sm/boolean]
    [:onboarding-team-id {:optional true} ::sm/uuid]

backend/test/backend_tests/http_middleware_test.clj

@@ -102,7 +102,7 @@
 
 (t/deftest access-token-authz
   (let [profile (th/create-profile* 1)
-        token   (db/tx-run! th/*system* app.rpc.commands.access-token/create-access-token (:id profile) "test" nil)
+        token   (db/tx-run! th/*system* app.rpc.commands.access-token/create-access-token (:id profile) "test" nil nil)
         handler (#'app.http.access-token/wrap-authz identity th/*system*)]
 
     (let [response (handler nil)]

backend/test/backend_tests/rpc_access_tokens_test.clj

@@ -107,4 +107,18 @@
         ;; (th/print-result! out)
         (t/is (nil? (:error out)))
         (let [results (:result out)]
-          (t/is (= 2 (count results))))))))
+          (t/is (= 2 (count results))))))
+
+    (t/testing "get mcp token"
+      (let [_ (th/command! {::th/type :create-access-token
+                            ::rpc/profile-id (:id prof)
+                            :type "mcp"
+                            :name "token 1"
+                            :perms ["get-profile"]})
+            {:keys [error result]}
+            (th/command! {::th/type :get-current-mcp-token
+                          ::rpc/profile-id (:id prof)})]
+        ;; (th/print-result! result)
+        (t/is (nil? error))
+        (t/is (string? (:token result)))))))
+

backend/test/backend_tests/rpc_font_test.clj

@@ -93,6 +93,41 @@
         :font-weight
         :font-style))))
 
+(t/deftest woff2-font-upload-1
+  (let [prof    (th/create-profile* 1 {:is-active true})
+        team-id (:default-team-id prof)
+        proj-id (:default-project-id prof)
+        font-id (uuid/custom 10 1)
+
+        data    (-> (io/resource "backend_tests/test_files/font-1.woff2")
+                    (io/read*))
+
+        params  {::th/type :create-font-variant
+                 ::rpc/profile-id (:id prof)
+                 :team-id team-id
+                 :font-id font-id
+                 :font-family "somefont"
+                 :font-weight 400
+                 :font-style "normal"
+                 :data {"font/woff2" data}}
+        out     (th/command! params)]
+
+    ;; (th/print-result! out)
+    (t/is (nil? (:error out)))
+    (let [result (:result out)]
+      (t/is (uuid? (:id result)))
+      (t/is (uuid? (:ttf-file-id result)))
+      (t/is (uuid? (:otf-file-id result)))
+      (t/is (uuid? (:woff1-file-id result)))
+      (t/is (uuid? (:woff2-file-id result)))
+      (t/are [k] (= (get params k)
+                    (get result k))
+        :team-id
+        :font-id
+        :font-family
+        :font-weight
+        :font-style))))
+
 (t/deftest font-deletion-1
   (let [prof    (th/create-profile* 1 {:is-active true})
         team-id (:default-team-id prof)

common/src/app/common/flags.cljc

@@ -152,7 +152,9 @@
     :redis-cache
 
     ;; Activates the nitrate module
-    :nitrate})
+    :nitrate
+
+    :mcp})
 
 (def all-flags
   (set/union email login varia))

common/src/app/common/media.cljc

@@ -12,6 +12,7 @@
 (def font-types
   #{"font/ttf"
     "font/woff"
+    "font/woff2"
     "font/otf"
     "font/opentype"})
 
@@ -81,21 +82,22 @@
 (defn parse-font-weight
   [variant]
   (cond
-    (re-seq #"(?i)(?:hairline|thin)" variant)               100
-    (re-seq #"(?i)(?:extra\s*light|ultra\s*light)" variant) 200
-    (re-seq #"(?i)(?:light)" variant)                       300
-    (re-seq #"(?i)(?:normal|regular)" variant)              400
-    (re-seq #"(?i)(?:medium)" variant)                      500
-    (re-seq #"(?i)(?:semi\s*bold|demi\s*bold)" variant)     600
-    (re-seq #"(?i)(?:extra\s*bold|ultra\s*bold)" variant)   800
-    (re-seq #"(?i)(?:bold)" variant)                        700
-    (re-seq #"(?i)(?:extra\s*black|ultra\s*black)" variant) 950
-    (re-seq #"(?i)(?:black|heavy|solid)" variant)           900
-    :else                                                   400))
+    (re-seq #"(?i)(?:^|[-_\s])(hairline|thin)(?=(?:[-_\s]|$|italic\b))" variant)               100
+    (re-seq #"(?i)(?:^|[-_\s])(extra\s*light|ultra\s*light)(?=(?:[-_\s]|$|italic\b))" variant) 200
+    (re-seq #"(?i)(?:^|[-_\s])(light)(?=(?:[-_\s]|$|italic\b))" variant)                       300
+    (re-seq #"(?i)(?:^|[-_\s])(normal|regular)(?=(?:[-_\s]|$|italic\b))" variant)              400
+    (re-seq #"(?i)(?:^|[-_\s])(medium)(?=(?:[-_\s]|$|italic\b))" variant)                      500
+    (re-seq #"(?i)(?:^|[-_\s])(semi\s*bold|demi\s*bold)(?=(?:[-_\s]|$|italic\b))" variant)     600
+    (re-seq #"(?i)(?:^|[-_\s])(extra\s*bold|ultra\s*bold)(?=(?:[-_\s]|$|italic\b))" variant)   800
+    (re-seq #"(?i)(?:^|[-_\s])(bold)(?=(?:[-_\s]|$|italic\b))" variant)                        700
+    (re-seq #"(?i)(?:^|[-_\s])(extra\s*black|ultra\s*black)(?=(?:[-_\s]|$|italic\b))" variant) 950
+    (re-seq #"(?i)(?:^|[-_\s])(black|heavy|solid)(?=(?:[-_\s]|$|italic\b))" variant)           900
+    :else                                                                                      400))
 
 (defn parse-font-style
   [variant]
-  (if (re-seq #"(?i)(?:italic)" variant)
+  (if (or (re-seq #"(?i)(?:^|[-_\s])(italic)(?:[-_\s]|$)" variant)
+          (re-seq #"(?i)italic$" variant))
     "italic"
     "normal"))
 

common/test/common_tests/media_test.cljc

@@ -9,6 +9,39 @@
    [app.common.media :as media]
    [clojure.test :as t]))
 
+(t/deftest test-parse-font-weight
+  (t/testing "matches weight tokens with proper boundaries"
+    (t/is (= 700 (media/parse-font-weight "Roboto-Bold")))
+    (t/is (= 700 (media/parse-font-weight "Roboto_Bold")))
+    (t/is (= 700 (media/parse-font-weight "Roboto Bold")))
+    (t/is (= 700 (media/parse-font-weight "Bold")))
+    (t/is (= 800 (media/parse-font-weight "Roboto-ExtraBold")))
+    (t/is (= 600 (media/parse-font-weight "OpenSans-SemiBold")))
+    (t/is (= 300 (media/parse-font-weight "Lato-Light")))
+    (t/is (= 100 (media/parse-font-weight "Roboto-Thin")))
+    (t/is (= 200 (media/parse-font-weight "Roboto-ExtraLight")))
+    (t/is (= 500 (media/parse-font-weight "Roboto-Medium")))
+    (t/is (= 900 (media/parse-font-weight "Roboto-Black"))))
+
+  (t/testing "does not match weight tokens embedded in words"
+    (t/is (= 400 (media/parse-font-weight "Boldini")))
+    (t/is (= 400 (media/parse-font-weight "Lighthaus")))
+    (t/is (= 400 (media/parse-font-weight "Blackwood")))
+    (t/is (= 400 (media/parse-font-weight "Thinker")))
+    (t/is (= 400 (media/parse-font-weight "Mediaeval")))))
+
+(t/deftest test-parse-font-style
+  (t/testing "matches italic with proper boundaries"
+    (t/is (= "italic" (media/parse-font-style "Roboto-Italic")))
+    (t/is (= "italic" (media/parse-font-style "Roboto_Italic")))
+    (t/is (= "italic" (media/parse-font-style "Roboto Italic")))
+    (t/is (= "italic" (media/parse-font-style "Italic")))
+    (t/is (= "italic" (media/parse-font-style "Roboto-BoldItalic"))))
+
+  (t/testing "does not match italic embedded in words"
+    (t/is (= "normal" (media/parse-font-style "Italica")))
+    (t/is (= "normal" (media/parse-font-style "Roboto-Regular")))))
+
 (t/deftest test-strip-image-extension
   (t/testing "removes extension from supported image files"
     (t/is (= (media/strip-image-extension "foo.png") "foo"))

docker/devenv/docker-compose.yaml

@@ -50,6 +50,7 @@ services:
       - 4400:4400
       - 4401:4401
       - 4402:4402
+      - 4403:4403
 
       # Plugins
       - 4200:4200

docker/images/Dockerfile.exporter

@@ -5,7 +5,8 @@ ENV LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8 \
     NODE_VERSION=v22.22.0 \
     DEBIAN_FRONTEND=noninteractive \
-    PATH=/opt/node/bin:/opt/imagick/bin:$PATH
+    PATH=/opt/node/bin:/opt/imagick/bin:$PATH \
+    PLAYWRIGHT_BROWSERS_PATH=/opt/penpot/browsers
 
 RUN set -ex; \
     useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot; \

exporter/scripts/build

@@ -15,6 +15,7 @@ pnpm run build;
 
 cp pnpm-lock.yaml target/;
 cp package.json target/;
+touch target/pnpm-workspace.yaml;
 
 cat <<EOF | tee target/setup
 #/usr/bin/env bash
@@ -22,7 +23,7 @@ set -e;
 corepack enable;
 corepack install;
 pnpm install
-pnpx playwright install chromium;
+pnpm exec playwright install chromium;
 EOF
 
 chmod +x target/setup;

frontend/package.json

@@ -40,14 +40,16 @@
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
+    "clear:wasm": "cargo clean --manifest-path ../render-wasm/Cargo.toml",
     "watch": "exit 0",
-    "watch:app": "pnpm run clear:shadow-cache && pnpm run build:wasm && concurrently --kill-others-on-fail \"pnpm run watch:app:assets\" \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
-    "watch:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
+    "watch:app": "pnpm run clear:shadow-cache && pnpm run clear:wasm && pnpm run build:wasm && concurrently --kill-others-on-fail \"pnpm run watch:app:assets\" \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
+    "watch:storybook": "pnpm run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\"",
+    "postinstall": "(cd ../plugins/libs/plugins-runtime; pnpm install; pnpm run build)"
   },
   "devDependencies": {
     "@penpot/draft-js": "workspace:./packages/draft-js",
     "@penpot/mousetrap": "workspace:./packages/mousetrap",
-    "@penpot/plugins-runtime": "1.4.2",
+    "@penpot/plugins-runtime": "link:../plugins/dist/plugins-runtime",
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "workspace:./text-editor",
     "@penpot/tokenscript": "workspace:./packages/tokenscript",

frontend/playwright/data/workspace/get-file-13382-fragment.json

@@ -0,0 +1,22 @@
+{
+  "~:file-id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+  "~:id": "~u4173a29d-4020-80b4-8007-96527ba9d8af",
+  "~:created-at": "~m1771342236330",
+  "~:modified-at": "~m1771342236330",
+  "~:type": "fragment",
+  "~:backend": "db",
+  "~:data": {
+    "~:id": "~uecb0cfd0-0f0b-81f7-8007-950628f9665b",
+    "~:name": "Page 1",
+    "~:objects": {
+      "~#penpot/objects-map/v2": {
+        "~ude9c6736-45ce-80a1-8007-950643da554d": "[\"~#shape\",[\"^ \",\"~:y\",383.99998939037323,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"R1\",\"~:width\",74,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",383.99998939037323]],[\"^<\",[\"^ \",\"~:x\",905.999992787838,\"~:y\",383.99998939037323]],[\"^<\",[\"^ \",\"~:x\",905.999992787838,\"~:y\",429.99998664855957]],[\"^<\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",429.99998664855957]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-950643da554d\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:strokes\",[],\"~:x\",831.999992787838,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",831.999992787838,\"~:y\",383.99998939037323,\"^8\",74,\"~:height\",45.99999725818634,\"~:x1\",831.999992787838,\"~:y1\",383.99998939037323,\"~:x2\",905.999992787838,\"~:y2\",429.99998664855957]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",45.99999725818634,\"~:flip-y\",null]]",
+        "~ude9c6736-45ce-80a1-8007-95065b4599ea": "[\"~#shape\",[\"^ \",\"~:y\",439.999969256975,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"R2\",\"~:width\",300.00007388362076,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",832.0000015918991,\"~:y\",439.99996925697496]],[\"^<\",[\"^ \",\"~:x\",1132.00007547552,\"~:y\",439.99996925697496]],[\"^<\",[\"^ \",\"~:x\",1132.00007547552,\"~:y\",589.9999658711585]],[\"^<\",[\"^ \",\"~:x\",832.0000015918991,\"~:y\",589.9999658711585]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:fix\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"^?\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95065b4599ea\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:strokes\",[],\"~:x\",832.0000015918993,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",832.0000015918993,\"~:y\",439.999969256975,\"^8\",300.00007388362076,\"~:height\",149.9999966141835,\"~:x1\",832.0000015918993,\"~:y1\",439.999969256975,\"~:x2\",1132.0000754755201,\"~:y2\",589.9999658711586]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",149.9999966141835,\"~:flip-y\",null]]",
+        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^I\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95062aa41d6b": "[\"~#shape\",[\"^ \",\"~:y\",342.0000208153068,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",false,\"~:name\",\"A\",\"~:layout-align-items\",\"~:start\",\"~:width\",392.9999889135361,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",342.0000208153068]],[\"^L\",[\"^ \",\"~:x\",1180.9999653100967,\"~:y\",342.0000208153068]],[\"^L\",[\"^ \",\"~:x\",1180.9999653100967,\"~:y\",704.000018450968]],[\"^L\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",704.000018450968]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",787.9999763965607,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",787.9999763965607,\"~:y\",342.0000208153068,\"^F\",392.9999889135361,\"~:height\",361.9999976356612,\"~:x1\",787.9999763965607,\"~:y1\",342.0000208153068,\"~:x2\",1180.9999653100967,\"~:y2\",704.000018450968]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^19\",361.9999976356612,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95062fafbb88\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95063a202e52": "[\"~#shape\",[\"^ \",\"~:y\",374.00001145409465,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",10,\"~:p2\",10,\"~:p3\",10,\"~:p4\",10],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"C\",\"~:layout-align-items\",\"~:start\",\"~:width\",320.00009969013945,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",374.0000114540946]],[\"^L\",[\"^ \",\"~:x\",1142.0000912532628,\"~:y\",374.0000114540946]],[\"^L\",[\"^ \",\"~:x\",1142.0000912532628,\"~:y\",600.0000518384436]],[\"^L\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",600.0000518384436]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",10,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"^O\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95063a202e52\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:strokes\",[[\"^ \",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#000000\",\"~:stroke-opacity\",1,\"~:stroke-width\",1]],\"~:x\",821.9999915631233,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",821.9999915631233,\"~:y\",374.00001145409465,\"^F\",320.00009969013945,\"~:height\",226.000040384349,\"~:x1\",821.9999915631233,\"~:y1\",374.00001145409465,\"~:x2\",1142.0000912532628,\"~:y2\",600.0000518384436]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1A\",226.000040384349,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95065b4599ea\",\"~ude9c6736-45ce-80a1-8007-950643da554d\"]]]",
+        "~ude9c6736-45ce-80a1-8007-95062fafbb88": "[\"~#shape\",[\"^ \",\"~:y\",342.0000083402533,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",31.999953508377075,\"~:p2\",34.000026052944804,\"~:p3\",31.999953508377075,\"~:p4\",34.000026052944804],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"B\",\"~:layout-align-items\",\"~:start\",\"~:width\",392.9999979687366,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",342.00000834025326]],[\"^L\",[\"^ \",\"~:x\",1181.0000275138177,\"~:y\",342.00000834025326]],[\"^L\",[\"^ \",\"~:x\",1181.0000275138177,\"~:y\",631.9999659712]],[\"^L\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",631.9999659712]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~uecb0cfd0-0f0b-81f7-8007-950628f9665b\",\"~:layout-item-v-sizing\",\"~:auto\",\"~:r3\",0,\"~:layout-justify-content\",\"^E\",\"~:r1\",0,\"~:id\",\"~ude9c6736-45ce-80a1-8007-95062fafbb88\",\"~:parent-id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~ude9c6736-45ce-80a1-8007-95062aa41d6b\",\"~:strokes\",[[\"^ \",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#000000\",\"~:stroke-opacity\",1,\"~:stroke-width\",1]],\"~:x\",788.0000295450811,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",788.0000295450811,\"~:y\",342.0000083402533,\"^F\",392.9999979687366,\"~:height\",289.99995763094677,\"~:x1\",788.0000295450811,\"~:y1\",342.0000083402533,\"~:x2\",1181.0000275138177,\"~:y2\",631.9999659712]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1B\",289.99995763094677,\"~:flip-y\",null,\"~:shapes\",[\"~ude9c6736-45ce-80a1-8007-95063a202e52\"]]]"
+      }
+    }
+  }
+}

frontend/playwright/data/workspace/get-file-13382.json

@@ -0,0 +1,131 @@
+{
+  "~:features": {
+    "~#set": [
+      "fdata/path-data",
+      "design-tokens/v1",
+      "variants/v1",
+      "layout/grid",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:team-id": "~ud715d0a5-a44e-8056-8005-a79999e18b64",
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true,
+    "~:can-read": true,
+    "~:is-logged": true
+  },
+  "~:has-media-trimmed": false,
+  "~:comment-thread-seqn": 0,
+  "~:name": "bug flex",
+  "~:revn": 33,
+  "~:modified-at": "~m1771342236324",
+  "~:vern": 0,
+  "~:id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+  "~:is-shared": false,
+  "~:migrations": {
+    "~#ordered-set": [
+      "legacy-2",
+      "legacy-3",
+      "legacy-5",
+      "legacy-6",
+      "legacy-7",
+      "legacy-8",
+      "legacy-9",
+      "legacy-10",
+      "legacy-11",
+      "legacy-12",
+      "legacy-13",
+      "legacy-14",
+      "legacy-16",
+      "legacy-17",
+      "legacy-18",
+      "legacy-19",
+      "legacy-25",
+      "legacy-26",
+      "legacy-27",
+      "legacy-28",
+      "legacy-29",
+      "legacy-31",
+      "legacy-32",
+      "legacy-33",
+      "legacy-34",
+      "legacy-36",
+      "legacy-37",
+      "legacy-38",
+      "legacy-39",
+      "legacy-40",
+      "legacy-41",
+      "legacy-42",
+      "legacy-43",
+      "legacy-44",
+      "legacy-45",
+      "legacy-46",
+      "legacy-47",
+      "legacy-48",
+      "legacy-49",
+      "legacy-50",
+      "legacy-51",
+      "legacy-52",
+      "legacy-53",
+      "legacy-54",
+      "legacy-55",
+      "legacy-56",
+      "legacy-57",
+      "legacy-59",
+      "legacy-62",
+      "legacy-65",
+      "legacy-66",
+      "legacy-67",
+      "0001-remove-tokens-from-groups",
+      "0002-normalize-bool-content-v2",
+      "0002-clean-shape-interactions",
+      "0003-fix-root-shape",
+      "0003-convert-path-content-v2",
+      "0005-deprecate-image-type",
+      "0006-fix-old-texts-fills",
+      "0008-fix-library-colors-v4",
+      "0009-clean-library-colors",
+      "0009-add-partial-text-touched-flags",
+      "0010-fix-swap-slots-pointing-non-existent-shapes",
+      "0011-fix-invalid-text-touched-flags",
+      "0012-fix-position-data",
+      "0013-fix-component-path",
+      "0013-clear-invalid-strokes-and-fills",
+      "0014-fix-tokens-lib-duplicate-ids",
+      "0014-clear-components-nil-objects",
+      "0015-fix-text-attrs-blank-strings",
+      "0015-clean-shadow-color",
+      "0016-copy-fills-from-position-data-to-text-node"
+    ]
+  },
+  "~:version": 67,
+  "~:project-id": "~u76eab896-accf-81a5-8007-2b264ebe7817",
+  "~:created-at": "~m1771255281717",
+  "~:backend": "legacy-db",
+  "~:data": {
+    "~:pages": [
+      "~uecb0cfd0-0f0b-81f7-8007-950628f9665b"
+    ],
+    "~:pages-index": {
+      "~uecb0cfd0-0f0b-81f7-8007-950628f9665b": {
+        "~#penpot/pointer": [
+          "~u4173a29d-4020-80b4-8007-96527ba9d8af",
+          {
+            "~:created-at": "~m1771342236327"
+          }
+        ]
+      }
+    },
+    "~:id": "~u52c4e771-3853-8190-8007-9506c70e8100",
+    "~:options": {
+      "~:components-v2": true,
+      "~:base-font-size": "16px"
+    }
+  }
+}

frontend/playwright/data/workspace/get-file-13385-2.json

@@ -0,0 +1,136 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~:permissions": {
+        "~:type": "~:membership",
+        "~:is-owner": true,
+        "~:is-admin": true,
+        "~:can-edit": true,
+        "~:can-read": true,
+        "~:is-logged": true
+    },
+    "~:has-media-trimmed": false,
+    "~:comment-thread-seqn": 0,
+    "~:name": "BUG 13385",
+    "~:revn": 3,
+    "~:modified-at": "~m1771254407745",
+    "~:vern": 1173241426,
+    "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+    "~:is-shared": false,
+    "~:migrations": {
+        "~#ordered-set": [
+            "legacy-2",
+            "legacy-3",
+            "legacy-5",
+            "legacy-6",
+            "legacy-7",
+            "legacy-8",
+            "legacy-9",
+            "legacy-10",
+            "legacy-11",
+            "legacy-12",
+            "legacy-13",
+            "legacy-14",
+            "legacy-16",
+            "legacy-17",
+            "legacy-18",
+            "legacy-19",
+            "legacy-25",
+            "legacy-26",
+            "legacy-27",
+            "legacy-28",
+            "legacy-29",
+            "legacy-31",
+            "legacy-32",
+            "legacy-33",
+            "legacy-34",
+            "legacy-36",
+            "legacy-37",
+            "legacy-38",
+            "legacy-39",
+            "legacy-40",
+            "legacy-41",
+            "legacy-42",
+            "legacy-43",
+            "legacy-44",
+            "legacy-45",
+            "legacy-46",
+            "legacy-47",
+            "legacy-48",
+            "legacy-49",
+            "legacy-50",
+            "legacy-51",
+            "legacy-52",
+            "legacy-53",
+            "legacy-54",
+            "legacy-55",
+            "legacy-56",
+            "legacy-57",
+            "legacy-59",
+            "legacy-62",
+            "legacy-65",
+            "legacy-66",
+            "legacy-67",
+            "0001-remove-tokens-from-groups",
+            "0002-normalize-bool-content-v2",
+            "0002-clean-shape-interactions",
+            "0003-fix-root-shape",
+            "0003-convert-path-content-v2",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771254391625",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44"
+        ],
+        "~:pages-index": {
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~ue0e81bed-4dc2-805c-8007-95036c27428b\"]]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036a4a3131": "[\"~#shape\",[\"^ \",\"~:y\",252,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",177,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",156,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",156,\"~:y\",389]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",156,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",156,\"~:y\",252,\"^8\",177,\"~:height\",137,\"~:x1\",156,\"~:y1\",252,\"~:x2\",333,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",137,\"~:flip-y\",null]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036c27428b": "[\"~#shape\",[\"^ \",\"~:y\",250,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Ellipse\",\"~:width\",148,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",362,\"~:y\",250]],[\"^<\",[\"^ \",\"~:x\",510,\"~:y\",250]],[\"^<\",[\"^ \",\"~:x\",510,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",362,\"~:y\",389]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036c27428b\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",362,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",362,\"~:y\",250,\"^8\",148,\"~:height\",139,\"~:x1\",362,\"~:y1\",250,\"~:x2\",510,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^F\",139,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e44",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-13385.json

@@ -0,0 +1,135 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~:permissions": {
+        "~:type": "~:membership",
+        "~:is-owner": true,
+        "~:is-admin": true,
+        "~:can-edit": true,
+        "~:can-read": true,
+        "~:is-logged": true
+    },
+    "~:has-media-trimmed": false,
+    "~:comment-thread-seqn": 0,
+    "~:name": "BUG 13385",
+    "~:revn": 2,
+    "~:modified-at": "~m1771254464312",
+    "~:vern": 0,
+    "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+    "~:is-shared": false,
+    "~:migrations": {
+        "~#ordered-set": [
+            "legacy-2",
+            "legacy-3",
+            "legacy-5",
+            "legacy-6",
+            "legacy-7",
+            "legacy-8",
+            "legacy-9",
+            "legacy-10",
+            "legacy-11",
+            "legacy-12",
+            "legacy-13",
+            "legacy-14",
+            "legacy-16",
+            "legacy-17",
+            "legacy-18",
+            "legacy-19",
+            "legacy-25",
+            "legacy-26",
+            "legacy-27",
+            "legacy-28",
+            "legacy-29",
+            "legacy-31",
+            "legacy-32",
+            "legacy-33",
+            "legacy-34",
+            "legacy-36",
+            "legacy-37",
+            "legacy-38",
+            "legacy-39",
+            "legacy-40",
+            "legacy-41",
+            "legacy-42",
+            "legacy-43",
+            "legacy-44",
+            "legacy-45",
+            "legacy-46",
+            "legacy-47",
+            "legacy-48",
+            "legacy-49",
+            "legacy-50",
+            "legacy-51",
+            "legacy-52",
+            "legacy-53",
+            "legacy-54",
+            "legacy-55",
+            "legacy-56",
+            "legacy-57",
+            "legacy-59",
+            "legacy-62",
+            "legacy-65",
+            "legacy-66",
+            "legacy-67",
+            "0001-remove-tokens-from-groups",
+            "0002-normalize-bool-content-v2",
+            "0002-clean-shape-interactions",
+            "0003-fix-root-shape",
+            "0003-convert-path-content-v2",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771254391625",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44"
+        ],
+        "~:pages-index": {
+            "~u3ea49ce0-9d99-8197-8007-950361d24e44": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\"]]]",
+                        "~ue0e81bed-4dc2-805c-8007-95036a4a3131": "[\"~#shape\",[\"^ \",\"~:y\",252,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",177,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",156,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",252]],[\"^<\",[\"^ \",\"~:x\",333,\"~:y\",389]],[\"^<\",[\"^ \",\"~:x\",156,\"~:y\",389]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ue0e81bed-4dc2-805c-8007-95036a4a3131\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",156,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",156,\"~:y\",252,\"^8\",177,\"~:height\",137,\"~:x1\",156,\"~:y1\",252,\"~:x2\",333,\"~:y2\",389]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",137,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e44",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u3ea49ce0-9d99-8197-8007-950361d24e43",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-13415.json

@@ -0,0 +1,135 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~:permissions": {
+        "~:type": "~:membership",
+        "~:is-owner": true,
+        "~:is-admin": true,
+        "~:can-edit": true,
+        "~:can-read": true,
+        "~:is-logged": true
+    },
+    "~:has-media-trimmed": false,
+    "~:comment-thread-seqn": 0,
+    "~:name": "BUG 13415",
+    "~:revn": 14,
+    "~:modified-at": "~m1771334256704",
+    "~:vern": 0,
+    "~:id": "~u0472abff-2573-8186-8007-961793e53f45",
+    "~:is-shared": false,
+    "~:migrations": {
+        "~#ordered-set": [
+            "legacy-2",
+            "legacy-3",
+            "legacy-5",
+            "legacy-6",
+            "legacy-7",
+            "legacy-8",
+            "legacy-9",
+            "legacy-10",
+            "legacy-11",
+            "legacy-12",
+            "legacy-13",
+            "legacy-14",
+            "legacy-16",
+            "legacy-17",
+            "legacy-18",
+            "legacy-19",
+            "legacy-25",
+            "legacy-26",
+            "legacy-27",
+            "legacy-28",
+            "legacy-29",
+            "legacy-31",
+            "legacy-32",
+            "legacy-33",
+            "legacy-34",
+            "legacy-36",
+            "legacy-37",
+            "legacy-38",
+            "legacy-39",
+            "legacy-40",
+            "legacy-41",
+            "legacy-42",
+            "legacy-43",
+            "legacy-44",
+            "legacy-45",
+            "legacy-46",
+            "legacy-47",
+            "legacy-48",
+            "legacy-49",
+            "legacy-50",
+            "legacy-51",
+            "legacy-52",
+            "legacy-53",
+            "legacy-54",
+            "legacy-55",
+            "legacy-56",
+            "legacy-57",
+            "legacy-59",
+            "legacy-62",
+            "legacy-65",
+            "legacy-66",
+            "legacy-67",
+            "0001-remove-tokens-from-groups",
+            "0002-normalize-bool-content-v2",
+            "0002-clean-shape-interactions",
+            "0003-fix-root-shape",
+            "0003-convert-path-content-v2",
+            "0005-deprecate-image-type",
+            "0006-fix-old-texts-fills",
+            "0008-fix-library-colors-v4",
+            "0009-clean-library-colors",
+            "0009-add-partial-text-touched-flags",
+            "0010-fix-swap-slots-pointing-non-existent-shapes",
+            "0011-fix-invalid-text-touched-flags",
+            "0012-fix-position-data",
+            "0013-fix-component-path",
+            "0013-clear-invalid-strokes-and-fills",
+            "0014-fix-tokens-lib-duplicate-ids",
+            "0014-clear-components-nil-objects",
+            "0015-fix-text-attrs-blank-strings",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1771326794644",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u0472abff-2573-8186-8007-961793e53f46"
+        ],
+        "~:pages-index": {
+            "~u0472abff-2573-8186-8007-961793e53f46": {
+                "~:objects": {
+                    "~#penpot/objects-map/v2": {
+                        "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~uaef184da-e9c1-80f8-8007-961cf253d534\"]]]",
+                        "~uaef184da-e9c1-80f8-8007-961cf253d534": "[\"~#shape\",[\"^ \",\"~:y\",286,\"~:layout-grid-columns\",[[\"^ \",\"~:type\",\"~:flex\",\"~:value\",1],[\"^ \",\"^2\",\"^3\",\"^4\",1]],\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:grid\",\"~:hide-in-viewer\",false,\"~:name\",\"Board\",\"~:layout-align-items\",\"~:start\",\"~:width\",298,\"~:layout-grid-cells\",[\"^ \",\"~uaef184da-e9c1-80f8-8007-961cf50d67b4\",[\"^ \",\"~:justify-self\",\"~:auto\",\"~:column\",1,\"~:id\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b4\",\"~:position\",\"^L\",\"~:column-span\",1,\"~:align-self\",\"^L\",\"~:row\",1,\"~:row-span\",1,\"~:shapes\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b5\",[\"^ \",\"^K\",\"^L\",\"^M\",2,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b5\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",1,\"^S\",1,\"^T\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b6\",[\"^ \",\"^K\",\"^L\",\"^M\",1,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b6\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",2,\"^S\",1,\"^T\",[]],\"~uaef184da-e9c1-80f8-8007-961cf50d67b7\",[\"^ \",\"^K\",\"^L\",\"^M\",2,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf50d67b7\",\"^O\",\"^L\",\"^P\",1,\"^Q\",\"^L\",\"^R\",2,\"^S\",1,\"^T\",[]]],\"~:layout-padding-type\",\"~:simple\",\"^2\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",322,\"~:y\",286]],[\"^10\",[\"^ \",\"~:x\",620,\"~:y\",286]],[\"^10\",[\"^ \",\"~:x\",620,\"~:y\",552]],[\"^10\",[\"^ \",\"~:x\",322,\"~:y\",552]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^>\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:layout-justify-content\",\"~:stretch\",\"~:r1\",0,\"^N\",\"~uaef184da-e9c1-80f8-8007-961cf253d534\",\"~:layout-justify-items\",\"^G\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-align-content\",\"^19\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",322,\"~:proportion\",1,\"~:r4\",0,\"~:layout-grid-rows\",[[\"^ \",\"^2\",\"^3\",\"^4\",1],[\"^ \",\"^2\",\"^3\",\"^4\",1]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",322,\"~:y\",286,\"^H\",298,\"~:height\",266,\"~:x1\",322,\"~:y1\",286,\"~:x2\",620,\"~:y2\",552]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:layout-grid-dir\",\"^R\",\"~:flip-x\",null,\"^1E\",266,\"~:flip-y\",null,\"^T\",[]]]"
+                    }
+                },
+                "~:id": "~u0472abff-2573-8186-8007-961793e53f46",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u0472abff-2573-8186-8007-961793e53f45",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/get-file-snapshots-13385.json

@@ -0,0 +1,23 @@
+[
+    {
+        "~:id": "~u3ea49ce0-9d99-8197-8007-95037190405b",
+        "~:label": "Version 000",
+        "~:revn": 1,
+        "~:version": 67,
+        "~:created-at": "~m1771254407745",
+        "~:modified-at": "~m1771254407745",
+        "~:created-by": "user",
+        "~:profile-id": "~u99e49e93-362f-80ef-8007-3450ea5204aa"
+    },
+    {
+        "~:revn": 0,
+        "~:modified-at": "~m1771254406526",
+        "~:deleted-at": "~m1771340806524",
+        "~:created-by": "system",
+        "~:label": "internal/snapshot/0",
+        "~:id": "~u3ea49ce0-9d99-8197-8007-9503705f8b9b",
+        "~:profile-id": "~u99e49e93-362f-80ef-8007-3450ea5204aa",
+        "~:version": 67,
+        "~:created-at": "~m1771254406526"
+    }
+]

frontend/playwright/data/workspace/get-profiles-for-file-comments-13385.json

@@ -0,0 +1,9 @@
+[
+    {
+        "~:id": "~u99e49e93-362f-80ef-8007-3450ea5204aa",
+        "~:email": "belen@example.com",
+        "~:name": "Belén Albeza",
+        "~:fullname": "Belén Albeza",
+        "~:is-active": true
+    }
+]

frontend/playwright/data/workspace/update-file-13415.json

@@ -0,0 +1,18 @@
+{
+    "~:revn": 14,
+    "~:lagged": [
+        {
+            "~:id": "~u0472abff-2573-8186-8007-96347d525f65",
+            "~:revn": 15,
+            "~:file-id": "~u0472abff-2573-8186-8007-961793e53f45",
+            "~:session-id": "~uf25e6d2f-d10c-8021-8007-96344433f08d",
+            "~:changes": [
+                {
+                    "~:type": "~:del-obj",
+                    "~:page-id": "~u0472abff-2573-8186-8007-961793e53f46",
+                    "~:id": "~uaef184da-e9c1-80f8-8007-961cf253d534"
+                }
+            ]
+        }
+    ]
+}

frontend/playwright/ui/pages/BasePage.js

@@ -22,7 +22,7 @@ export class BasePage {
    * @param {*} options
    * @returns {Promise<void>}
    */
-  static async mockRPC(page, path, jsonFilename, options) {
+  static async mockRPC(page, path, jsonFilename = "", options = {}) {
     if (!page) {
       throw new TypeError("Invalid page argument. Must be a Playwright page.");
     }
@@ -41,7 +41,7 @@ export class BasePage {
     return page.route(url, (route) =>
       route.fulfill({
         ...interceptConfig,
-        path: `playwright/data/${jsonFilename}`,
+        path: jsonFilename ? `playwright/data/${jsonFilename}` : undefined,
       }),
     );
   }

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -35,8 +35,8 @@ export class WasmWorkspacePage extends WorkspacePage {
     return WasmWorkspacePage.mockConfigFlags(this.page, flags);
   }
 
-  constructor(page) {
-    super(page);
+  constructor(page, options) {
+    super(page, options);
     this.canvas = page.getByTestId("canvas-wasm-shapes");
   }
 
@@ -54,6 +54,19 @@ export class WasmWorkspacePage extends WorkspacePage {
     await this.hideUI();
   }
 
+  async getRenderCount() {
+    return this.page.evaluate(() => window.wasmRenderCount || 0);
+  }
+
+  async waitForNextRender(previousCount = null) {
+    const baseCount =
+      previousCount === null ? await this.getRenderCount() : previousCount;
+    await this.page.waitForFunction(
+      (count) => (window.wasmRenderCount || 0) > count,
+      baseCount,
+    );
+  }
+
   async hideUI() {
     await this.page.keyboard.press("\\");
     await expect(this.pageName).not.toBeVisible();

frontend/playwright/ui/pages/WorkspacePage.js

@@ -35,45 +35,9 @@ export class WorkspacePage extends BaseWebSocketPage {
     }
 
     async waitForEditor() {
-      return this.page.waitForSelector('[data-itype="editor"]');
-    }
-
-    async waitForRoot() {
-      return this.page.waitForSelector('[data-itype="root"]');
-    }
-
-    async waitForParagraph(nth) {
-      if (!nth) {
-        return this.page.waitForSelector('[data-itype="paragraph"]');
-      }
-      return this.page.waitForSelector(
-        `[data-itype="paragraph"]:nth-child(${nth})`,
-      );
-    }
-
-    async waitForParagraphStyle(nth, styleName) {
-      const paragraph = await this.waitForParagraph(nth);
-      return this.waitForStyle(paragraph, styleName);
-    }
-
-    async waitForTextSpan(nth = 0) {
-      if (!nth) {
-        return this.page.waitForSelector('[data-itype="span"]');
-      }
-      return this.page.waitForSelector(
-        `[data-itype="span"]:nth-child(${nth})`,
-      );
-    }
-
-    async waitForTextSpanContent(nth = 0) {
-      const textSpan = await this.waitForTextSpan(nth);
-      const textContent = await textSpan.textContent();
-      return textContent;
-    }
-
-    async waitForTextSpanStyle(nth, styleName) {
-      const textSpan = await this.waitForTextSpan(nth);
-      return this.waitForStyle(textSpan, styleName);
+      const typographyInput =
+        this.workspacePage.rightSidebar.getByLabel("Font Size");
+      await expect(typographyInput).toBeVisible();
     }
 
     async startEditing() {
@@ -98,7 +62,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     }
 
     async moveFromStart(offset = 0) {
-      await this.page.keyboard.press("ArrowLeft");
+      await this.page.keyboard.press("Home");
       await this.moveToRight(offset);
     }
 
@@ -125,7 +89,7 @@ export class WorkspacePage extends BaseWebSocketPage {
       await expect(locator).toBeVisible();
       await locator.focus();
       await locator.fill(`${newValue}`);
-      await locator.blur();
+      await this.page.keyboard.press("Enter");
     }
 
     changeFontSize(newValue) {
@@ -198,10 +162,10 @@ export class WorkspacePage extends BaseWebSocketPage {
       `[id="shape-00000000-0000-0000-0000-000000000000"]`,
     );
     this.toolbarOptions = page.getByTestId("toolbar-options");
-    this.rectShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Rectangle" });
-    this.ellipseShapeButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Ellipse" });
-    this.moveButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Move" });
-    this.boardButton = page.getByTestId("toolbar-options").getByRole("button", { name: "Board" });
+    this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.ellipseShapeButton = page.getByRole("button", { name: "Ellipse (E)" });
+    this.moveButton = page.getByRole("button", { name: "Move (V)" });
+    this.boardButton = page.getByRole("button", { name: "Board (B)" });
     this.toggleToolbarButton = page.getByRole("button", {
       name: "Toggle toolbar",
     });
@@ -317,7 +281,6 @@ export class WorkspacePage extends BaseWebSocketPage {
         body,
       }),
     );
-    // await this.mockRPC(/get\-file\?/, jsonFile);
   }
 
   async mockGetAsset(regex, asset) {
@@ -391,10 +354,12 @@ export class WorkspacePage extends BaseWebSocketPage {
     const timeToWait = options?.timeToWait ?? 100;
     await this.page.keyboard.press("T");
     await this.page.waitForTimeout(timeToWait);
+
+    const layersCountBefore = await this.layers.getByTestId("layer-row").count();
     await this.clickAndMove(x1, y1, x2, y2);
-    await expect(this.page.getByTestId("text-editor")).toBeVisible();
 
     if (initialText) {
+      await this.waitForSelectedShapeName("Text");
       await this.page.keyboard.type(initialText);
     }
   }
@@ -494,10 +459,23 @@ export class WorkspacePage extends BaseWebSocketPage {
 
   async expectSelectedLayer(name) {
     await expect(
-      this.layers
-        .getByTestId("layer-row")
-        .filter({ has: this.page.getByText(name) }),
-    ).toHaveClass(/selected/);
+      this.layers.getByRole("checkbox", { name, checked: true }),
+    ).toBeVisible();
+  }
+
+  async getSelectedShapeName() {
+    const selectedLayer = this.layers
+      .getByRole("checkbox", { checked: true })
+      .first();
+    await selectedLayer.waitFor({ state: "visible" });
+    return (await selectedLayer.innerText()).trim();
+  }
+
+  async waitForSelectedShapeName(expectedName) {
+    const selectedLayer = this.layers
+      .getByRole("checkbox", { checked: true })
+      .first();
+    await expect(selectedLayer).toHaveText(expectedName);
   }
 
   async expectHiddenToolbarOptions() {

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -356,3 +356,39 @@ test("Renders shapes with multiple fills and blur", async ({
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
+
+test("Keeps component visible when focusing after creating it", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
+  await workspace.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspace.goToWorkspace({
+    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+  });
+  await workspace.waitForFirstRender();
+
+  await workspace.clickLayers();
+  await workspace.clickLeafLayer("Rectangle");
+  await page.keyboard.press("ControlOrMeta+k");
+
+  const componentLayer = workspace.layers
+    .getByTestId("layer-row")
+    .filter({ has: page.getByTestId("icon-component") })
+    .first();
+  await expect(componentLayer).toBeVisible();
+  await componentLayer.click();
+
+  const previousRenderCount = await workspace.getRenderCount();
+  await page.keyboard.press("f");
+  await workspace.waitForNextRender(previousRenderCount);
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
+});

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

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

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

@@ -1,14 +1,14 @@
 import { test, expect } from "@playwright/test";
 import { Clipboard } from "../../helpers/Clipboard";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 const timeToWait = 100;
 
 test.beforeEach(async ({ page, context }) => {
   await Clipboard.enable(context, Clipboard.Permission.ALL);
 
-  await WorkspacePage.init(page);
-  await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
 });
 
 test.afterEach(async ({ context }) => {
@@ -17,22 +17,21 @@ test.afterEach(async ({ context }) => {
 
 test("Create a new text shape", async ({ page }) => {
   const initialText = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
   await workspace.goToWorkspace();
   await workspace.createTextShape(190, 150, 300, 200, initialText);
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe(initialText);
-
   await workspace.textEditor.stopEditing();
+
+  await workspace.waitForSelectedShapeName(initialText);
 });
 
 test("Create a new text shape from pasting text", async ({ page, context }) => {
   const textToPaste = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -43,13 +42,9 @@ test("Create a new text shape from pasting text", async ({ page, context }) => {
 
   await workspace.clickAt(190, 150);
   await workspace.paste("keyboard");
-
-  await page.waitForTimeout(timeToWait);
-
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe(textToPaste);
-
   await workspace.textEditor.stopEditing();
+
+  await expect(workspace.layers.getByText(textToPaste)).toBeVisible();
 });
 
 test("Create a new text shape from pasting text using context menu", async ({
@@ -57,7 +52,7 @@ test("Create a new text shape from pasting text using context menu", async ({
   context,
 }) => {
   const textToPaste = "Lorem ipsum";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -67,17 +62,15 @@ test("Create a new text shape from pasting text using context menu", async ({
 
   await workspace.clickAt(190, 150);
   await workspace.paste("context-menu");
-
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe(textToPaste);
-
   await workspace.textEditor.stopEditing();
+
+  await expect(workspace.layers.getByText(textToPaste)).toBeVisible();
 });
 
 test("Update an already created text shape by appending text", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -87,15 +80,14 @@ test("Update an already created text shape by appending text", async ({
   await workspace.textEditor.startEditing();
   await workspace.textEditor.moveFromEnd(0);
   await page.keyboard.type(" dolor sit amet");
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem ipsum dolor sit amet");
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lorem ipsum dolor sit amet");
 });
 
 test("Update an already created text shape by prepending text", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -104,16 +96,16 @@ test("Update an already created text shape by prepending text", async ({
   await workspace.clickLeafLayer("Lorem ipsum");
   await workspace.textEditor.startEditing();
   await workspace.textEditor.moveFromStart(0);
+  await page.evaluate(() => new Promise((resolve) => globalThis.requestIdleCallback(resolve)));
   await page.keyboard.type("Dolor sit amet ");
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Dolor sit amet Lorem ipsum");
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Dolor sit amet Lorem ipsum");
 });
 
 test.skip("Update an already created text shape by inserting text in between", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -123,9 +115,8 @@ test.skip("Update an already created text shape by inserting text in between", a
   await workspace.textEditor.startEditing();
   await workspace.textEditor.moveFromStart(5);
   await page.keyboard.type(" dolor sit amet");
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem dolor sit amet ipsum");
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lorem dolor sit amet ipsum");
 });
 
 test("Update a new text shape appending text by pasting text", async ({
@@ -133,7 +124,7 @@ test("Update a new text shape appending text by pasting text", async ({
   context,
 }) => {
   const textToPaste = " dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -146,17 +137,16 @@ test("Update a new text shape appending text by pasting text", async ({
   await workspace.textEditor.startEditing();
   await workspace.textEditor.moveFromEnd();
   await workspace.paste("keyboard");
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem ipsum dolor sit amet");
   await workspace.textEditor.stopEditing();
-});
+  await workspace.waitForSelectedShapeName("Lorem ipsum dolor sit amet");
+  });
 
 test.skip("Update a new text shape prepending text by pasting text", async ({
   page,
   context,
 }) => {
   const textToPaste = "Dolor sit amet ";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -169,16 +159,17 @@ test.skip("Update a new text shape prepending text by pasting text", async ({
   await workspace.textEditor.startEditing();
   await workspace.textEditor.moveFromStart();
   await workspace.paste("keyboard");
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Dolor sit amet Lorem ipsum");
   await workspace.textEditor.stopEditing();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test("Update a new text shape replacing (starting) text with pasted text", async ({
   page,
 }) => {
   const textToPaste = "Dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -192,17 +183,15 @@ test("Update a new text shape replacing (starting) text with pasted text", async
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Dolor sit amet ipsum");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Dolor sit amet ipsum");
 });
 
 test("Update a new text shape replacing (ending) text with pasted text", async ({
   page,
 }) => {
   const textToPaste = "dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -216,17 +205,15 @@ test("Update a new text shape replacing (ending) text with pasted text", async (
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem dolor sit amet");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lorem dolor sit amet");
 });
 
 test("Update a new text shape replacing (in between) text with pasted text", async ({
   page,
 }) => {
   const textToPaste = "dolor sit amet";
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -240,16 +227,14 @@ test("Update a new text shape replacing (in between) text with pasted text", asy
 
   await workspace.paste("keyboard");
 
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lordolor sit ametsum");
-
   await workspace.textEditor.stopEditing();
+  await workspace.waitForSelectedShapeName("Lordolor sit ametsum");
 });
 
 test("Update text font size selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -260,18 +245,16 @@ test("Update text font size selecting a part of it (starting)", async ({
   await workspace.textEditor.startEditing();
   await workspace.textEditor.selectFromStart(5);
   await workspace.textEditor.changeFontSize(36);
-
-  const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
-  expect(textContent1).toBe("Lorem");
-  const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
-  expect(textContent2).toBe(" ipsum");
   await workspace.textEditor.stopEditing();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test.skip("Update text line height selecting a part of it (starting)", async ({
+test("Update text line height selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -281,24 +264,17 @@ test.skip("Update text line height selecting a part of it (starting)", async ({
   await workspace.clickLeafLayer("Lorem ipsum");
   await workspace.textEditor.startEditing();
   await workspace.textEditor.selectFromStart(5);
-  await workspace.textEditor.changeLineHeight(1.4);
-
-  const lineHeight = await workspace.textEditor.waitForParagraphStyle(
-    1,
-    "line-height",
-  );
-  expect(lineHeight).toBe("1.4");
-
-  const textContent = await workspace.textEditor.waitForTextSpanContent();
-  expect(textContent).toBe("Lorem ipsum");
-
+  await workspace.textEditor.changeLineHeight(4.4);
   await workspace.textEditor.stopEditing();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test.skip("Update text letter spacing selecting a part of it (starting)", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page, {
+  const workspace = new WasmWorkspacePage(page, {
     textEditor: true,
   });
   await workspace.setupEmptyFile();
@@ -309,16 +285,14 @@ test.skip("Update text letter spacing selecting a part of it (starting)", async
   await workspace.textEditor.startEditing();
   await workspace.textEditor.selectFromStart(5);
   await workspace.textEditor.changeLetterSpacing(10);
-
-  const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
-  expect(textContent1).toBe("Lorem");
-  const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
-  expect(textContent2).toBe(" ipsum");
   await workspace.textEditor.stopEditing();
+
+  await workspace.hideUI();
+  await expect(workspace.canvas).toHaveScreenshot();
 });
 
 test("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("text-editor/get-file-11552.json");
   await workspace.mockRPC(

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

@@ -1,22 +1,22 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
 import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
+import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
 import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
+  setupTokensFileRender,
+  setupTypographyTokensFileRender,
   unfoldTokenTree,
 } from "./helpers";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-design-tokens-v1"]);
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });
 
 test.describe("Tokens: Apply token", () => {
   test("User applies color token to a shape", async ({ page }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();
 
@@ -44,7 +44,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();
 
@@ -105,7 +105,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();
 
@@ -169,7 +169,7 @@ test.describe("Tokens: Apply token", () => {
 
   test("User applies typography token to a text shape", async ({ page }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTypographyTokensFile(page);
+      await setupTypographyTokensFileRender(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();
 
@@ -203,7 +203,7 @@ test.describe("Tokens: Apply token", () => {
       tokensSidebar,
       workspacePage,
       tokenContextMenuForToken,
-    } = await setupTokensFile(page, { flags: ["enable-token-shadow"] });
+    } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
@@ -489,7 +489,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     // Unfolds dimensions on token panel
     await page.getByRole("tab", { name: "Layers" }).click();
@@ -540,7 +540,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     // Unfolds dimensions on token panel
     await page.getByRole("tab", { name: "Layers" }).click();
@@ -594,7 +594,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     // Unfolds dimensions on token panel
     await page.getByRole("tab", { name: "Layers" }).click();
@@ -648,7 +648,7 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     // Unfolds dimensions on token panel
     await page.getByRole("tab", { name: "Layers" }).click();
@@ -701,7 +701,7 @@ test.describe("Tokens: Apply token", () => {
   });
 
   test("User applies stroke width token to a shape", async ({ page }) => {
-    const workspace = new WorkspacePage(page, {
+    const workspace = new WasmWorkspacePage(page, {
       textEditor: true,
     });
     // Set up
@@ -761,7 +761,7 @@ test.describe("Tokens: Apply token", () => {
   });
 
   test("User applies margin token to a shape", async ({ page }) => {
-    const workspace = new WorkspacePage(page, {
+    const workspace = new WasmWorkspacePage(page, {
       textEditor: true,
     });
     // Set up
@@ -853,7 +853,7 @@ test.describe("Tokens: Detach token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();
 

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

@@ -1,16 +1,17 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
 import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
 import {
-  setupEmptyTokensFile,
-  setupTokensFile,
-  setupTypographyTokensFile,
+  setupEmptyTokensFileRender,
+  setupTokensFileRender,
+  setupTypographyTokensFileRender,
   testTokenCreationFlow,
   unfoldTokenTree,
 } from "./helpers";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-design-tokens-v1"]);
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });
 
@@ -158,7 +159,7 @@ test.describe("Tokens - creation", () => {
     const selfReferenceError = "Token has self reference";
     const missingReferenceError = "Missing token references";
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     await tokensSidebar
       .getByRole("button", { name: "Add Token: Color" })
@@ -320,7 +321,7 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -465,7 +466,7 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -601,7 +602,7 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -717,7 +718,7 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -831,7 +832,7 @@ test.describe("Tokens - creation", () => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
+      await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1012,7 +1013,7 @@ test.describe("Tokens - creation", () => {
     page,
   }) => {
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
+      await setupTypographyTokensFileRender(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel
@@ -1047,7 +1048,7 @@ test.describe("Tokens - creation", () => {
     const emptyNameError = "Name should be at least 1 character";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] });
+      await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1232,7 +1233,7 @@ test.describe("Tokens - creation", () => {
   test("User creates typography token", async ({ page }) => {
     const emptyNameError = "Name should be at least 1 character";
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -1479,7 +1480,7 @@ test.describe("Tokens - creation", () => {
 
   test("User adds typography token with reference", async ({ page }) => {
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
+      await setupTypographyTokensFileRender(page);
 
     const newTokenTitle = "NewReference";
 
@@ -1493,10 +1494,8 @@ test.describe("Tokens - creation", () => {
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
     await nameField.fill(newTokenTitle);
 
-    const referenceTabButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Use a reference",
-    });
-    referenceTabButton.click();
+    const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+    await referenceTabButton.click();
 
     const referenceField = tokensUpdateCreateModal.getByRole("textbox", {
       name: "Reference",
@@ -1531,7 +1530,7 @@ test.describe("Tokens - creation", () => {
 
   test("User creates grouped color token", async ({ page }) => {
     const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     await tokensSidebar
       .getByRole("button", { name: "Add Token: Color" })
@@ -1564,7 +1563,7 @@ test.describe("Tokens - creation", () => {
   test("User cant create regular token with value missing", async ({
     page,
   }) => {
-    const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page);
+    const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel
@@ -1591,7 +1590,7 @@ test.describe("Tokens - creation", () => {
 
   test("User duplicate color token", async ({ page }) => {
     const { tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await expect(tokensSidebar).toBeVisible();
 
@@ -1615,7 +1614,7 @@ test.describe("Tokens - creation", () => {
 
 test("User creates grouped color token", async ({ page }) => {
   const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
-    await setupEmptyTokensFile(page);
+    await setupEmptyTokensFileRender(page);
 
   await tokensSidebar.getByRole("button", { name: "Add Token: Color" }).click();
 
@@ -1644,7 +1643,7 @@ test("User creates grouped color token", async ({ page }) => {
 });
 
 test("User cant create regular token with value missing", async ({ page }) => {
-  const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page);
+  const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
 
   const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
   await tokensTabPanel
@@ -1671,7 +1670,7 @@ test("User cant create regular token with value missing", async ({ page }) => {
 
 test("User duplicate color token", async ({ page }) => {
   const { tokensSidebar, tokenContextMenuForToken } =
-    await setupTokensFile(page);
+    await setupTokensFileRender(page);
 
   await expect(tokensSidebar).toBeVisible();
 
@@ -1697,7 +1696,7 @@ test.describe("Tokens tab - edition", () => {
     page,
   }) => {
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
-      await setupTypographyTokensFile(page);
+      await setupTypographyTokensFileRender(page);
 
     await tokensSidebar
       .getByRole("button")
@@ -1793,7 +1792,7 @@ test.describe("Tokens tab - edition", () => {
     page,
   }) => {
     const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await expect(tokensSidebar).toBeVisible();
 
@@ -1829,7 +1828,7 @@ test.describe("Tokens tab - edition", () => {
     page,
   }) => {
     const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFileRender(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel
@@ -1884,7 +1883,7 @@ test.describe("Tokens tab - edition", () => {
 test.describe("Tokens tab - delete", () => {
   test("User delete color token", async ({ page }) => {
     const { tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
+      await setupTokensFileRender(page);
 
     await expect(tokensSidebar).toBeVisible();
 
@@ -1904,7 +1903,7 @@ test.describe("Tokens tab - delete", () => {
   });
 
   test("User removes node and all child tokens", async ({ page }) => {
-    const { tokensSidebar } = await setupTokensFile(page);
+    const { tokensSidebar } = await setupTokensFileRender(page);
 
     await expect(tokensSidebar).toBeVisible();
 

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

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

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

@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WorkspacePage } from "../../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
 
 const setupEmptyTokensFile = async (page, options = {}) => {
   const { flags = [] } = options;
@@ -40,6 +41,45 @@ const setupEmptyTokensFile = async (page, options = {}) => {
   };
 };
 
+const setupEmptyTokensFileRender = async (page, options = {}) => {
+  const { flags = [] } = options;
+
+  const workspacePage = new WasmWorkspacePage(page);
+  if (flags.length > 0) {
+    await workspacePage.mockConfigFlags(flags);
+  }
+
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "c7ce0794-0992-8105-8004-38f280443849",
+    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
+  });
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return {
+    workspacePage,
+    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
+    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
+    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokensSidebar: workspacePage.tokensSidebar,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
+    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
+  };
+};
+
 const setupTokensFile = async (page, options = {}) => {
   const {
     file = "workspace/get-file-tokens.json",
@@ -85,6 +125,51 @@ const setupTokensFile = async (page, options = {}) => {
   };
 };
 
+const setupTokensFileRender = async (page, options = {}) => {
+  const {
+    file = "workspace/get-file-tokens.json",
+    fileFragment = "workspace/get-file-fragment-tokens.json",
+    flags = ["enable-feature-token-input"],
+  } = options;
+
+  const workspacePage = new WasmWorkspacePage(page);
+  if (flags.length > 0) {
+    await workspacePage.mockConfigFlags(flags);
+  }
+
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+  await workspacePage.mockRPC(/get\-file\?/, file);
+  await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "c7ce0794-0992-8105-8004-38f280443849",
+    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
+  });
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return {
+    workspacePage,
+    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
+    tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
+    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
+    tokensSidebar: workspacePage.tokensSidebar,
+    tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
+    tokenContextMenuForSet: workspacePage.tokenContextMenuForSet,
+  };
+};
+
 const setupTypographyTokensFile = async (page, options = {}) => {
   return setupTokensFile(page, {
     file: "workspace/get-file-typography-tokens.json",
@@ -93,6 +178,14 @@ const setupTypographyTokensFile = async (page, options = {}) => {
   });
 };
 
+const setupTypographyTokensFileRender = async (page, options = {}) => {
+  return setupTokensFileRender(page, {
+    file: "workspace/get-file-typography-tokens.json",
+    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
+    ...options,
+  });
+};
+
 const testTokenCreationFlow = async (
   page,
   {
@@ -114,7 +207,7 @@ const testTokenCreationFlow = async (
   const missingReferenceError = "Missing token references";
 
   const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-    await setupEmptyTokensFile(page);
+    await setupEmptyTokensFileRender(page);
 
   // Open modal
   const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@@ -259,8 +352,11 @@ const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
 
 export {
   setupEmptyTokensFile,
+  setupEmptyTokensFileRender,
   setupTokensFile,
+  setupTokensFileRender,
   setupTypographyTokensFile,
+  setupTypographyTokensFileRender,
   testTokenCreationFlow,
   unfoldTokenTree,
 };

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

@@ -112,3 +112,31 @@ test("BUG 11006 - Fix history panel shortcut", async ({ page }) => {
     workspacePage.rightSidebar.getByText("There are no versions yet"),
   ).toBeVisible();
 });
+
+test("BUG 13385 - Fix viewport not updating when restoring version", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockGetFile("workspace/get-file-13385.json");
+  await workspacePage.mockRPC("get-profiles-for-file-comments?file-id=*", "workspace/get-profiles-for-file-comments-13385.json");
+
+  // navigate to workspace and check that the circle shape is not there
+  await workspacePage.goToWorkspace();
+  await expect(workspacePage.layers.getByText("Ellipse")).not.toBeVisible();
+
+  // mock network requests to restore the version
+  await workspacePage.mockGetFile("workspace/get-file-13385-2.json");
+  await workspacePage.mockRPC("get-file-snapshots?file-id=*", "workspace/get-file-snapshots-13385.json");
+  await workspacePage.mockRPC("restore-file-snapshot", "", {
+    status: 204,
+  });
+
+  // request to restore the version
+  await workspacePage.rightSidebar.getByRole("button", { name: "History" }).click();
+  await workspacePage.rightSidebar.getByRole("button", { name: "Open version menu" }).click();
+  await workspacePage.rightSidebar.getByRole("button", { name: "Restore" }).click();
+  // confirm modal
+  await workspacePage.page.getByRole("button", { name: /Restore/i }).click();
+
+  // assert that the circle shape exists
+  await expect(workspacePage.layers.getByText("Ellipse")).toBeVisible();
+});

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

@@ -23,4 +23,35 @@ test("BUG 13305 - Fix resize board to fit content", async ({ page }) => {
   await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("630");
   await expect(workspacePage.rightSidebar.getByTitle("X axis").getByRole("textbox")).toHaveValue("110");
   await expect(workspacePage.rightSidebar.getByTitle("Y axis").getByRole("textbox")).toHaveValue("110");
-});
+});
+
+test("BUG 13382 - Fix problem with flex layout", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockGetFile("workspace/get-file-13382.json");
+
+  await workspacePage.mockRPC(
+    "get-file-fragment?file-id=*&fragment-id=*",
+    "workspace/get-file-13382-fragment.json",
+  );
+
+  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+
+  await workspacePage.goToWorkspace({
+    fileId: "52c4e771-3853-8190-8007-9506c70e8100",
+    pageId: "ecb0cfd0-0f0b-81f7-8007-950628f9665b",
+  });
+
+  await workspacePage.clickToggableLayer("A");
+  await workspacePage.clickToggableLayer("B");
+  await workspacePage.clickToggableLayer("C");
+  await workspacePage.clickLeafLayer("R2");
+
+  const heightText = workspacePage.rightSidebar.getByTitle("Height").getByPlaceholder('--');
+  await heightText.fill("200");
+  await heightText.press("Enter");
+
+  await workspacePage.clickLeafLayer("B");
+  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("340");
+
+});

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

@@ -353,33 +353,24 @@ test("Copy/paste properties", async ({ page, context }) => {
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Rectangle")
-    .first()
-    .click({ button: "right" });
+  await page.getByText("Rectangle").first().click({ button: "right" });
+  await page.getByText("Copy/Paste as").hover();
+  await page.getByText("Paste properties").click();
+
+  await page.getByText("Board").nth(2).click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
   await page
     .getByTestId("layer-item")
-    .getByText("Board")
+    .locator("div")
+    .filter({ hasText: "Path" })
     .nth(1)
     .click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 
-  await page
-    .getByTestId("layer-item")
-    .getByText("Path")
-    .click({ button: "right" });
-  await page.getByText("Copy/Paste as").hover();
-  await page.getByText("Paste properties").click();
-
-  await page
-    .getByTestId("layer-item")
-    .getByText("Ellipse")
-    .click({ button: "right" });
+  await page.getByText("Ellipse").click({ button: "right" });
   await page.getByText("Copy/Paste as").hover();
   await page.getByText("Paste properties").click();
 });
@@ -492,3 +483,25 @@ test("Bug 8371 - Flatten option is not visible in context menu", async ({
       .filter({ visible: true }),
   ).toBeVisible();
 });
+
+test("BUG 13415 - Grid layout overlay is not removed when deleting a board", async ({
+  page,
+}) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.mockGetFile("workspace/get-file-13415.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-13415.json",
+  );
+
+  await workspacePage.goToWorkspace();
+  await workspacePage.clickLeafLayer("Board");
+
+  const currentRenderCount = await workspacePage.getRenderCount();
+  await workspacePage.page.keyboard.press("Delete");
+
+  await workspacePage.waitForNextRender(currentRenderCount);
+  await workspacePage.hideUI();
+  await expect(workspacePage.canvas).toHaveScreenshot();
+});

frontend/pnpm-lock.yaml

@@ -20,8 +20,8 @@ importers:
         specifier: workspace:./packages/mousetrap
         version: link:packages/mousetrap
       '@penpot/plugins-runtime':
-        specifier: 1.4.2
-        version: 1.4.2
+        specifier: link:../plugins/dist/plugins-runtime
+        version: link:../plugins/dist/plugins-runtime
       '@penpot/svgo':
         specifier: penpot/svgo#v3.2
         version: svgo@https://codeload.github.com/penpot/svgo/tar.gz/8c9b0e32e9cb5f106085260bd9375f3c91a5010b
@@ -581,15 +581,6 @@ packages:
   '@dabh/diagnostics@2.0.8':
     resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
-  '@endo/cache-map@1.1.0':
-    resolution: {integrity: sha512-owFGshs/97PDw9oguZqU/px8Lv1d0KjAUtDUiPwKHNXRVUE/jyettEbRoTbNJR1OaI8biMn6bHr9kVJsOh6dXw==}
-
-  '@endo/env-options@1.1.11':
-    resolution: {integrity: sha512-p9OnAPsdqoX4YJsE98e3NBVhIr2iW9gNZxHhAI2/Ul5TdRfoOViItzHzTqrgUVopw6XxA1u1uS6CykLMDUxarA==}
-
-  '@endo/immutable-arraybuffer@1.1.2':
-    resolution: {integrity: sha512-u+NaYB2aqEugQ3u7w3c5QNkPogf8q/xGgsPaqdY6pUiGWtYiTiFspKFcha6+oeZhWXWQ23rf0KrUq0kfuzqYyQ==}
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1258,12 +1249,6 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@penpot/plugin-types@1.4.2':
-    resolution: {integrity: sha512-O8wU6RSYE8bIVU7g8cSTYi32ppxs3R13dq7X3Nn9tmDaJjBOKOBpVLuoRPIp3fJC65fv8/7om0sdrtFoL5v19g==}
-
-  '@penpot/plugins-runtime@1.4.2':
-    resolution: {integrity: sha512-y9TDZOnb96JBW9E33dHKpmTMeAPXLtHDIZruUVjtM8hBJWZK7RCv+vAGDGxeoZJC/OB2YAHrCZG+mukePBzcuQ==}
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -4636,9 +4621,6 @@ packages:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
 
-  ses@1.14.0:
-    resolution: {integrity: sha512-T07hNgOfVRTLZGwSS50RnhqrG3foWP+rM+Q5Du4KUQyMLFI3A8YA4RKl0jjZzhihC1ZvDGrWi/JMn4vqbgr/Jg==}
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -5499,9 +5481,6 @@ packages:
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
@@ -5775,12 +5754,6 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
-  '@endo/cache-map@1.1.0': {}
-
-  '@endo/env-options@1.1.11': {}
-
-  '@endo/immutable-arraybuffer@1.1.2': {}
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -6297,14 +6270,6 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@penpot/plugin-types@1.4.2': {}
-
-  '@penpot/plugins-runtime@1.4.2':
-    dependencies:
-      '@penpot/plugin-types': 1.4.2
-      ses: 1.14.0
-      zod: 3.25.76
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -10000,12 +9965,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ses@1.14.0:
-    dependencies:
-      '@endo/cache-map': 1.1.0
-      '@endo/env-options': 1.1.11
-      '@endo/immutable-arraybuffer': 1.1.2
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -10974,6 +10933,4 @@ snapshots:
     dependencies:
       zod: 4.3.6
 
-  zod@3.25.76: {}
-
   zod@4.3.6: {}

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

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

frontend/src/app/config.cljs

@@ -119,6 +119,10 @@
   (normalize-uri (or (obj/get global "penpotPublicURI")
                      (obj/get location "origin"))))
 
+(def mcp-ws-uri
+  (or (some-> (obj/get global "penpotMcpServerURI") u/uri)
+      (u/join public-uri "mcp/ws")))
+
 (def rasterizer-uri
   (or (some-> (obj/get global "penpotRasterizerURI") normalize-uri)
       public-uri))
@@ -147,6 +151,9 @@
   (let [f (obj/get global "initializeExternalConfigInfo")]
     (when (fn? f) (f))))
 
+(def mcp-server-url (-> public-uri u/ensure-path-slash (u/join "mcp") str))
+(def mcp-help-center-uri "https://help.penpot.app/technical-guide/")
+
 ;; --- Helper Functions
 
 (defn ^boolean check-browser? [candidate]

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

@@ -99,46 +99,65 @@
   map with temporal ID's associated to each font entry."
   [blobs team-id]
   (letfn [(prepare [{:keys [font type name data] :as params}]
-            (let [family          (or (.getEnglishName ^js font "preferredFamily")
-                                      (.getEnglishName ^js font "fontFamily"))
-                  variant         (or (.getEnglishName ^js font "preferredSubfamily")
-                                      (.getEnglishName ^js font "fontSubfamily"))
+            (if font
+              ;; Font was parsed with opentype.js (ttf, otf, woff)
+              (let [family          (or (.getEnglishName ^js font "preferredFamily")
+                                        (.getEnglishName ^js font "fontFamily"))
+                    variant         (or (.getEnglishName ^js font "preferredSubfamily")
+                                        (.getEnglishName ^js font "fontSubfamily"))
 
-                  ;; Vertical metrics determine the baseline in a text and the space between lines of
-                  ;; text. For historical reasons, there are three pairs of ascender/descender
-                  ;; values, known as hhea, OS/2 and uSWin metrics. Depending on the font, operating
-                  ;; system and application a different set will be used to render text on the
-                  ;; screen. On Mac, Safari and Chrome use the hhea values to render text. Firefox
-                  ;; will respect the useTypoMetrics setting and will use the OS/2 if it is set.  If
-                  ;; the useTypoMetrics is not set, Firefox will also use metrics from the hhea
-                  ;; table. On Windows, all browsers use the usWin metrics, but respect the
-                  ;; useTypoMetrics setting and if set will use the OS/2 values.
+                    ;; Vertical metrics determine the baseline in a text and the space between lines of
+                    ;; text. For historical reasons, there are three pairs of ascender/descender
+                    ;; values, known as hhea, OS/2 and uSWin metrics. Depending on the font, operating
+                    ;; system and application a different set will be used to render text on the
+                    ;; screen. On Mac, Safari and Chrome use the hhea values to render text. Firefox
+                    ;; will respect the useTypoMetrics setting and will use the OS/2 if it is set.  If
+                    ;; the useTypoMetrics is not set, Firefox will also use metrics from the hhea
+                    ;; table. On Windows, all browsers use the usWin metrics, but respect the
+                    ;; useTypoMetrics setting and if set will use the OS/2 values.
 
-                  hhea-ascender   (abs (-> ^js font .-tables .-hhea .-ascender))
-                  hhea-descender  (abs (-> ^js font .-tables .-hhea .-descender))
+                    hhea-ascender   (abs (-> ^js font .-tables .-hhea .-ascender))
+                    hhea-descender  (abs (-> ^js font .-tables .-hhea .-descender))
 
-                  win-ascent      (abs (-> ^js font .-tables .-os2 .-usWinAscent))
-                  win-descent     (abs (-> ^js font .-tables .-os2 .-usWinDescent))
+                    win-ascent      (abs (-> ^js font .-tables .-os2 .-usWinAscent))
+                    win-descent     (abs (-> ^js font .-tables .-os2 .-usWinDescent))
 
-                  os2-ascent      (abs (-> ^js font .-tables .-os2 .-sTypoAscender))
-                  os2-descent     (abs (-> ^js font .-tables .-os2 .-sTypoDescender))
+                    os2-ascent      (abs (-> ^js font .-tables .-os2 .-sTypoAscender))
+                    os2-descent     (abs (-> ^js font .-tables .-os2 .-sTypoDescender))
 
-                  ;; useTypoMetrics can be read from the 7th bit
-                  f-selection     (-> ^js font .-tables .-os2 .-fsSelection (bit-test 7))
+                    ;; useTypoMetrics can be read from the 7th bit
+                    f-selection     (-> ^js font .-tables .-os2 .-fsSelection (bit-test 7))
 
-                  height-warning? (or (not= hhea-ascender win-ascent)
-                                      (not= hhea-descender win-descent)
-                                      (and f-selection (or
-                                                        (not= hhea-ascender os2-ascent)
-                                                        (not= hhea-descender os2-descent))))
-                  data            (js/Uint8Array. data)]
-              {:content {:data (chunk-array data default-chunk-size)
-                         :name name
-                         :type type}
-               :font-family (or family "")
-               :font-weight (cm/parse-font-weight variant)
-               :font-style  (cm/parse-font-style variant)
-               :height-warning? height-warning?}))
+                    height-warning? (or (not= hhea-ascender win-ascent)
+                                        (not= hhea-descender win-descent)
+                                        (and f-selection (or
+                                                          (not= hhea-ascender os2-ascent)
+                                                          (not= hhea-descender os2-descent))))
+                    data            (js/Uint8Array. data)]
+                {:content {:data (chunk-array data default-chunk-size)
+                           :name name
+                           :type type}
+                 :font-family (or family "")
+                 :font-weight (cm/parse-font-weight variant)
+                 :font-style  (cm/parse-font-style variant)
+                 :height-warning? height-warning?})
+              ;; Font could not be parsed (woff2), extract metadata from filename
+              (let [base-name       (str/replace name #"\.[^.]+$" "")
+                    ;; Strip known weight/style tokens and separators to derive family name
+                    ;; Use word boundaries to avoid matching substrings (e.g. "Boldini" should not match "bold")
+                    raw-family-name (-> base-name
+                                        (str/replace #"(?i)(^|[-_\s])(extra\s*black|ultra\s*black|extra\s*bold|ultra\s*bold|semi\s*bold|demi\s*bold|extra\s*light|ultra\s*light|hairline|thin|light|normal|regular|medium|bold|black|heavy|solid|italic)([-_\s]|$)" "$1$3")
+                                        (str/replace #"[-_\s]+" " ")
+                                        (str/trim))
+                    family-name     (if (str/blank? raw-family-name) base-name raw-family-name)
+                    data            (js/Uint8Array. data)]
+                {:content {:data (chunk-array data default-chunk-size)
+                           :name name
+                           :type type}
+                 :font-family family-name
+                 :font-weight (cm/parse-font-weight base-name)
+                 :font-style  (cm/parse-font-style base-name)
+                 :height-warning? false})))
 
           (join [res {:keys [content] :as font}]
             (let [key-fn   (juxt :font-family :font-weight :font-style)
@@ -166,14 +185,18 @@
               (case sg
                 "117 124 124 117" "font/otf"
                 "0 1 0 0"         "font/ttf"
-                "167 117 106 106" "font/woff")))
+                "167 117 106 106" "font/woff"
+                "167 117 106 62"  "font/woff2")))
 
-          (parse-font [{:keys [data] :as params}]
-            (try
-              (assoc params :font (ot/parse data))
-              (catch :default _e
-                (log/warn :msg (str/fmt "skipping file %s, unsupported format" (:name params)))
-                nil)))
+          (parse-font [{:keys [data type name] :as params}]
+            (if (= type "font/woff2")
+              ;; woff2 cannot be parsed by opentype.js, extract metadata from filename
+              (assoc params :font nil)
+              (try
+                (assoc params :font (ot/parse data))
+                (catch :default _e
+                  (log/warn :msg (str/fmt "skipping file %s, unsupported format" name))
+                  nil))))
 
           (read-blob [blob]
             (->> (wa/read-file-as-array-buffer blob)

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

@@ -0,0 +1,15 @@
+(ns app.main.data.nitrate
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.repo :as rp]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]))
+
+(defn show-nitrate-popup
+  []
+  (ptk/reify ::show-nitrate-popup
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (->> (rp/cmd! ::get-nitrate-connectivity {})
+           (rx/map (fn [connectivity]
+                     (modal/show :nitrate-form (or connectivity {}))))))))

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

@@ -65,8 +65,23 @@
     (update [_ state]
       (update-in state [:workspace-local :open-plugins] (fnil disj #{}) id))))
 
+(defn start-plugin!
+  [{:keys [plugin-id name version description host code permissions allow-background]} ^js extensions]
+  (.ɵloadPlugin
+   ^js ug/global
+   #js {:pluginId plugin-id
+        :name name
+        :version version
+        :description description
+        :host host
+        :code code
+        :allowBackground (boolean allow-background)
+        :permissions (apply array permissions)}
+   nil
+   extensions))
+
 (defn- load-plugin!
-  [{:keys [plugin-id name description host code icon permissions]}]
+  [{:keys [plugin-id name description host code icon permissions] :as params}]
   (try
     (st/emit! (save-current-plugin plugin-id)
               (reset-plugin-flags plugin-id))

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

@@ -498,4 +498,3 @@
         (->> (rp/cmd! :delete-access-token params)
              (rx/tap on-success)
              (rx/catch on-error))))))
-

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

@@ -52,6 +52,7 @@
    [app.main.data.workspace.layers :as dwly]
    [app.main.data.workspace.layout :as layout]
    [app.main.data.workspace.libraries :as dwl]
+   [app.main.data.workspace.mcp :as mcp]
    [app.main.data.workspace.notifications :as dwn]
    [app.main.data.workspace.pages :as dwpg]
    [app.main.data.workspace.path :as dwdp]
@@ -212,7 +213,8 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of (dp/check-open-plugin)
-             (fdf/fix-deleted-fonts-for-local-library file-id)))))
+             (fdf/fix-deleted-fonts-for-local-library file-id)
+             (mcp/init-mcp-connexion)))))
 
 (defn- bundle-fetched
   [{:keys [file file-id thumbnails] :as bundle}]
@@ -222,9 +224,16 @@
 
     ptk/UpdateEvent
     (update [_ state]
-      (-> state
-          (assoc :thumbnails thumbnails)
-          (update :files assoc file-id file)))))
+      (let [pending-version-id (:workspace-pending-file-version-id state)
+            state (-> state
+                      (assoc :thumbnails thumbnails)
+                      (update :files assoc file-id file)
+                      (dissoc :workspace-pending-file-version-id))]
+        (cond-> state
+          (some? pending-version-id)
+          (assoc :workspace-file-version-id pending-version-id)
+          (nil? pending-version-id)
+          (dissoc :workspace-file-version-id))))))
 
 (defn zoom-to-frame
   []
@@ -280,192 +289,197 @@
           (wasm.api/process-object shape))))))
 
 (defn initialize-workspace
-  [team-id file-id]
-  (assert (uuid? team-id) "expected valud uuid for `team-id`")
-  (assert (uuid? file-id) "expected valud uuid for `file-id`")
+  ([team-id file-id]
+   (initialize-workspace team-id file-id nil))
+  ([team-id file-id version-id]
+   (assert (uuid? team-id) "expected valud uuid for `team-id`")
+   (assert (uuid? file-id) "expected valud uuid for `file-id`")
 
-  (ptk/reify ::initialize-workspace
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (assoc :recent-colors (:recent-colors storage/user))
-          (assoc :recent-fonts (:recent-fonts storage/user))
-          (assoc :current-file-id file-id)
-          (assoc :workspace-presence {})))
+   (ptk/reify ::initialize-workspace
+     ptk/UpdateEvent
+     (update [_ state]
+       (-> state
+           (assoc :recent-colors (:recent-colors storage/user))
+           (assoc :recent-fonts (:recent-fonts storage/user))
+           (assoc :current-file-id file-id)
+           (assoc :workspace-presence {})
+           ;; Store pending version-id; bundle-fetched will set workspace-file-version-id
+           ;; when the new bundle is applied so the viewport re-inits with new data
+           (assoc :workspace-pending-file-version-id version-id)))
 
-    ptk/WatchEvent
-    (watch [_ state stream]
-      (let [stoper-s     (rx/filter (ptk/type? ::finalize-workspace) stream)
-            rparams      (rt/get-params state)
-            features     (features/get-enabled-features state team-id)
-            render-wasm? (contains? features "render-wasm/v1")]
+     ptk/WatchEvent
+     (watch [_ state stream]
+       (let [stoper-s     (rx/filter (ptk/type? ::finalize-workspace) stream)
+             rparams      (rt/get-params state)
+             features     (features/get-enabled-features state team-id)
+             render-wasm? (contains? features "render-wasm/v1")]
 
-        (log/debug :hint "initialize-workspace"
-                   :team-id (dm/str team-id)
-                   :file-id (dm/str file-id))
+         (log/debug :hint "initialize-workspace"
+                    :team-id (dm/str team-id)
+                    :file-id (dm/str file-id))
 
-        (->> (rx/merge
-              (rx/concat
-               ;; Fetch all essential data that should be loaded before the file
-               (rx/merge
-                (if ^boolean render-wasm?
-                  (->> (rx/from @wasm/module)
-                       (rx/filter true?)
-                       (rx/tap (fn [_]
-                                 (let [event (ug/event "penpot:wasm:loaded")]
-                                   (ug/dispatch! event))))
-                       (rx/ignore))
-                  (rx/empty))
+         (->> (rx/merge
+               (rx/concat
+                ;; Fetch all essential data that should be loaded before the file
+                (rx/merge
+                 (if ^boolean render-wasm?
+                   (->> (rx/from @wasm/module)
+                        (rx/filter true?)
+                        (rx/tap (fn [_]
+                                  (let [event (ug/event "penpot:wasm:loaded")]
+                                    (ug/dispatch! event))))
+                        (rx/ignore))
+                   (rx/empty))
 
-                (->> stream
-                     (rx/filter (ptk/type? ::df/fonts-loaded))
-                     (rx/take 1)
-                     (rx/ignore))
+                 (->> stream
+                      (rx/filter (ptk/type? ::df/fonts-loaded))
+                      (rx/take 1)
+                      (rx/ignore))
 
-                (rx/of (ntf/hide)
-                       (dcmt/retrieve-comment-threads file-id)
-                       (dcmt/fetch-profiles)
-                       (df/fetch-fonts team-id)))
+                 (rx/of (ntf/hide)
+                        (dcmt/retrieve-comment-threads file-id)
+                        (dcmt/fetch-profiles)
+                        (df/fetch-fonts team-id)))
 
-               ;; Once the essential data is fetched, lets proceed to
-               ;; fetch teh file bunldle
-               (rx/of (fetch-bundle file-id features)))
+                ;; Once the essential data is fetched, lets proceed to
+                ;; fetch teh file bunldle
+                (rx/of (fetch-bundle file-id features)))
 
-              (->> stream
-                   (rx/filter (ptk/type? ::bundle-fetched))
-                   (rx/take 1)
-                   (rx/map deref)
-                   (rx/mapcat
-                    (fn [{:keys [file]}]
-                      (log/debug :hint "bundle fetched"
-                                 :team-id (dm/str team-id)
-                                 :file-id (dm/str file-id))
+               (->> stream
+                    (rx/filter (ptk/type? ::bundle-fetched))
+                    (rx/take 1)
+                    (rx/map deref)
+                    (rx/mapcat
+                     (fn [{:keys [file]}]
+                       (log/debug :hint "bundle fetched"
+                                  :team-id (dm/str team-id)
+                                  :file-id (dm/str file-id))
 
-                      (rx/of (dpj/initialize-project (:project-id file))
-                             (dwn/initialize team-id file-id)
-                             (dwsl/initialize-shape-layout)
-                             (fetch-libraries file-id features)
-                             (-> (workspace-initialized file-id)
-                                 (with-meta {:team-id team-id
-                                             :file-id file-id}))))))
+                       (rx/of (dpj/initialize-project (:project-id file))
+                              (dwn/initialize team-id file-id)
+                              (dwsl/initialize-shape-layout)
+                              (fetch-libraries file-id features)
+                              (-> (workspace-initialized file-id)
+                                  (with-meta {:team-id team-id
+                                              :file-id file-id}))))))
 
-              ;; Install dev perf observers once the workspace is ready
-              (when (contains? cf/flags :perf-logs)
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/take 1)
-                     (rx/tap (fn [_] (perf/setup)))))
+               ;; Install dev perf observers once the workspace is ready
+               (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))
-                   (rx/take 1)
-                   (rx/map dwc/set-workspace-visited))
+               (->> stream
+                    (rx/filter (ptk/type? ::dps/persistence-notification))
+                    (rx/take 1)
+                    (rx/map dwc/set-workspace-visited))
 
-              (when-let [component-id (some-> rparams :component-id uuid/parse)]
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/observe-on :async)
-                     (rx/take 1)
-                     (rx/map #(dwl/go-to-local-component :id component-id :update-layout? (:update-layout rparams)))))
+               (when-let [component-id (some-> rparams :component-id uuid/parse)]
+                 (->> stream
+                      (rx/filter (ptk/type? ::workspace-initialized))
+                      (rx/observe-on :async)
+                      (rx/take 1)
+                      (rx/map #(dwl/go-to-local-component :id component-id :update-layout? (:update-layout rparams)))))
 
-              (when (:board-id rparams)
-                (->> stream
-                     (rx/filter (ptk/type? ::dwv/initialize-viewport))
-                     (rx/take 1)
-                     (rx/map zoom-to-frame)))
+               (when (:board-id rparams)
+                 (->> stream
+                      (rx/filter (ptk/type? ::dwv/initialize-viewport))
+                      (rx/take 1)
+                      (rx/map zoom-to-frame)))
 
-              (when-let [comment-id (some-> rparams :comment-id uuid/parse)]
-                (->> stream
-                     (rx/filter (ptk/type? ::workspace-initialized))
-                     (rx/observe-on :async)
-                     (rx/take 1)
-                     (rx/map #(dwcm/navigate-to-comment-id comment-id))))
+               (when-let [comment-id (some-> rparams :comment-id uuid/parse)]
+                 (->> stream
+                      (rx/filter (ptk/type? ::workspace-initialized))
+                      (rx/observe-on :async)
+                      (rx/take 1)
+                      (rx/map #(dwcm/navigate-to-comment-id comment-id))))
 
-              (when render-wasm?
-                (->> stream
-                     (rx/filter dch/commit?)
-                     (rx/map deref)
-                     (rx/mapcat
-                      (fn [{:keys [redo-changes]}]
-                        (let [added (->> redo-changes
-                                         (filter #(= (:type %) :add-obj))
-                                         (map :id))]
-                          (->> (rx/from added)
-                               (rx/map process-wasm-object)))))))
+               (when render-wasm?
+                 (->> stream
+                      (rx/filter dch/commit?)
+                      (rx/map deref)
+                      (rx/mapcat
+                       (fn [{:keys [redo-changes]}]
+                         (let [added (->> redo-changes
+                                          (filter #(= (:type %) :add-obj))
+                                          (map :id))]
+                           (->> (rx/from added)
+                                (rx/map process-wasm-object)))))))
 
-              (when render-wasm?
-                (let [local-commits-s
-                      (->> stream
-                           (rx/filter dch/commit?)
-                           (rx/map deref)
-                           (rx/filter #(and (= :local (:source %))
-                                            (not (contains? (:tags %) :position-data))))
-                           (rx/filter (complement empty?)))
+               (when render-wasm?
+                 (let [local-commits-s
+                       (->> stream
+                            (rx/filter dch/commit?)
+                            (rx/map deref)
+                            (rx/filter #(and (= :local (:source %))
+                                             (not (contains? (:tags %) :position-data))))
+                            (rx/filter (complement empty?)))
 
-                      notifier-s
-                      (rx/merge
-                       (->> local-commits-s (rx/debounce 1000))
-                       (->> stream (rx/filter dps/force-persist?)))
+                       notifier-s
+                       (rx/merge
+                        (->> local-commits-s (rx/debounce 1000))
+                        (->> stream (rx/filter dps/force-persist?)))
 
-                      objects-s
-                      (rx/from-atom refs/workspace-page-objects {:emit-current-value? true})
+                       objects-s
+                       (rx/from-atom refs/workspace-page-objects {:emit-current-value? true})
 
-                      current-page-id-s
-                      (rx/from-atom refs/current-page-id {:emit-current-value? true})]
+                       current-page-id-s
+                       (rx/from-atom refs/current-page-id {:emit-current-value? true})]
 
-                  (->> local-commits-s
-                       (rx/buffer-until notifier-s)
-                       (rx/with-latest-from objects-s)
-                       (rx/map
-                        (fn [[commits objects]]
-                          (->> commits
-                               (mapcat :redo-changes)
-                               (filter #(contains? #{:mod-obj :add-obj} (:type %)))
-                               (filter #(cfh/text-shape? objects (:id %)))
-                               (map #(vector
-                                      (:id %)
-                                      (wasm.api/calculate-position-data (get objects (:id %))))))))
+                   (->> local-commits-s
+                        (rx/buffer-until notifier-s)
+                        (rx/with-latest-from objects-s)
+                        (rx/map
+                         (fn [[commits objects]]
+                           (->> commits
+                                (mapcat :redo-changes)
+                                (filter #(contains? #{:mod-obj :add-obj} (:type %)))
+                                (filter #(cfh/text-shape? objects (:id %)))
+                                (map #(vector
+                                       (:id %)
+                                       (wasm.api/calculate-position-data (get objects (:id %))))))))
 
-                       (rx/with-latest-from current-page-id-s)
-                       (rx/map
-                        (fn [[text-position-data page-id]]
-                          (let [changes
-                                (->> text-position-data
-                                     (mapv (fn [[id position-data]]
-                                             {:type :mod-obj
-                                              :id id
-                                              :page-id page-id
-                                              :operations
-                                              [{:type :set
-                                                :attr :position-data
-                                                :val position-data
-                                                :ignore-touched true
-                                                :ignore-geometry true}]})))]
-                            (when (d/not-empty? changes)
-                              (dch/commit-changes
-                               {:redo-changes changes :undo-changes []
-                                :save-undo? false
-                                :tags #{:position-data}})))))
-                       (rx/take-until stoper-s))))
+                        (rx/with-latest-from current-page-id-s)
+                        (rx/map
+                         (fn [[text-position-data page-id]]
+                           (let [changes
+                                 (->> text-position-data
+                                      (mapv (fn [[id position-data]]
+                                              {:type :mod-obj
+                                               :id id
+                                               :page-id page-id
+                                               :operations
+                                               [{:type :set
+                                                 :attr :position-data
+                                                 :val position-data
+                                                 :ignore-touched true
+                                                 :ignore-geometry true}]})))]
+                             (when (d/not-empty? changes)
+                               (dch/commit-changes
+                                {:redo-changes changes :undo-changes []
+                                 :save-undo? false
+                                 :tags #{:position-data}})))))
+                        (rx/take-until stoper-s))))
 
-              (->> stream
-                   (rx/filter dch/commit?)
-                   (rx/map deref)
-                   (rx/mapcat
-                    (fn [{:keys [save-undo? undo-changes redo-changes undo-group tags stack-undo?]}]
-                      (if (and save-undo? (seq undo-changes))
-                        (let [entry {:undo-changes undo-changes
-                                     :redo-changes redo-changes
-                                     :undo-group undo-group
-                                     :tags tags}]
-                          (rx/of (dwu/append-undo entry stack-undo?)))
-                        (rx/empty))))))
-             (rx/take-until stoper-s))))
+               (->> stream
+                    (rx/filter dch/commit?)
+                    (rx/map deref)
+                    (rx/mapcat
+                     (fn [{:keys [save-undo? undo-changes redo-changes undo-group tags stack-undo?]}]
+                       (if (and save-undo? (seq undo-changes))
+                         (let [entry {:undo-changes undo-changes
+                                      :redo-changes redo-changes
+                                      :undo-group undo-group
+                                      :tags tags}]
+                           (rx/of (dwu/append-undo entry stack-undo?)))
+                         (rx/empty))))))
+              (rx/take-until stoper-s))))
 
-    ptk/EffectEvent
-    (effect [_ _ _]
-      (let [name (dm/str "workspace-" file-id)]
-        (unchecked-set ug/global "name" name)))))
+     ptk/EffectEvent
+     (effect [_ _ _]
+       (let [name (dm/str "workspace-" file-id)]
+         (unchecked-set ug/global "name" name))))))
 
 (defn finalize-workspace
   [_team-id file-id]
@@ -1434,6 +1448,7 @@
 (dm/export dwcp/paste-shapes)
 (dm/export dwcp/paste-data-valid?)
 (dm/export dwcp/copy-link-to-clipboard)
+(dm/export dwcp/copy-as-image)
 
 ;; Drawing
 (dm/export dwd/select-for-drawing)

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

@@ -1039,3 +1039,55 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (clipboard/to-clipboard (rt/get-current-href)))))
+
+(defn copy-as-image
+  []
+  (ptk/reify ::copy-as-image
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [file-id  (:current-file-id state)
+            page-id  (:current-page-id state)
+            selected (first (dsh/lookup-selected state))
+
+            export {:file-id file-id
+                    :page-id page-id
+                    :object-id selected
+                    ;; webp would be preferrable, but PNG is the most supported image MIME type by clipboard APIs.
+                    :type :png
+                    ;; Always use 2 to ensure good enough quality for wireframes.
+                    :scale 2
+                    :suffix ""
+                    :enabled true
+                    :name ""}
+
+            params {:exports [export]
+                    :profile-id (:profile-id state)
+                    :cmd :export-shapes
+                    :wait true}]
+
+        (rx/concat
+         ;; Ensure current state persisted before exporting.
+         (rx/of ::dps/force-persist)
+         (->> (rx/from-atom refs/persistence-state {:emit-current-value? true})
+              (rx/filter #(or (nil? %) (= :saved %)))
+              (rx/first)
+              (rx/timeout 400 (rx/empty)))
+
+         ;; Exporting itself can time its time, better to notify that we are busy.
+         (rx/of (ntf/info (tr "workspace.clipboard.copying")))
+
+         ;; Call exporter to get image URI, then fetch and copy blob.
+         (->> (rp/cmd! :export params)
+              (rx/mapcat (fn [{:keys [uri]}]
+                           (http/send! {:method :get
+                                        :uri uri
+                                        :response-type :blob})))
+              (rx/map :body)
+              (rx/tap (fn [blob]
+                        (clipboard/to-clipboard-promise "image/png" (p/resolved blob))))
+              (rx/map (fn [_]
+                        (ntf/success (tr "workspace.clipboard.image-copied"))))
+              (rx/catch (fn [e]
+                          (js/console.error "clipboard blocked:" e)
+                          (ntf/error (tr "workspace.clipboard.image-copy-failed"))
+                          (rx/empty)))))))))

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

@@ -6,6 +6,7 @@
 
 (ns app.main.data.workspace.drawing.box
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
@@ -28,9 +29,9 @@
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
-(defn adjust-ratio
+(defn- adjust-ratio
   [point initial]
-  (let [v (gpt/to-vec point initial)
+  (let [v  (gpt/to-vec point initial)
         dx (mth/abs (:x v))
         dy (mth/abs (:y v))
         sx (mth/sign (:x v))
@@ -43,32 +44,43 @@
       (> dy dx)
       (assoc :x (- (:x point) (* sx (- dy dx)))))))
 
-(defn resize-shape [{:keys [x y width height] :as shape} initial point lock? mod? snap-pixel?]
+(defn- resize-shape
+  [{:keys [x y width height] :as shape} initial point lock? mod? snap-pixel?]
   (if (and (some? x) (some? y) (some? width) (some? height))
-    (let [draw-rect (cond-> (grc/make-rect initial (cond-> point lock? (adjust-ratio initial)))
-                      snap-pixel?
-                      (-> (update :width max 1)
-                          (update :height max 1)))
+    (let [p2
+          (cond-> point lock? (adjust-ratio initial))
 
-          shape-rect (grc/make-rect x y width height)
+          p1
+          (if mod?
+            (gpt/point (- (* 2 (:x initial)) (:x p2))
+                       (- (* 2 (:y initial)) (:y p2)))
+            initial)
 
-          scalev     (gpt/point (/ (:width draw-rect)
-                                   (:width shape-rect))
-                                (/ (:height draw-rect)
-                                   (:height shape-rect)))
+          draw-rect
+          (cond-> (grc/make-rect p1 p2)
+            snap-pixel?
+            (-> (update :width d/max 1)
+                (update :height d/max 1)))
 
-          movev      (gpt/to-vec (gpt/point shape-rect)
-                                 (gpt/point draw-rect))]
+          shape-rect
+          (grc/make-rect x y width height)
+
+          scalev
+          (gpt/point (/ (:width draw-rect) (:width shape-rect))
+                     (/ (:height draw-rect) (:height shape-rect)))
+
+          movev
+          (gpt/to-vec (gpt/point shape-rect) (gpt/point draw-rect))]
 
       (-> shape
           (assoc :click-draw? false)
-          (vary-meta merge {:mod? mod?})
           (gsh/transform-shape (-> (ctm/empty)
                                    (ctm/resize scalev (gpt/point x y))
                                    (ctm/move movev)))))
     shape))
 
-(defn- update-drawing [state initial point lock? mod? snap-pixel?]
+(defn- update-drawing
+  [state initial point lock? mod? snap-pixel?]
   (update-in state [:workspace-drawing :object] resize-shape initial point lock? mod? snap-pixel?))
 
 (defn move-drawing
@@ -128,7 +140,7 @@
                     ;; Take until before the snap calculation otherwise we could cancel the snap in the worker
                     ;; and its a problem for fast moving drawing
                     (rx/take-until stopper)
-                    (rx/with-latest-from ms/mouse-position-shift ms/mouse-position-mod)
+                    (rx/with-latest-from ms/mouse-position-shift ms/mouse-position-alt)
                     (rx/switch-map
                      (fn [[point :as current]]
                        (->> (snap/closest-snap-point page-id [shape] objects layout zoom focus point)

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

@@ -0,0 +1,60 @@
+;; 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.mcp
+  (:require
+   [app.common.logging :as log]
+   [app.common.uri :as u]
+   [app.config :as cf]
+   [app.main.data.plugins :as dp]
+   [app.main.repo :as rp]
+   [app.plugins.register :refer [mcp-plugin-id]]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]))
+
+(log/set-level! :info)
+
+(def ^:private default-manifest
+  {:code "plugin.js"
+   :name "Penpot MCP Plugin"
+   :version 2
+   :plugin-id mcp-plugin-id
+   :description "This plugin enables interaction with the Penpot MCP server"
+   :allow-background true
+   :permissions
+   #{"library:read" "library:write"
+     "comment:read" "comment:write"
+     "content:write" "content:read"}})
+
+(defn init-mcp!
+  []
+  (->> (rp/cmd! :get-current-mcp-token)
+       (rx/subs!
+        (fn [{:keys [token]}]
+          (when token
+            (dp/start-plugin!
+             (assoc default-manifest
+                    :url (str (u/join cf/public-uri "plugins/mcp/manifest.json"))
+                    :host (str (u/join cf/public-uri "plugins/mcp/")))
+
+             ;; API extension for MCP server
+             #js {:mcp
+                  #js
+                   {:getToken (constantly token)
+                    :getServerUrl #(str cf/mcp-ws-uri)
+                    :setMcpStatus
+                    (fn [status]
+                      ;; TODO: Visual feedback
+                      (log/info :hint "MCP STATUS" :status status))}}))))))
+
+(defn init-mcp-connexion
+  []
+  (ptk/reify ::init-mcp-connexion
+    ptk/EffectEvent
+    (effect [_ state _]
+      (when (and (contains? cf/flags :mcp)
+                 (-> state :profile :props :mcp-status))
+        (init-mcp!)))))

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

@@ -108,7 +108,7 @@
               (rx/take 1)
               (rx/mapcat #(rp/cmd! :restore-file-snapshot {:file-id file-id :id id}))
               (rx/tap #(th/clear-queue!))
-              (rx/map #(dw/initialize-workspace team-id file-id)))
+              (rx/map #(dw/initialize-workspace team-id file-id id)))
          (case origin
            :version
            (rx/of (ptk/event ::ev/event {::ev/name "restore-pin-version"}))
@@ -231,7 +231,7 @@
               (rx/filter #(or (nil? %) (= :saved %)))
               (rx/take 1)
               (rx/mapcat #(rp/cmd! :restore-file-snapshot {:file-id file-id :id id}))
-              (rx/map #(dw/initialize-workspace team-id file-id)))
+              (rx/map #(dw/initialize-workspace team-id file-id id)))
 
          (->> (rx/of 1)
               (rx/tap resolve)

frontend/src/app/main/refs.cljs

@@ -256,6 +256,9 @@
 (def workspace-layout
   (l/derived :workspace-layout st/state))
 
+(def workspace-file-version-id
+  (l/derived :workspace-file-version-id st/state))
+
 (def snap-pixel?
   (l/derived #(contains? % :snap-pixel-grid) workspace-layout))
 

frontend/src/app/main/ui.cljs

@@ -197,7 +197,7 @@
         :settings-options
         :settings-feedback
         :settings-subscription
-        :settings-access-tokens
+        :settings-integrations
         :settings-notifications)
        (let [params (get params :query)
              error-report-id (some-> params :error-report-id uuid/parse*)]

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

@@ -78,7 +78,7 @@
                 (kbd/enter? event)
                 (let [selected (dom/get-active)]
                   (dom/prevent-default event)
-                  (dom/click! selected))
+                  (dom/click selected))
 
                 (kbd/tab? event)
                 (on-close)))))]

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

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

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

@@ -32,6 +32,7 @@
         input-name   (get props :name)
         more-classes (get props :class)
         auto-focus?  (get props :auto-focus? false)
+        input-ref    (mf/use-ref nil)
 
         data-testid  (d/nilv data-testid input-name)
 
@@ -82,7 +83,6 @@
                       (swap! form assoc-in [:touched input-name] true)
                       (fm/on-input-change form input-name value trim)
                       (on-change-value name value)))
-
         on-blur
         (fn [_]
           (reset! focus? false))
@@ -92,9 +92,18 @@
           (when-not (get-in @form [:touched input-name])
             (swap! form assoc-in [:touched input-name] true)))
 
+        on-key-press
+        (mf/use-fn
+         (mf/deps input-ref)
+         (fn [e]
+           (dom/prevent-default e)
+           (when (kbd/space? e)
+             (dom/click (mf/ref-val input-ref)))))
+
         props (-> props
                   (dissoc :help-icon :form :trim :children :show-success? :auto-focus? :label)
                   (assoc :id (name input-name)
+                         :ref input-ref
                          :value value
                          :auto-focus auto-focus?
                          :on-click (when (or is-radio? is-checkbox?) on-click)
@@ -131,7 +140,7 @@
                  :for (name input-name)} label
 
          (when is-checkbox?
-           [:span {:class (stl/css-case :global/checked checked?)} (when checked? deprecated-icon/status-tick)])
+           [:span {:class (stl/css-case :global/checked checked?) :tab-index "0" :on-key-press on-key-press} (when checked? deprecated-icon/status-tick)])
 
          (if is-checkbox?
            [:> :input props]

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

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

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

@@ -0,0 +1,79 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.radio-btn-wrapper {
+  @include deprecated.flexCenter;
+  border-radius: deprecated.$br-8;
+  height: deprecated.$s-32;
+  background-color: var(--input-background-color);
+  gap: deprecated.$s-4;
+}
+
+.radio-icon {
+  --radio-icon-border-color: var(--radio-btn-border-color);
+
+  @include deprecated.buttonStyle;
+  @include deprecated.flexCenter;
+  @include deprecated.focusRadio;
+  height: deprecated.$s-32;
+  flex-grow: 1;
+  border-radius: deprecated.$s-8;
+  box-sizing: border-box;
+  border: deprecated.$br-2 solid var(--radio-icon-border-color);
+
+  input {
+    display: none;
+  }
+  svg {
+    @extend .button-icon;
+    stroke: var(--radio-btn-foreground-color);
+  }
+  .title-name {
+    @include deprecated.uppercaseTitleTipography;
+    color: var(--radio-btn-foreground-color);
+  }
+  &:hover {
+    svg {
+      stroke: var(--radio-btn-foreground-color-selected);
+    }
+  }
+}
+
+.checked {
+  --radio-icon-border-color: var(--radio-btn-border-color-selected);
+
+  background-color: var(--radio-btn-background-color-selected);
+  svg {
+    stroke: var(--radio-btn-foreground-color-selected);
+  }
+  .title-name {
+    color: var(--radio-btn-foreground-color-selected);
+  }
+}
+
+.disabled {
+  cursor: default;
+  background-color: transparent;
+  border: deprecated.$s-2 solid transparent;
+  svg {
+    stroke: var(--button-foreground-color-disabled);
+  }
+  .title-name {
+    color: var(--button-foreground-color-disabled);
+  }
+  &:hover {
+    background-color: transparent;
+    border: deprecated.$s-2 solid transparent;
+    svg {
+      stroke: var(--button-foreground-color-disabled);
+    }
+    .title-name {
+      color: var(--button-foreground-color-disabled);
+    }
+  }
+}

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

@@ -9,14 +9,17 @@
   (:require
    [app.main.data.modal :as modal]
    [app.main.store :as st]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as k]
    [goog.events :as events]
    [rumext.v2 :as mf])
-  (:import goog.events.EventType))
+  (:import
+   goog.events.EventType))
 
 (mf/defc confirm-dialog
   {::mf/register modal/components
@@ -68,8 +71,11 @@
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
        [:h2 {:class (stl/css :modal-title)} title]
-       [:button {:class (stl/css :modal-close-btn)
-                 :on-click cancel-fn} deprecated-icon/close]]
+       [:div {:class (stl/css :modal-close-btn)}
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "labels.close")
+                          :on-click cancel-fn
+                          :icon i/close}]]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? message) (not= message ""))
@@ -87,24 +93,19 @@
           [:ul {:class (stl/css :component-list)}
            (for [item items]
              [:li {:class (stl/css :modal-item-element)}
-              [:span {:class (stl/css :modal-component-icon)}
-               deprecated-icon/component]
+              [:> icon* {:icon-id i/component
+                         :class (stl/css :modal-component-icon)
+                         :size "s"}]
               [:span {:class (stl/css :modal-component-name)}
                (:name item)]])]])]
 
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
         (when-not (= cancel-label :omit)
-          [:input
-           {:class (stl/css :cancel-button)
-            :type "button"
-            :value cancel-label
-            :on-click cancel-fn}])
-
-        [:input
-         {:class (stl/css-case :accept-btn true
-                               :danger (= accept-style :danger)
-                               :primary (= accept-style :primary))
-          :type "button"
-          :value accept-label
-          :on-click accept-fn}]]]]]))
+          [:> button* {:variant "secondary"
+                       :on-click cancel-fn}
+           cancel-label])
+        [:> button* {:variant (cond (= accept-style :danger)  "destructive"
+                                    (= accept-style :primary) "primary")
+                     :on-click accept-fn}
+         accept-label]]]]]))

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

@@ -15,10 +15,9 @@
 
 .modal-container {
   @extend .modal-container-base;
-}
-
-.modal-header {
-  margin-bottom: deprecated.$s-24;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xxl);
 }
 
 .modal-title {
@@ -27,12 +26,13 @@
 }
 
 .modal-close-btn {
-  @extend .modal-close-btn-base;
+  position: absolute;
+  top: var(--sp-m);
+  right: var(--sp-m);
 }
 
 .modal-content {
   @include deprecated.bodyLargeTypography;
-  margin-bottom: deprecated.$s-24;
 }
 
 .modal-item-element {
@@ -41,32 +41,18 @@
 
 .modal-component-icon {
   @include deprecated.flexCenter;
-  height: deprecated.$s-16;
-  width: deprecated.$s-16;
-  svg {
-    @extend .button-icon-small;
-    stroke: var(--color);
-  }
+  color: var(--color-foreground-secondary);
 }
+
 .modal-component-name {
   @include deprecated.bodyLargeTypography;
+  color: var(--color-foreground-secondary);
 }
 
 .action-buttons {
   @extend .modal-action-btns;
 }
 
-.cancel-button {
-  @extend .modal-cancel-btn;
-}
-
-.accept-btn {
-  @extend .modal-accept-btn;
-  &.danger {
-    @extend .modal-danger-btn;
-  }
-}
-
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {

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

@@ -7,7 +7,9 @@
 (ns app.main.ui.dashboard.fonts
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.exceptions :as ex]
    [app.common.media :as cm]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -17,11 +19,12 @@
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.file-uploader :refer [file-uploader*]]
+   [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
+   [app.util.http :as http]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [beicon.v2.core :as rx]
@@ -32,7 +35,7 @@
 (def ^:private accept-font-types
   (str (str/join "," cm/font-types)
        ;; A workaround to solve a problem with chrome input selector
-       ",.ttf,application/font-woff,woff,.otf"))
+       ",.ttf,application/font-woff,.woff,.woff2,.otf"))
 
 (defn- use-page-title
   [team section]
@@ -116,10 +119,10 @@
                             (swap! fonts* dissoc id)
                             (swap! uploading* disj id)
                             (st/emit! (df/add-font font)))
-                          (fn [error]
+                          (fn [cause]
                             (st/emit! (ntf/error (tr "errors.bad-font" (first (:names item)))))
                             (swap! fonts* dissoc id)
-                            (js/console.log "error" error))))))
+                            (ex/print-throwable cause))))))
 
         on-upload
         (mf/use-fn
@@ -184,11 +187,11 @@
                  :on-click on-click
                  :tab-index "0"}
         [:span (tr "labels.add-custom-font")]
-        [:> file-uploader* {:input-id "font-upload"
-                            :accept accept-font-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-selected}]]
+        [:& file-uploader {:input-id "font-upload"
+                           :accept accept-font-types
+                           :multi true
+                           :ref input-ref
+                           :on-selected on-selected}]]
 
        (when-let [url cf/terms-of-service-uri]
          [:& context-notification {:content (tr "dashboard.fonts.hero-text2" url)
@@ -259,11 +262,14 @@
 (mf/defc installed-font-context-menu
   {::mf/props :obj
    ::mf/private true}
-  [{:keys [is-open on-close on-edit on-delete]}]
-  (let [options (mf/with-memo [on-edit on-delete]
+  [{:keys [is-open on-close on-edit on-download on-delete]}]
+  (let [options (mf/with-memo [on-edit on-download on-delete]
                   [{:name    (tr "labels.edit")
                     :id      "font-edit"
                     :handler on-edit}
+                   {:name    (tr "labels.download-simple")
+                    :id      "font-download"
+                    :handler on-download}
                    {:name    (tr "labels.delete")
                     :id      "font-delete"
                     :handler on-delete}])]
@@ -345,6 +351,26 @@
                                          (st/emit! (df/delete-font font-id)))}]
              (st/emit! (modal/show options)))))
 
+        on-download
+        (mf/use-fn
+         (mf/deps variants)
+         (fn [_event]
+           (let [variant    (first variants)
+                 variant-id (:id variant)
+                 multiple?  (> (count variants) 1)
+                 cmd        (if multiple? :download-font-family :download-font)
+                 params     (if multiple? {:font-id font-id} {:id variant-id})]
+             (->> (rp/cmd! cmd params)
+                  (rx/mapcat (fn [{:keys [name uri]}]
+                               (->> (http/send! {:uri uri :method :get :response-type :blob})
+                                    (rx/map :body)
+                                    (rx/map (fn [blob] (d/vec2 name blob))))))
+                  (rx/subs! (fn [[filename blob]]
+                              (dom/trigger-download filename blob))
+                            (fn [error]
+                              (js/console.error "error downloading font" error)
+                              (st/emit! (ntf/error (tr "errors.generic")))))))))
+
         on-delete-variant
         (mf/use-fn
          (fn [event]
@@ -407,6 +433,7 @@
            {:on-close on-menu-close
             :is-open menu-open?
             :on-delete on-delete-font
+            :on-download on-download
             :on-edit on-edit}]]))]))
 
 (mf/defc installed-fonts*

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

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

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

@@ -77,7 +77,7 @@
         (mf/use-ref nil)
 
         on-import-files
-        (fn [] (dom/click! (mf/ref-val file-input)))
+        (fn [] (dom/click (mf/ref-val file-input)))
 
         on-finish-import
         (mf/use-fn

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

@@ -16,6 +16,7 @@
    [app.main.data.dashboard :as dd]
    [app.main.data.event :as ev]
    [app.main.data.modal :as modal]
+   [app.main.data.nitrate :as dnt]
    [app.main.data.notifications :as ntf]
    [app.main.data.team :as dtm]
    [app.main.refs :as refs]
@@ -30,10 +31,13 @@
    [app.main.ui.dashboard.subscription :refer [dashboard-cta*
                                                get-subscription-type
                                                menu-team-icon*
+                                               nitrate-sidebar*
                                                show-subscription-dashboard-banner?
                                                subscription-sidebar*]]
    [app.main.ui.dashboard.team-form]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.nitrate.nitrate-form]
    [app.util.dom :as dom]
@@ -74,6 +78,8 @@
 (def ^:private exit-icon
   (deprecated-icon/icon-xref :exit (stl/css :exit-icon)))
 
+(def ^:private ^:svg-id penpot-logo-icon "penpot-logo-icon")
+
 (mf/defc sidebar-project*
   {::mf/private true}
   [{:keys [item is-selected]}]
@@ -299,7 +305,7 @@
            (if (:nitrate-licence profile)
              ;; TODO update when org creation route is ready
              (dom/open-new-window "/control-center/org/create")
-             (st/emit! (modal/show :nitrate-form {})))))]
+             (st/emit! (dnt/show-nitrate-popup)))))]
 
     [:> dropdown-menu* props
 
@@ -497,18 +503,23 @@
 
 (mf/defc sidebar-org-switch*
   [{:keys [team profile]}]
-  (let [teams (->> (mf/deref refs/teams)
-                   vals
-                   (group-by :organization-id)
-                   (map (fn [[_group entries]] (first entries)))
-                   vec
-                   (d/index-by :id))
+  (let [teams (mf/deref refs/teams)
+        orgs  (mf/with-memo [teams]
+                (let [orgs (->> teams
+                                vals
+                                (group-by :organization-id)
+                                (map (fn [[_group entries]] (first entries)))
+                                vec
+                                (d/index-by :id))]
+                  (update-vals orgs
+                               (fn [t]
+                                 (assoc t :name (str "ORG: " (:organization-name t)))))))
 
-        teams (update-vals teams
-                           (fn [t]
-                             (assoc t :name (str "ORG: " (:organization-name t)))))
+        empty? (= (count orgs) 1)
 
-        team (assoc team :name (str "ORG: " (:organization-name team)))
+
+        current-org (mf/with-memo [team]
+                      (assoc team :name (str "ORG: " (:organization-name team))))
 
         show-teams-menu*
         (mf/use-state false)
@@ -530,36 +541,53 @@
              (dom/prevent-default event)
              (dom/stop-propagation event)
              (some-> (dom/get-current-target event)
-                     (dom/click!)))))
+                     (dom/click)))))
         close-teams-menu
-        (mf/use-fn #(reset! show-teams-menu* false))]
+        (mf/use-fn #(reset! show-teams-menu* false))
 
-    [:div {:class (stl/css :sidebar-team-switch)}
-     [:div {:class (stl/css :switch-content)}
-      [:button {:class (stl/css :current-team)
-                :on-click on-show-teams-click
-                :on-key-down on-show-teams-keydown}
+        on-create-org-click
+        (mf/use-fn
+         (fn []
+           (if (:nitrate-licence profile)
+             ;; TODO update when org creation route is ready
+             (dom/open-new-window "/control-center/org/create")
+             (st/emit! (dnt/show-nitrate-popup)))))]
+    (if empty?
+      [:div {:class (stl/css :nitrate-orgs-empty)}
+       [:span {:class (stl/css :nitrate-penpot-icon)}
+        [:> raw-svg* {:id penpot-logo-icon}]]
+       "Penpot"
+       [:> button* {:variant "ghost"
+                    :type "button"
+                    :class (stl/css :nitrate-create-org)
+                    :on-click on-create-org-click} (tr "dashboard.create-new-org")]]
 
-       [:div {:class (stl/css :team-name)}
-        [:img {:src (cf/resolve-team-photo-url team)
-               :class (stl/css :team-picture)
-               :alt (:name team)}]
-        [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]]
+      [:div {:class (stl/css :sidebar-team-switch)}
+       [:div {:class (stl/css :switch-content)}
+        [:button {:class (stl/css :current-team)
+                  :on-click on-show-teams-click
+                  :on-key-down on-show-teams-keydown}
 
-       arrow-icon]]
+         [:div {:class (stl/css :team-name)}
+          [:img {:src (cf/resolve-team-photo-url current-org)
+                 :class (stl/css :team-picture)
+                 :alt (:name current-org)}]
+          [:span {:class (stl/css :team-text) :title (:name current-org)} (:name current-org)]]
 
-     ;; Teams Dropdown
+         arrow-icon]]
 
-     [:> teams-selector-dropdown* {:show show-teams-menu?
-                                   :on-close close-teams-menu
-                                   :id "organizations-list"
-                                   :class (stl/css :dropdown :teams-dropdown)
-                                   :team team
-                                   :profile profile
-                                   :teams teams
-                                   :show-default-team false
-                                   :allow-create-teams false
-                                   :allow-create-org true}]]))
+       ;; Teams Dropdown
+
+       [:> teams-selector-dropdown* {:show show-teams-menu?
+                                     :on-close close-teams-menu
+                                     :id "organizations-list"
+                                     :class (stl/css :dropdown :teams-dropdown)
+                                     :team current-org
+                                     :profile profile
+                                     :teams orgs
+                                     :show-default-team false
+                                     :allow-create-teams false
+                                     :allow-create-org true}]])))
 
 (mf/defc sidebar-team-switch*
   [{:keys [team profile]}]
@@ -601,7 +629,7 @@
              (dom/prevent-default event)
              (dom/stop-propagation event)
              (some-> (dom/get-current-target event)
-                     (dom/click!)))))
+                     (dom/click)))))
 
         close-team-options-menu
         (mf/use-fn #(reset! show-team-options-menu* false))
@@ -621,7 +649,7 @@
              (dom/stop-propagation event)
 
              (some-> (dom/get-current-target event)
-                     (dom/click!)))))
+                     (dom/click)))))
 
         close-teams-menu
         (mf/use-fn #(reset! show-teams-menu* false))]
@@ -705,6 +733,8 @@
         overflow*   (mf/use-state false)
         overflow?   (deref overflow*)
 
+        nitrate?    (contains? cf/flags :nitrate)
+
         go-projects
         (mf/use-fn #(st/emit! (dcm/go-to-dashboard-recent)))
 
@@ -793,70 +823,71 @@
         (reset! overflow* (> scroll-height client-height))))
 
     [:*
-     [:div {:class (stl/css-case :sidebar-content true)
-            :ref container}
-      (when (contains? cf/flags :nitrate)
-        [:> sidebar-org-switch* {:team team :profile profile}])
-      [:> sidebar-team-switch* {:team team :profile profile}]
+     [:div {:ref container}
+      (when nitrate?
+        [:div {:class (stl/css :nitrate-orgs-container)}
+         [:> sidebar-org-switch* {:team team :profile profile}]])
+      [:div {:class (stl/css-case :sidebar-content true :sidebar-content-nitrate nitrate?)}
+       [:> sidebar-team-switch* {:team team :profile profile}]
 
-      [:> sidebar-search* {:search-term search-term
-                           :team-id (:id team)}]
+       [:> sidebar-search* {:search-term search-term
+                            :team-id (:id team)}]
 
-      [:div {:class (stl/css :sidebar-content-section)}
-       [:ul {:class (stl/css :sidebar-nav)}
-        [:li {:class (stl/css-case :recent-projects true
-                                   :sidebar-nav-item true
-                                   :current projects?)}
-         [:& link {:action go-projects
-                   :class (stl/css :sidebar-link)
-                   :keyboard-action go-projects-with-key}
-          [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
+       [:div {:class (stl/css :sidebar-content-section)}
+        [:ul {:class (stl/css :sidebar-nav)}
+         [:li {:class (stl/css-case :recent-projects true
+                                    :sidebar-nav-item true
+                                    :current projects?)}
+          [:& link {:action go-projects
+                    :class (stl/css :sidebar-link)
+                    :keyboard-action go-projects-with-key}
+           [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
 
-        [:li {:class (stl/css-case :current drafts?
-                                   :sidebar-nav-item true)}
-         [:& link {:action go-drafts
-                   :class (stl/css :sidebar-link)
-                   :keyboard-action go-drafts-with-key}
-          [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
+         [:li {:class (stl/css-case :current drafts?
+                                    :sidebar-nav-item true)}
+          [:& link {:action go-drafts
+                    :class (stl/css :sidebar-link)
+                    :keyboard-action go-drafts-with-key}
+           [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
 
 
-      [:div {:class (stl/css :sidebar-content-section)}
-       [:div {:class (stl/css :sidebar-section-title)}
-        (tr "labels.sources")]
-       [:ul {:class (stl/css :sidebar-nav)}
-        [:li {:class (stl/css-case :sidebar-nav-item true
-                                   :current fonts?)}
-         [:& link {:action go-fonts
-                   :class (stl/css :sidebar-link)
-                   :keyboard-action go-fonts-with-key
-                   :data-testid "fonts"}
-          [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]
-        [:li {:class (stl/css-case :current libs?
-                                   :sidebar-nav-item true)}
-         [:& link {:action go-libs
-                   :data-testid "libs-link-sidebar"
-                   :class (stl/css :sidebar-link)
-                   :keyboard-action go-libs-with-key}
-          [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
+       [:div {:class (stl/css :sidebar-content-section)}
+        [:div {:class (stl/css :sidebar-section-title)}
+         (tr "labels.sources")]
+        [:ul {:class (stl/css :sidebar-nav)}
+         [:li {:class (stl/css-case :sidebar-nav-item true
+                                    :current fonts?)}
+          [:& link {:action go-fonts
+                    :class (stl/css :sidebar-link)
+                    :keyboard-action go-fonts-with-key
+                    :data-testid "fonts"}
+           [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]
+         [:li {:class (stl/css-case :current libs?
+                                    :sidebar-nav-item true)}
+          [:& link {:action go-libs
+                    :data-testid "libs-link-sidebar"
+                    :class (stl/css :sidebar-link)
+                    :keyboard-action go-libs-with-key}
+           [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
 
 
-      [:div {:class (stl/css :sidebar-content-section)
-             :data-testid "pinned-projects"}
-       [:div {:class (stl/css :sidebar-section-title)}
-        (tr "labels.pinned-projects")]
-       (if (some? pinned-projects)
-         [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
-          (for [item pinned-projects]
-            [:> sidebar-project*
-             {:item item
-              :key (dm/str (:id item))
-              :id (:id item)
-              :team-id (:id team)
-              :is-selected (= (:id item) (:id project))}])]
-         [:div {:class (stl/css :sidebar-empty-placeholder)}
-          pin-icon
-          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
-     [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))
+       [:div {:class (stl/css :sidebar-content-section)
+              :data-testid "pinned-projects"}
+        [:div {:class (stl/css :sidebar-section-title)}
+         (tr "labels.pinned-projects")]
+        (if (some? pinned-projects)
+          [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
+           (for [item pinned-projects]
+             [:> sidebar-project*
+              {:item item
+               :key (dm/str (:id item))
+               :id (:id item)
+               :team-id (:id team)
+               :is-selected (= (:id item) (:id project))}])]
+          [:div {:class (stl/css :sidebar-empty-placeholder)}
+           pin-icon
+           [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
+      [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]]))
 
 (mf/defc help-learning-menu*
   {::mf/props :obj
@@ -1056,10 +1087,13 @@
            (dom/open-new-window "https://penpot.app/pricing")))]
 
     [:*
-     (when (contains? cf/flags :subscriptions)
-       (if (show-subscription-dashboard-banner? profile)
-         [:> dashboard-cta* {:profile profile}]
-         [:> subscription-sidebar* {:profile profile}]))
+     (if (contains? cf/flags :nitrate)
+       (when-not (:nitrate-licence profile)
+         [:> nitrate-sidebar* {:profile profile}])
+       (when (contains? cf/flags :subscriptions)
+         (if (show-subscription-dashboard-banner? profile)
+           [:> dashboard-cta* {:profile profile}]
+           [:> subscription-sidebar* {:profile profile}])))
 
      ;; TODO remove this block when subscriptions is full implemented
      (when (contains? cf/flags :subscriptions-old)

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

@@ -40,6 +40,11 @@
   overflow-y: auto;
 }
 
+.sidebar-content-nitrate {
+  padding: var(--sp-m) 0 0 0;
+  border-block-start: $b-1 solid var(--color-background-quaternary);
+}
+
 .separator {
   height: var(--sp-xxs);
   width: 94%;
@@ -514,3 +519,44 @@
   @include t.use-typography("body-small");
   color: var(--color-accent-tertiary);
 }
+
+.nitrate-orgs-container {
+  align-items: center;
+  display: flex;
+  height: calc(2 * var(--sp-xxxl));
+  max-height: calc(2 * var(--sp-xxxl));
+  justify-content: space-between;
+  padding: var(--sp-xs) var(--sp-l) var(--sp-xs) var(--sp-s);
+  // border-block-end: $b-1 solid var(--color-background-quaternary);
+}
+
+.nitrate-orgs-empty {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-primary);
+  width: 100%;
+  margin: var(--sp-xs) var(--sp-l);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-s);
+}
+
+.nitrate-create-org {
+  margin-inline-start: auto;
+  text-transform: uppercase;
+}
+
+.nitrate-penpot-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
+  background-color: var(--color-foreground-primary);
+
+  svg {
+    fill: var(--icon-stroke-color);
+    width: var(--sp-xxl);
+    height: var(--sp-xxl);
+  }
+}

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

@@ -6,6 +6,7 @@
    [app.common.data.macros :as dm]
    [app.config :as cf]
    [app.main.data.event :as ev]
+   [app.main.data.nitrate :as dnt]
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]]
@@ -115,6 +116,26 @@
           :has-dropdown false
           :is-highlighted false}]))))
 
+(mf/defc nitrate-sidebar*
+  []
+  (let [handle-click
+        (mf/use-fn
+         (fn []
+           (st/emit! (dnt/show-nitrate-popup))))]
+
+    ;; TODO add translations for this texts when we have the definitive ones
+    [:div {:class (stl/css :nitrate-banner :highlighted)}
+
+     [:div {:class (stl/css :nitrate-content)}
+      [:span {:class (stl/css :nitrate-title)} "Unlock Nitrate features"]]
+     [:div {:class (stl/css :nitrate-content)}
+
+      [:span {:class (stl/css :nitrate-info)} "Some further information and explanation."]
+      [:> button* {:variant "primary"
+                   :type "button"
+                   :class (stl/css :cta-bottom-button)
+                   :on-click handle-click} "UPGRADE TO NITRATE"]]]))
+
 (mf/defc team*
   [{:keys [is-owner team]}]
   (let [subscription          (:subscription team)

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

@@ -205,3 +205,28 @@
     overflow-wrap: break-word;
   }
 }
+
+.nitrate-banner {
+  display: flex;
+  border-radius: var(--sp-s);
+  flex-direction: column;
+  margin: var(--sp-m);
+  background: var(--color-background-quaternary);
+  border: $b-1 solid var(--color-accent-primary-muted);
+  padding: var(--sp-l);
+}
+
+.nitrate-title {
+  @include t.use-typography("body-large");
+  color: var(--color-foreground-primary);
+}
+
+.nitrate-info {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-secondary);
+}
+
+.nitrate-content {
+  display: flex;
+  flex-direction: column;
+}

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

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

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

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

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

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

frontend/src/app/main/ui/ds/_sizes.scss

@@ -18,6 +18,7 @@ $sz-32: px2rem(32);
 $sz-36: px2rem(36);
 $sz-40: px2rem(40);
 $sz-48: px2rem(48);
+$sz-64: px2rem(64);
 $sz-88: px2rem(88);
 $sz-96: px2rem(96);
 $sz-120: px2rem(120);

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

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

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

@@ -8,7 +8,6 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.main.constants :refer [max-input-length]]
    [app.main.ui.ds.controls.utilities.hint-message :refer [hint-message*]]
    [app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
@@ -52,10 +51,11 @@
                                       :has-hint has-hint
                                       :hint-type hint-type
                                       :variant variant})]
-    [:div {:class (dm/str class " " (stl/css-case :input-wrapper true
-                                                  :variant-dense (= variant "dense")
-                                                  :variant-comfortable (= variant "comfortable")
-                                                  :has-hint has-hint))}
+
+    [:div {:class [class (stl/css-case :input-wrapper true
+                                       :variant-dense (= variant "dense")
+                                       :variant-comfortable (= variant "comfortable")
+                                       :has-hint has-hint)]}
      (when has-label
        [:> label* {:for id :is-optional is-optional} label])
      [:> input-field* props]
@@ -64,4 +64,3 @@
                           :class hint-class
                           :message hint-message
                           :type hint-type}])]))
-

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

@@ -84,6 +84,7 @@
                   :on-click on-icon-click}])
      (if aria-label
        [:> tooltip* {:content aria-label
+                     :class (stl/css :tooltip-wrapper)
                      :id tooltip-id}
         [:> "input" props]]
        [:> "input" props])

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

@@ -120,3 +120,7 @@
   color: var(--color-foreground-secondary);
   min-inline-size: var(--sp-l);
 }
+
+.tooltip-wrapper {
+  inline-size: 100%;
+}

frontend/src/app/main/ui/exports/assets.cljs

@@ -208,7 +208,7 @@
 ;; FIXME: deprecated, should be refactored in two components and use
 ;; the generic progress reporter
 
-(mf/defc progress-widget*
+(mf/defc progress-widget
   {::mf/wrap [mf/memo]}
   []
   (let [state             (mf/deref refs/export)

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

@@ -8,6 +8,7 @@
   (:require
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.controls.input :refer [input*]]
+   [app.main.ui.ds.controls.select :refer [select*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.keyboard :as k]
@@ -47,6 +48,23 @@
 
     [:> input* props]))
 
+(mf/defc form-select*
+  [{:keys [name] :as props}]
+  (let [select-name name
+        form        (mf/use-ctx context)
+        value       (get-in @form [:data select-name] "")
+
+        handle-change
+        (fn [event]
+          (let [value (if (string? event) event (dom/get-target-val event))]
+            (fm/on-input-change form select-name value)))
+
+        props
+        (mf/spread-props props {:on-change handle-change
+                                :value value})]
+
+    [:> select* props]))
+
 (mf/defc form-submit*
   [{:keys [disabled on-submit] :rest props}]
   (let [form      (mf/use-ctx context)
@@ -79,4 +97,4 @@
                       (when (fn? on-submit)
                         (on-submit form event))))]
     [:> (mf/provider context) {:value form}
-     [:form {:class class :on-submit on-submit'} children]]))
+     [:form {:class class :on-submit on-submit'} children]]))

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

@@ -19,10 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.components.copy-button :refer [copy-button*]]
-   [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
@@ -263,9 +260,8 @@
     [:div {:class (stl/css-case :element-options true
                                 :viewer-code-block (= :viewer from))}
      [:div {:class (stl/css :attributes-block)}
-      [:> button* {:variant "secondary"
-                   :class (stl/css :download-button)
-                   :on-click handle-copy-all-code}
+      [:button {:class (stl/css :download-button)
+                :on-click handle-copy-all-code}
        "Copy all code"]]
 
      #_[:div.attributes-block
@@ -292,10 +288,10 @@
        ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-css-fn
                           :class (stl/css :css-copy-btn)
                           :on-copied on-style-copied}]]]
@@ -322,21 +318,21 @@
                         :rotated collapsed-markup?)}
          deprecated-icon/arrow]]
 
-       [:> radio-buttons* {:selected markup-type
-                           :on-change set-markup
-                           :name "listing-style"
-                           :options [{:id "html"
-                                      :label "HTML"
-                                      :value "html"}
-                                     {:id "svg"
-                                      :label "SVG"
-                                      :value "svg"}]}]
+       [:& radio-buttons {:selected markup-type
+                          :on-change set-markup
+                          :class (stl/css :code-lang-options)
+                          :wide true
+                          :name "listing-style"}
+        [:& radio-button {:value "html"
+                          :id :html}]
+        [:& radio-button {:value "svg"
+                          :id :svg}]]
 
        [:div {:class (stl/css :action-btns)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label "Expand"
-                          :on-click on-expand
-                          :icon i/code}]
+        [:button {:class (stl/css :expand-button)
+                  :on-click on-expand}
+         deprecated-icon/code]
+
         [:> copy-button* {:data copy-html-fn
                           :class (stl/css :html-copy-btn)
                           :on-copied on-markup-copied}]]]

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

@@ -17,18 +17,16 @@
   padding-inline: var(--sp-m);
 }
 
-.attributes-block {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-}
-
 .viewer-code-block {
   height: calc(100vh - #{deprecated.$s-108}); // TODO: Fix this hardcoded value
 }
 
 .download-button {
-  margin: var(--sp-s) 0;
+  @extend .button-secondary;
+  @include deprecated.uppercaseTitleTipography;
+  height: deprecated.$s-32;
+  width: 100%;
+  margin: deprecated.$s-8 0;
 }
 
 .code-block {
@@ -75,6 +73,7 @@
   gap: deprecated.$s-4;
 }
 
+.expand-button,
 .css-copy-btn,
 .html-copy-btn {
   @extend .button-tertiary;
@@ -86,6 +85,9 @@
   }
 }
 
+.code-lang-options {
+  max-width: deprecated.$s-108;
+}
 .code-lang-select {
   @include deprecated.uppercaseTitleTipography;
   width: deprecated.$s-72;

frontend/src/app/main/ui/nitrate/nitrate_form.cljs

@@ -7,42 +7,85 @@
 (ns app.main.ui.nitrate.nitrate-form
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.schema :as sm]
    [app.main.data.modal :as modal]
+   [app.main.ui.components.forms :as fm]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-;; FIXME: rename to `form` (remove the nitrate prefix from namespace,
-;; because it is already under nitrate)
+(def ^:private schema:nitrate-form
+  [:map {:title "NitrateForm"}
+   [:subscription [::sm/one-of #{:monthly :yearly}]]])
 
 (mf/defc nitrate-form-modal*
   {::mf/register modal/components
-   ::mf/register-as :nitrate-form}
-  []
-  (let [on-click
+   ::mf/register-as :nitrate-form
+   ::mf/wrap-props true}
+  [connectivity]
+
+  (let [show-buttons (:licenses connectivity)
+        initial (mf/with-memo []
+                  {:subscription "yearly"})
+        form     (fm/use-form :schema schema:nitrate-form
+                              :initial initial)
+        on-click
         (mf/use-fn
          (fn []
+           ;; TODO Start licenses with selected type
            (dom/open-new-window "/control-center/licenses/start")))]
 
     [:div {:class (stl/css :modal-overlay)}
-     [:div {:class (stl/css :modal-container)}
-      [:div {:class (stl/css :nitrate-form)}
+     [:div {:class (stl/css :modal-dialog :subscription-success)}
+      [:button {:class (stl/css :close-btn) :on-click modal/hide!}
+       [:> icon* {:icon-id "close"
+                  :size "m"}]]
+      [:div {:class (stl/css :modal-success-content)}
+       [:div {:class (stl/css :modal-start)}
+        ;; TODO this svg is a placeholder. Use the proper one when created
+        [:> raw-svg* {:id "logo-subscription"}]]
 
-       [:div {:class (stl/css :modal-header)}
-        [:h2 {:class (stl/css :modal-title)}
-         "BUY NITRATE"]
+       [:div {:class (stl/css :modal-end)}
+        [:div {:class (stl/css :modal-title)}
+         "Unlock Nitrate Features"]
 
-        [:button {:class (stl/css :modal-close-btn)
-                  :on-click modal/hide!} deprecated-icon/close]]
+        [:p {:class (stl/css :modal-text-large)}
+         "Prow scuttle parrel provost."]
+        [:p {:class (stl/css :modal-text-large)}
+         "Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl."]
+        [:p {:class (stl/css :modal-text-large)}
+         "Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors."]
+        (if show-buttons
+          [:& fm/form {:form form}
+           [:p {:class (stl/css :modal-text-large)}
 
-       [:div {:class (stl/css :modal-content)}
-        "Nitrate is so cool! You should buy it!"]
+            [:& fm/radio-buttons
+             {:options [{:label "Price Tag Montly" :value "monthly"}
+                        {:label "Price Tag Yearly (Discount)" :value "yearly"}]
+              :name :subscription
+              :class (stl/css :radio-btns)}]]
 
-       [:div {:class (stl/css :modal-footer)}
-        [:div {:class (stl/css :action-buttons)}
-         [:> button* {:variant "primary"
-                      :on-click on-click}
-          "BUY NOW!"]]]]]]))
+           [:p {:class (stl/css :modal-text-large :modal-buttons-section)}
+            [:div {:class (stl/css :modal-buttons-section)}
+             [:> button* {:variant "primary"
+                          :on-click on-click
+                          :class (stl/css :modal-button)}
+              "UPGRADE TO NITRATE"]
+             [:div {:class (stl/css :modal-text-small :modal-info)}
+              "Cancel anytime before your next billing cycle."]]]
+
+
+           [:p {:class (stl/css :modal-text-medium)}
+            [:a {:class (stl/css :link)}
+             "See my current plan"]]]
+
+          [:div {:class (stl/css :contact)}
+           [:p {:class (stl/css :modal-text-large)}
+            "Contact us to upgrade to Nitrate:"]
+           [:p {:class (stl/css :modal-text-large)}
+            [:a {:class (stl/css :link) :href "mailto:sales@penpot.app"}
+             "sales@penpot.app"]]])]]]]))
 
 

frontend/src/app/main/ui/nitrate/nitrate_form.scss

@@ -5,48 +5,92 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/spacing.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .modal-overlay {
   @extend .modal-overlay-base;
+  z-index: var(--z-index-notifications);
 }
 
-.modal-container {
+.modal-dialog {
   @extend .modal-container-base;
+  max-block-size: initial;
+  min-inline-size: px2rem(648);
 }
 
-.modal-header {
-  margin-bottom: deprecated.$s-24;
-}
-
-.modal-title {
-  @include deprecated.uppercaseTitleTipography;
-  color: var(--modal-title-foreground-color);
-}
-
-.modal-close-btn {
+.close-btn {
   @extend .modal-close-btn-base;
 }
 
-.modal-content {
-  margin-bottom: deprecated.$s-24;
+.modal-title {
+  @include t.use-typography("title-large");
+  margin-block-end: var(--sp-xxxl);
+  color: var(--modal-title-foreground-color);
+  display: flex;
+  gap: var(--sp-m);
 }
 
-.nitrate-form {
-  min-width: deprecated.$s-400;
+.modal-text-large {
+  @include t.use-typography("body-large");
 }
 
-.action-buttons {
-  @extend .modal-action-btns;
+.modal-text-medium {
+  @include t.use-typography("body-medium");
 }
 
-.cancel-button {
-  @extend .modal-cancel-btn;
+.modal-text-small {
+  @include t.use-typography("body-small");
 }
 
-.accept-btn {
-  @extend .modal-accept-btn;
+.modal-info {
+  margin-block-start: var(--sp-s);
+  width: 40%;
+}
 
-  &.danger {
-    @extend .modal-danger-btn;
+.modal-content,
+.modal-end {
+  color: var(--color-foreground-secondary);
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-success-content {
+  display: flex;
+  gap: $sz-40;
+}
+
+.modal-start {
+  display: flex;
+  justify-content: center;
+  max-inline-size: $sz-224;
+
+  svg {
+    inline-size: 100%;
+    block-size: auto;
+  }
+
+  @media (max-inline-size: 992px) {
+    display: none;
   }
 }
+
+.radio-btns {
+  label {
+    @include t.use-typography("body-large");
+    padding: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--sp-l) 0 0 0;
+  gap: 0;
+}
+
+.contact {
+  margin-block-start: $sz-96;
+  color: var(--color-foreground-primary);
+}

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

@@ -36,7 +36,7 @@
     ["/feedback"      :settings-feedback]
     ["/options"       :settings-options]
     ["/subscriptions" :settings-subscription]
-    ["/access-tokens" :settings-access-tokens]
+    ["/integrations"  :settings-integrations]
     ["/notifications" :settings-notifications]]
 
    ["/frame-preview" :frame-preview]

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

@@ -13,10 +13,10 @@
    [app.main.store :as st]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.modal :refer [modal-container*]]
-   [app.main.ui.settings.access-tokens :refer [access-tokens-page]]
    [app.main.ui.settings.change-email]
    [app.main.ui.settings.delete-account]
    [app.main.ui.settings.feedback :refer [feedback-page*]]
+   [app.main.ui.settings.integrations :refer [integrations-page*]]
    [app.main.ui.settings.notifications :refer [notifications-page*]]
    [app.main.ui.settings.options :refer [options-page]]
    [app.main.ui.settings.password :refer [password-page]]
@@ -73,8 +73,8 @@
           :settings-subscription
           [:> subscription-page* {:profile profile}]
 
-          :settings-access-tokens
-          [:& access-tokens-page]
+          :settings-integrations
+          [:> integrations-page*]
 
           :settings-notifications
           [:& notifications-page* {:profile profile}])]]]]))

frontend/src/app/main/ui/settings/access_tokens.cljs

@@ -1,291 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.settings.access-tokens
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.schema :as sm]
-   [app.common.time :as ct]
-   [app.main.data.modal :as modal]
-   [app.main.data.notifications :as ntf]
-   [app.main.data.profile :as du]
-   [app.main.store :as st]
-   [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.forms :as fm]
-   [app.main.ui.icons :as deprecated-icon]
-   [app.util.clipboard :as clipboard]
-   [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [tr]]
-   [app.util.keyboard :as kbd]
-   [okulary.core :as l]
-   [rumext.v2 :as mf]))
-
-(def ^:private clipboard-icon
-  (deprecated-icon/icon-xref :clipboard (stl/css :clipboard-icon)))
-
-(def ^:private close-icon
-  (deprecated-icon/icon-xref :close (stl/css :close-icon)))
-
-(def ^:private menu-icon
-  (deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
-
-(def tokens-ref
-  (l/derived :access-tokens st/state))
-
-(def token-created-ref
-  (l/derived :access-token-created st/state))
-
-(def ^:private schema:form
-  [:map {:title "AccessTokenForm"}
-   [:name [::sm/text {:max 250}]]
-   [:expiration-date [::sm/text {:max 250}]]])
-
-(def initial-data
-  {:name "" :expiration-date "never"})
-
-(mf/defc access-token-modal
-  {::mf/register modal/components
-   ::mf/register-as :access-token}
-  []
-  (let [form    (fm/use-form
-                 :initial initial-data
-                 :schema schema:form)
-
-        created  (mf/deref token-created-ref)
-        created? (mf/use-state false)
-
-        on-success
-        (mf/use-fn
-         (mf/deps created)
-         (fn [_]
-           (let [message (tr "dashboard.access-tokens.create.success")]
-             (st/emit! (du/fetch-access-tokens)
-                       (ntf/success message)
-                       (reset! created? true)))))
-
-        on-close
-        (mf/use-fn
-         (mf/deps created)
-         (fn [_]
-           (reset! created? false)
-           (st/emit! (modal/hide))))
-
-        on-error
-        (mf/use-fn
-         (fn [_]
-           (st/emit! (ntf/error (tr "errors.generic"))
-                     (modal/hide))))
-
-        on-submit
-        (mf/use-fn
-         (fn [form]
-           (let [cdata      (:clean-data @form)
-                 mdata      {:on-success (partial on-success form)
-                             :on-error   (partial on-error form)}
-                 expiration (:expiration-date cdata)
-                 params     (cond-> {:name       (:name cdata)
-                                     :perms      (:perms cdata)}
-                              (not= "never" expiration) (assoc :expiration expiration))]
-             (st/emit! (du/create-access-token
-                        (with-meta params mdata))))))
-
-        copy-token
-        (mf/use-fn
-         (mf/deps created)
-         (fn [event]
-           (dom/prevent-default event)
-           (clipboard/to-clipboard (:token created))
-           (st/emit! (ntf/show {:level :info
-                                :type :toast
-                                :content (tr "dashboard.access-tokens.copied-success")
-                                :timeout 7000}))))]
-
-    [:div {:class (stl/css :modal-overlay)}
-     [:div {:class (stl/css :modal-container)}
-      [:& fm/form {:form form :on-submit on-submit}
-
-       [:div {:class (stl/css :modal-header)}
-        [:h2 {:class (stl/css :modal-title)} (tr "modals.create-access-token.title")]
-
-        [:button {:class (stl/css :modal-close-btn)
-                  :on-click on-close}
-         close-icon]]
-
-       [:div {:class (stl/css :modal-content)}
-        [:div {:class (stl/css :fields-row)}
-         [:& fm/input {:type "text"
-                       :auto-focus? true
-                       :form form
-                       :name :name
-                       :disabled @created?
-                       :label (tr "modals.create-access-token.name.label")
-                       :show-success? true
-                       :placeholder (tr "modals.create-access-token.name.placeholder")}]]
-
-        [:div {:class (stl/css :fields-row)}
-         [:div {:class (stl/css :select-title)}
-          (tr "modals.create-access-token.expiration-date.label")]
-         [:& fm/select {:options [{:label (tr "dashboard.access-tokens.expiration-never")    :value "never" :key "never"}
-                                  {:label (tr "dashboard.access-tokens.expiration-30-days")  :value "720h"  :key "720h"}
-                                  {:label (tr "dashboard.access-tokens.expiration-60-days")  :value "1440h" :key "1440h"}
-                                  {:label (tr "dashboard.access-tokens.expiration-90-days")  :value "2160h" :key "2160h"}
-                                  {:label (tr "dashboard.access-tokens.expiration-180-days") :value "4320h" :key "4320h"}]
-                        :default "never"
-                        :disabled @created?
-                        :name :expiration-date}]
-         (when @created?
-           [:span {:class (stl/css :token-created-info)}
-            (if (:expires-at created)
-              (tr "dashboard.access-tokens.token-will-expire" (ct/format-inst (:expires-at created) "PPP"))
-              (tr "dashboard.access-tokens.token-will-not-expire"))])]
-
-        [:div {:class (stl/css :fields-row)}
-         (when @created?
-           [:div {:class (stl/css :custon-input-wrapper)}
-            [:input {:type "text"
-                     :value (:token created "")
-                     :class (stl/css :custom-input-token)
-                     :read-only true}]
-            [:button {:title (tr "modals.create-access-token.copy-token")
-                      :class (stl/css :copy-btn)
-                      :on-click copy-token}
-             clipboard-icon]])
-         #_(when @created?
-             [:button {:class (stl/css :copy-btn)
-                       :title (tr "modals.create-access-token.copy-token")
-                       :on-click copy-token}
-              [:span {:class (stl/css :token-value)} (:token created "")]
-              [:span {:class (stl/css :icon)}
-               i/clipboard]])]]
-
-       [:div {:class (stl/css :modal-footer)}
-        [:div {:class (stl/css :action-buttons)}
-
-         (if @created?
-           [:input {:class (stl/css :cancel-button)
-                    :type "button"
-                    :value (tr "labels.close")
-                    :on-click modal/hide!}]
-           [:*
-            [:input {:class (stl/css :cancel-button)
-                     :type "button"
-                     :value (tr "labels.cancel")
-                     :on-click modal/hide!}]
-            [:> fm/submit-button*
-             {:large? false :label (tr "modals.create-access-token.submit-label")}]])]]]]]))
-
-(mf/defc access-tokens-hero
-  []
-  (let [on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
-    [:div {:class (stl/css :access-tokens-hero)}
-     [:h2 {:class (stl/css :hero-title)} (tr "dashboard.access-tokens.personal")]
-     [:p {:class (stl/css :hero-desc)} (tr "dashboard.access-tokens.personal.description")]
-
-     [:button {:class (stl/css :hero-btn)
-               :on-click on-click}
-      (tr "dashboard.access-tokens.create")]]))
-
-(mf/defc access-token-actions
-  [{:keys [on-delete]}]
-  (let [local    (mf/use-state {:menu-open false})
-        show?    (:menu-open @local)
-        options  (mf/with-memo [on-delete]
-                   [{:name    (tr "labels.delete")
-                     :id      "access-token-delete"
-                     :handler on-delete}])
-
-        menu-ref (mf/use-ref)
-
-        on-menu-close
-        (mf/use-fn #(swap! local assoc :menu-open false))
-
-        on-menu-click
-        (mf/use-fn
-         (fn [event]
-           (dom/prevent-default event)
-           (swap! local assoc :menu-open true)))
-
-        on-keydown
-        (mf/use-fn
-         (mf/deps on-menu-click)
-         (fn [event]
-           (when (kbd/enter? event)
-             (dom/stop-propagation event)
-             (on-menu-click event))))]
-
-    [:button {:class (stl/css :menu-btn)
-              :tab-index "0"
-              :ref menu-ref
-              :on-click on-menu-click
-              :on-key-down on-keydown}
-     menu-icon
-     [:> context-menu*
-      {:on-close on-menu-close
-       :show show?
-       :fixed true
-       :min-width true
-       :top "auto"
-       :left "auto"
-       :options options}]]))
-
-(mf/defc access-token-item
-  {::mf/wrap [mf/memo]}
-  [{:keys [token] :as props}]
-  (let [expires-at  (:expires-at token)
-        expires-txt (some-> expires-at (ct/format-inst "PPP"))
-        expired?    (and (some? expires-at) (> (ct/now) expires-at))
-
-        delete-fn
-        (mf/use-fn
-         (mf/deps token)
-         (fn []
-           (let [params {:id (:id token)}
-                 mdata  {:on-success #(st/emit! (du/fetch-access-tokens))}]
-             (st/emit! (du/delete-access-token (with-meta params mdata))))))
-
-        on-delete
-        (mf/use-fn
-         (mf/deps delete-fn)
-         (fn []
-           (st/emit! (modal/show
-                      {:type :confirm
-                       :title (tr "modals.delete-acces-token.title")
-                       :message (tr "modals.delete-acces-token.message")
-                       :accept-label (tr "modals.delete-acces-token.accept")
-                       :on-accept delete-fn}))))]
-
-    [:div {:class (stl/css :table-row)}
-     [:div {:class (stl/css :table-field :field-name)}
-      (str (:name token))]
-
-     [:div {:class (stl/css-case :expiration-date true
-                                 :expired expired?)}
-      (cond
-        (nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
-        expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
-        :else (tr "dashboard.access-tokens.expires-on" expires-txt))]
-     [:div {:class (stl/css :table-field :actions)}
-      [:& access-token-actions
-       {:on-delete on-delete}]]]))
-
-(mf/defc access-tokens-page
-  []
-  (let [tokens (mf/deref tokens-ref)]
-    (mf/with-effect []
-      (dom/set-html-title (tr "title.settings.access-tokens"))
-      (st/emit! (du/fetch-access-tokens)))
-
-    [:div {:class (stl/css :dashboard-access-tokens)}
-     [:& access-tokens-hero]
-     (if (empty? tokens)
-       [:div {:class (stl/css :access-tokens-empty)}
-        [:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
-        [:div (tr "dashboard.access-tokens.empty.add-one")]]
-       [:div {:class (stl/css :dashboard-table)}
-        [:div {:class (stl/css :table-rows)}
-         (for [token tokens]
-           [:& access-token-item {:token token :key (:id token)}])]])]))
-