🔧 Use schema in token api methods

And add poc plugin example

backend/src/app/migrations.clj

@@ -10,6 +10,7 @@
    [app.common.logging :as l]
    [app.db :as db]
    [app.migrations.clj.migration-0023 :as mg0023]
+   [app.migrations.clj.migration-0145 :as mg0145]
    [app.util.migrations :as mg]
    [integrant.core :as ig]))
 
@@ -459,7 +460,11 @@
     :fn (mg/resource "app/migrations/sql/0143-add-http-session-v2-table.sql")}
 
    {:name "0144-mod-server-error-report-table"
-    :fn (mg/resource "app/migrations/sql/0144-mod-server-error-report-table.sql")}])
+    :fn (mg/resource "app/migrations/sql/0144-mod-server-error-report-table.sql")}
+
+   {:name "0145-fix-plugins-uri-on-profile"
+    :fn mg0145/migrate}])
+
 
 (defn apply-migrations!
   [pool name migrations]

backend/src/app/migrations/clj/migration_0145.clj

@@ -0,0 +1,83 @@
+;; 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.migrations.clj.migration-0145
+  "Migrate plugins references on profiles"
+  (:require
+   [app.common.data :as d]
+   [app.common.logging :as l]
+   [app.db :as db]
+   [cuerdas.core :as str]))
+
+(def ^:private replacements
+  {"https://colors-to-tokens-plugin.pages.dev"
+   "https://colors-to-tokens.plugins.penpot.app"
+
+   "https://contrast-penpot-plugin.pages.dev"
+   "https://contrast.plugins.penpot.app"
+
+   "https://create-palette-penpot-plugin.pages.dev"
+   "https://create-palette.plugins.penpot.app"
+
+   "https://icons-penpot-plugin.pages.dev"
+   "https://icons.plugins.penpot.app"
+
+   "https://lorem-ipsum-penpot-plugin.pages.dev"
+   "https://lorem-ipsum.plugins.penpot.app"
+
+   "https://rename-layers-penpot-plugin.pages.dev"
+   "https://rename-layers.plugins.penpot.app"
+
+   "https://table-penpot-plugin.pages.dev"
+   "https://table.plugins.penpot.app"})
+
+(defn- fix-url
+  [url]
+  (reduce-kv (fn [url prefix replacement]
+               (if (str/starts-with? url prefix)
+                 (reduced (str replacement (subs url (count prefix))))
+                 url))
+             url
+             replacements))
+
+
+(defn- fix-manifest
+  [manifest]
+  (-> manifest
+      (d/update-when :url fix-url)
+      (d/update-when :host fix-url)))
+
+(defn- fix-plugins-data
+  [props]
+  (d/update-in-when props [:plugins :data]
+                    (fn [data]
+                      (reduce-kv (fn [data id manifest]
+                                   (let [manifest' (fix-manifest manifest)]
+                                     (if (= manifest manifest')
+                                       data
+                                       (assoc data id manifest'))))
+                                 data
+                                 data))))
+
+(def ^:private sql:get-profiles
+  "SELECT id, props FROM profile
+    WHERE props ?? '~:plugins'
+    ORDER BY created_at
+      FOR UPDATE")
+
+(defn migrate
+  [conn]
+  (->> (db/plan conn [sql:get-profiles])
+       (run! (fn [{:keys [id props]}]
+               (when-let [props (some-> props db/decode-transit-pgobject)]
+                 (let [props' (fix-plugins-data props)]
+                   (when (not= props props')
+                     (l/inf :hint "fixing plugins data on profile props" :profile-id (str id))
+                     (db/update! conn :profile
+                                 {:props (db/tjson props')}
+                                 {:id id}
+                                 {::db/return-keys false}))))))))
+

common/src/app/common/files/changes.cljc

@@ -27,6 +27,7 @@
    [app.common.types.path :as path]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
+   [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as ctt]
@@ -378,7 +379,7 @@
      [:type [:= :set-token]]
      [:set-id ::sm/uuid]
      [:token-id ::sm/uuid]
-     [:attrs [:maybe ctob/schema:token-attrs]]]]
+     [:attrs [:maybe cto/schema:token-attrs]]]]
 
    [:set-token-set
     [:map {:title "SetTokenSetChange"}

common/src/app/common/files/tokens.cljc

@@ -8,8 +8,228 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.i18n :refer [tr]]
+   [app.common.schema :as sm]
+   [app.common.types.token :as cto]
+   [app.common.types.tokens-lib :as ctob]
    [clojure.set :as set]
-   [cuerdas.core :as str]))
+   [cuerdas.core :as str]
+   [malli.core :as m]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HIGH LEVEL SCHEMAS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; Token value
+
+(defn- token-value-empty-fn
+  [{:keys [value]}]
+  (when (or (str/empty? value)
+            (str/blank? value))
+    (tr "workspace.tokens.empty-input")))
+
+(def schema:token-value-generic
+  [::sm/text {:error/fn token-value-empty-fn}])
+
+(def schema:token-value-composite-ref
+  [::sm/text {:error/fn token-value-empty-fn}])
+
+(def schema:token-value-font-family
+  [:vector :string])
+
+(def schema:token-value-typography-map
+  [:map
+   [:font-family {:optional true} schema:token-value-font-family]
+   [:font-weight {:optional true} schema:token-value-generic]
+   [:font-size {:optional true} schema:token-value-generic]
+   [:line-height {:optional true} schema:token-value-generic]
+   [:letter-spacing {:optional true} schema:token-value-generic]
+   [:paragraph-spacing {:optional true} schema:token-value-generic]
+   [:text-decoration {:optional true} schema:token-value-generic]
+   [:text-case {:optional true} schema:token-value-generic]])
+
+(def schema:token-value-typography
+  [:or
+   schema:token-value-typography-map
+   schema:token-value-composite-ref])
+
+(def schema:token-value-shadow-vector
+  [:vector
+   [:map
+    [:offset-x :string]
+    [:offset-y :string]
+    [:blur
+     [:and
+      :string
+      [:fn {:error/fn #(tr "workspace.tokens.shadow-token-blur-value-error")}
+       (fn [blur]
+         (let [n (d/parse-double blur)]
+           (or (nil? n) (not (< n 0)))))]]]
+    [:spread
+     [:and
+      :string
+      [:fn {:error/fn #(tr "workspace.tokens.shadow-token-spread-value-error")}
+       (fn [spread]
+         (let [n (d/parse-double spread)]
+           (or (nil? n) (not (< n 0)))))]]]
+    [:color :string]
+    [:inset {:optional true} :boolean]]])
+
+(def schema:token-value-shadow
+  [:or
+   schema:token-value-shadow-vector
+   schema:token-value-composite-ref])
+
+(defn make-token-value-schema
+  [token-type]
+  [:multi {:dispatch (constantly token-type)
+           :title "Token Value"}
+   [:font-family schema:token-value-font-family]
+   [:typography schema:token-value-typography]
+   [:shadow schema:token-value-shadow]
+   [::m/default schema:token-value-generic]])
+
+;; Token
+
+(defn make-token-name-schema
+  "Dynamically generates a schema to check a token name, adding translated error messages
+   and two additional validations:
+    - Min and max length.
+    - Checks if other token with a path derived from the name already exists at `tokens-tree`.
+      e.g. it's not allowed to create a token `foo.bar` if a token `foo` already exists."
+  [tokens-tree]
+  [:and
+   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
+   (-> cto/schema:token-name
+       (sm/update-properties assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error"))))
+   [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
+    #(and (some? tokens-tree)
+          (not (ctob/token-name-path-exists? % tokens-tree)))]])
+
+(def schema:token-description
+  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
+
+(defn make-token-schema
+  [tokens-tree token-type]
+  [:and
+   (sm/merge
+    cto/schema:token-attrs
+    [:map
+     [:name (make-token-name-schema tokens-tree)]
+     [:value (make-token-value-schema token-type)]
+     [:description {:optional true} schema:token-description]])
+   [:fn {:error/field :value
+         :error/fn #(tr "workspace.tokens.self-reference")}
+    (fn [{:keys [name value]}]
+      (when (and name value)
+        (not (cto/token-value-self-reference? name value))))]])
+
+(defn convert-dtcg-token
+  "Convert token attributes as they come from a decoded json, with DTCG types, to internal types.
+   Eg. From this:
+
+     {'name' 'body-text'
+      'type' 'typography'
+      'value' {
+        'fontFamilies' ['Arial' 'Helvetica' 'sans-serif']
+        'fontSize' '16px'
+        'fontWeights' 'normal'}}
+
+   to this
+     {:name 'body-text'
+      :type :typography
+      :value {
+        :font-family ['Arial' 'Helvetica' 'sans-serif']
+        :font-size '16px'
+        :font-weight 'normal'}}"
+  [token-attrs]
+  (let [name        (get token-attrs "name")
+        type        (get token-attrs "type")
+        value       (get token-attrs "value")
+        description (get token-attrs "description")
+
+        type  (cto/dtcg-token-type->token-type type)
+        value (case type
+                :font-family (ctob/convert-dtcg-font-family value)
+                :typography  (ctob/convert-dtcg-typography-composite value)
+                :shadow      (ctob/convert-dtcg-shadow-composite value)
+                value)]
+
+    (d/without-nils {:name name
+                     :type type
+                     :value value
+                     :description description})))
+
+;; Token set
+
+(defn make-token-set-name-schema
+  "Generates a dynamic schema to check a token set name:
+    - Validate name length.
+    - Checks if other token set with a path derived from the name already exists in the tokens lib."
+  [tokens-lib set-id]
+  [:and
+   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
+   [:fn {:error/fn #(tr "errors.token-set-already-exists" (:value %))}
+    (fn [name]
+      (or (nil? tokens-lib)
+          (let [set (ctob/get-set-by-name tokens-lib name)]
+            (or (nil? set) (= (ctob/get-id set) set-id)))))]])
+
+(def schema:token-set-description
+  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
+
+(defn make-token-set-schema
+  [tokens-lib set-id]
+  (sm/merge
+   ctob/schema:token-set-attrs
+   [:map
+    [:name [:and (make-token-set-name-schema tokens-lib set-id)
+            [:fn #(ctob/normalized-set-name? %)]]]
+    [:description {:optional true} schema:token-set-description]]))
+
+;; Token theme
+
+(defn make-token-theme-group-schema
+  "Generates a dynamic schema to check a token theme group:
+    - Validate group length.
+    - Checks if other token theme with the same name already exists in the new group in the tokens lib."
+  [tokens-lib name theme-id]
+  [:and
+   [:string {:min 0 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
+   [:fn {:error/fn #(tr "errors.token-theme-already-exists" (:value %))}
+    (fn [group]
+      (or (nil? tokens-lib)
+          (let [theme (ctob/get-theme-by-name tokens-lib group name)]
+            (or (nil? theme) (= (:id theme) theme-id)))))]])
+
+(defn make-token-theme-name-schema
+  "Generates a dynamic schema to check a token theme name:
+    - Validate name length.
+    - Checks if other token theme with the same name already exists in the same group in the tokens lib."
+  [tokens-lib group theme-id]
+  [:and
+   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
+   [:fn {:error/fn #(tr "errors.token-theme-already-exists" (str group "/" (:value %)))}
+    (fn [name]
+      (or (nil? tokens-lib)
+          (let [theme (ctob/get-theme-by-name tokens-lib group name)]
+            (or (nil? theme) (= (:id theme) theme-id)))))]])
+
+(def schema:token-theme-description
+  [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}])
+
+(defn make-token-theme-schema
+  [tokens-lib group name theme-id]
+  (sm/merge
+   ctob/schema:token-theme-attrs
+   [:map
+    [:group (make-token-theme-group-schema tokens-lib name theme-id)] ;; TODO how to keep error-fn from here?
+    [:name (make-token-theme-name-schema tokens-lib group theme-id)]
+    [:description {:optional true} schema:token-theme-description]]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HELPERS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def parseable-token-value-regexp
   "Regexp that can be used to parse a number value out of resolved token value.
@@ -80,56 +300,6 @@
 (defn shapes-applied-all? [ids-by-attributes shape-ids attributes]
   (every? #(set/superset? (get ids-by-attributes %) shape-ids) attributes))
 
-(defn token-name->path
-  "Splits token-name into a path vector split by `.` characters.
-
-  Will concatenate multiple `.` characters into one."
-  [token-name]
-  (str/split token-name #"\.+"))
-
-(defn token-name->path-selector
-  "Splits token-name into map with `:path` and `:selector` using `token-name->path`.
-
-  `:selector` is the last item of the names path
-  `:path` is everything leading up the the `:selector`."
-  [token-name]
-  (let [path-segments (token-name->path token-name)
-        last-idx (dec (count path-segments))
-        [path [selector]] (split-at last-idx path-segments)]
-    {:path (seq path)
-     :selector selector}))
-
-(defn token-name-path-exists?
-  "Traverses the path from `token-name` down a `token-tree` and checks if a token at that path exists.
-
-  It's not allowed to create a token inside a token. E.g.:
-  Creating a token with
-
-    {:name \"foo.bar\"}
-
-  in the tokens tree:
-
-    {\"foo\" {:name \"other\"}}"
-  [token-name token-names-tree]
-  (let [{:keys [path selector]} (token-name->path-selector token-name)
-        path-target (reduce
-                     (fn [acc cur]
-                       (let [target (get acc cur)]
-                         (cond
-                           ;; Path segment doesn't exist yet
-                           (nil? target) (reduced false)
-                           ;; A token exists at this path
-                           (:name target) (reduced true)
-                           ;; Continue traversing the true
-                           :else target)))
-                     token-names-tree path)]
-    (cond
-      (boolean? path-target) path-target
-      (get path-target :name) true
-      :else (-> (get path-target selector)
-                (seq)
-                (boolean)))))
-
 (defn color-token? [token]
   (= (:type token) :color))
 

common/src/app/common/i18n.cljc

@@ -0,0 +1,15 @@
+;; 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.common.i18n
+  "Dummy i18n functions, to be used by code in common that needs translations.")
+
+(defn tr
+  "This function will be monkeypatched at runtime with the real function in frontend i18n.
+   Here it just returns the key passed as argument. This way the result can be used in
+   unit tests or backend code for logs or error messages."
+  [key & _args]
+  key)

common/src/app/common/logic/shapes.cljc

@@ -58,7 +58,7 @@
                               (cto/shape-attr->token-attrs attr changed-sub-attr))]
 
             (if (some #(contains? tokens %) token-attrs)
-              (pcb/update-shapes changes [shape-id] #(cto/unapply-token-id % token-attrs))
+              (pcb/update-shapes changes [shape-id] #(cto/unapply-tokens-from-shape % token-attrs))
               changes)))
 
         check-shape

common/src/app/common/schema.cljc

@@ -11,6 +11,7 @@
    #?(:clj [malli.dev.pretty :as mdp])
    #?(:clj [malli.dev.virhe :as v])
    [app.common.data :as d]
+   [app.common.json :as json]
    [app.common.math :as mth]
    [app.common.pprint :as pp]
    [app.common.schema.generators :as sg]
@@ -92,6 +93,31 @@
   [& items]
   (apply mu/merge (map schema items)))
 
+(defn assoc-key
+  "Add a key & value to a schema of type [:map]. If the first level node of the schema
+   is not a map, will do a depth search to find the first map node and add the key there."
+  ([s k v]
+   (assoc-key s k {} v))
+  ([s k opts v]  ;; change order of opts and v to match static schema defintions (e.g. [:something {:optional true} ::sm/integer])
+   (let [s (schema s)
+         v (schema v)]
+     (if (= (m/type s) :map)
+       (mu/assoc s k v opts)
+       (if-let [path (mu/find-first s (fn [s' path _] (when (= (m/type s') :map) path)))]
+         (mu/assoc-in s (conj path k) v opts)
+         s)))))
+
+(defn dissoc-key
+  "Remove a key from a schema of type [:map]. If the first level node of the schema
+   is not a map, will do a depth search to find the first map node and remove the key there."
+  [s k]
+  (let [s (schema s)]
+    (if (= (m/type s) :map)
+      (mu/dissoc s k)
+      (if-let [path (mu/find-first s (fn [s' path _] (when (= (m/type s') :map) path)))]
+        (mu/update-in s path mu/dissoc k)
+        s))))
+
 (defn ref?
   [s]
   (m/-ref-schema? s))
@@ -270,6 +296,13 @@
      (let [explain (fn [] (me/with-error-messages explain))]
        ((mdp/prettifier variant message explain default-options)))))
 
+(defn validation-errors
+  "Checks a value against a schema. If valid, returns nil. If not, returns a list
+   of english error messages."
+  [value schema]
+  (let [explainer (explainer schema)]
+    (-> value explainer simplify not-empty)))
+
 (defmacro ignoring
   [expr]
   (if (:ns &env)
@@ -850,6 +883,32 @@
    :encode/string str
    ::oapi/type "boolean"}})
 
+(defn parse-keyword
+  [v]
+  (if (string? v)
+    (-> v (json/read-kebab-key) (keyword))
+    v))
+
+(defn format-keyword
+  [v]
+  (if (keyword? v)
+    (-> v (name) (json/write-camel-key))
+    v))
+
+(register!
+ {:type ::keyword
+  :pred keyword?
+  :type-properties
+  {:title "keyword"
+   :description "keyword"
+   :error/message "expected keyword"
+   :error/code "errors.invalid-keyword"
+   :gen/gen sg/keyword
+   :decode/string parse-keyword
+   :decode/json parse-keyword
+   :encode/string format-keyword
+   ::oapi/type "string"}})
+
 (register!
  {:type ::contains-any
   :min 1

common/src/app/common/types/text.cljc

@@ -407,17 +407,19 @@
 (defn change-text
   "Changes the content of the text shape to use the text as argument. Will use the styles of the
    first paragraph and text that is present in the shape (and override the rest)"
-  [content text]
+  [content text & {:as styles}]
   (let [root-styles (select-keys content root-attrs)
 
         paragraph-style
         (merge
          default-text-attrs
+         styles
          (select-keys (->> content (node-seq is-paragraph-node?) first) text-all-attrs))
 
         text-style
         (merge
          default-text-attrs
+         styles
          (select-keys (->> content (node-seq is-text-node?) first) text-all-attrs))
 
         paragraph-texts

common/src/app/common/types/token.cljc

@@ -9,13 +9,13 @@
    [app.common.data :as d]
    [app.common.schema :as sm]
    [app.common.schema.generators :as sg]
-   [clojure.data :as data]
+   [app.common.time :as ct]
    [clojure.set :as set]
    [cuerdas.core :as str]
    [malli.util :as mu]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; HELPERS
+;; GENERAL HELPERS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn- schema-keys
@@ -45,7 +45,7 @@
   [token-name token-value]
   (let [token-references (find-token-value-references token-value)
         self-reference? (get token-references token-name)]
-    self-reference?))
+    (boolean self-reference?)))
 
 (defn references-token?
   "Recursively check if a value references the token name. Handles strings, maps, and sequences."
@@ -59,14 +59,33 @@
     (some true? (map #(references-token? % token-name) value))
     :else false))
 
+(defn composite-token-reference?
+  "Predicate if a composite token is a reference value - a string pointing to another token."
+  [token-value]
+  (string? token-value))
+
+(defn update-token-value-references
+  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
+  [value old-name new-name]
+  (cond
+    (string? value)
+    (str/replace value
+                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
+                 (str "{" new-name "}"))
+    (map? value)
+    (d/update-vals value #(update-token-value-references % old-name new-name))
+    (sequential? value)
+    (mapv #(update-token-value-references % old-name new-name) value)
+    :else
+    value))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; SCHEMA
+;; SCHEMA: Token types
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def token-type->dtcg-token-type
   {:boolean         "boolean"
    :border-radius   "borderRadius"
-   :shadow          "shadow"
    :color           "color"
    :dimensions      "dimension"
    :font-family     "fontFamilies"
@@ -77,6 +96,7 @@
    :opacity         "opacity"
    :other           "other"
    :rotation        "rotation"
+   :shadow          "shadow"
    :sizing          "sizing"
    :spacing         "spacing"
    :string          "string"
@@ -94,14 +114,13 @@
              "boxShadow" :shadow)))
 
 (def composite-token-type->dtcg-token-type
-  "Custom set of conversion keys for composite typography token with `:line-height` available.
-  (Penpot doesn't support `:line-height` token)"
+  "When converting the type of one element inside a composite token, an additional type
+   :line-height is available, that is not allowed for a standalone token."
   (assoc token-type->dtcg-token-type
          :line-height "lineHeights"))
 
 (def composite-dtcg-token-type->token-type
-  "Custom set of conversion keys for composite typography token with `:line-height` available.
-  (Penpot doesn't support `:line-height` token)"
+  "Same as above, in the opposite direction."
   (assoc dtcg-token-type->token-type
          "lineHeights" :line-height
          "lineHeight"  :line-height))
@@ -109,96 +128,98 @@
 (def token-types
   (into #{} (keys token-type->dtcg-token-type)))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SCHEMA: Token
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (def token-name-validation-regex
   #"^[a-zA-Z0-9_-][a-zA-Z0-9$_-]*(\.[a-zA-Z0-9$_-]+)*$")
 
-(def token-name-ref
-  [:re {:title "TokenNameRef" :gen/gen sg/text}
+(def schema:token-name
+  "A token name can contains letters, numbers, underscores the character $ and dots, but
+   not start with $ or end with a dot. The $ character does not have any special meaning,
+   but dots separate token groups (e.g. color.primary.background)."
+  [:re {:title "TokenName"
+        :gen/gen sg/text}
    token-name-validation-regex])
 
-(def ^:private schema:color
-  [:map
-   [:fill {:optional true} token-name-ref]
-   [:stroke-color {:optional true} token-name-ref]])
+(def schema:token-type
+  [::sm/one-of {:decode/json (fn [type]
+                               (if (string? type)
+                                 (dtcg-token-type->token-type type)
+                                 type))}
 
-(def color-keys (schema-keys schema:color))
+   token-types])
+
+(def schema:token-attrs
+  [:map {:title "Token"}
+   [:id ::sm/uuid]
+   [:name schema:token-name]
+   [:type schema:token-type]
+   [:value ::sm/any]
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::ct/inst]])
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SCHEMA: Token application to shape
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; All the following schemas define the `:applied-tokens` attribute of a shape.
+;; This attribute is a map <token-attribute> -> <token-name>.
+;; Token attributes approximately match shape attributes, but not always.
+;; For each schema there is a `*keys` set including all the possible token attributes
+;; to which a token of the corresponding type can be applied.
+;; Some token types can be applied to some attributes only if the shape has a
+;; particular condition (i.e. has a layout itself or is a layout item).
 
 (def ^:private schema:border-radius
   [:map {:title "BorderRadiusTokenAttrs"}
-   [:r1 {:optional true} token-name-ref]
-   [:r2 {:optional true} token-name-ref]
-   [:r3 {:optional true} token-name-ref]
-   [:r4 {:optional true} token-name-ref]])
+   [:r1 {:optional true} schema:token-name]
+   [:r2 {:optional true} schema:token-name]
+   [:r3 {:optional true} schema:token-name]
+   [:r4 {:optional true} schema:token-name]])
 
 (def border-radius-keys (schema-keys schema:border-radius))
 
-(def ^:private schema:shadow
-  [:map {:title "ShadowTokenAttrs"}
-   [:shadow {:optional true} token-name-ref]])
-
-(def shadow-keys (schema-keys schema:shadow))
-
-(def ^:private schema:stroke-width
+(def ^:private schema:color
   [:map
-   [:stroke-width {:optional true} token-name-ref]])
+   [:fill {:optional true} schema:token-name]
+   [:stroke-color {:optional true} schema:token-name]])
 
-(def stroke-width-keys (schema-keys schema:stroke-width))
+(def color-keys (schema-keys schema:color))
 
 (def ^:private schema:sizing-base
   [:map {:title "SizingBaseTokenAttrs"}
-   [:width {:optional true} token-name-ref]
-   [:height {:optional true} token-name-ref]])
+   [:width {:optional true} schema:token-name]
+   [:height {:optional true} schema:token-name]])
 
 (def ^:private schema:sizing-layout-item
   [:map {:title "SizingLayoutItemTokenAttrs"}
-   [:layout-item-min-w {:optional true} token-name-ref]
-   [:layout-item-max-w {:optional true} token-name-ref]
-   [:layout-item-min-h {:optional true} token-name-ref]
-   [:layout-item-max-h {:optional true} token-name-ref]])
+   [:layout-item-min-w {:optional true} schema:token-name]
+   [:layout-item-max-w {:optional true} schema:token-name]
+   [:layout-item-min-h {:optional true} schema:token-name]
+   [:layout-item-max-h {:optional true} schema:token-name]])
+
+(def sizing-layout-item-keys (schema-keys schema:sizing-layout-item))
 
 (def ^:private schema:sizing
   (-> (reduce mu/union [schema:sizing-base
                         schema:sizing-layout-item])
       (mu/update-properties assoc :title "SizingTokenAttrs")))
 
-(def sizing-layout-item-keys (schema-keys schema:sizing-layout-item))
-
 (def sizing-keys (schema-keys schema:sizing))
 
-(def ^:private schema:opacity
-  [:map {:title "OpacityTokenAttrs"}
-   [:opacity {:optional true} token-name-ref]])
-
-(def opacity-keys (schema-keys schema:opacity))
-
 (def ^:private schema:spacing-gap
   [:map {:title "SpacingGapTokenAttrs"}
-   [:row-gap {:optional true} token-name-ref]
-   [:column-gap {:optional true} token-name-ref]])
+   [:row-gap {:optional true} schema:token-name]
+   [:column-gap {:optional true} schema:token-name]])
 
 (def ^:private schema:spacing-padding
   [:map {:title "SpacingPaddingTokenAttrs"}
-   [:p1 {:optional true} token-name-ref]
-   [:p2 {:optional true} token-name-ref]
-   [:p3 {:optional true} token-name-ref]
-   [:p4 {:optional true} token-name-ref]])
-
-(def ^:private schema:spacing-margin
-  [:map {:title "SpacingMarginTokenAttrs"}
-   [:m1 {:optional true} token-name-ref]
-   [:m2 {:optional true} token-name-ref]
-   [:m3 {:optional true} token-name-ref]
-   [:m4 {:optional true} token-name-ref]])
-
-(def ^:private schema:spacing
-  (-> (reduce mu/union [schema:spacing-gap
-                        schema:spacing-padding
-                        schema:spacing-margin])
-      (mu/update-properties assoc :title "SpacingTokenAttrs")))
-
-(def spacing-margin-keys (schema-keys schema:spacing-margin))
-
-(def spacing-keys (schema-keys schema:spacing))
+   [:p1 {:optional true} schema:token-name]
+   [:p2 {:optional true} schema:token-name]
+   [:p3 {:optional true} schema:token-name]
+   [:p4 {:optional true} schema:token-name]])
 
 (def ^:private schema:spacing-gap-padding
   (-> (reduce mu/union [schema:spacing-gap
@@ -207,6 +228,29 @@
 
 (def spacing-gap-padding-keys (schema-keys schema:spacing-gap-padding))
 
+(def ^:private schema:spacing-margin
+  [:map {:title "SpacingMarginTokenAttrs"}
+   [:m1 {:optional true} schema:token-name]
+   [:m2 {:optional true} schema:token-name]
+   [:m3 {:optional true} schema:token-name]
+   [:m4 {:optional true} schema:token-name]])
+
+(def spacing-margin-keys (schema-keys schema:spacing-margin))
+
+(def ^:private schema:spacing
+  (-> (reduce mu/union [schema:spacing-gap
+                        schema:spacing-padding
+                        schema:spacing-margin])
+      (mu/update-properties assoc :title "SpacingTokenAttrs")))
+
+(def spacing-keys (schema-keys schema:spacing))
+
+(def ^:private schema:stroke-width
+  [:map
+   [:stroke-width {:optional true} schema:token-name]])
+
+(def stroke-width-keys (schema-keys schema:stroke-width))
+
 (def ^:private schema:dimensions
   (-> (reduce mu/union [schema:sizing
                         schema:spacing
@@ -216,91 +260,109 @@
 
 (def dimensions-keys (schema-keys schema:dimensions))
 
-(def ^:private schema:axis
-  [:map
-   [:x {:optional true} token-name-ref]
-   [:y {:optional true} token-name-ref]])
-
-(def axis-keys (schema-keys schema:axis))
-
-(def ^:private schema:rotation
-  [:map {:title "RotationTokenAttrs"}
-   [:rotation {:optional true} token-name-ref]])
-
-(def rotation-keys (schema-keys schema:rotation))
-
-(def ^:private schema:font-size
-  [:map {:title "FontSizeTokenAttrs"}
-   [:font-size {:optional true} token-name-ref]])
-
-(def font-size-keys (schema-keys schema:font-size))
-
-(def ^:private schema:letter-spacing
-  [:map {:title "LetterSpacingTokenAttrs"}
-   [:letter-spacing {:optional true} token-name-ref]])
-
-(def letter-spacing-keys (schema-keys schema:letter-spacing))
-
 (def ^:private schema:font-family
   [:map
-   [:font-family {:optional true} token-name-ref]])
+   [:font-family {:optional true} schema:token-name]])
 
 (def font-family-keys (schema-keys schema:font-family))
 
-(def ^:private schema:text-case
-  [:map
-   [:text-case {:optional true} token-name-ref]])
+(def ^:private schema:font-size
+  [:map {:title "FontSizeTokenAttrs"}
+   [:font-size {:optional true} schema:token-name]])
 
-(def text-case-keys (schema-keys schema:text-case))
+(def font-size-keys (schema-keys schema:font-size))
 
 (def ^:private schema:font-weight
   [:map
-   [:font-weight {:optional true} token-name-ref]])
+   [:font-weight {:optional true} schema:token-name]])
 
 (def font-weight-keys (schema-keys schema:font-weight))
 
-(def ^:private schema:typography
-  [:map
-   [:typography {:optional true} token-name-ref]])
+(def ^:private schema:letter-spacing
+  [:map {:title "LetterSpacingTokenAttrs"}
+   [:letter-spacing {:optional true} schema:token-name]])
 
-(def typography-token-keys (schema-keys schema:typography))
+(def letter-spacing-keys (schema-keys schema:letter-spacing))
 
-(def ^:private schema:text-decoration
-  [:map
-   [:text-decoration {:optional true} token-name-ref]])
+(def ^:private schema:line-height        ;; This is not available for standalone tokens, only typography
+  [:map {:title "LineHeightTokenAttrs"}
+   [:line-height {:optional true} schema:token-name]])
 
-(def text-decoration-keys (schema-keys schema:text-decoration))
+(def line-height-keys (schema-keys schema:line-height))
 
-(def typography-keys (set/union font-size-keys
-                                letter-spacing-keys
-                                font-family-keys
-                                font-weight-keys
-                                text-case-keys
-                                text-decoration-keys
-                                font-weight-keys
-                                typography-token-keys
-                                #{:line-height}))
+(def ^:private schema:rotation
+  [:map {:title "RotationTokenAttrs"}
+   [:rotation {:optional true} schema:token-name]])
+
+(def rotation-keys (schema-keys schema:rotation))
 
 (def ^:private schema:number
-  (-> (reduce mu/union [[:map [:line-height {:optional true} token-name-ref]]
+  (-> (reduce mu/union [schema:line-height
                         schema:rotation])
       (mu/update-properties assoc :title "NumberTokenAttrs")))
 
 (def number-keys (schema-keys schema:number))
 
-(def all-keys (set/union color-keys
+(def ^:private schema:opacity
+  [:map {:title "OpacityTokenAttrs"}
+   [:opacity {:optional true} schema:token-name]])
+
+(def opacity-keys (schema-keys schema:opacity))
+
+(def ^:private schema:shadow
+  [:map {:title "ShadowTokenAttrs"}
+   [:shadow {:optional true} schema:token-name]])
+
+(def shadow-keys (schema-keys schema:shadow))
+
+(def ^:private schema:text-case
+  [:map
+   [:text-case {:optional true} schema:token-name]])
+
+(def text-case-keys (schema-keys schema:text-case))
+
+(def ^:private schema:text-decoration
+  [:map
+   [:text-decoration {:optional true} schema:token-name]])
+
+(def text-decoration-keys (schema-keys schema:text-decoration))
+
+(def ^:private schema:typography
+  [:map
+   [:typography {:optional true} schema:token-name]])
+
+(def typography-token-keys (schema-keys schema:typography))
+
+(def typography-keys (set/union font-family-keys
+                                font-size-keys
+                                font-weight-keys
+                                font-weight-keys
+                                letter-spacing-keys
+                                line-height-keys
+                                text-case-keys
+                                text-decoration-keys
+                                typography-token-keys))
+
+(def ^:private schema:axis
+  [:map
+   [:x {:optional true} schema:token-name]
+   [:y {:optional true} schema:token-name]])
+
+(def axis-keys (schema-keys schema:axis))
+
+(def all-keys (set/union axis-keys
                          border-radius-keys
-                         shadow-keys
-                         stroke-width-keys
-                         sizing-keys
-                         opacity-keys
-                         spacing-keys
+                         color-keys
                          dimensions-keys
-                         axis-keys
+                         number-keys
+                         opacity-keys
                          rotation-keys
+                         shadow-keys
+                         sizing-keys
+                         spacing-keys
+                         stroke-width-keys
                          typography-keys
-                         typography-token-keys
-                         number-keys))
+                         typography-token-keys))
 
 (def ^:private schema:tokens
   [:map {:title "GenericTokenAttrs"}])
@@ -321,11 +383,28 @@
    schema:text-decoration
    schema:dimensions])
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HELPERS for conversion between token attrs and shape attrs
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (defn token-attr?
   [attr]
   (contains? all-keys attr))
 
+(defn token-attr->shape-attr
+  "Returns the actual shape attribute affected when a token have been applied
+   to a given `token-attr`."
+  [token-attr]
+  (case token-attr
+    :fill :fills
+    :stroke-color :strokes
+    :stroke-width :strokes
+    token-attr))
+
 (defn shape-attr->token-attrs
+  "Returns the token-attr affected when a given attribute in a shape is changed.
+   The sub-attr is for attributes that may have multiple values, like strokes
+   (may be width or color) and layout padding & margin (may have 4 edges)."
   ([shape-attr] (shape-attr->token-attrs shape-attr nil))
   ([shape-attr changed-sub-attr]
    (cond
@@ -367,21 +446,13 @@
      (number-keys shape-attr) #{shape-attr}
      (axis-keys shape-attr) #{shape-attr})))
 
-(defn token-attr->shape-attr
-  [token-attr]
-  (case token-attr
-    :fill :fills
-    :stroke-color :strokes
-    :stroke-width :strokes
-    token-attr))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; TOKEN SHAPE ATTRIBUTES
+;; HELPERS for token attributes by shape type
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def position-attributes #{:x :y})
+(def ^:private position-attributes #{:x :y})
 
-(def generic-attributes
+(def ^:private generic-attributes
   (set/union color-keys
              stroke-width-keys
              rotation-keys
@@ -390,20 +461,22 @@
              shadow-keys
              position-attributes))
 
-(def rect-attributes
+(def ^:private rect-attributes
   (set/union generic-attributes
              border-radius-keys))
 
-(def frame-with-layout-attributes
+(def ^:private frame-with-layout-attributes
   (set/union rect-attributes
              spacing-gap-padding-keys))
 
-(def text-attributes
+(def ^:private text-attributes
   (set/union generic-attributes
              typography-keys
              number-keys))
 
 (defn shape-type->attributes
+  "Returns what token attributes may be applied to a shape depending on its type
+   and if it is a frame with a layout."
   [type is-layout]
   (case type
     :bool    generic-attributes
@@ -419,12 +492,14 @@
     nil))
 
 (defn appliable-attrs-for-shape
-  "Returns intersection of shape `attributes` for `shape-type`."
+  "Returns which ones of the given `attributes` can be applied to a shape
+   of type `shape-type` and `is-layout`."
   [attributes shape-type is-layout]
   (set/intersection attributes (shape-type->attributes shape-type is-layout)))
 
 (defn any-appliable-attr-for-shape?
-  "Checks if `token-type` supports given shape `attributes`."
+  "Returns if any of the given `attributes` can be applied to a shape
+   of type `shape-type` and `is-layout`."
   [attributes token-type is-layout]
   (d/not-empty? (appliable-attrs-for-shape attributes token-type is-layout)))
 
@@ -435,42 +510,6 @@
    typography-keys
    #{:fill}))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; TOKENS IN SHAPES
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn- toggle-or-apply-token
-  "Remove any shape attributes from token if they exists.
-  Othewise apply token attributes."
-  [shape token]
-  (let [[shape-leftover token-leftover _matching] (data/diff (:applied-tokens shape) token)]
-    (merge {} shape-leftover token-leftover)))
-
-(defn- token-from-attributes [token attributes]
-  (->> (map (fn [attr] [attr (:name token)]) attributes)
-       (into {})))
-
-(defn- apply-token-to-attributes [{:keys [shape token attributes]}]
-  (let [token (token-from-attributes token attributes)]
-    (toggle-or-apply-token shape token)))
-
-(defn apply-token-to-shape
-  [{:keys [shape token attributes] :as _props}]
-  (let [applied-tokens (apply-token-to-attributes {:shape shape
-                                                   :token token
-                                                   :attributes attributes})]
-    (update shape :applied-tokens #(merge % applied-tokens))))
-
-(defn unapply-token-id [shape attributes]
-  (update shape :applied-tokens d/without-keys attributes))
-
-(defn unapply-layout-item-tokens
-  "Unapplies all layout item related tokens from shape."
-  [shape]
-  (let [layout-item-attrs (set/union sizing-layout-item-keys
-                                     spacing-margin-keys)]
-    (unapply-token-id shape layout-item-attrs)))
-
 (def tokens-by-input
   "A map from input name to applicable token for that input."
   {:width #{:sizing :dimensions}
@@ -500,7 +539,33 @@
    :stroke-color #{:color}})
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; TYPOGRAPHY
+;; HELPERS for tokens application
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- generate-attr-map [token attributes]
+  (->> (map (fn [attr] [attr (:name token)]) attributes)
+       (into {})))
+
+(defn apply-token-to-shape
+  "Applies the token to the given attributes in the shape."
+  [{:keys [shape token attributes] :as _props}]
+  (let [map-to-apply (generate-attr-map token attributes)]
+    (update shape :applied-tokens #(merge % map-to-apply))))
+
+(defn unapply-tokens-from-shape
+  "Removes any token applied to the given attributes in the shape."
+  [shape attributes]
+  (update shape :applied-tokens d/without-keys attributes))
+
+(defn unapply-layout-item-tokens
+  "Unapplies all layout item related tokens from shape."
+  [shape]
+  (let [layout-item-attrs (set/union sizing-layout-item-keys
+                                     spacing-margin-keys)]
+    (unapply-tokens-from-shape shape layout-item-attrs)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HELPERS for typography tokens
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn split-font-family
@@ -563,32 +628,3 @@
     (when (font-weight-values weight)
       (cond-> {:weight weight}
         italic? (assoc :style "italic")))))
-
-(defn typography-composite-token-reference?
-  "Predicate if a typography composite token is a reference value - a string pointing to another reference token."
-  [token-value]
-  (string? token-value))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; SHADOW
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn shadow-composite-token-reference?
-  "Predicate if a shadow composite token is a reference value - a string pointing to another reference token."
-  [token-value]
-  (string? token-value))
-
-(defn update-token-value-references
-  "Recursively update token references within a token value, supporting complex token values (maps, sequences, strings)."
-  [value old-name new-name]
-  (cond
-    (string? value)
-    (str/replace value
-                 (re-pattern (str "\\{" (str/replace old-name "." "\\.") "\\}"))
-                 (str "{" new-name "}"))
-    (map? value)
-    (d/update-vals value #(update-token-value-references % old-name new-name))
-    (sequential? value)
-    (mapv #(update-token-value-references % old-name new-name) value)
-    :else
-    value))

common/src/app/common/types/tokens_lib.cljc

@@ -114,25 +114,19 @@
   [o]
   (instance? Token o))
 
-(def schema:token-attrs
-  [:map {:title "Token"}
-   [:id ::sm/uuid]
-   [:name cto/token-name-ref]
-   [:type [::sm/one-of cto/token-types]]
-   [:value ::sm/any]
-   [:description {:optional true} :string]
-   [:modified-at {:optional true} ::ct/inst]])
-
 (declare make-token)
 
 (def schema:token
-  [:and {:gen/gen (->> (sg/generator schema:token-attrs)
+  [:and {:gen/gen (->> (sg/generator cto/schema:token-attrs)
                        (sg/fmap #(make-token %)))}
-   (sm/required-keys schema:token-attrs)
+   (sm/required-keys cto/schema:token-attrs)
    [:fn token?]])
 
 (def ^:private check-token-attrs
-  (sm/check-fn schema:token-attrs :hint "expected valid params for token"))
+  (sm/check-fn cto/schema:token-attrs :hint "expected valid params for token"))
+
+(def decode-token-attrs
+  (sm/lazy-decoder cto/schema:token-attrs sm/json-transformer))
 
 (def check-token
   (sm/check-fn schema:token :hint "expected valid token"))
@@ -317,10 +311,18 @@
   [o]
   (instance? TokenSetLegacy o))
 
+(declare make-token-set)
+(declare normalized-set-name?)
+
+(def schema:token-set-name
+  [:and
+   :string
+   [:fn #(normalized-set-name? %)]]) ;; The #() is necessary because the function is only declared, not defined
+
 (def schema:token-set-attrs
   [:map {:title "TokenSet"}
    [:id ::sm/uuid]
-   [:name :string]
+   [:name schema:token-set-name]
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::ct/inst]
    [:tokens {:optional true
@@ -342,8 +344,6 @@
       :string schema:token]
      [:fn d/ordered-map?]]]])
 
-(declare make-token-set)
-
 (def schema:token-set
   [:schema {:gen/gen (->> (sg/generator schema:token-set-attrs)
                           (sg/fmap #(make-token-set %)))}
@@ -404,12 +404,25 @@
                (split-set-name name))
        (cpn/join-path :separator set-separator :with-spaces? false))))
 
+(defn normalized-set-name?
+  "Check if a set name is normalized (no extra spaces)."
+  [name]
+  (= name (normalize-set-name name)))
+
 (defn replace-last-path-name
   "Replaces the last element in a `path` vector with `name`."
   [path name]
   (-> (into [] (drop-last path))
       (conj name)))
 
+(defn make-child-name
+  "Generate the name of a set child of `parent-set` adding the name `name`."
+  [parent-set name]
+  (if-let [parent-path (get-set-path parent-set)]
+    (->> (concat parent-path (split-set-name name))
+         (join-set-path))
+    (normalize-set-name name)))
+
 ;; The following functions will be removed after refactoring the internal structure of TokensLib,
 ;; since we'll no longer need group prefixes to differentiate between sets and set-groups.
 
@@ -1370,10 +1383,13 @@ Will return a value that matches this schema:
 (def ^:private check-tokens-lib-map
   (sm/check-fn schema:tokens-lib-map :hint "invalid tokens-lib internal data structure"))
 
+(defn tokens-lib?
+  [o]
+  (instance? TokensLib o))
+
 (defn valid-tokens-lib?
   [o]
-  (and (instance? TokensLib o)
-       (valid? o)))
+  (and (tokens-lib? o) (valid? o)))
 
 (defn- ensure-hidden-theme
   "A helper that is responsible to ensure that the hidden theme always
@@ -1435,6 +1451,50 @@ Will return a value that matches this schema:
           (rename copy-name)
           (reid (uuid/next))))))
 
+(defn- token-name->path-selector
+  "Splits token-name into map with `:path` and `:selector` using `token-name->path`.
+
+  `:selector` is the last item of the names path
+  `:path` is everything leading up the the `:selector`."
+  [token-name]
+  (let [path-segments (get-token-path {:name token-name})
+        last-idx (dec (count path-segments))
+        [path [selector]] (split-at last-idx path-segments)]
+    {:path (seq path)
+     :selector selector}))
+
+(defn token-name-path-exists?
+  "Traverses the path from `token-name` down a `tokens-tree` and checks if a token at that path exists.
+
+  It's not allowed to create a token inside a token. E.g.:
+  Creating a token with
+
+    {:name \"foo.bar\"}
+
+  in the tokens tree:
+
+    {\"foo\" {:name \"other\"}}"
+  [token-name tokens-tree]
+  (let [{:keys [path selector]} (token-name->path-selector token-name)
+        path-target (reduce
+                     (fn [acc cur]
+                       (let [target (get acc cur)]
+                         (cond
+                           ;; Path segment doesn't exist yet
+                           (nil? target) (reduced false)
+                           ;; A token exists at this path
+                           (:name target) (reduced true)
+                           ;; Continue traversing the true
+                           :else target)))
+                     tokens-tree
+                     path)]
+    (cond
+      (boolean? path-target) path-target
+      (get path-target :name) true
+      :else (-> (get path-target selector)
+                (seq)
+                (boolean)))))
+
 ;; === Import / Export from JSON format
 
 ;; Supported formats:

common/test/common_tests/files/tokens_test.cljc

@@ -6,34 +6,34 @@
 
 (ns common-tests.files.tokens-test
   (:require
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [clojure.test :as t]))
 
 (t/deftest test-parse-token-value
   (t/testing "parses double from a token value"
-    (t/is (= {:value 100.1 :unit nil} (cft/parse-token-value "100.1")))
-    (t/is (= {:value -9.0 :unit nil} (cft/parse-token-value "-9"))))
+    (t/is (= {:value 100.1 :unit nil} (cfo/parse-token-value "100.1")))
+    (t/is (= {:value -9.0 :unit nil} (cfo/parse-token-value "-9"))))
   (t/testing "trims white-space"
-    (t/is (= {:value -1.3 :unit nil} (cft/parse-token-value "     -1.3   "))))
+    (t/is (= {:value -1.3 :unit nil} (cfo/parse-token-value "     -1.3   "))))
   (t/testing "parses unit: px"
-    (t/is (= {:value 70.3 :unit "px"} (cft/parse-token-value "     70.3px   "))))
+    (t/is (= {:value 70.3 :unit "px"} (cfo/parse-token-value "     70.3px   "))))
   (t/testing "parses unit: %"
-    (t/is (= {:value -10.0 :unit "%"} (cft/parse-token-value "-10%"))))
+    (t/is (= {:value -10.0 :unit "%"} (cfo/parse-token-value "-10%"))))
   (t/testing "parses unit: px")
   (t/testing "returns nil for any invalid characters"
-    (t/is (nil? (cft/parse-token-value "     -1.3a   "))))
+    (t/is (nil? (cfo/parse-token-value "     -1.3a   "))))
   (t/testing "doesnt accept invalid double"
-    (t/is (nil? (cft/parse-token-value ".3")))))
+    (t/is (nil? (cfo/parse-token-value ".3")))))
 
 (t/deftest token-applied-test
   (t/testing "matches passed token with `:token-attributes`"
-    (t/is (true? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (true? (cfo/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match empty token"
-    (t/is (nil? (cft/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cfo/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "does't match passed token `:id`"
-    (t/is (nil? (cft/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cfo/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match passed `:token-attributes`"
-    (t/is (nil? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
+    (t/is (nil? (cfo/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
 
 (t/deftest shapes-ids-by-applied-attributes
   (t/testing "Returns set of matched attributes that fit the applied token"
@@ -54,7 +54,7 @@
                   shape-applied-x-y
                   shape-applied-all
                   shape-applied-none]
-          expected (cft/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
+          expected (cfo/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
       (t/is (= (:x expected) (shape-ids shape-applied-x
                                         shape-applied-x-y
                                         shape-applied-all)))
@@ -62,34 +62,21 @@
                                         shape-applied-x-y
                                         shape-applied-all)))
       (t/is (= (:z expected) (shape-ids shape-applied-all)))
-      (t/is (true? (cft/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
-      (t/is (false? (cft/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
+      (t/is (true? (cfo/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
+      (t/is (false? (cfo/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
       (shape-ids shape-applied-x
                  shape-applied-x-y
                  shape-applied-all))))
 
 (t/deftest tokens-applied-test
   (t/testing "is true when single shape matches the token and attributes"
-    (t/is (true? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (true? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                          {:applied-tokens {:x "b"}}]
                                             #{:x}))))
   (t/testing "is false when no shape matches the token or attributes"
-    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
+    (t/is (nil? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
                                                         {:applied-tokens {:x "b"}}]
                                            #{:x})))
-    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (nil? (cfo/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                         {:applied-tokens {:x "a"}}]
                                            #{:y})))))
-
-(t/deftest name->path-test
-  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo.bar.baz")))
-  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz")))
-  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz...."))))
-
-(t/deftest token-name-path-exists?-test
-  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
-  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
-  (t/is (true? (cft/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
-  (t/is (true? (cft/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
-  (t/is (false? (cft/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
-  (t/is (false? (cft/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

common/test/common_tests/logic/token_apply_test.cljc

@@ -255,28 +255,28 @@
                     (cls/generate-update-shapes [(:id frame1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-token-id [:r1 :r2 :r3 :r4])
-                                                      (cto/unapply-token-id [:rotation])
-                                                      (cto/unapply-token-id [:opacity])
-                                                      (cto/unapply-token-id [:stroke-width])
-                                                      (cto/unapply-token-id [:stroke-color])
-                                                      (cto/unapply-token-id [:fill])
-                                                      (cto/unapply-token-id [:width :height])))
+                                                      (cto/unapply-tokens-from-shape [:r1 :r2 :r3 :r4])
+                                                      (cto/unapply-tokens-from-shape [:rotation])
+                                                      (cto/unapply-tokens-from-shape [:opacity])
+                                                      (cto/unapply-tokens-from-shape [:stroke-width])
+                                                      (cto/unapply-tokens-from-shape [:stroke-color])
+                                                      (cto/unapply-tokens-from-shape [:fill])
+                                                      (cto/unapply-tokens-from-shape [:width :height])))
                                                 (:objects page)
                                                 {})
                     (cls/generate-update-shapes [(:id text1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-token-id [:font-size])
-                                                      (cto/unapply-token-id [:letter-spacing])
-                                                      (cto/unapply-token-id [:font-family])))
+                                                      (cto/unapply-tokens-from-shape [:font-size])
+                                                      (cto/unapply-tokens-from-shape [:letter-spacing])
+                                                      (cto/unapply-tokens-from-shape [:font-family])))
                                                 (:objects page)
                                                 {})
                     (cls/generate-update-shapes [(:id circle1)]
                                                 (fn [shape]
                                                   (-> shape
-                                                      (cto/unapply-token-id [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w])
-                                                      (cto/unapply-token-id [:m1 :m2 :m3 :m4])))
+                                                      (cto/unapply-tokens-from-shape [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w])
+                                                      (cto/unapply-tokens-from-shape [:m1 :m2 :m3 :m4])))
                                                 (:objects page)
                                                 {}))
 

common/test/common_tests/types/token_test.cljc

@@ -8,20 +8,19 @@
   (:require
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
-   [app.common.uuid :as uuid]
    [clojure.test :as t]))
 
 (t/deftest test-valid-token-name-schema
   ;; Allow regular namespace token names
-  (t/is (true? (sm/validate cto/token-name-ref "Foo")))
-  (t/is (true? (sm/validate cto/token-name-ref "foo")))
-  (t/is (true? (sm/validate cto/token-name-ref "FOO")))
-  (t/is (true? (sm/validate cto/token-name-ref "Foo.Bar.Baz")))
+  (t/is (true? (sm/validate cto/schema:token-name "Foo")))
+  (t/is (true? (sm/validate cto/schema:token-name "foo")))
+  (t/is (true? (sm/validate cto/schema:token-name "FOO")))
+  (t/is (true? (sm/validate cto/schema:token-name "Foo.Bar.Baz")))
   ;; Disallow trailing tokens
-  (t/is (false? (sm/validate cto/token-name-ref "Foo.Bar.Baz....")))
+  (t/is (false? (sm/validate cto/schema:token-name "Foo.Bar.Baz....")))
   ;; Disallow multiple separator dots
-  (t/is (false? (sm/validate cto/token-name-ref "Foo..Bar.Baz")))
+  (t/is (false? (sm/validate cto/schema:token-name "Foo..Bar.Baz")))
   ;; Disallow any special characters
-  (t/is (false? (sm/validate cto/token-name-ref "Hey Foo.Bar")))
-  (t/is (false? (sm/validate cto/token-name-ref "Hey😈Foo.Bar")))
-  (t/is (false? (sm/validate cto/token-name-ref "Hey%Foo.Bar"))))
+  (t/is (false? (sm/validate cto/schema:token-name "Hey Foo.Bar")))
+  (t/is (false? (sm/validate cto/schema:token-name "Hey😈Foo.Bar")))
+  (t/is (false? (sm/validate cto/schema:token-name "Hey%Foo.Bar"))))

common/test/common_tests/types/tokens_lib_test.cljc

@@ -678,35 +678,35 @@
 
 (t/deftest list-active-themes-tokens-bug-taiga-10617
   (let [tokens-lib (-> (ctob/make-tokens-lib)
-                       (ctob/add-set (ctob/make-token-set :name "Mode / Dark"
+                       (ctob/add-set (ctob/make-token-set :name "Mode/Dark"
                                                           :tokens {"red"
                                                                    (ctob/make-token :name "red"
                                                                                     :type :color
                                                                                     :value "#700000")}))
-                       (ctob/add-set (ctob/make-token-set :name "Mode / Light"
+                       (ctob/add-set (ctob/make-token-set :name "Mode/Light"
                                                           :tokens {"red"
                                                                    (ctob/make-token :name "red"
                                                                                     :type :color
                                                                                     :value "#ff0000")}))
-                       (ctob/add-set (ctob/make-token-set :name "Device / Desktop"
+                       (ctob/add-set (ctob/make-token-set :name "Device/Desktop"
                                                           :tokens {"border1"
                                                                    (ctob/make-token :name "border1"
                                                                                     :type :border-radius
                                                                                     :value 30)}))
-                       (ctob/add-set (ctob/make-token-set :name "Device / Mobile"
+                       (ctob/add-set (ctob/make-token-set :name "Device/Mobile"
                                                           :tokens {"border1"
                                                                    (ctob/make-token :name "border1"
                                                                                     :type :border-radius
                                                                                     :value 50)}))
                        (ctob/add-theme (ctob/make-token-theme :group "App"
                                                               :name "Mobile"
-                                                              :sets #{"Mode / Dark" "Device / Mobile"}))
+                                                              :sets #{"Mode/Dark" "Device/Mobile"}))
                        (ctob/add-theme (ctob/make-token-theme :group "App"
                                                               :name "Web"
-                                                              :sets #{"Mode / Dark" "Mode / Light" "Device / Desktop"}))
+                                                              :sets #{"Mode/Dark" "Mode/Light" "Device/Desktop"}))
                        (ctob/add-theme (ctob/make-token-theme :group "Brand"
                                                               :name "Brand A"
-                                                              :sets #{"Mode / Dark" "Mode / Light" "Device / Desktop" "Device / Mobile"}))
+                                                              :sets #{"Mode/Dark" "Mode/Light" "Device/Desktop" "Device/Mobile"}))
                        (ctob/add-theme (ctob/make-token-theme :group "Brand"
                                                               :name "Brand B"
                                                               :sets #{}))
@@ -2013,3 +2013,11 @@
            (t/is (some? imported-ref))
            (t/is (= (:type original-ref) (:type imported-ref)))
            (t/is (= (:value imported-ref) (:value original-ref))))))))
+
+(t/deftest token-name-path-exists?-test
+  (t/is (true? (ctob/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
+  (t/is (true? (ctob/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
+  (t/is (true? (ctob/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
+  (t/is (true? (ctob/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
+  (t/is (false? (ctob/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
+  (t/is (false? (ctob/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

frontend/playwright/data/components/get-file-13267.json

@@ -0,0 +1,146 @@
+{
+  "~: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 13267",
+  "~:revn": 3,
+  "~:modified-at": "~m1770302832804",
+  "~:vern": 0,
+  "~:id": "~ue9c84e12-dd29-80fc-8007-86d559dced7f",
+  "~: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": "~ufc576d2f-8d02-8101-8007-70ec5793bd81",
+  "~:created-at": "~m1770302800755",
+  "~:backend": "legacy-db",
+  "~:data": {
+    "~:pages": [
+      "~ue9c84e12-dd29-80fc-8007-86d559dced80"
+    ],
+    "~:pages-index": {
+      "~ue9c84e12-dd29-80fc-8007-86d559dced80": {
+        "~: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\",[\"~udc075bef-4a1f-8056-8007-86d562cf43b7\"]]]",
+            "~udc075bef-4a1f-8056-8007-86d55e028ccb": "[\"~#shape\",[\"^ \",\"~:y\",234,\"~: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\",117,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",574,\"~:y\",234]],[\"^<\",[\"^ \",\"~:x\",691,\"~:y\",234]],[\"^<\",[\"^ \",\"~:x\",691,\"~:y\",316]],[\"^<\",[\"^ \",\"~:x\",574,\"~:y\",316]]],\"~: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,\"~:constraints-v\",\"~:scale\",\"~:constraints-h\",\"^B\",\"~:r1\",0,\"~:id\",\"~udc075bef-4a1f-8056-8007-86d55e028ccb\",\"~:parent-id\",\"~udc075bef-4a1f-8056-8007-86d562cf43b7\",\"~:frame-id\",\"~udc075bef-4a1f-8056-8007-86d562cf43b7\",\"~:strokes\",[],\"~:x\",574,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",574,\"~:y\",234,\"^8\",117,\"~:height\",82,\"~:x1\",574,\"~:y1\",234,\"~:x2\",691,\"~:y2\",316]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",82,\"~:flip-y\",null]]",
+            "~udc075bef-4a1f-8056-8007-86d562cf43b7": "[\"~#shape\",[\"^ \",\"~:y\",234,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"A Component\",\"~:width\",117,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",574,\"~:y\",234]],[\"^;\",[\"^ \",\"~:x\",691,\"~:y\",234]],[\"^;\",[\"^ \",\"~:x\",691,\"~:y\",316]],[\"^;\",[\"^ \",\"~:x\",574,\"~:y\",316]]],\"~:r2\",0,\"~:component-root\",true,\"~:show-content\",true,\"~: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\",\"~udc075bef-4a1f-8056-8007-86d562cf43b7\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:component-id\",\"~udc075bef-4a1f-8056-8007-86d562d06904\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",574,\"~:main-instance\",true,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",574,\"~:y\",234,\"^7\",117,\"~:height\",82,\"~:x1\",574,\"~:y1\",234,\"~:x2\",691,\"~:y2\",316]],\"~:fills\",[],\"~:flip-x\",null,\"^M\",82,\"~:component-file\",\"~ue9c84e12-dd29-80fc-8007-86d559dced7f\",\"~:flip-y\",null,\"~:shapes\",[\"~udc075bef-4a1f-8056-8007-86d55e028ccb\"]]]"
+          }
+        },
+        "~:id": "~ue9c84e12-dd29-80fc-8007-86d559dced80",
+        "~:name": "Page 1"
+      }
+    },
+    "~:id": "~ue9c84e12-dd29-80fc-8007-86d559dced7f",
+    "~:options": {
+      "~:components-v2": true,
+      "~:base-font-size": "16px"
+    },
+    "~:components": {
+      "~udc075bef-4a1f-8056-8007-86d562d06904": {
+        "~:id": "~udc075bef-4a1f-8056-8007-86d562d06904",
+        "~:name": "A Component",
+        "~:path": "",
+        "~:modified-at": "~m1770302824566",
+        "~:main-instance-id": "~udc075bef-4a1f-8056-8007-86d562cf43b7",
+        "~:main-instance-page": "~ue9c84e12-dd29-80fc-8007-86d559dced80"
+      }
+    }
+  }
+}

frontend/playwright/ui/pages/WorkspacePage.js

@@ -459,8 +459,8 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.page.mouse.up();
   }
 
-  async clickLeafLayer(name, clickOptions = {}) {
-    const layer = this.layers.getByText(name).first();
+  async clickLeafLayer(name, clickOptions = {}, index = 0) {
+    const layer = this.layers.getByText(name).nth(index);
     await layer.waitFor();
     await layer.click(clickOptions);
     await this.page.waitForTimeout(500);
@@ -471,10 +471,11 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.clickLeafLayer(name, clickOptions);
   }
 
-  async clickToggableLayer(name, clickOptions = {}) {
+  async clickToggableLayer(name, clickOptions = {}, index = 0) {
     const layer = this.layers
       .getByTestId("layer-row")
-      .filter({ hasText: name });
+      .filter({ hasText: name })
+      .nth(index);
     const button = layer.getByTestId("toggle-content");
 
     await expect(button).toBeVisible();

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

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WasmWorkspacePage.init(page);
+});
+
+test("BUG 13267 - Component instance is not synced with parent for geometry changes", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.mockGetFile("components/get-file-13267.json");
+
+  await workspacePage.goToWorkspace({
+    fileId: "e9c84e12-dd29-80fc-8007-86d559dced7f",
+    pageId: "e9c84e12-dd29-80fc-8007-86d559dced80",
+  });
+
+  // Create a component instance
+  await workspacePage.clickLeafLayer("A Component");
+  await workspacePage.page.keyboard.press("ControlOrMeta+d");
+
+  // Select the main component
+  await workspacePage.clickLeafLayer("A Component", {}, 1);
+  const rotationInput = workspacePage.rightSidebar.getByTestId("rotation").getByRole("textbox");
+  await rotationInput.fill("45");
+  await rotationInput.press("Enter");
+
+  // Select the instance rect
+  await workspacePage.clickToggableLayer("A Component", {}, 0);
+  await workspacePage.clickLeafLayer("Rectangle");
+
+  await expect(rotationInput).toHaveValue("45");
+});

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

@@ -8,7 +8,7 @@
   (:require
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.logging :as l]
    [app.common.schema :as sm]
    [app.common.time :as ct]
@@ -85,7 +85,7 @@
   [value]
   (let [number? (or (number? value)
                     (numeric-string? value))
-        parsed-value  (cft/parse-token-value value)
+        parsed-value  (cfo/parse-token-value value)
         out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
                           (<= (:value parsed-value) sm/min-safe-int))]
 
@@ -111,7 +111,7 @@
   "Parses `value` of a number `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (let [parsed-value  (cft/parse-token-value value)
+  (let [parsed-value  (cfo/parse-token-value value)
         out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
                           (<= (:value parsed-value) sm/min-safe-int))]
     (if (and parsed-value (not out-of-bounds))
@@ -129,7 +129,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
   (let [missing-references? (seq (cto/find-token-value-references value))
-        parsed-value (cft/parse-token-value value)
+        parsed-value (cfo/parse-token-value value)
         out-of-scope (not (<= 0 (:value parsed-value) 1))
         references (seq (cto/find-token-value-references value))]
     (cond (and parsed-value (not out-of-scope))
@@ -153,7 +153,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value]
   (let [missing-references? (seq (cto/find-token-value-references value))
-        parsed-value (cft/parse-token-value value)
+        parsed-value (cfo/parse-token-value value)
         out-of-scope (< (:value parsed-value) 0)]
     (cond
       (and parsed-value (not out-of-scope))
@@ -251,7 +251,7 @@
            :font-size-value font-size-value})]
     (or error
         (try
-          (when-let [{:keys [unit value]} (cft/parse-token-value line-height-value)]
+          (when-let [{:keys [unit value]} (cfo/parse-token-value line-height-value)]
             (case unit
               "%" (/ value 100)
               "px" (/ value font-size-value)

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

@@ -179,6 +179,56 @@
          (map #(get objects %))
          (reduce get-ignore-tree nil))))
 
+(defn calculate-ignore-tree-wasm
+  "Retrieves a map with the flag `ignore-geometry?` given a tree of modifiers"
+  [transforms objects]
+
+  (letfn [(get-ignore-tree
+            ([ignore-tree shape]
+             (let [shape-id (dm/get-prop shape :id)
+                   transformed-shape (gsh/apply-transform shape (get transforms shape-id))
+
+                   root
+                   (if (:component-root shape)
+                     shape
+                     (ctn/get-component-shape objects shape {:allow-main? true}))
+
+                   transformed-root
+                   (if (:component-root shape)
+                     transformed-shape
+                     (gsh/apply-transform root (get transforms (:id root))))]
+
+               (get-ignore-tree ignore-tree shape transformed-shape root transformed-root)))
+
+            ([ignore-tree shape root transformed-root]
+             (let [shape-id (dm/get-prop shape :id)
+                   transformed-shape (gsh/apply-transform shape (get transforms shape-id))]
+               (get-ignore-tree ignore-tree shape transformed-shape root transformed-root)))
+
+            ([ignore-tree shape transformed-shape root transformed-root]
+             (let [shape-id (dm/get-prop shape :id)
+
+                   ignore-tree
+                   (cond-> ignore-tree
+                     (and (some? root) (ctk/in-component-copy? shape))
+                     (assoc
+                      shape-id
+                      (check-delta shape root transformed-shape transformed-root)))
+
+                   set-child
+                   (fn [ignore-tree child]
+                     (get-ignore-tree ignore-tree child root transformed-root))]
+
+               (->> (:shapes shape)
+                    (map (d/getf objects))
+                    (reduce set-child ignore-tree)))))]
+
+    ;; we check twice because we want only to search parents of components but once the
+    ;; tree is traversed we only want to process the objects in components
+    (->> (keys transforms)
+         (map #(get objects %))
+         (reduce get-ignore-tree nil))))
+
 (defn assoc-position-data
   [shape position-data old-shape]
   (let [deltav (gpt/to-vec (gpt/point (:selrect old-shape))
@@ -625,17 +675,6 @@
 
       (let [objects          (dsh/lookup-page-objects state)
 
-            ignore-tree
-            (calculate-ignore-tree modif-tree objects)
-
-            options
-            (-> params
-                (assoc :reg-objects? true)
-                (assoc :ignore-tree ignore-tree)
-                ;; Attributes that can change in the transform. This
-                ;; way we don't have to check all the attributes
-                (assoc :attrs transform-attrs))
-
             geometry-entries
             (parse-geometry-modifiers modif-tree)
 
@@ -645,6 +684,17 @@
             transforms
             (into {} (wasm.api/propagate-modifiers geometry-entries snap-pixel?))
 
+            ignore-tree
+            (calculate-ignore-tree-wasm transforms objects)
+
+            options
+            (-> params
+                (assoc :reg-objects? true)
+                (assoc :ignore-tree ignore-tree)
+                ;; Attributes that can change in the transform. This
+                ;; way we don't have to check all the attributes
+                (assoc :attrs transform-attrs))
+
             modif-tree
             (propagate-structure-modifiers modif-tree (dsh/lookup-page-objects state))
 

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

@@ -104,7 +104,7 @@
     (watch [_ state _]
       (let [page-id (or page-id (:current-page-id state))
             objects (dsh/lookup-page-objects state page-id)
-            ids (->> ids (filter #(contains? objects %)))]
+            ids (->> ids (remove uuid/zero?) (filter #(contains? objects %)))]
         (if (d/not-empty? ids)
           (let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
             (if (features/active-feature? state "render-wasm/v1")

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

@@ -776,11 +776,7 @@
              (rx/of (v2-update-text-editor-styles id attrs)))
 
            (when (features/active-feature? state "render-wasm/v1")
-             ;; This delay is to give time for the font to be correctly rendered
-             ;; in wasm.
-             (cond->> (rx/of (dwwt/resize-wasm-text id))
-               (contains? attrs :font-id)
-               (rx/delay 200)))))))
+             (rx/of (dwwt/resize-wasm-text-debounce id)))))))
 
     ptk/EffectEvent
     (effect [_ state _]

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

@@ -7,7 +7,7 @@
 (ns app.main.data.workspace.tokens.application
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.types.component :as ctk]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.shape.radius :as ctsr]
@@ -648,11 +648,11 @@
                           shape-ids (d/nilv (keys shapes)  [])
                           any-variant? (->> shapes vals (some ctk/is-variant?) boolean)
 
-                          resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
+                          resolved-value (get-in resolved-tokens [(cfo/token-identifier token) :resolved-value])
                           resolved-value (if (contains? cf/flags :tokenscript)
                                            (ts/tokenscript-symbols->penpot-unit resolved-value)
                                            resolved-value)
-                          tokenized-attributes (cft/attributes-map attributes token)
+                          tokenized-attributes (cfo/attributes-map attributes token)
                           type (:type token)]
                       (rx/concat
                        (rx/of
@@ -711,7 +711,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of
-       (let [remove-token #(when % (cft/remove-attributes-for-token attributes token-name %))]
+       (let [remove-token #(when % (cfo/remove-attributes-for-token attributes token-name %))]
          (dwsh/update-shapes
           shape-ids
           (fn [shape]
@@ -740,7 +740,7 @@
             (get token-properties (:type token))
 
             unapply-tokens?
-            (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes))
+            (cfo/shapes-token-applied? token shapes (or attrs all-attributes attributes))
 
             shape-ids (map :id shapes)]
 

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

@@ -6,7 +6,7 @@
 
 (ns app.main.data.workspace.tokens.color
   (:require
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.config :as cf]
    [app.main.data.tinycolor :as tinycolor]
    [app.main.data.tokenscript :as ts]))
@@ -22,5 +22,5 @@
   (if (contains? cf/flags :tokenscript)
     (when (and resolved-value (ts/color-symbol? resolved-value))
       (ts/color-symbol->penpot-color resolved-value))
-    (when (and resolved-value (cft/color-token? token))
+    (when (and resolved-value (cfo/color-token? token))
       (color-bullet-color resolved-value))))

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

@@ -195,27 +195,30 @@
 
 (defn create-token-set
   [token-set]
+  (assert (ctob/token-set? token-set) "a token set is required") ;; TODO should check token-set-schema?
   (ptk/reify ::create-token-set
-    ptk/UpdateEvent
-    (update [_ state]
-      ;; Clear possible local state
-      (update state :workspace-tokens dissoc :token-set-new-path))
-
     ptk/WatchEvent
     (watch [it state _]
-      (let [data       (dsh/lookup-file-data state)
-            tokens-lib (get data :tokens-lib)
-            token-set  (ctob/rename token-set (ctob/normalize-set-name (ctob/get-name token-set)))]
-        (if (and tokens-lib (ctob/get-set-by-name tokens-lib (ctob/get-name token-set)))
-          (rx/of (ntf/show {:content (tr "errors.token-set-already-exists")
-                            :type :toast
-                            :level :error
-                            :timeout 9000}))
-          (let [changes (-> (pcb/empty-changes it)
-                            (pcb/with-library-data data)
-                            (pcb/set-token-set (ctob/get-id token-set) token-set))]
-            (rx/of (set-selected-token-set-id (ctob/get-id token-set))
-                   (dch/commit-changes changes))))))))
+      (let [data    (dsh/lookup-file-data state)
+            changes (-> (pcb/empty-changes it)
+                        (pcb/with-library-data data)
+                        (pcb/set-token-set (ctob/get-id token-set) token-set))]
+        (rx/of (set-selected-token-set-id (ctob/get-id token-set))
+               (dch/commit-changes changes))))))
+
+(defn rename-token-set
+  [token-set new-name]
+  (assert (ctob/token-set? token-set) "a token set is required") ;; TODO should check token-set-schema after renaming?
+  (assert (string? new-name) "a new name is required") ;; TODO should assert normalized-set-name?
+  (ptk/reify ::update-token-set
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [data    (dsh/lookup-file-data state)
+            changes (-> (pcb/empty-changes it)
+                        (pcb/with-library-data data)
+                        (pcb/rename-token-set (ctob/get-id token-set) new-name))]
+        (rx/of (set-selected-token-set-id (ctob/get-id token-set))
+               (dch/commit-changes changes))))))
 
 (defn rename-token-set-group
   [set-group-path set-group-fname]
@@ -227,26 +230,6 @@
         (rx/of
          (dch/commit-changes changes))))))
 
-(defn update-token-set
-  [token-set name]
-  (ptk/reify ::update-token-set
-    ptk/WatchEvent
-    (watch [it state _]
-      (let [data       (dsh/lookup-file-data state)
-            name       (ctob/normalize-set-name name (ctob/get-name token-set))
-            tokens-lib (get data :tokens-lib)]
-
-        (if (ctob/get-set-by-name tokens-lib name)
-          (rx/of (ntf/show {:content (tr "errors.token-set-already-exists")
-                            :type :toast
-                            :level :error
-                            :timeout 9000}))
-          (let [changes (-> (pcb/empty-changes it)
-                            (pcb/with-library-data data)
-                            (pcb/rename-token-set (ctob/get-id token-set) name))]
-            (rx/of (set-selected-token-set-id (ctob/get-id token-set))
-                   (dch/commit-changes changes))))))))
-
 (defn duplicate-token-set
   [id]
   (ptk/reify ::duplicate-token-set
@@ -522,7 +505,7 @@
                                            (ctob/get-id token-set)
                                            token-id)]
             (let [tokens (vals (ctob/get-tokens tokens-lib (ctob/get-id token-set)))
-                  unames (map :name tokens)
+                  unames (map :name tokens)     ;; TODO: add function duplicate-token in tokens-lib
                   suffix (tr "workspace.tokens.duplicate-suffix")
                   copy-name (cfh/generate-unique-name (:name token) unames :suffix suffix)
                   new-token (-> token

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

@@ -10,6 +10,7 @@
   This exists to avoid circular deps:
   workspace.texts -> workspace.libraries -> workspace.texts"
   (:require
+   [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
@@ -17,6 +18,7 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.modifiers :as dwm]
    [app.render-wasm.api :as wasm.api]
+   [app.render-wasm.api.fonts :as wasm.fonts]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
@@ -62,6 +64,84 @@
           (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))
           (rx/empty))))))
 
+(defn resize-wasm-text-debounce-commit
+  []
+  (ptk/reify ::resize-wasm-text-debounce-commit
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [ids (get state ::resize-wasm-text-debounce-ids)
+            objects (dsh/lookup-page-objects state)
+
+            modifiers
+            (reduce
+             (fn [modifiers id]
+               (let [shape (get objects id)]
+                 (cond-> modifiers
+                   (and (some? shape)
+                        (cfh/text-shape? shape)
+                        (not= :fixed (:grow-type shape)))
+                   (merge (resize-wasm-text-modifiers shape)))))
+             {}
+             ids)]
+        (if (not (empty? modifiers))
+          (rx/of (dwm/apply-wasm-modifiers modifiers))
+          (rx/empty))))))
+
+;; This event will debounce the resize events so, if there are many, they
+;; are processed at the same time and not one-by-one. This will improve
+;; performance because it's better to make only one layout calculation instead
+;; of (potentialy) hundreds.
+(defn resize-wasm-text-debounce-inner
+  [id]
+  (let [cur-event (js/Symbol)]
+    (ptk/reify ::resize-wasm-text-debounce-inner
+      ptk/UpdateEvent
+      (update [_ state]
+        (-> state
+            (update ::resize-wasm-text-debounce-ids (fnil conj []) id)
+            (cond-> (nil? (::resize-wasm-text-debounce-event state))
+              (assoc ::resize-wasm-text-debounce-event cur-event))))
+
+      ptk/WatchEvent
+      (watch [_ state stream]
+        (if (= (::resize-wasm-text-debounce-event state) cur-event)
+          (let [stopper (->> stream (rx/filter (ptk/type? :app.main.data.workspace/finalize)))]
+            (rx/concat
+             (rx/merge
+              (->> stream
+                   (rx/filter (ptk/type? ::resize-wasm-text-debounce-inner))
+                   (rx/debounce 40)
+                   (rx/take 1)
+                   (rx/map #(resize-wasm-text-debounce-commit))
+                   (rx/take-until stopper))
+              (rx/of (resize-wasm-text-debounce-inner id)))
+             (rx/of #(dissoc %
+                             ::resize-wasm-text-debounce-ids
+                             ::resize-wasm-text-debounce-event))))
+          (rx/empty))))))
+
+(defn resize-wasm-text-debounce
+  [id]
+  (ptk/reify ::resize-wasm-text-debounce
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [page-id (:current-page-id state)
+            objects (dsh/lookup-page-objects state page-id)
+            content (dm/get-in objects [id :content])
+            fonts   (wasm.fonts/get-content-fonts content)
+
+            fonts-loaded?
+            (->> fonts
+                 (every?
+                  (fn [font]
+                    (let [font-data (wasm.fonts/make-font-data font)]
+                      (wasm.fonts/font-stored? font-data (:emoji? font-data))))))]
+
+        (if (not fonts-loaded?)
+          (->> (rx/of (resize-wasm-text-debounce id))
+               (rx/delay 20))
+          (rx/of (resize-wasm-text-debounce-inner id)))))))
+
 (defn resize-wasm-text-all
   "Resize all text shapes (auto-width/auto-height) from a collection of ids."
   [ids]

frontend/src/app/main/ui/ds/buttons/icon_button.cljs

@@ -16,6 +16,7 @@
 (def ^:private schema:icon-button
   [:map
    [:class {:optional true} :string]
+   [:tooltip-class {:optional true} [:maybe :string]]
    [:icon-class {:optional true} :string]
    [:icon
     [:and :string [:fn #(contains? icon-list %)]]]
@@ -28,7 +29,7 @@
 (mf/defc icon-button*
   {::mf/schema schema:icon-button
    ::mf/memo true}
-  [{:keys [class icon icon-class variant aria-label children tooltip-placement] :rest props}]
+  [{:keys [class icon icon-class variant aria-label children tooltip-placement tooltip-class] :rest props}]
   (let [variant
         (d/nilv variant "primary")
 
@@ -49,6 +50,7 @@
                           :aria-labelledby tooltip-id})]
 
     [:> tooltip* {:content aria-label
+                  :class tooltip-class
                   :placement tooltip-placement
                   :id tooltip-id}
      [:> :button props

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

@@ -18,7 +18,6 @@
    [app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
    [app.main.ui.ds.controls.utilities.token-field :refer [token-field*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i]
-   [app.main.ui.ds.tooltip :refer [tooltip*]]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -638,27 +637,17 @@
                                 :on-change store-raw-value
                                 :variant "comfortable"
                                 :disabled disabled
-                                :slot-start (when (or icon text-icon)
+                                :icon icon
+                                :aria-label property
+                                :slot-start (when text-icon
                                               (mf/html
-                                               [:> tooltip*
-                                                {:content property
-                                                 :id property}
-                                                (cond
-                                                  icon
-                                                  [:> icon*
-                                                   {:icon-id icon
-                                                    :size "s"
-                                                    :aria-labelledby property
-                                                    :class (stl/css :icon)}]
-
-                                                  text-icon
-                                                  [:div {:class (stl/css :text-icon)
-                                                         :aria-labelledby property}
-                                                   text-icon])]))
+                                               [:div {:class (stl/css :text-icon)}
+                                                text-icon]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
                                               (mf/html [:> icon-button* {:variant "ghost"
                                                                          :icon i/tokens
+                                                                         :tooltip-class (stl/css :button-tooltip)
                                                                          :class (stl/css :invisible-button)
                                                                          :aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
                                                                          :ref open-dropdown-ref
@@ -686,23 +675,19 @@
                               :disabled disabled
                               :on-blur on-blur
                               :class inner-class
+                              :property property
                               :slot-start (when (or icon text-icon)
                                             (mf/html
-                                             [:> tooltip*
-                                              {:content property
-                                               :id property}
-                                              (cond
-                                                icon
-                                                [:> icon*
-                                                 {:icon-id icon
-                                                  :size "s"
-                                                  :aria-labelledby property
-                                                  :class (stl/css :icon)}]
+                                             (cond
+                                               icon
+                                               [:> icon*
+                                                {:icon-id icon
+                                                 :size "s"
+                                                 :class (stl/css :icon)}]
 
-                                                text-icon
-                                                [:div {:class (stl/css :text-icon)
-                                                       :aria-labelledby property}
-                                                 text-icon])]))
+                                               text-icon
+                                               [:div {:class (stl/css :text-icon)}
+                                                text-icon])))
                               :token-wrapper-ref token-wrapper-ref
                               :token-detach-btn-ref token-detach-btn-ref
                               :detach-token detach-token})))]
@@ -737,40 +722,21 @@
     (mf/with-effect [dropdown-options]
       (mf/set-ref-val! options-ref dropdown-options))
 
-    (if (some? icon)
-      [:div {:class [class (stl/css :input-wrapper)]
-             :ref wrapper-ref}
+    [:div {:class [class (stl/css :input-wrapper)]
+           :ref wrapper-ref}
 
-       (if (and (some? token-applied)
-                (not= :multiple token-applied))
-         [:> token-field* token-props]
-         [:> input-field* input-props])
+     (if (and (some? token-applied)
+              (not= :multiple token-applied))
+       [:> token-field* token-props]
+       [:> input-field* input-props])
 
-       (when ^boolean is-open
-         (let [options (if (delay? dropdown-options) @dropdown-options dropdown-options)]
-           [:> options-dropdown* {:on-click on-option-click
-                                  :id listbox-id
-                                  :options options
-                                  :selected selected-id
-                                  :focused focused-id
-                                  :align align
-                                  :empty-to-end empty-to-end
-                                  :ref set-option-ref}]))]
-      [:div {:class [class (stl/css :input-wrapper)]
-             :ref wrapper-ref}
-
-       (if (and (some? token-applied)
-                (not= :multiple token-applied))
-         [:> token-field* token-props]
-         [:> input-field* input-props])
-
-       (when ^boolean is-open
-         (let [options (if (delay? dropdown-options) @dropdown-options dropdown-options)]
-           [:> options-dropdown* {:on-click on-option-click
-                                  :id listbox-id
-                                  :options options
-                                  :selected selected-id
-                                  :focused focused-id
-                                  :align align
-                                  :empty-to-end empty-to-end
-                                  :ref set-option-ref}]))])))
+     (when ^boolean is-open
+       (let [options (if (delay? dropdown-options) @dropdown-options dropdown-options)]
+         [:> options-dropdown* {:on-click on-option-click
+                                :id listbox-id
+                                :options options
+                                :selected selected-id
+                                :focused focused-id
+                                :align align
+                                :empty-to-end empty-to-end
+                                :ref set-option-ref}]))]))

frontend/src/app/main/ui/ds/controls/numeric_input.scss

@@ -55,3 +55,8 @@
     --opacity-button: 1;
   }
 }
+
+.button-tooltip {
+  inline-size: var($sz-28);
+  block-size: 100%;
+}

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

@@ -42,7 +42,6 @@
         type  (d/nilv type "text")
         variant (d/nilv variant "dense")
         tooltip-id (mf/use-id)
-
         props (mf/spread-props props
                                {:class [class
                                         (stl/css-case
@@ -54,15 +53,11 @@
                                                 "true")
                                 :aria-describedby (when has-hint
                                                     (str id "-hint"))
+                                :aria-labelledby tooltip-id
                                 :type (d/nilv type "text")
                                 :id id
                                 :max-length (d/nilv max-length max-input-length)})
 
-        props (if (and aria-label (not (some? icon)))
-                (mf/spread-props props
-                                 {:aria-label aria-label})
-                (mf/spread-props props
-                                 {:aria-labelledby tooltip-id}))
         inside-class (stl/css-case :input-wrapper true
                                    :has-hint has-hint
                                    :hint-type-hint (= hint-type "hint")
@@ -83,11 +78,14 @@
      (when (some? slot-start)
        slot-start)
      (when (some? icon)
-       (if aria-label
-         [:> tooltip* {:content aria-label
-                       :id tooltip-id}
-          [:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}]]
-         [:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}]))
-     [:> "input" props]
+       [:> icon* {:icon-id icon
+                  :class (stl/css :icon)
+                  :size "s"
+                  :on-click on-icon-click}])
+     (if aria-label
+       [:> tooltip* {:content aria-label
+                     :id tooltip-id}
+        [:> "input" props]]
+       [:> "input" props])
      (when (some? slot-end)
        slot-end)]))

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

@@ -118,4 +118,5 @@
 
 .icon {
   color: var(--color-foreground-secondary);
+  min-inline-size: var(--sp-l);
 }

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

@@ -22,6 +22,7 @@
    [:class {:optional true} [:maybe :string]]
    [:id {:optional true} [:maybe :string]]
    [:label {:optional true} [:maybe :string]]
+   [:property {:optional true} [:maybe :string]]
    [:value :any]
    [:disabled {:optional true} :boolean]
    [:slot-start {:optional true} [:maybe some?]]
@@ -35,7 +36,7 @@
   {::mf/schema schema:token-field}
   [{:keys [id label value slot-start disabled class
            on-click on-token-key-down on-blur detach-token
-           token-wrapper-ref token-detach-btn-ref on-focus]}]
+           token-wrapper-ref token-detach-btn-ref on-focus property]}]
   (let [set-active? (some? id)
         content     (if set-active?
                       label
@@ -50,37 +51,42 @@
            (when-not ^boolean disabled
              (dom/prevent-default event)
              (dom/focus! (mf/ref-val token-wrapper-ref)))))]
+    [:> tooltip* {:content property
+                  :class (stl/css :token-field-wrapper)
+                  :id (dm/str default-id "-input")}
+     [:div {:class [class (stl/css-case :token-field true
+                                        :with-icon (some? slot-start)
+                                        :token-field-disabled disabled)]
+            :on-click focus-wrapper
+            :disabled disabled
+            :on-key-down on-token-key-down
+            :ref token-wrapper-ref
+            :on-blur on-blur
+            :on-focus on-focus
+            :aria-labelledby (dm/str default-id "-input")
+            :tab-index (if disabled -1 0)}
 
-    [:div {:class [class (stl/css-case :token-field true
-                                       :with-icon (some? slot-start)
-                                       :token-field-disabled disabled)]
-           :on-click focus-wrapper
-           :disabled disabled
-           :on-key-down on-token-key-down
-           :ref token-wrapper-ref
-           :on-blur on-blur
-           :on-focus on-focus
-           :tab-index (if disabled -1 0)}
+      (when (some? slot-start) slot-start)
 
-     (when (some? slot-start) slot-start)
+      [:div  {:class (stl/css :content-wrapper)}
+       [:> tooltip* {:content content
+                     :id (dm/str id "-pill")}
+        [:button {:on-click on-click
+                  :class (stl/css-case :pill true
+                                       :no-set-pill (not set-active?)
+                                       :pill-disabled disabled)
+                  :disabled disabled
+                  :aria-labelledby (dm/str id "-pill")
+                  :on-key-down on-token-key-down}
+         value
+         (when-not set-active?
+           [:div {:class (stl/css :pill-dot)}])]]]
 
-     [:> tooltip* {:content content
-                   :id (dm/str id "-pill")}
-      [:button {:on-click on-click
-                :class (stl/css-case :pill true
-                                     :no-set-pill (not set-active?)
-                                     :pill-disabled disabled)
-                :disabled disabled
-                :aria-labelledby (dm/str id "-pill")
-                :on-key-down on-token-key-down}
-       value
-       (when-not set-active?
-         [:div {:class (stl/css :pill-dot)}])]]
-
-     (when-not ^boolean disabled
-       [:> icon-button* {:variant "ghost"
-                         :class (stl/css :invisible-button)
-                         :icon i/broken-link
-                         :ref token-detach-btn-ref
-                         :aria-label (tr "ds.inputs.token-field.detach-token")
-                         :on-click detach-token}])]))
+      (when-not ^boolean disabled
+        [:> icon-button* {:variant "ghost"
+                          :class (stl/css :invisible-button)
+                          :tooltip-class (stl/css :button-tooltip)
+                          :icon i/broken-link
+                          :ref token-detach-btn-ref
+                          :aria-label (tr "ds.inputs.token-field.detach-token")
+                          :on-click detach-token}])]]))

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

@@ -9,6 +9,7 @@
 @use "ds/typography.scss" as t;
 @use "ds/colors.scss" as *;
 @use "ds/mixins.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .token-field {
   --token-field-bg-color: var(--color-background-tertiary);
@@ -37,6 +38,9 @@
     --token-field-outline-color: var(--color-accent-primary);
   }
 }
+.token-field-wrapper {
+  inline-size: 100%;
+}
 
 .with-icon {
   grid-template-columns: auto 1fr;
@@ -132,3 +136,12 @@
     --opacity-button: 1;
   }
 }
+
+.content-wrapper {
+  inline-size: 100%;
+}
+
+.button-tooltip {
+  inline-size: px2rem(28);
+  block-size: 100%;
+}

frontend/src/app/main/ui/ds/tooltip/tooltip.cljs

@@ -171,7 +171,7 @@
 
 (def ^:private schema:tooltip
   [:map
-   [:class {:optional true} :string]
+   [:class {:optional true} [:maybe :string]]
    [:id {:optional true} :string]
    [:offset {:optional true} :int]
    [:delay {:optional true} :int]
@@ -184,6 +184,7 @@
   [{:keys [class id children content placement offset delay] :rest props}]
   (let [internal-id
         (mf/use-id)
+        trigger-ref (mf/use-ref nil)
 
         id
         (d/nilv id internal-id)
@@ -204,19 +205,23 @@
         (mf/use-fn
          (mf/deps id placement offset)
          (fn [event]
-           (clear-schedule schedule-ref)
-           (when-let [tooltip (dom/get-element id)]
-             (let [origin-brect
-                   (->> (dom/get-target event)
-                        (dom/get-bounding-rect))
 
-                   update-position
-                   (fn []
-                     (let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
-                       (when (not= new-placement placement)
-                         (reset! placement* new-placement))))]
+           (let [current (dom/get-current-target event)
+                 related (dom/get-related-target event)
+                 is-node? (fn [node] (and node (.-nodeType node)))]
+             (when-not (and related (is-node? related) (.contains current related))
+               (clear-schedule schedule-ref)
+               (when-let [tooltip (dom/get-element id)]
+                 (let [origin-brect
+                       (dom/get-bounding-rect (mf/ref-val trigger-ref))
 
-               (add-schedule schedule-ref delay update-position)))))
+                       update-position
+                       (fn []
+                         (let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
+                           (when (not= new-placement placement)
+                             (reset! placement* new-placement))))]
+
+                   (add-schedule schedule-ref delay update-position)))))))
 
         on-hide
         (mf/use-fn
@@ -252,6 +257,7 @@
                           :on-focus on-show
                           :on-blur on-hide
                           :on-key-down handle-key-down
+                          :ref trigger-ref
                           :class [class (stl/css :tooltip-trigger)]
                           :aria-describedby id})
         content

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

@@ -49,7 +49,6 @@
 
 (mf/defc form-submit*
   [{:keys [disabled on-submit] :rest props}]
-
   (let [form      (mf/use-ctx context)
         disabled? (or (and (some? form)
                            (or (not (:valid @form))

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

@@ -95,10 +95,10 @@
   []
 
   (let [plugins-state* (mf/use-state #(preg/plugins-list))
-        plugins-state @plugins-state*
+        plugins-state  (deref plugins-state*)
 
-        plugin-url* (mf/use-state "")
-        plugin-url  @plugin-url*
+        plugin-url*    (mf/use-state "")
+        plugin-url     (deref plugin-url*)
 
         fetching-manifest? (mf/use-state false)
 

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

@@ -300,7 +300,7 @@
 
         on-drop
         (mf/use-fn
-         (mf/deps id index objects expanded? selected)
+         (mf/deps id objects expanded? selected)
          (fn [side _data]
            (let [single? (= (count selected) 1)
                  same?   (and single? (= (first selected) id))]
@@ -321,14 +321,18 @@
 
                      [parent-id _] (ctn/find-valid-parent-and-frame-ids parent-id objects (map #(get objects %) selected) false files)
 
-                     parent    (get objects parent-id)
+                     parent        (get objects parent-id)
+                     current-index (d/index-of (:shapes parent) id)
 
                      to-index  (cond
                                  (= side :center) 0
                                  (and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
-                                 (= side :top) (inc index)
-                                 :else index)]
-                 (st/emit! (dw/relocate-selected-shapes parent-id to-index)))))))
+                                 ;; target not found in parent (while lazy loading)
+                                 (neg? current-index) nil
+                                 (= side :top) (inc current-index)
+                                 :else current-index)]
+                 (when (some? to-index)
+                   (st/emit! (dw/relocate-selected-shapes parent-id to-index))))))))
 
         on-hold
         (mf/use-fn
@@ -417,11 +421,7 @@
                 current @children-count*
                 new-count (min total (max current chunk-size min-count))]
             (reset! children-count* new-count))
-          (reset! children-count* 0)))
-      (fn []
-        (when-let [obs ^js @observer-var]
-          (.disconnect obs)
-          (reset! observer-var nil))))
+          (reset! children-count* 0))))
 
     ;; Re-observe sentinel whenever children-count changes (sentinel moves)
     ;; and (shapes item) to reconnect observer after shape changes
@@ -502,4 +502,4 @@
                 :component-child? component-tree?}])))
         (when (< children-count (count (:shapes item)))
           [:div {:ref lazy-ref
-                 :style {:min-height 1}}])])]))
+                 :class (stl/css :lazy-load-sentinel)}])])]))

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

@@ -298,3 +298,11 @@
 .filtered {
   min-inline-size: $sz-12;
 }
+.lazy-load-sentinel {
+  min-height: 1px;
+  pointer-events: none;
+}
+.lazy-load-sentinel {
+  min-height: 1px;
+  pointer-events: none;
+}

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

@@ -521,8 +521,7 @@
          [:& filters-tree {:objects filtered-objects
                            :key (dm/str (:id page))
                            :parent-size size-parent}]
-         [:div {:ref lazy-load-ref
-                :style {:min-height 16}}]]
+         [:div {:ref lazy-load-ref}]]
         [:div {:on-scroll on-scroll
                :class (stl/css :tool-window-content)
                :data-scroll-container true

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

@@ -541,7 +541,8 @@
               :value (get values :rotation)}]
 
             [:div {:class (stl/css :rotation)
-                   :title (tr "workspace.options.rotation")}
+                   :title (tr "workspace.options.rotation")
+                   :data-testid "rotation"}
              [:span {:class (stl/css :icon)}  deprecated-icon/rotation]
              [:> deprecated-input/numeric-input*
               {:no-validate true

frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs

@@ -9,7 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.token :as ctt]
    [app.main.data.modal :as modal]
@@ -47,9 +47,9 @@
 ;; Actions ---------------------------------------------------------------------
 
 (defn attribute-actions [token selected-shapes attributes]
-  (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
+  (let [ids-by-attributes (cfo/shapes-ids-by-applied-attributes token selected-shapes attributes)
         shape-ids (into #{} (map :id selected-shapes))]
-    {:all-selected? (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)
+    {:all-selected? (cfo/shapes-applied-all? ids-by-attributes shape-ids attributes)
      :shape-ids shape-ids
      :selected-pred #(seq (% ids-by-attributes))}))
 

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

@@ -6,48 +6,21 @@
 
 (ns app.main.ui.workspace.tokens.management.forms.color
   (:require
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.schema :as sm]
-   [app.common.types.token :as cto]
    [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
    [app.main.ui.workspace.tokens.management.forms.generic-form :as generic]
-   [app.util.i18n :refer [tr]]
-   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(defn- token-value-error-fn
-  [{:keys [value]}]
-  (when (or (str/empty? value)
-            (str/blank? value))
-    (tr "workspace.tokens.empty-input")))
-
-(defn- make-schema
-  [tokens-tree _]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (cft/token-name-path-exists? % tokens-tree))]]]
-
-     [:value [::sm/text {:error/fn token-value-error-fn}]]
-
-     [:color-result {:optional true} ::sm/any]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (nil? (cto/token-value-self-reference? name value))))]]))
-
 (mf/defc form*
-  [props]
-  (let [props (mf/spread-props props {:make-schema make-schema
+  [{:keys [token token-type] :as props}]
+  (let [props (mf/spread-props props {:make-schema #(-> (cfo/make-token-schema %1 token-type)
+                                                        (sm/dissoc-key :id)
+                                                        (sm/assoc-key :color-result :string))
+                                      :initial {:type token-type
+                                                :name (:name token "")
+                                                :value (:value token "")
+                                                :description (:description token "")
+                                                :color-result ""}
                                       :input-component token.controls/color-input*})]
     [:> generic/form* props]))

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

@@ -156,7 +156,6 @@
         color-resolved
         (get-in @form [:data :color-result] "")
 
-
         valid-color (or (tinycolor/valid-color value)
                         (tinycolor/valid-color color-resolved))
 

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

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.workspace.tokens.management.forms.font-family
   (:require
+   [app.common.files.tokens :as cfo]
+   [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
@@ -35,6 +37,11 @@
             {:type token-type}))
         props (mf/spread-props props {:token token
                                       :token-type token-type
+                                      :make-schema #(-> (cfo/make-token-schema %1 token-type)
+                                                        (sm/dissoc-key :id)
+                                                        ;; The value as edited in the form is a simple stirng.
+                                                        ;; It's converted to vector in the validator.
+                                                        (sm/assoc-key :value cfo/schema:token-value-generic))
                                       :validator validate-font-family-token
                                       :input-component token.controls/fonts-combobox*})]
     [:> generic/form* props]))

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

@@ -7,7 +7,6 @@
 (ns app.main.ui.workspace.tokens.management.forms.form-container
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
    [app.common.types.tokens-lib :as ctob]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.management.forms.color :as color]
@@ -28,7 +27,7 @@
 
         token-path
         (mf/with-memo [token]
-          (cft/token-name->path (:name token)))
+          (ctob/get-token-path token))
 
         tokens-tree-in-selected-set
         (mf/with-memo [token-path tokens-in-selected-set]

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

@@ -8,9 +8,8 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.schema :as sm]
-   [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.main.constants :refer [max-input-length]]
    [app.main.data.helpers :as dh]
@@ -36,13 +35,6 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(defn- token-value-error-fn
-  [{:keys [value]}]
-  (when (or (str/empty? value)
-            (str/blank? value))
-    (tr "workspace.tokens.empty-input")))
-
-
 (defn get-value-for-validator
   [active-tab value value-subfield form-type]
 
@@ -59,29 +51,6 @@
 
     value))
 
-(defn- default-make-schema
-  [tokens-tree _]
-  (sm/schema
-   [:and
-    [:map
-     [:name
-      [:and
-       [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-       [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (cft/token-name-path-exists? % tokens-tree))]]]
-
-     [:value [::sm/text {:error/fn token-value-error-fn}]]
-
-     [:description {:optional true}
-      [:string {:max 2048 :error/fn #(tr "errors.field-max-length" 2048)}]]]
-
-    [:fn {:error/field :value
-          :error/fn #(tr "workspace.tokens.self-reference")}
-     (fn [{:keys [name value]}]
-       (when (and name value)
-         (nil? (cto/token-value-self-reference? name value))))]]))
-
 (mf/defc form*
   [{:keys [token
            validator
@@ -97,11 +66,12 @@
            value-subfield
            input-value-placeholder] :as props}]
 
-  (let [make-schema     (or make-schema default-make-schema)
+  (let [make-schema     (or make-schema #(-> (cfo/make-token-schema % token-type)
+                                             (sm/dissoc-key :id)))
         input-component (or input-component token.controls/input*)
         validate-token  (or validator default-validate-token)
 
-        active-tab*     (mf/use-state #(if (cft/is-reference? token) :reference :composite))
+        active-tab*     (mf/use-state #(if (cfo/is-reference? token) :reference :composite))
         active-tab      (deref active-tab*)
 
         token
@@ -134,7 +104,8 @@
         initial
         (mf/with-memo [token]
           (or initial
-              {:name (:name token "")
+              {:type token-type
+               :name (:name token "")
                :value (:value token "")
                :description (:description token "")}))
 

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

@@ -8,9 +8,9 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
+   [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
@@ -51,7 +51,7 @@
     ;; Entering form without a value - show no error just resolve nil
     (nil? token-value) (rx/of nil)
     ;; Validate refrence string
-    (cto/shadow-composite-token-reference? token-value) (default-validate-token params)
+    (cto/composite-token-reference? token-value) (default-validate-token params)
     ;; Validate composite token
     :else
     (let [params (-> params
@@ -253,6 +253,7 @@
        [:> reference-form* {:token token
                             :tokens tokens}])]))
 
+;; TODO: use cfo/make-schema:token-value and extend it with shadow and reference fields
 (defn- make-schema
   [tokens-tree active-tab]
   (sm/schema
@@ -262,10 +263,10 @@
       [:and
        [:string {:min 1 :max 255
                  :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/token-name-ref assoc
+       (sm/update-properties cto/schema:token-name assoc
                              :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (cft/token-name-path-exists? % tokens-tree))]]]
+        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
 
      [:value
       [:map

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

@@ -8,9 +8,9 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
+   [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
@@ -48,7 +48,7 @@
     ;; Entering form without a value - show no error just resolve nil
     (nil? token-value) (rx/of nil)
     ;; Validate refrence string
-    (cto/typography-composite-token-reference? token-value) (default-validate-token props)
+    (cto/composite-token-reference? token-value) (default-validate-token props)
     ;; Validate composite token
     :else
     (-> props
@@ -208,6 +208,7 @@
 
 ;; SCHEMA
 
+;; TODO: use cfo/make-schema:token-value and extend it with typography and reference fields
 (defn- make-schema
   [tokens-tree active-tab]
   (sm/schema
@@ -217,10 +218,10 @@
       [:and
        [:string {:min 1 :max 255
                  :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-       (sm/update-properties cto/token-name-ref assoc
+       (sm/update-properties cto/schema:token-name assoc
                              :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
        [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-        #(not (cft/token-name-path-exists? % tokens-tree))]]]
+        #(not (ctob/token-name-path-exists? % tokens-tree))]]]
 
      [:value
       [:map

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

@@ -1,13 +1,11 @@
 (ns app.main.ui.workspace.tokens.management.forms.validators
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
    [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.style-dictionary :as sd]
    [app.main.data.workspace.tokens.errors :as wte]
-   [app.util.i18n :refer [tr]]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
 
@@ -29,7 +27,8 @@
                 ;; When creating a new token we dont have a name yet or invalid name,
                 ;; but we still want to resolve the value to show in the form.
                 ;; So we use a temporary token name that hopefully doesn't clash with any of the users token names
-                (not (sm/valid? cto/token-name-ref (:name token))) (assoc :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"))
+                (not (sm/valid? cto/schema:token-name (:name token)))
+                (assoc :name "__PENPOT__TOKEN__NAME__PLACEHOLDER__"))
         tokens' (cond-> tokens
                   ;; Remove previous token when renaming a token
                   (not= (:name token) (:name prev-token))
@@ -89,23 +88,3 @@
   [token-name token-vals]
   (when (some #(cto/token-value-self-reference? token-name %) token-vals)
     (wte/get-error-code :error.token/direct-self-reference)))
-
-
-
-;; This is used in plugins
-
-(defn- make-token-name-schema
-  "Generate a dynamic schema validation to check if a token path derived
-  from the name already exists at `tokens-tree`."
-  [tokens-tree]
-  [:and
-   [:string {:min 1 :max 255 :error/fn #(str (:value %) (tr "workspace.tokens.token-name-length-validation-error"))}]
-   (sm/update-properties cto/token-name-ref assoc :error/fn #(str (:value %) (tr "workspace.tokens.token-name-validation-error")))
-   [:fn {:error/fn #(tr "workspace.tokens.token-name-duplication-validation-error" (:value %))}
-    #(not (cft/token-name-path-exists? % tokens-tree))]])
-
-(defn validate-token-name
-  [tokens-tree name]
-  (let [schema    (make-token-name-schema tokens-tree)
-        explainer (sm/explainer schema)]
-    (-> name explainer sm/simplify not-empty)))

frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs

@@ -10,7 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.path-names :as cpn]
    [app.common.types.token :as ctt]
    [app.config :as cf]
@@ -157,9 +157,9 @@
 
 (defn- applied-all-attributes?
   [token selected-shapes attributes]
-  (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
+  (let [ids-by-attributes (cfo/shapes-ids-by-applied-attributes token selected-shapes attributes)
         shape-ids         (into #{} xf:map-id selected-shapes)]
-    (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)))
+    (cfo/shapes-applied-all? ids-by-attributes shape-ids attributes)))
 
 (defn attributes-match-selection?
   [selected-shapes attrs & {:keys [selected-inside-layout?]}]
@@ -181,7 +181,7 @@
         resolved-token (get active-theme-tokens (:name token))
 
         has-selected?  (pos? (count selected-shapes))
-        is-reference?  (cft/is-reference? token)
+        is-reference?  (cfo/is-reference? token)
         contains-path? (str/includes? name ".")
 
         attributes (as-> (get dwta/token-properties type) $
@@ -194,7 +194,7 @@
 
         applied?
         (if has-selected?
-          (cft/shapes-token-applied? token selected-shapes attributes)
+          (cfo/shapes-token-applied? token selected-shapes attributes)
           false)
 
         half-applied?
@@ -224,7 +224,7 @@
             no-valid-value)
 
         color
-        (when (cft/color-token? token)
+        (when (cfo/color-token? token)
           (or (dwtc/resolved-token-bullet-color resolved-token)
               (dwtc/resolved-token-bullet-color token)))
 

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

@@ -63,7 +63,8 @@
              (st/emit! (dwtl/start-token-set-edition id)))))]
 
     [:> controlled-sets-list*
-     {:token-sets token-sets
+     {:tokens-lib tokens-lib
+      :token-sets token-sets
 
       :is-token-set-active token-set-active?
       :is-token-set-group-active token-set-group-active?
@@ -80,6 +81,6 @@
 
       :on-toggle-token-set on-toggle-token-set-click
       :on-toggle-token-set-group on-toggle-token-set-group-click
-      :on-update-token-set sets-helpers/on-update-token-set
+      :on-update-token-set (partial sets-helpers/on-update-token-set tokens-lib)
       :on-update-token-set-group sets-helpers/on-update-token-set-group
       :on-create-token-set sets-helpers/on-create-token-set}]))

frontend/src/app/main/ui/workspace/tokens/sets/helpers.cljs

@@ -1,9 +1,13 @@
 (ns app.main.ui.workspace.tokens.sets.helpers
   (:require
+   [app.common.files.tokens :as cfo]
+   [app.common.schema :as sm]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.event :as ev]
+   [app.main.data.notifications :as ntf]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
+   [app.util.i18n :refer [tr]]
    [potok.v2.core :as ptk]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -11,9 +15,18 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn on-update-token-set
-  [token-set name]
-  (st/emit! (dwtl/clear-token-set-edition)
-            (dwtl/update-token-set token-set name)))
+  [tokens-lib token-set name]
+  (let [name   (ctob/normalize-set-name name (ctob/get-name token-set))
+        errors (sm/validation-errors name (cfo/make-token-set-name-schema
+                                           tokens-lib
+                                           (ctob/get-id token-set)))]
+    (st/emit! (dwtl/clear-token-set-edition))
+    (if (empty? errors)
+      (st/emit! (dwtl/rename-token-set token-set name))
+      (st/emit! (ntf/show {:content (tr "errors.token-set-already-exists")
+                           :type :toast
+                           :level :error
+                           :timeout 9000})))))
 
 (defn on-update-token-set-group
   [path name]
@@ -21,15 +34,15 @@
             (dwtl/rename-token-set-group path name)))
 
 (defn on-create-token-set
-  [parent-set name]
-  (let [;; FIXME: this code should be reusable under helper under
-        ;; common types namespace
-        name
-        (if-let [parent-path (ctob/get-set-path parent-set)]
-          (->> (concat parent-path (ctob/split-set-name name))
-               (ctob/join-set-path))
-          (ctob/normalize-set-name name))
-        token-set (ctob/make-token-set :name name)]
-
+  [tokens-lib parent-set name]
+  (let [name   (ctob/make-child-name parent-set name)
+        errors (sm/validation-errors name (cfo/make-token-set-name-schema tokens-lib nil))]
     (st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name})
-              (dwtl/create-token-set token-set))))
+              (dwtl/clear-token-set-creation))
+    (if (empty? errors)
+      (let [token-set (ctob/make-token-set :name name)]
+        (st/emit! (dwtl/create-token-set token-set)))
+      (st/emit! (ntf/show {:content (tr "errors.token-set-already-exists")
+                           :type :toast
+                           :level :error
+                           :timeout 9000})))))

frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs

@@ -321,6 +321,7 @@
            on-select
            on-toggle-set
            on-toggle-set-group
+           tokens-lib
            token-sets
            new-path
            edition-id]}]
@@ -408,7 +409,7 @@
 
             :on-drop on-drop
             :on-reset-edition on-reset-edition
-            :on-edit-submit sets-helpers/on-create-token-set}]
+            :on-edit-submit (partial sets-helpers/on-create-token-set tokens-lib)}]
 
           :else
           [:> sets-tree-set*
@@ -434,7 +435,8 @@
             :on-edit-submit on-edit-submit-set}])))))
 
 (mf/defc controlled-sets-list*
-  [{:keys [token-sets
+  [{:keys [tokens-lib
+           token-sets
            selected
            on-update-token-set
            on-update-token-set-group
@@ -486,6 +488,7 @@
         {:is-draggable draggable?
          :new-path new-path
          :edition-id edition-id
+         :tokens-lib tokens-lib
          :token-sets token-sets
          :selected selected
          :on-select on-select

frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs

@@ -7,8 +7,11 @@
 (ns app.main.ui.workspace.tokens.themes.create-modal
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.files.tokens :as cfo]
    [app.common.logic.tokens :as clt]
+   [app.common.schema :as sm]
    [app.common.types.tokens-lib :as ctob]
    [app.main.constants :refer [max-input-length]]
    [app.main.data.event :as ev]
@@ -30,32 +33,9 @@
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as k]
    [cuerdas.core :as str]
-   [malli.core :as m]
-   [malli.error :as me]
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-;; Schemas ---------------------------------------------------------------------
-
-(defn- theme-name-schema
-  "Generate a dynamic schema validation to check if a theme path derived from the name already exists at `tokens-tree`."
-  [{:keys [group theme-id tokens-lib]}]
-  (m/-simple-schema
-   {:type :token/name-exists
-    :pred (fn [name]
-            (if tokens-lib
-              (let [theme (ctob/get-theme-by-name tokens-lib group name)]
-                (or (nil? theme)
-                    (= (ctob/get-id theme) theme-id)))
-              true))  ;; if still no library exists, cannot be duplicate
-    :type-properties {:error/fn #(tr "workspace.tokens.theme-name-already-exists")}}))
-
-(defn validate-theme-name
-  [tokens-lib group theme-id name]
-  (let [schema     (theme-name-schema {:tokens-lib tokens-lib :theme-id theme-id :group group})
-        validation (m/explain schema (str/trim name))]
-    (me/humanize validation)))
-
 ;; Form Component --------------------------------------------------------------
 
 (mf/defc empty-themes
@@ -181,26 +161,43 @@
                             theme-groups)
         current-group* (mf/use-state (:group theme))
         current-group  (deref current-group*)
+        current-name*  (mf/use-state (:name theme))
+        current-name   (deref current-name*)
+        group-errors*  (mf/use-state nil)
+        group-errors   (deref group-errors*)
         name-errors*   (mf/use-state nil)
         name-errors    (deref name-errors*)
 
         on-update-group
         (mf/use-fn
-         (mf/deps on-change-field)
+         (mf/deps on-change-field tokens-lib current-name)
          (fn [value]
-           (reset! current-group* value)
-           (on-change-field :group value)))
+           (let [errors (sm/validation-errors value (cfo/make-token-theme-group-schema
+                                                     tokens-lib
+                                                     current-name
+                                                     (ctob/get-id theme)))]
+             (reset! group-errors* errors)
+             (if (empty? errors)
+               (do
+                 (reset! current-group* value)
+                 (on-change-field :group value))
+               (on-change-field :group "")))))
 
         on-update-name
         (mf/use-fn
          (mf/deps on-change-field tokens-lib current-group)
          (fn [event]
            (let [value  (-> event dom/get-target dom/get-value)
-                 errors (validate-theme-name tokens-lib current-group (ctob/get-id theme) value)]
+                 errors (sm/validation-errors value (cfo/make-token-theme-name-schema
+                                                     tokens-lib
+                                                     current-group
+                                                     (ctob/get-id theme)))]
              (reset! name-errors* errors)
              (mf/set-ref-val! theme-name-ref value)
              (if (empty? errors)
-               (on-change-field :name value)
+               (do
+                 (reset! current-name* value)
+                 (on-change-field :name value))
                (on-change-field :name "")))))]
 
     [:div {:class (stl/css :edit-theme-inputs-wrapper)}
@@ -210,6 +207,7 @@
                      :placeholder (tr "workspace.tokens.label.group-placeholder")
                      :default-selected (:group theme)
                      :options (clj->js options)
+                     :has-error (d/not-empty? group-errors)
                      :on-change on-update-group}]]
 
      [:div {:class (stl/css :group-input-wrapper)}
@@ -262,6 +260,7 @@
 (mf/defc edit-create-theme*
   [{:keys [change-view theme on-save is-editing has-prev-view]}]
   (let [ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
+        tokens-lib (mf/deref refs/tokens-lib)
         token-sets (mf/deref refs/workspace-token-sets-tree)
 
         current-theme* (mf/use-state theme)
@@ -363,7 +362,8 @@
        [:div {:class (stl/css :sets-list-wrapper)}
 
         [:> wts/controlled-sets-list*
-         {:token-sets token-sets
+         {:tokens-lib tokens-lib
+          :token-sets token-sets
           :is-token-set-active token-set-active?
           :is-token-set-group-active token-set-group-active?
           :on-select on-click-token-set

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

@@ -75,32 +75,31 @@
   [{:keys [points] :as shape} zoom grid-edition?]
   (let [leftmost  (->> points (reduce left?))
         topmost   (->> points (remove #{leftmost}) (reduce top?))
-        rightmost (->> points (remove #{leftmost topmost}) (reduce right?))
+        rightmost (->> points (remove #{leftmost topmost}) (reduce right?))]
+    (when (and (some? leftmost) (some? topmost) (some? rightmost))
+      (let [left-top (gpt/to-vec leftmost topmost)
+            left-top-angle (gpt/angle left-top)
 
-        left-top (gpt/to-vec leftmost topmost)
-        left-top-angle (gpt/angle left-top)
+            top-right (gpt/to-vec topmost rightmost)
+            top-right-angle (gpt/angle top-right)
 
-        top-right (gpt/to-vec topmost rightmost)
-        top-right-angle (gpt/angle top-right)
+            ;; Choose the position that creates the less angle between left-side and top-side
+            [label-pos angle h-pos v-pos]
+            (if (< (mth/abs left-top-angle) (mth/abs top-right-angle))
+              [leftmost left-top-angle left-top (gpt/perpendicular left-top)]
+              [topmost top-right-angle top-right (gpt/perpendicular top-right)])
 
-        ;; Choose the position that creates the less angle between left-side and top-side
-        [label-pos angle h-pos v-pos]
-        (if (< (mth/abs left-top-angle) (mth/abs top-right-angle))
-          [leftmost left-top-angle left-top (gpt/perpendicular left-top)]
-          [topmost top-right-angle top-right (gpt/perpendicular top-right)])
+            delta-x (if grid-edition? 40 0)
+            delta-y (if grid-edition? 50 10)
 
-        delta-x (if grid-edition? 40 0)
-        delta-y (if grid-edition? 50 10)
-
-        label-pos
-        (-> label-pos
-            (gpt/subtract (gpt/scale (gpt/unit v-pos) (/ delta-y zoom)))
-            (gpt/subtract (gpt/scale (gpt/unit h-pos) (/ delta-x zoom))))]
-
-    (dm/fmt "rotate(% %,%) scale(%, %) translate(%, %)"
-            ;; rotate
-            angle (:x label-pos) (:y label-pos)
-            ;; scale
-            (/ 1 zoom) (/ 1 zoom)
-            ;; translate
-            (* zoom (:x label-pos)) (* zoom (:y label-pos)))))
+            label-pos
+            (-> label-pos
+                (gpt/subtract (gpt/scale (gpt/unit v-pos) (/ delta-y zoom)))
+                (gpt/subtract (gpt/scale (gpt/unit h-pos) (/ delta-x zoom))))]
+        (dm/fmt "rotate(% %,%) scale(%, %) translate(%, %)"
+                ;; rotate
+                angle (:x label-pos) (:y label-pos)
+                ;; scale
+                (/ 1 zoom) (/ 1 zoom)
+                ;; translate
+                (* zoom (:x label-pos)) (* zoom (:y label-pos)))))))

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

@@ -705,8 +705,8 @@
           [:& grid-layout/editor
            {:zoom zoom
             :objects objects-modified
-            :shape (or (get base-objects edition)
-                       (get base-objects @hover-top-frame-id))
+            :shape (or (get objects-modified edition)
+                       (get objects-modified @hover-top-frame-id))
             :view-only (not show-grid-editor?)}])]
 
        [:g.scrollbar-wrapper {:clipPath "url(#clip-handlers)"}

frontend/src/app/plugins/api.cljs

@@ -26,6 +26,7 @@
    [app.main.data.workspace.groups :as dwg]
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.fonts :refer [fetch-font-css]]
    [app.main.router :as rt]
    [app.main.store :as st]
@@ -348,9 +349,14 @@
 
         :else
         (let [page  (dsh/lookup-page @st/state)
-              shape (-> (cts/setup-shape {:type :text :x 0 :y 0 :grow-type :auto-width})
-                        (update :content txt/change-text text)
-                        (assoc :position-data nil))
+              shape (-> (cts/setup-shape {:type :text
+                                          :x 0 :y 0
+                                          :width 1 :height 1
+                                          :grow-type :auto-width})
+                        (update :content txt/change-text text
+                                ;; Text should be given a color by default
+                                {:fills [{:fill-color "#000000" :fill-opacity 1}]})
+                        (dissoc :position-data))
 
               changes
               (-> (cb/empty-changes)
@@ -358,9 +364,10 @@
                   (cb/with-objects (:objects page))
                   (cb/add-object shape))]
 
-          (st/emit!
-           (ch/commit-changes changes)
-           (se/event plugin-id "create-shape" :type :text))
+          (st/emit! (ch/commit-changes changes)
+                    (se/event plugin-id "create-shape" :type :text)
+                    (dwwt/resize-wasm-text-debounce (:id shape)))
+
           (shape/shape-proxy plugin-id (:id shape)))))
 
     :createShapeFromSvg

frontend/src/app/plugins/register.cljs

@@ -38,6 +38,7 @@
         desc (obj/get manifest "description")
         code (obj/get manifest "code")
         icon (obj/get manifest "icon")
+        vers (d/nilv (obj/get manifest "version") 1)
 
         permissions (into #{} (obj/get manifest "permissions" []))
         permissions
@@ -55,9 +56,13 @@
         (u/uri plugin-url)
 
         origin
-        (-> plugin-url
-            (u/join ".")
-            (str))
+        (if (= vers 1)
+          (-> plugin-url
+              (assoc :path "/")
+              (str))
+          (-> plugin-url
+              (u/join ".")
+              (str)))
 
         prev-plugin
         (->> (:data @registry)

frontend/src/app/plugins/tokens.cljs

@@ -7,33 +7,41 @@
 (ns app.plugins.tokens
   (:require
    [app.common.data.macros :as dm]
+   [app.common.files.tokens :as cfo]
+   [app.common.schema :as sm]
    [app.common.types.token :as cto]
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
+   [app.main.data.style-dictionary :as sd]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
-   [app.main.ui.workspace.tokens.management.forms.validators :as form-validator]
-   [app.main.ui.workspace.tokens.themes.create-modal :as theme-form]
+   [app.plugins.shape :as shape]
    [app.plugins.utils :as u]
    [app.util.object :as obj]
+   [beicon.v2.core :as rx]
    [clojure.datafy :refer [datafy]]))
 
+;; === Token
+
 (defn- apply-token-to-shapes
   [file-id set-id id shape-ids attrs]
-  (let [token (u/locate-token file-id set-id id)
-        kw-attrs (into #{} (map keyword attrs))]
-    (if (some #(not (cto/token-attr? %)) kw-attrs)
+  (let [token (u/locate-token file-id set-id id)]
+    (if (some #(not (cto/token-attr? %)) attrs)
       (u/display-not-valid :applyToSelected attrs)
       (st/emit!
        (dwta/toggle-token {:token token
-                           :attrs kw-attrs
+                           :attrs attrs
                            :shape-ids shape-ids
                            :expand-with-children false})))))
 
+(defn token-proxy? [p]
+  (obj/type-of? p "TokenProxy"))
+
 (defn token-proxy
   [plugin-id file-id set-id id]
-  (obj/reify {:name "TokenSetProxy"}
+  (obj/reify {:name "TokenProxy"
+              :wrap u/wrap-errors}
     :$plugin {:enumerable false :get (constantly plugin-id)}
     :$file-id {:enumerable false :get (constantly file-id)}
     :$set-id {:enumerable false :get (constantly set-id)}
@@ -48,18 +56,12 @@
      (fn [_]
        (let [token (u/locate-token file-id set-id id)]
          (ctob/get-name token)))
+     :schema (cfo/make-token-name-schema
+              (some-> (u/locate-tokens-lib file-id)
+                      (ctob/get-tokens set-id)))
      :set
      (fn [_ value]
-       (let [tokens-lib (u/locate-tokens-lib file-id)
-             errors     (form-validator/validate-token-name
-                         (ctob/get-tokens tokens-lib set-id)
-                         value)]
-         (cond
-           (some? errors)
-           (u/display-not-valid :name (first errors))
-
-           :else
-           (st/emit! (dwtl/update-token set-id id {:name value})))))}
+       (st/emit! (dwtl/update-token set-id id {:name value})))}
 
     :type
     {:this true
@@ -73,17 +75,31 @@
      :get
      (fn [_]
        (let [token (u/locate-token file-id set-id id)]
-         (:value token)))}
+         (:value token)))
+     :schema (let [token (u/locate-token file-id set-id id)]
+               (cfo/make-token-value-schema (:type token)))
+     :set
+     (fn [_ value]
+       (st/emit! (dwtl/update-token set-id id {:value value})))}
 
     :description
     {:this true
      :get
      (fn [_]
        (let [token (u/locate-token file-id set-id id)]
-         (ctob/get-description token)))}
+         (ctob/get-description token)))
+     :schema cfo/schema:token-description
+     :set
+     (fn [_ value]
+       (st/emit! (dwtl/update-token set-id id {:description value})))}
 
     :duplicate
     (fn []
+      ;; TODO:
+      ;;  - add function duplicate-token in tokens-lib, that allows to specify the new id
+      ;;  - use this function in dwtl/duplicate-token
+      ;;  - return the new token proxy using the locally forced id
+      ;;  - do the same with sets and themes
       (let [token  (u/locate-token file-id set-id id)
             token' (ctob/make-token (-> (datafy token)
                                         (dissoc :id
@@ -96,17 +112,27 @@
       (st/emit! (dwtl/delete-token set-id id)))
 
     :applyToShapes
-    (fn [shapes attrs]
-      (apply-token-to-shapes file-id set-id id (map :id shapes) attrs))
+    {:schema [:tuple
+              [:vector [:fn shape/shape-proxy?]]
+              [:maybe [:set ::sm/keyword]]]
+     :fn (fn [shapes attrs]
+           (apply-token-to-shapes file-id set-id id (map :id shapes) attrs))}
 
     :applyToSelected
-    (fn [attrs]
-      (let [selected (get-in @st/state [:workspace-local :selected])]
-        (apply-token-to-shapes file-id set-id id selected attrs)))))
+    {:schema [:tuple [:maybe [:set ::sm/keyword]]]
+     :fn (fn [attrs]
+           (let [selected (get-in @st/state [:workspace-local :selected])]
+             (apply-token-to-shapes file-id set-id id selected attrs)))}))
+
+;; === Token Set
+
+(defn token-set-proxy? [p]
+  (obj/type-of? p "TokenSetProxy"))
 
 (defn token-set-proxy
   [plugin-id file-id id]
-  (obj/reify {:name "TokenSetProxy"}
+  (obj/reify {:name "TokenSetProxy"
+              :wrap u/wrap-errors}
     :$plugin {:enumerable false :get (constantly plugin-id)}
     :$file-id {:enumerable false :get (constantly file-id)}
     :$id {:enumerable false :get (constantly id)}
@@ -120,15 +146,13 @@
      (fn [_]
        (let [set (u/locate-token-set file-id id)]
          (ctob/get-name set)))
+     :schema (cfo/make-token-set-name-schema
+              (u/locate-tokens-lib file-id)
+              id)
      :set
-     (fn [_ value]
+     (fn [_ name]
        (let [set (u/locate-token-set file-id id)]
-         (cond
-           (not (string? value))
-           (u/display-not-valid :name value)
-
-           :else
-           (st/emit! (dwtl/update-token-set set value)))))}
+         (st/emit! (dwtl/rename-token-set set name))))}
 
     :active
     {:this true
@@ -138,6 +162,7 @@
        (let [tokens-lib (u/locate-tokens-lib file-id)
              set        (u/locate-token-set file-id id)]
          (ctob/token-set-active? tokens-lib (ctob/get-name set))))
+     :schema ::sm/boolean
      :set
      (fn [_ value]
        (let [set (u/locate-token-set file-id id)]
@@ -153,8 +178,7 @@
      :enumerable false
      :get
      (fn [_]
-       (let [file (u/locate-file file-id)
-             tokens-lib (->> file :data :tokens-lib)]
+       (let [tokens-lib (u/locate-tokens-lib file-id)]
          (->> (ctob/get-tokens tokens-lib id)
               (vals)
               (map #(token-proxy plugin-id file-id id (:id %)))
@@ -165,8 +189,7 @@
      :enumerable false
      :get
      (fn [_]
-       (let [file (u/locate-file file-id)
-             tokens-lib (->> file :data :tokens-lib)
+       (let [tokens-lib (u/locate-tokens-lib file-id)
              tokens (ctob/get-tokens tokens-lib id)]
          (->> tokens
               (vals)
@@ -181,55 +204,56 @@
               (apply array))))}
 
     :getTokenById
-    (fn [token-id]
-      (cond
-        (not (string? token-id))
-        (u/display-not-valid :getTokenById token-id)
-
-        :else
-        (let [token-id (uuid/parse token-id)
-              token (u/locate-token file-id id token-id)]
-          (when (some? token)
-            (token-proxy plugin-id file-id id token-id)))))
+    {:schema [:tuple ::sm/uuid]
+     :fn (fn [token-id]
+           (let [token (u/locate-token file-id id token-id)]
+             (when (some? token)
+               (token-proxy plugin-id file-id id token-id))))}
 
     :addToken
-    (fn [type-str name value]
-      (let [type (cto/dtcg-token-type->token-type type-str)
-            value (case type
-                    :font-family (ctob/convert-dtcg-font-family (js->clj value))
-                    :typography (ctob/convert-dtcg-typography-composite (js->clj value))
-                    :shadow (ctob/convert-dtcg-shadow-composite (js->clj value))
-                    (js->clj value))]
-        (cond
-          (nil? type)
-          (u/display-not-valid :addTokenType type-str)
-
-          (not (string? name))
-          (u/display-not-valid :addTokenName name)
-
-          :else
-          (let [token (ctob/make-token {:type type
-                                        :name name
-                                        :value value})]
-            (st/emit! (dwtl/create-token id token))
-            (token-proxy plugin-id file-id (:id set) (:id token))))))
+    {:schema (fn [args]
+               [:tuple (-> (cfo/make-token-schema
+                            (-> (u/locate-tokens-lib file-id) (ctob/get-tokens id))
+                            (cto/dtcg-token-type->token-type (-> args (first) (get "type"))))
+                           ;; Don't allow plugins to set the id
+                           (sm/dissoc-key :id)
+                           ;; Instruct the json decoder in obj/reify not to process map keys (:key-fn below)
+                           ;; and set a converter that changes DTCG types to internal types (:decode/json).
+                           ;; E.g. "FontFamilies" -> :font-family or "BorderWidth" -> :stroke-width
+                           (sm/update-properties assoc :decode/json cfo/convert-dtcg-token))])
+     :decode/options {:key-fn identity}
+     :fn (fn [attrs]
+           (let [tokens-lib (u/locate-tokens-lib file-id)
+                 tokens-tree (ctob/get-tokens-in-active-sets tokens-lib)
+                 token (ctob/make-token attrs)]
+             (->> (assoc tokens-tree (:name token) token)
+                  (sd/resolve-tokens-interactive)
+                  (rx/subs!
+                   (fn [resolved-tokens]
+                     (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token))]
+                       (if resolved-value
+                         (st/emit! (dwtl/create-token id token))
+                         (u/display-not-valid :addToken (str errors)))))))
+             ;; TODO: as the addToken function is synchronous, we must return the newly created
+             ;;       token even if the validator will throw it away if the resolution fails.
+             ;;       This will be solved with the TokenScript resolver, that is syncronous.
+             (token-proxy plugin-id file-id id (:id token))))}
 
     :duplicate
     (fn []
-      (let [set  (u/locate-token-set file-id id)
-            set' (ctob/make-token-set (-> (datafy set)
-                                          (dissoc :id
-                                                  :modified-at)))]
-        (st/emit! (dwtl/create-token-set set'))
-        (token-set-proxy plugin-id file-id (:id set'))))
+      (st/emit! (dwtl/duplicate-token-set id)))
 
     :remove
     (fn []
       (st/emit! (dwtl/delete-token-set id)))))
 
+(defn token-theme-proxy? [p]
+  (obj/type-of? p "TokenThemeProxy"))
+
 (defn token-theme-proxy
   [plugin-id file-id id]
-  (obj/reify {:name "TokenThemeProxy"}
+  (obj/reify {:name "TokenThemeProxy"
+              :wrap u/wrap-errors}
     :$plugin {:enumerable false :get (constantly plugin-id)}
     :$file-id {:enumerable false :get (constantly file-id)}
     :$id {:enumerable false :get (constantly id)}
@@ -250,15 +274,15 @@
      (fn [_]
        (let [theme (u/locate-token-theme file-id id)]
          (:group theme)))
+     :schema (let [theme (u/locate-token-theme file-id id)]
+               (cfo/make-token-theme-group-schema
+                (u/locate-tokens-lib file-id)
+                (:name theme)
+                (:id theme)))
      :set
-     (fn [_ value]
+     (fn [_ group]
        (let [theme (u/locate-token-theme file-id id)]
-         (cond
-           (not (string? value))
-           (u/display-not-valid :group value)
-
-           :else
-           (st/emit! (dwtl/update-token-theme id (assoc theme :group value))))))}
+         (st/emit! (dwtl/update-token-theme id (assoc theme :group group)))))}
 
     :name
     {:this true
@@ -266,20 +290,16 @@
      (fn [_]
        (let [theme (u/locate-token-theme file-id id)]
          (:name theme)))
+     :schema (let [theme (u/locate-token-theme file-id id)]
+               (cfo/make-token-theme-name-schema
+                (u/locate-tokens-lib file-id)
+                (:id theme)
+                (:group theme)))
      :set
-     (fn [_ value]
-       (let [theme (u/locate-token-theme file-id id)
-             errors (theme-form/validate-theme-name
-                     (u/locate-tokens-lib file-id)
-                     (:group theme)
-                     id
-                     value)]
-         (cond
-           (some? errors)
-           (u/display-not-valid :name (first errors))
-
-           :else
-           (st/emit! (dwtl/update-token-theme id (assoc theme :name value))))))}
+     (fn [_ name]
+       (let [theme (u/locate-token-theme file-id id)]
+         (when name
+           (st/emit! (dwtl/update-token-theme id (assoc theme :name name))))))}
 
     :active
     {:this true
@@ -288,6 +308,7 @@
      (fn [_]
        (let [tokens-lib (u/locate-tokens-lib file-id)]
          (ctob/theme-active? tokens-lib id)))
+     :schema ::sm/boolean
      :set
      (fn [_ value]
        (st/emit! (dwtl/set-token-theme-active id value)))}
@@ -300,14 +321,16 @@
     {:this true :get (fn [_])}
 
     :addSet
-    (fn [tokenSet]
-      (let [theme (u/locate-token-theme file-id id)]
-        (st/emit! (dwtl/update-token-theme id (ctob/enable-set theme (obj/get tokenSet :name))))))
+    {:schema [:tuple [:fn token-set-proxy?]]
+     :fn (fn [tokenSet]
+           (let [theme (u/locate-token-theme file-id id)]
+             (st/emit! (dwtl/update-token-theme id (ctob/enable-set theme (obj/get tokenSet :name))))))}
 
     :removeSet
-    (fn [tokenSet]
-      (let [theme (u/locate-token-theme file-id id)]
-        (st/emit! (dwtl/update-token-theme id (ctob/disable-set theme (obj/get tokenSet :name))))))
+    {:schema [:tuple [:fn token-set-proxy?]]
+     :fn (fn [tokenSet]
+           (let [theme (u/locate-token-theme file-id id)]
+             (st/emit! (dwtl/update-token-theme id (ctob/disable-set theme (obj/get tokenSet :name))))))}
 
     :duplicate
     (fn []
@@ -324,7 +347,8 @@
 
 (defn tokens-catalog
   [plugin-id file-id]
-  (obj/reify {:name "TokensCatalog"}
+  (obj/reify {:name "TokensCatalog"
+              :wrap u/wrap-errors}
     :$plugin {:enumerable false :get (constantly plugin-id)}
     :$id {:enumerable false :get (constantly file-id)}
 
@@ -333,10 +357,10 @@
      :enumerable false
      :get
      (fn [_]
-       (let [file (u/locate-file file-id)
-             tokens-lib (->> file :data :tokens-lib)
-             themes (->> (ctob/get-themes tokens-lib)
-                         (remove #(= (:id %) uuid/zero)))]
+       (let [tokens-lib (u/locate-tokens-lib file-id)
+             themes (when tokens-lib
+                      (->> (ctob/get-themes tokens-lib)
+                           (remove #(= (:id %) uuid/zero))))]
          (apply array (map #(token-theme-proxy plugin-id file-id (ctob/get-id %)) themes))))}
 
     :sets
@@ -344,58 +368,47 @@
      :enumerable false
      :get
      (fn [_]
-       (let [file (u/locate-file file-id)
-             tokens-lib (->> file :data :tokens-lib)
-             sets (ctob/get-sets tokens-lib)]
+       (let [tokens-lib (u/locate-tokens-lib file-id)
+             sets (when tokens-lib
+                    (ctob/get-sets tokens-lib))]
          (apply array (map #(token-set-proxy plugin-id file-id (ctob/get-id %)) sets))))}
 
     :addTheme
-    (fn [group name]
-      (cond
-        (not (string? group))
-        (u/display-not-valid :addThemeGroup group)
-
-        (not (string? name))
-        (u/display-not-valid :addThemeName name)
-
-        :else
-        (let [theme (ctob/make-token-theme {:group group
-                                            :name name})]
-          (st/emit! (dwtl/create-token-theme theme))
-          (token-theme-proxy plugin-id file-id (:id theme)))))
+    {:schema (fn [attrs]
+               [:tuple (-> (sm/schema (cfo/make-token-theme-schema
+                                       (u/locate-tokens-lib file-id)
+                                       (or (obj/get attrs "group") "")
+                                       (or (obj/get attrs "name") "")
+                                       nil))
+                           (sm/dissoc-key :id))]) ;; We don't allow plugins to set the id
+     :fn (fn [attrs]
+           (let [theme (ctob/make-token-theme attrs)]
+             (st/emit! (dwtl/create-token-theme theme))
+             (token-theme-proxy plugin-id file-id (:id theme))))}
 
     :addSet
-    (fn [name]
-      (cond
-        (not (string? name))
-        (u/display-not-valid :addSetName name)
+    {:schema [:tuple (-> (sm/schema (cfo/make-token-set-schema
+                                     (u/locate-tokens-lib file-id)
+                                     nil))
+                         (sm/dissoc-key :id))] ;; We don't allow plugins to set the id
 
-        :else
-        (let [set (ctob/make-token-set {:name name})]
-          (st/emit! (dwtl/create-token-set set))
-          (token-set-proxy plugin-id file-id (:id set)))))
+     :fn (fn [attrs]
+           (let [attrs (update attrs :name ctob/normalize-set-name)
+                 set (ctob/make-token-set attrs)]
+             (st/emit! (dwtl/create-token-set set))
+             (token-set-proxy plugin-id file-id (ctob/get-id set))))}
 
     :getThemeById
-    (fn [theme-id]
-      (cond
-        (not (string? theme-id))
-        (u/display-not-valid :getThemeById theme-id)
-
-        :else
-        (let [theme-id (uuid/parse theme-id)
-              theme (u/locate-token-theme file-id theme-id)]
-          (when (some? theme)
-            (token-theme-proxy plugin-id file-id theme-id)))))
+    {:schema [:tuple ::sm/uuid]
+     :fn (fn [theme-id]
+           (let [theme (u/locate-token-theme file-id theme-id)]
+             (when (some? theme)
+               (token-theme-proxy plugin-id file-id theme-id))))}
 
     :getSetById
-    (fn [set-id]
-      (cond
-        (not (string? set-id))
-        (u/display-not-valid :getSetById set-id)
-
-        :else
-        (let [set-id (uuid/parse set-id)
-              set (u/locate-token-set file-id set-id)]
-          (when (some? set)
-            (token-set-proxy plugin-id file-id set-id)))))))
+    {:schema [:tuple ::sm/uuid]
+     :fn (fn [set-id]
+           (let [set (u/locate-token-set file-id set-id)]
+             (when (some? set)
+               (token-set-proxy plugin-id file-id set-id))))}))
 

frontend/src/app/plugins/utils.cljs

@@ -9,12 +9,15 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.json :as json]
+   [app.common.schema :as sm]
    [app.common.types.container :as ctn]
    [app.common.types.file :as ctf]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.helpers :as dsh]
    [app.main.store :as st]
-   [app.util.object :as obj]))
+   [app.util.object :as obj]
+   [cuerdas.core :as str]))
 
 (defn locate-file
   [id]
@@ -61,17 +64,20 @@
 (defn locate-token-theme
   [file-id id]
   (let [tokens-lib (locate-tokens-lib file-id)]
-    (ctob/get-theme tokens-lib id)))
+    (when (some? tokens-lib)
+      (ctob/get-theme tokens-lib id))))
 
 (defn locate-token-set
   [file-id set-id]
   (let [tokens-lib (locate-tokens-lib file-id)]
-    (ctob/get-set tokens-lib set-id)))
+    (when (some? tokens-lib)
+      (ctob/get-set tokens-lib set-id))))
 
 (defn locate-token
   [file-id set-id token-id]
   (let [tokens-lib (locate-tokens-lib file-id)]
-    (ctob/get-token tokens-lib set-id token-id)))
+    (when (some? tokens-lib)
+      (ctob/get-token tokens-lib set-id token-id))))
 
 (defn locate-presence
   [session-id]
@@ -218,7 +224,8 @@
 
 (defn display-not-valid
   [code value]
-  (.error js/console (dm/str "[PENPOT PLUGIN] Value not valid: " value ". Code: " code)))
+  (.error js/console (dm/str "[PENPOT PLUGIN] Value not valid: " value ". Code: " code))
+  nil)
 
 (defn reject-not-valid
   [reject code value]
@@ -226,7 +233,44 @@
     (.error js/console msg)
     (reject msg)))
 
+(defn coerce
+  "Decodes a javascript object into clj and check against schema. If schema validation fails,
+   displays a not-valid message with the code and hint provided and returns nil."
+  [attrs schema code hint]
+  (let [decoder   (sm/decoder schema sm/json-transformer)
+        explainer (sm/explainer schema)
+        attrs     (-> attrs json/->clj decoder)]
+    (if-let [explain (explainer attrs)]
+      (display-not-valid code (str hint " " (sm/humanize-explain explain)))
+      attrs)))
+
+(defn coerce-1
+  "Checks a single javascript value against schema. If schema validation fails,
+   displays a not-valid message with the code and hint provided and returns nil."
+  [value schema code hint]
+  (let [errors (sm/validation-errors value schema)]
+    (if (d/not-empty? errors)
+      (display-not-valid code (str hint " " (str/join ", " errors)))
+      value)))
+
 (defn mixed-value
   [values]
   (let [s (set values)]
     (if (= (count s) 1) (first s) "mixed")))
+
+(defn wrap-errors
+  "Function wrapper to be used in plugin proxies methods to handle errors.
+   When an exception is thrown, a readable error message is output to the console
+   and the exception is captured."
+  [f]
+  (fn []
+    (let [args (js-arguments)]
+      (try
+        (.apply f nil args)
+        (catch :default cause
+          (display-not-valid (ex-message cause) (obj/stringify args))
+          (if-let [explain (-> cause ex-data ::sm/explain)]
+            (println (sm/humanize-explain explain))
+            (js/console.log (ex-data cause)))
+          (js/console.log (.-stack cause))
+          nil)))))

frontend/src/app/render_wasm/api.cljs

@@ -190,11 +190,13 @@
 (defn update-text-rect!
   [id]
   (when wasm/context-initialized?
-    (mw/emit!
-     {:cmd :index/update-text-rect
-      :page-id (:current-page-id @st/state)
-      :shape-id id
-      :dimensions (get-text-dimensions id)})))
+    (let [dimensions (get-text-dimensions id)
+          page-id (:current-page-id @st/state)]
+      (mw/emit!
+       {:cmd :index/update-text-rect
+        :page-id page-id
+        :shape-id id
+        :dimensions dimensions}))))
 
 
 (defn- ensure-text-content
@@ -865,12 +867,12 @@
 
   (set-shape-vertical-align (get content :vertical-align))
 
-  (let [fonts         (f/get-content-fonts content)
+  (let [fonts          (f/get-content-fonts content)
         fallback-fonts (fonts-from-text-content content true)
-        all-fonts (concat fonts fallback-fonts)
-        result (f/store-fonts shape-id all-fonts)]
+        all-fonts      (concat fonts fallback-fonts)
+        result         (f/store-fonts all-fonts)]
     (f/load-fallback-fonts-for-editor! fallback-fonts)
-    (h/call wasm/internal-module "_update_shape_text_layout")
+    (f/update-text-layout shape-id)
     result))
 
 (defn set-shape-grow-type
@@ -1564,7 +1566,7 @@
                        :text-decoration (get element :text-decoration)
                        :letter-spacing  (get element :letter-spacing)
                        :font-style      (get element :font-style)
-                       :fills           (get element :fills)
+                       :fills           (d/nilv (get element :fills) [{:fill-color "#000000"}])
                        :text            text}))))))]
       (mem/free)
 

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

@@ -97,9 +97,8 @@
 
 ;; IMPORTANT: Only TTF fonts can be stored.
 (defn- store-font-buffer
-  [shape-id font-data font-array-buffer emoji? fallback?]
+  [font-data font-array-buffer emoji? fallback?]
   (let [font-id-buffer  (:family-id-buffer font-data)
-        shape-id-buffer (uuid/get-u32 shape-id)
         size (.-byteLength font-array-buffer)
         ptr  (h/call wasm/internal-module "_alloc_bytes" size)
         heap (gobj/get ^js wasm/internal-module "HEAPU8")
@@ -107,10 +106,6 @@
 
     (.set mem (js/Uint8Array. font-array-buffer))
     (h/call wasm/internal-module "_store_font"
-            (aget shape-id-buffer 0)
-            (aget shape-id-buffer 1)
-            (aget shape-id-buffer 2)
-            (aget shape-id-buffer 3)
             (aget font-id-buffer 0)
             (aget font-id-buffer 1)
             (aget font-id-buffer 2)
@@ -119,24 +114,31 @@
             (:style font-data)
             emoji?
             fallback?)
-
-    (update-text-layout shape-id)
-
     true))
 
+;; This variable will store the fonts that are currently being fetched
+;; so we don't fetch more than once the same font
+(def fetching (atom #{}))
+
 (defn- fetch-font
-  [shape-id font-data font-url emoji? fallback?]
-  {:key font-url
-   :callback #(->> (http/send! {:method :get
-                                :uri font-url
-                                :response-type :buffer})
-                   (rx/map (fn [{:keys [body]}]
-                             (store-font-buffer shape-id font-data body emoji? fallback?)))
-                   (rx/catch (fn [cause]
-                               (log/error :hint "Could not fetch font"
-                                          :font-url font-url
-                                          :cause cause)
-                               (rx/empty))))})
+  [font-data font-url emoji? fallback?]
+  (when-not (contains? @fetching font-url)
+    (swap! fetching conj font-url)
+    {:key font-url
+     :callback
+     (fn []
+       (->> (http/send! {:method :get
+                         :uri font-url
+                         :response-type :buffer})
+            (rx/map (fn [{:keys [body]}]
+                      (swap! fetching disj font-url)
+                      (store-font-buffer font-data body emoji? fallback?)))
+            (rx/catch (fn [cause]
+                        (swap! fetching disj font-url)
+                        (log/error :hint "Could not fetch font"
+                                   :font-url font-url
+                                   :cause cause)
+                        (rx/empty)))))}))
 
 (defn- google-font-ttf-url
   [font-id font-variant-id font-weight font-style]
@@ -155,22 +157,31 @@
     :builtin
     (dm/str (u/join cf/public-uri "fonts/" asset-id))))
 
+(defn font-stored?
+  [font-data emoji?]
+  (when-let [id-buffer (uuid/get-u32 (:wasm-id font-data))]
+    (not= 0 (h/call wasm/internal-module "_is_font_uploaded"
+                    (aget id-buffer 0)
+                    (aget id-buffer 1)
+                    (aget id-buffer 2)
+                    (aget id-buffer 3)
+                    (:weight font-data)
+                    (:style font-data)
+                    emoji?))))
+
 (defn- store-font-id
-  [shape-id font-data asset-id emoji? fallback?]
+  [font-data asset-id emoji? fallback?]
   (when asset-id
-    (let [uri (font-id->ttf-url (:font-id font-data) asset-id (:font-variant-id font-data) (:weight font-data) (:style-name font-data))
+    (let [uri (font-id->ttf-url
+               (:font-id font-data) asset-id
+               (:font-variant-id font-data)
+               (:weight font-data)
+               (:style-name font-data))
           id-buffer (uuid/get-u32 (:wasm-id font-data))
           font-data (assoc font-data :family-id-buffer id-buffer)
-          font-stored? (not= 0 (h/call wasm/internal-module "_is_font_uploaded"
-                                       (aget id-buffer 0)
-                                       (aget id-buffer 1)
-                                       (aget id-buffer 2)
-                                       (aget id-buffer 3)
-                                       (:weight font-data)
-                                       (:style font-data)
-                                       emoji?))]
+          font-stored? (font-stored? font-data emoji?)]
       (when-not font-stored?
-        (fetch-font shape-id font-data uri emoji? fallback?)))))
+        (fetch-font font-data uri emoji? fallback?)))))
 
 (defn serialize-font-style
   [font-style]
@@ -280,8 +291,8 @@
     "regular"
     font-variant-id))
 
-(defn store-font
-  [shape-id font]
+(defn make-font-data
+  [font]
   (let [font-id (get font :font-id)
         font-variant-id (get font :font-variant-id)
         normalized-variant-id (when font-variant-id
@@ -301,14 +312,21 @@
                 (str/includes? raw-weight "italic") "italic"
                 :else font-style-fallback)
         variant-id (or (:id font-data) normalized-variant-id)
-        asset-id (font-id->asset-id font-id variant-id raw-weight style)
-        font-data {:wasm-id wasm-id
-                   :font-id font-id
-                   :font-variant-id variant-id
-                   :style (serialize-font-style style)
-                   :style-name style
-                   :weight weight}]
-    (store-font-id shape-id font-data asset-id emoji? fallback?)))
+        asset-id (font-id->asset-id font-id variant-id raw-weight style)]
+    {:wasm-id wasm-id
+     :font-id font-id
+     :font-variant-id variant-id
+     :style (serialize-font-style style)
+     :style-name style
+     :weight weight
+     :emoji? emoji?
+     :fallbck? fallback?
+     :asset-id asset-id}))
+
+(defn store-font
+  [font]
+  (let [{:keys [asset-id emoji? fallback?] :as font-data} (make-font-data font)]
+    (store-font-id font-data asset-id emoji? fallback?)))
 
 ;; FIXME: This is a temporary function to load the fallback fonts for the editor.
 ;; Once we render the editor content within wasm, we can remove this function.
@@ -341,8 +359,8 @@
           #{}))))
 
 (defn store-fonts
-  [shape-id fonts]
-  (keep (fn [font] (store-font shape-id font)) fonts))
+  [fonts]
+  (keep (fn [font] (store-font font)) fonts))
 
 (defn add-emoji-font
   [fonts]

frontend/src/app/util/i18n.cljs

@@ -8,6 +8,7 @@
   "A i18n foundation."
   (:require
    [app.common.data :as d]
+   [app.common.i18n]
    [app.common.logging :as log]
    [app.common.time :as ct]
    [app.config :as cf]
@@ -210,3 +211,7 @@
            (fn [_ _ pv cv]
              (when (not= pv cv)
                (ct/set-default-locale cv))))
+
+;; We set the real translation function in the common i18n namespace,
+;; so that when common code calls (tr ...) it uses this function.
+(set! app.common.i18n/tr tr)

frontend/src/app/util/object.cljc

@@ -106,6 +106,11 @@
           (identical? (.getPrototypeOf js/Object o)
                       (.-prototype js/Object)))))
 
+#?(:cljs
+   (defn stringify
+     [obj]
+     (js/JSON.stringify obj)))
+
 ;; EXPERIMENTAL: unsafe, does not checks and not validates the input,
 ;; should be improved over time, for now it works for define a class
 ;; extending js/Error that is more than enought for a first, quick and
@@ -163,14 +168,14 @@
            bindings
            (->> properties
                 (mapcat (fn [params]
-                          (let [pname    (c/get params :name)
-                                get-expr (c/get params :get)
-                                set-expr (c/get params :set)
-                                fn-expr  (c/get params :fn)
-                                schema-n (c/get params :schema)
-                                wrap     (c/get params :wrap)
-                                schema-1 (c/get params :schema-1)
-                                this?    (c/get params :this false)
+                          (let [pname         (c/get params :name)
+                                get-expr      (c/get params :get)
+                                set-expr      (c/get params :set)
+                                fn-expr       (c/get params :fn)
+                                schema-n      (c/get params :schema)
+                                wrap          (c/get params :wrap)
+                                schema-1      (c/get params :schema-1)
+                                this?         (c/get params :this false)
 
                                 decode-expr
                                 (c/get params :decode/fn)
@@ -253,7 +258,11 @@
                                                             `(~decode-sym ~val-sym)
                                                             `(~decode-sym ~val-sym ~decode-options))
                                               val-sym     `(~coercer-sym ~val-sym)]
-                                             [])]
+                                             [])
+
+                                         ~fn-sym ~(if wrap
+                                                    `(~wrap-sym ~fn-sym)
+                                                    fn-sym)]
 
                                      ~(if this?
                                         `(.call ~fn-sym ~this-sym ~this-sym ~val-sym)

frontend/test/frontend_tests/tokens/helpers/tokens.cljs

@@ -6,7 +6,7 @@
 
 (ns frontend-tests.tokens.helpers.tokens
   (:require
-   [app.common.files.tokens :as cft]
+   [app.common.files.tokens :as cfo]
    [app.common.test-helpers.ids-map :as thi]
    [app.common.types.tokens-lib :as ctob]))
 
@@ -20,7 +20,7 @@
   (let [first-page-id (get-in file [:data :pages 0])
         shape-id (thi/id shape-label)
         token (get-token file token-label)
-        applied-attributes (cft/attributes-map attributes token)]
+        applied-attributes (cfo/attributes-map attributes token)]
     (update-in file [:data
                      :pages-index first-page-id
                      :objects shape-id

frontend/test/frontend_tests/tokens/logic/token_data_test.cljs

@@ -57,8 +57,7 @@
           store      (ths/setup-store file)
           tokens-lib (toht/get-tokens-lib file)
           set-a      (ctob/get-set-by-name tokens-lib "Set A")
-          events     [(dwtl/update-token-set (ctob/rename set-a "Set A updated")
-                                             "Set A updated")]]
+          events     [(dwtl/rename-token-set set-a "Set A updated")]]
 
       (tohs/run-store-async
        store done events

mcp/packages/plugin/public/manifest.json

@@ -1,6 +1,7 @@
 {
     "name": "Penpot MCP Plugin",
     "code": "plugin.js",
+    "version": 2,
     "description": "This plugin enables interaction with the Penpot MCP server",
     "permissions": ["content:read", "content:write", "library:read", "library:write", "comment:read", "comment:write"]
 }

plugins/README.md

@@ -19,7 +19,7 @@ In the `apps` folder you'll find some examples that use the libraries mentioned
 - example-styles: to run this example you should run
 
 ```
-npm run start:styles-example
+pnpm run start:styles-example
 ```
 
 Open in your browser: `http://localhost:4202/`
@@ -28,8 +28,8 @@ Open in your browser: `http://localhost:4202/`
 
 This guide will help you launch a Penpot plugin from the penpot-plugins repository. Before proceeding, ensure that you have Penpot running locally by following the [setup instructions](https://help.penpot.app/technical-guide/developer/devenv/).
 
-In the terminal, navigate to the **penpot-plugins** repository and run `npm install` to install the required dependencies.
-Then, run `npm start` to launch the plugins wrapper.
+In the terminal, navigate to the **penpot-plugins** repository and run `pnpm install` to install the required dependencies.
+Then, run `pnpm run start` to launch the plugins wrapper.
 
 After installing the dependencies, choose a plugin to launch. You can either run one of the provided examples or create your own (see "Creating a plugin from scratch" below).
 To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
@@ -38,7 +38,7 @@ For instance, to launch the Contrast plugin, use the following command:
 
 ```
 // for the contrast plugin
-npm run start:plugin:contrast
+pnpm run start:plugin:contrast
 ```
 
 Finally, open in your browser the specific port. In this specific example would be `http://localhost:4302`
@@ -47,23 +47,24 @@ A table listing the available plugins and their corresponding startup commands i
 
 ## Sample plugins
 
-| Plugin                  | Description                                                 | PORT | Start command                         | Manifest URL                               |
-| ----------------------- | ----------------------------------------------------------- | ---- | ------------------------------------- | ------------------------------------------ |
-| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | npm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
-| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | npm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
-| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | npm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
-| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | npm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
-| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | npm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
-| table-plugin            | Create or import table                                      | 4306 | npm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
-| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | npm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
-| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | npm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
+| Plugin                  | Description                                                 | PORT | Start command                          | Manifest URL                               |
+| ----------------------- | ----------------------------------------------------------- | ---- | -------------------------------------- | ------------------------------------------ |
+| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | pnpm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
+| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | pnpm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
+| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | pnpm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
+| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | pnpm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
+| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | pnpm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
+| table-plugin            | Create or import table                                      | 4306 | pnpm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
+| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | pnpm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
+| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | pnpm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
+| poc-tokens-plugin       | Sandbox plugin to test tokens functionality                 | 4309 | pnpm run start:plugin:poc-tokens       | http://localhost:4309/assets/manifest.json |
 
 ## Web Apps
 
-| App             | Description                                                       | PORT | Start command                    | URL                    |
-| --------------- | ----------------------------------------------------------------- | ---- | -------------------------------- | ---------------------- |
-| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | npm run start:app:runtime        |                        |
-| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | npm run start:app:styles-example | http://localhost:4201/ |
+| App             | Description                                                       | PORT | Start command                     | URL                    |
+| --------------- | ----------------------------------------------------------------- | ---- | --------------------------------- | ---------------------- |
+| plugins-runtime | Runtime for the plugins subsystem                                 | 4200 | pnpm run start:app:runtime        |                        |
+| example-styles  | Showcase of some of the Penpot styles that can be used in plugins | 4201 | pnpm run start:app:styles-example | http://localhost:4201/ |
 
 ## Creating a plugin from scratch
 

plugins/apps/poc-tokens-plugin/eslint.config.js

@@ -0,0 +1,51 @@
+import baseConfig from '../../eslint.config.js';
+import { compat } from '../../eslint.base.config.js';
+
+export default [
+  ...baseConfig,
+  ...compat
+    .config({
+      extends: [
+        'plugin:@nx/angular',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts'],
+      rules: {
+        '@angular-eslint/directive-selector': [
+          'error',
+          {
+            type: 'attribute',
+            prefix: 'app',
+            style: 'camelCase',
+          },
+        ],
+        '@angular-eslint/component-selector': [
+          'error',
+          {
+            type: 'element',
+            prefix: 'app',
+            style: 'kebab-case',
+          },
+        ],
+      },
+    })),
+  ...compat
+    .config({ extends: ['plugin:@nx/angular-template'] })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.html'],
+      rules: {},
+    })),
+  { ignores: ['**/assets/*.js'] },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.*?.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+];

plugins/apps/poc-tokens-plugin/project.json

@@ -0,0 +1,79 @@
+{
+  "name": "poc-tokens-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/poc-tokens-plugin/src",
+  "tags": ["type:plugin"],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/poc-tokens-plugin",
+        "index": "apps/poc-tokens-plugin/src/index.html",
+        "browser": "apps/poc-tokens-plugin/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/poc-tokens-plugin/tsconfig.app.json",
+        "assets": [
+          "apps/poc-tokens-plugin/src/favicon.ico",
+          "apps/poc-tokens-plugin/src/assets"
+        ],
+        "styles": [
+          "libs/plugins-styles/src/lib/styles.css",
+          "apps/poc-tokens-plugin/src/styles.css"
+        ],
+        "scripts": [],
+        "optimization": {
+          "scripts": true,
+          "styles": true,
+          "fonts": false
+        }
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production",
+      "dependsOn": ["buildPlugin"]
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "poc-tokens-plugin:build:production"
+        },
+        "development": {
+          "buildTarget": "poc-tokens-plugin:build:development",
+          "port": 4309,
+          "host": "0.0.0.0"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "poc-tokens-plugin:build"
+      }
+    }
+  }
+}

plugins/apps/poc-tokens-plugin/src/app/app.component.css

@@ -0,0 +1,127 @@
+/* @import "@penpot/plugin-styles/styles.css"; */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.title-l {
+  margin: var(--spacing-16) 0;
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  flex-grow: 1;
+  margin-block-end: var(--spacing-16);
+}
+
+.panels {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0 var(--spacing-8);
+}
+
+.panel {
+  padding: var(--spacing-8);
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.panel:not(:first-child) {
+  border-block-start: 1px solid var(--df-secondary);
+  padding-block-start: var(--spacing-16);
+}
+
+.panel-heading,
+.token-group {
+  display: flex;
+  flex-direction: row;
+  padding-inline-end: var(--spacing-8);
+}
+
+.panel-heading p,
+.token-group span {
+  flex-grow: 1;
+}
+
+.panel-heading button,
+.token-group button {
+  background: none;
+  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
+}
+
+.panel-heading button:focus,
+.token-group button:focus {
+  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
+}
+
+.panel-item button {
+  opacity: 0;
+  margin-inline-end: var(--spacing-8);
+  padding: var(--spacing-4) calc(var(--spacing-12) / 2);
+}
+
+.panel-item button:hover {
+  opacity: 1;
+}
+
+.panel-item button:focus {
+  opacity: 1;
+  padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
+}
+
+.panel ul {
+  /* flex-grow: 1; */
+  overflow-y: auto;
+  padding-inline-end: var(--spacing-8);
+}
+
+.panel-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.panel-item span {
+  flex-grow: 1;
+}
+
+.set-item {
+  cursor: pointer;
+}
+
+.set-item.selected {
+  background-color: var(--db-quaternary);
+}
+
+.set-item:hover {
+  color: var(--da-primary);
+  background-color: var(--db-secondary);
+}
+
+.token-group:not(:first-child) {
+  margin-top: var(--spacing-8);
+}
+
+.token-group {
+  border-block-end: 1px solid var(--df-secondary);
+  text-transform: capitalize;
+}
+
+.token-item {
+  cursor: pointer;
+}
+
+.token-item:hover {
+  color: var(--da-primary);
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row-reverse;
+}

plugins/apps/poc-tokens-plugin/src/app/app.component.html

@@ -0,0 +1,144 @@
+<div class="container">
+  <p class="title-l">Design tokens plugin POC</p>
+
+  <div class="columns">
+    <div class="panels">
+      <div class="panel">
+        <div class="panel-heading">
+          <p class="headline-m">THEMES</p>
+          <button
+            type="button"
+            data-appearance="secondary"
+            (click)="addTheme()"
+          >
+            +
+          </button>
+        </div>
+
+        <ul data-handler="themes-list">
+          @for (theme of themes; track theme.id) {
+            <li class="body-m panel-item theme-item">
+              <span>{{ theme.group }} / {{ theme.name }}</span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="renameTheme(theme.id, theme.name)"
+              >
+                🖊️
+              </button>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="deleteTheme(theme.id)"
+              >
+                ❌
+              </button>
+              <div class="checkbox-container">
+                <input
+                  class="checkbox-input"
+                  type="checkbox"
+                  id="checkbox1"
+                  [checked]="isThemeActive(theme.id)"
+                  (change)="toggleTheme(theme.id)"
+                />
+              </div>
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div class="panel">
+        <div class="panel-heading">
+          <p class="headline-m">SETS</p>
+          <button type="button" data-appearance="secondary" (click)="addSet()">
+            +
+          </button>
+        </div>
+
+        <ul data-handler="sets-list">
+          @for (set of sets; track set.id) {
+            <li
+              class="body-m panel-item set-item"
+              [class.selected]="set.id === currentSetId"
+            >
+              <span (click)="loadTokens(set.id)">
+                {{ set.name }}
+              </span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="renameSet(set.id, set.name)"
+              >
+                🖊️
+              </button>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="deleteSet(set.id)"
+              >
+                ❌
+              </button>
+              <div class="checkbox-container">
+                <input
+                  class="checkbox-input"
+                  type="checkbox"
+                  id="checkbox1"
+                  [checked]="isSetActive(set.id)"
+                  (change)="toggleSet(set.id)"
+                />
+              </div>
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+    <div class="panels">
+      <div class="panel">
+        <p class="headline-m">TOKENS</p>
+
+        <ul data-handler="tokens-list">
+          @for (group of tokenGroups; track group[0]) {
+            <li class="body-m token-group">
+              <span>{{ group[0] }}</span>
+              <button
+                type="button"
+                data-appearance="secondary"
+                (click)="addToken(group[0])"
+              >
+                +
+              </button>
+            </li>
+            @for (token of group[1]; track token.id) {
+              <li
+                class="body-m panel-item token-item"
+                (click)="applyToken(token.id)"
+              >
+                <span>{{ token.name }}</span>
+                <button
+                  type="button"
+                  data-appearance="secondary"
+                  (click)="renameToken(token.id, token.name)"
+                >
+                  🖊️
+                </button>
+                <button
+                  type="button"
+                  data-appearance="secondary"
+                  (click)="deleteToken(token.id)"
+                >
+                  ❌
+                </button>
+              </li>
+            }
+          }
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="buttons">
+    <button type="button" data-appearance="primary" (click)="loadLibrary()">
+      Load
+    </button>
+  </div>
+</div>

plugins/apps/poc-tokens-plugin/src/app/app.component.ts

@@ -0,0 +1,290 @@
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { fromEvent, map, filter, take, merge } from 'rxjs';
+import { PluginMessageEvent, PluginUIEvent } from '../model';
+
+type TokenTheme = {
+  id: string;
+  name: string;
+  group: string;
+  description: string;
+  active: boolean;
+};
+
+type TokenSet = {
+  id: string;
+  name: string;
+  description: string;
+  active: boolean;
+};
+
+type Token = {
+  id: string;
+  name: string;
+  description: string;
+};
+
+type TokensGroup = [string, Token[]];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  host: {
+    '[attr.data-theme]': 'theme()',
+  },
+})
+export class AppComponent {
+  public route = inject(ActivatedRoute);
+
+  public messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(
+    window,
+    'message',
+  );
+
+  public initialTheme$ = this.route.queryParamMap.pipe(
+    map((params) => params.get('theme')),
+    filter((theme) => !!theme),
+    take(1),
+  );
+
+  public theme = toSignal(
+    merge(
+      this.initialTheme$,
+      this.messages$.pipe(
+        filter((event) => event.data.type === 'theme'),
+        map((event) => {
+          return event.data.content;
+        }),
+      ),
+    ),
+  );
+
+  public themes: TokenTheme[] = [];
+  public sets: TokenSet[] = [];
+  public tokenGroups: TokensGroup[] = [];
+  public currentSetId: string | undefined = undefined;
+
+  constructor() {
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'set-themes') {
+        this.#setThemes(event.data.themesData);
+      } else if (event.data.type === 'set-sets') {
+        this.#setSets(event.data.setsData);
+      } else if (event.data.type === 'set-tokens') {
+        this.#setTokens(event.data.tokenGroupsData);
+      }
+    });
+  }
+
+  loadLibrary() {
+    this.#sendMessage({ type: 'load-library' });
+  }
+
+  loadTokens(setId: string) {
+    this.currentSetId = setId;
+    this.#sendMessage({ type: 'load-tokens', setId });
+  }
+
+  addTheme() {
+    this.#sendMessage({
+      type: 'add-theme',
+      themeGroup: this.#randomString(),
+      themeName: this.#randomString(),
+    });
+  }
+
+  addSet() {
+    this.#sendMessage({ type: 'add-set', setName: this.#randomString() });
+  }
+
+  addToken(tokenType: string) {
+    let tokenValue;
+    switch (tokenType) {
+      case 'borderRadius':
+        tokenValue = '25';
+        break;
+      case 'shadow':
+        tokenValue = [
+          {
+            color: '#123456',
+            inset: 'false',
+            offsetX: '6',
+            offsetY: '6',
+            spread: '0',
+            blur: '4',
+          },
+        ];
+        break;
+      case 'color':
+        tokenValue = '#fabada';
+        break;
+      case 'dimension':
+        tokenValue = '100';
+        break;
+      case 'fontFamilies':
+        tokenValue = ['Source Sans Pro', 'Sans serif'];
+        break;
+      case 'fontSizes':
+        tokenValue = '24';
+        break;
+      case 'fontWeights':
+        tokenValue = 'bold';
+        break;
+      case 'letterSpacing':
+        tokenValue = '0.5';
+        break;
+      case 'number':
+        tokenValue = '33';
+        break;
+      case 'opacity':
+        tokenValue = '0.6';
+        break;
+      case 'rotation':
+        tokenValue = '45';
+        break;
+      case 'sizing':
+        tokenValue = '200';
+        break;
+      case 'spacing':
+        tokenValue = '16';
+        break;
+      case 'borderWidth':
+        tokenValue = '3';
+        break;
+      case 'textCase':
+        tokenValue = 'lowercase';
+        break;
+      case 'textDecoration':
+        tokenValue = 'underline';
+        break;
+      case 'typography':
+        tokenValue = {
+          fontFamilies: ['Acme', 'Arial', 'Sans Serif'],
+          fontSizes: '36',
+          letterSpacing: '0.8',
+          textCase: 'uppercase',
+          textDecoration: 'none',
+          fontWeights: '600',
+          lineHeight: '1.5',
+        };
+        break;
+    }
+
+    if (this.currentSetId && tokenValue) {
+      this.#sendMessage({
+        type: 'add-token',
+        setId: this.currentSetId,
+        tokenType,
+        tokenName: this.#randomString(),
+        tokenValue,
+      });
+    } else {
+      console.log('Invalid token type');
+    }
+  }
+
+  renameTheme(themeId: string, themeName: string) {
+    const newName = prompt('Rename theme', themeName);
+    if (newName && newName !== '') {
+      this.#sendMessage({ type: 'rename-theme', themeId, newName });
+    }
+  }
+
+  renameSet(setId: string, setName: string) {
+    const newName = prompt('Rename set', setName);
+    if (newName && newName !== '') {
+      this.#sendMessage({ type: 'rename-set', setId, newName });
+    }
+  }
+
+  renameToken(tokenId: string, tokenName: string) {
+    const newName = prompt('Rename token', tokenName);
+    if (this.currentSetId && newName && newName !== '') {
+      this.#sendMessage({
+        type: 'rename-token',
+        setId: this.currentSetId,
+        tokenId,
+        newName,
+      });
+    }
+  }
+
+  deleteTheme(themeId: string) {
+    this.#sendMessage({ type: 'delete-theme', themeId });
+  }
+
+  deleteSet(setId: string) {
+    this.#sendMessage({ type: 'delete-set', setId });
+  }
+
+  deleteToken(tokenId: string) {
+    if (this.currentSetId) {
+      this.#sendMessage({
+        type: 'delete-token',
+        setId: this.currentSetId,
+        tokenId,
+      });
+    }
+  }
+
+  isThemeActive(themeId: string) {
+    for (const theme of this.themes) {
+      if (theme.id === themeId) {
+        return theme.active;
+      }
+    }
+    return false;
+  }
+
+  toggleTheme(themeId: string) {
+    this.#sendMessage({ type: 'toggle-theme', themeId });
+  }
+
+  isSetActive(setId: string) {
+    for (const set of this.sets) {
+      if (set.id === setId) {
+        return set.active;
+      }
+    }
+    return false;
+  }
+
+  toggleSet(setId: string) {
+    this.#sendMessage({ type: 'toggle-set', setId });
+  }
+
+  applyToken(tokenId: string) {
+    if (this.currentSetId) {
+      this.#sendMessage({
+        type: 'apply-token',
+        setId: this.currentSetId,
+        tokenId,
+        // properties: ['strokeColor']   // Uncomment to choose attribute to apply
+      }); // (incompatible attributes will have no effect)
+    }
+  }
+
+  #sendMessage(message: PluginUIEvent) {
+    parent.postMessage(message, '*');
+  }
+
+  #setThemes(themes: TokenTheme[]) {
+    this.themes = themes;
+  }
+
+  #setSets(sets: TokenSet[]) {
+    this.sets = sets;
+  }
+
+  #setTokens(tokenGroups: TokensGroup[]) {
+    this.tokenGroups = tokenGroups;
+  }
+
+  #randomString() {
+    // Generate a big random number and convert it to string using base 36
+    // (the number of letters in the ascii alphabet)
+    return Math.floor(Math.random() * Date.now()).toString(36);
+  }
+}

plugins/apps/poc-tokens-plugin/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+  ],
+};

plugins/apps/poc-tokens-plugin/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

plugins/apps/poc-tokens-plugin/src/assets/CORS

@@ -0,0 +1 @@
+*

plugins/apps/poc-tokens-plugin/src/assets/_headers

@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *

plugins/apps/poc-tokens-plugin/src/assets/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Design tokens plugin POC",
+  "description": "This is a plugin to try Design Tokens in Penpot API",
+  "code": "/assets/plugin.js",
+  "permissions": [
+    "page:read",
+    "content:read",
+    "file:read",
+    "selection:read",
+    "content:write",
+    "library:read",
+    "library:write"
+  ]
+}

plugins/apps/poc-tokens-plugin/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular example plugin</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

plugins/apps/poc-tokens-plugin/src/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

plugins/apps/poc-tokens-plugin/src/model.ts

@@ -0,0 +1,112 @@
+import { TokenProperty } from '@penpot/plugin-types';
+
+/**
+ * This file contains the typescript interfaces for the plugin events.
+ */
+
+// Events sent from the ui to the plugin
+
+export interface LoadLibraryEvent {
+  type: 'load-library';
+}
+
+export interface LoadTokensEvent {
+  type: 'load-tokens';
+  setId: string;
+}
+
+export interface AddThemeEvent {
+  type: 'add-theme';
+  themeGroup: string;
+  themeName: string;
+}
+
+export interface AddSetEvent {
+  type: 'add-set';
+  setName: string;
+}
+
+export interface AddTokenEvent {
+  type: 'add-token';
+  setId: string;
+  tokenType: string;
+  tokenName: string;
+  tokenValue: unknown;
+}
+
+export interface RenameThemeEvent {
+  type: 'rename-theme';
+  themeId: string;
+  newName: string;
+}
+
+export interface RenameSetEvent {
+  type: 'rename-set';
+  setId: string;
+  newName: string;
+}
+
+export interface RenameTokenEvent {
+  type: 'rename-token';
+  setId: string;
+  tokenId: string;
+  newName: string;
+}
+
+export interface DeleteThemeEvent {
+  type: 'delete-theme';
+  themeId: string;
+}
+
+export interface DeleteSetEvent {
+  type: 'delete-set';
+  setId: string;
+}
+
+export interface DeleteTokenEvent {
+  type: 'delete-token';
+  setId: string;
+  tokenId: string;
+}
+
+export interface ToggleThemeEvent {
+  type: 'toggle-theme';
+  themeId: string;
+}
+
+export interface ToggleSetEvent {
+  type: 'toggle-set';
+  setId: string;
+}
+
+export interface ApplyTokenEvent {
+  type: 'apply-token';
+  setId: string;
+  tokenId: string;
+  properties?: TokenProperty[];
+}
+
+export type PluginUIEvent =
+  | LoadLibraryEvent
+  | LoadTokensEvent
+  | AddThemeEvent
+  | AddSetEvent
+  | AddTokenEvent
+  | RenameThemeEvent
+  | RenameSetEvent
+  | RenameTokenEvent
+  | DeleteThemeEvent
+  | DeleteSetEvent
+  | DeleteTokenEvent
+  | ToggleThemeEvent
+  | ToggleSetEvent
+  | ApplyTokenEvent;
+
+// Events sent from the plugin to the ui
+
+export interface ThemePluginEvent {
+  type: 'theme';
+  content: string;
+}
+
+export type PluginMessageEvent = ThemePluginEvent;

plugins/apps/poc-tokens-plugin/src/plugin.ts

@@ -0,0 +1,262 @@
+import type { PluginMessageEvent, PluginUIEvent } from './model.js';
+import {
+  TokenType,
+  TokenProperty,
+  TokenValueString,
+} from '@penpot/plugin-types';
+
+penpot.ui.open('Design Tokens test', `?theme=${penpot.theme}`, {
+  width: 1000,
+  height: 800,
+});
+
+penpot.on('themechange', (theme) => {
+  sendMessage({ type: 'theme', content: theme });
+});
+
+penpot.ui.onMessage<PluginUIEvent>(async (message) => {
+  if (message.type === 'load-library') {
+    loadLibrary();
+  } else if (message.type === 'load-tokens') {
+    loadTokens(message.setId);
+  } else if (message.type === 'add-theme') {
+    addTheme(message.themeGroup, message.themeName);
+  } else if (message.type === 'add-set') {
+    addSet(message.setName);
+  } else if (message.type === 'add-token') {
+    addToken(
+      message.setId,
+      message.tokenType,
+      message.tokenName,
+      message.tokenValue,
+    );
+  } else if (message.type === 'rename-theme') {
+    renameTheme(message.themeId, message.newName);
+  } else if (message.type === 'rename-set') {
+    renameSet(message.setId, message.newName);
+  } else if (message.type === 'rename-token') {
+    renameToken(message.setId, message.tokenId, message.newName);
+  } else if (message.type === 'delete-theme') {
+    deleteTheme(message.themeId);
+  } else if (message.type === 'delete-set') {
+    deleteSet(message.setId);
+  } else if (message.type === 'delete-token') {
+    deleteToken(message.setId, message.tokenId);
+  } else if (message.type === 'toggle-theme') {
+    toggleTheme(message.themeId);
+  } else if (message.type === 'toggle-set') {
+    toggleSet(message.setId);
+  } else if (message.type === 'apply-token') {
+    applyToken(message.setId, message.tokenId, message.properties);
+  }
+});
+
+function sendMessage(message: PluginMessageEvent) {
+  penpot.ui.sendMessage(message);
+}
+
+function loadLibrary() {
+  const tokensCatalog = penpot.library.local.tokens;
+
+  const themes = tokensCatalog.themes;
+
+  const themesData = themes.map((theme) => {
+    return {
+      id: theme.id,
+      group: theme.group,
+      name: theme.name,
+      active: theme.active,
+    };
+  });
+
+  penpot.ui.sendMessage({
+    source: 'penpot',
+    type: 'set-themes',
+    themesData,
+  });
+
+  const sets = tokensCatalog.sets;
+
+  const setsData = sets.map((set) => {
+    return {
+      id: set.id,
+      name: set.name,
+      active: set.active,
+    };
+  });
+
+  penpot.ui.sendMessage({
+    source: 'penpot',
+    type: 'set-sets',
+    setsData,
+  });
+}
+
+function loadTokens(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const tokensByType = set?.tokensByType;
+
+  const tokenGroupsData = [];
+  if (tokensByType) {
+    for (const group of tokensByType) {
+      const type = group[0];
+      const tokens = group[1];
+      tokenGroupsData.push([
+        type,
+        tokens.map((token) => {
+          return {
+            id: token.id,
+            name: token.name,
+            description: token.description,
+          };
+        }),
+      ]);
+    }
+
+    penpot.ui.sendMessage({
+      source: 'penpot',
+      type: 'set-tokens',
+      tokenGroupsData,
+    });
+  }
+}
+
+function addTheme(themeGroup: string, themeName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.addTheme({ group: themeGroup, name: themeName });
+  if (theme) {
+    loadLibrary();
+  }
+}
+
+function addSet(setName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.addSet({ name: setName });
+  if (set) {
+    loadLibrary();
+  }
+}
+
+function addToken(
+  setId: string,
+  tokenType: string,
+  tokenName: string,
+  tokenValue: unknown,
+) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.addToken({
+    type: tokenType as TokenType,
+    name: tokenName,
+    value: tokenValue as TokenValueString,
+  });
+  if (token) {
+    // TODO: remove this timeout when styleDictionary is replaced
+    // with tokenScript and the token validation is syncrhronous.
+    setTimeout(() => {
+      loadTokens(setId);
+    }, 0);
+  }
+}
+
+function renameTheme(themeId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.name = newName;
+    loadLibrary();
+  }
+}
+
+function renameSet(setId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.name = newName;
+    loadLibrary();
+  }
+}
+
+function renameToken(setId: string, tokenId: string, newName: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+  if (token) {
+    token.name = newName;
+    // TODO: remove this timeout when styleDictionary is replaced
+    // with tokenScript and the token validation is syncrhronous.
+    setTimeout(() => {
+      loadTokens(setId);
+    }, 0);
+  }
+}
+
+function deleteTheme(themeId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.remove();
+    loadLibrary();
+  }
+}
+
+function deleteSet(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.remove();
+    loadLibrary();
+  }
+}
+
+function deleteToken(setId: string, tokenId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+  if (token) {
+    token.remove();
+    loadTokens(setId);
+  }
+}
+
+function toggleTheme(themeId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const theme = tokensCatalog?.getThemeById(themeId);
+  if (theme) {
+    theme.toggleActive();
+    loadLibrary();
+  }
+}
+
+function toggleSet(setId: string) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  if (set) {
+    set.toggleActive();
+    loadLibrary();
+  }
+}
+
+function applyToken(
+  setId: string,
+  tokenId: string,
+  properties: TokenProperty[] | undefined,
+) {
+  const tokensCatalog = penpot.library.local.tokens;
+  const set = tokensCatalog?.getSetById(setId);
+  const token = set?.getTokenById(tokenId);
+
+  if (token) {
+    token.applyToSelected(properties);
+  }
+
+  // Alternatve way
+  //
+  // const selection = penpot.selection;
+  // if (token && selection) {
+  //   for (const shape of selection) {
+  //     shape.applyToken(token, properties);
+  //   }
+  // }
+}

plugins/apps/poc-tokens-plugin/src/styles.css

@@ -0,0 +1,23 @@
+/* @import "@penpot/plugin-styles/styles.css"; */
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  line-height: 1.5;
+  padding: 10px;
+}
+
+ul {
+  margin-block-start: var(--spacing-12);
+}
+
+.title-l {
+  text-align: center;
+}
+
+.headline-l {
+  margin-block-start: var(--spacing-8);
+}

plugins/apps/poc-tokens-plugin/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
+}

plugins/apps/poc-tokens-plugin/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}

plugins/apps/poc-tokens-plugin/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    },
+    {
+      "path": "./tsconfig.plugin.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

plugins/apps/poc-tokens-plugin/tsconfig.plugin.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "files": ["src/plugin.ts"],
+  "include": ["../../libs/plugin-types/index.d.ts"]
+}

plugins/package.json

@@ -16,6 +16,7 @@
     "start:plugin:table": "nx run table-plugin:init",
     "start:plugin:renamelayers": "nx run rename-layers-plugin:init",
     "start:plugin:colors-to-tokens": "nx run colors-to-tokens-plugin:init",
+    "start:plugin:poc-tokens": "nx run poc-tokens-plugin:init",
     "build": "nx build plugins-runtime --emptyOutDir=true",
     "build:plugins": "nx run-many -t build --parallel -p tag:type:plugin --exclude=poc-state-plugin",
     "build:styles-example": "nx run example-styles:build",

render-wasm/src/main.rs

@@ -346,6 +346,14 @@ pub extern "C" fn use_shape(a: u32, b: u32, c: u32, d: u32) {
     });
 }
 
+#[no_mangle]
+pub extern "C" fn touch_shape(a: u32, b: u32, c: u32, d: u32) {
+    with_state_mut!(state, {
+        let shape_id = uuid_from_u32_quartet(a, b, c, d);
+        state.touch_shape(shape_id);
+    });
+}
+
 #[no_mangle]
 pub extern "C" fn set_parent(a: u32, b: u32, c: u32, d: u32) {
     with_state_mut!(state, {

render-wasm/src/render/grid_layout.rs

@@ -1,21 +1,30 @@
 use skia_safe::{self as skia};
 
-use crate::math::Rect;
 use crate::shapes::modifiers::grid_layout::grid_cell_data;
 use crate::shapes::Shape;
 use crate::state::ShapesPoolRef;
 
 pub fn render_overlay(zoom: f32, canvas: &skia::Canvas, shape: &Shape, shapes: ShapesPoolRef) {
-    let cells = grid_cell_data(shape, shapes, true);
+    let cells: Vec<crate::shapes::grid_layout::CellData<'_>> = grid_cell_data(shape, shapes, true);
+    let bounds = shape.bounds();
 
     let mut paint = skia::Paint::default();
     paint.set_style(skia::PaintStyle::Stroke);
     paint.set_color(skia::Color::from_rgb(255, 111, 224));
+    paint.set_anti_alias(shape.should_use_antialias(zoom));
 
     paint.set_stroke_width(1.0 / zoom);
 
     for cell in cells.iter() {
-        let rect = Rect::from_xywh(cell.anchor.x, cell.anchor.y, cell.width, cell.height);
-        canvas.draw_rect(rect, &paint);
+        let hv = bounds.hv(cell.width);
+        let vv = bounds.vv(cell.height);
+        let points = [
+            cell.anchor,
+            cell.anchor + hv,
+            cell.anchor + hv + vv,
+            cell.anchor + vv,
+        ];
+        let polygon = skia::Path::polygon(&points, true, None, None);
+        canvas.draw_path(&polygon, &paint);
     }
 }

render-wasm/src/render/ui.rs

@@ -2,6 +2,7 @@ use skia_safe::{self as skia, Color4f};
 
 use super::{RenderState, ShapesPoolRef, SurfaceId};
 use crate::render::grid_layout;
+use crate::shapes::{Layout, Type};
 
 pub fn render(render_state: &mut RenderState, shapes: ShapesPoolRef) {
     let canvas = render_state.surfaces.canvas(SurfaceId::UI);
@@ -18,12 +19,37 @@ pub fn render(render_state: &mut RenderState, shapes: ShapesPoolRef) {
 
     let canvas = render_state.surfaces.canvas(SurfaceId::UI);
 
-    if let Some(id) = render_state.show_grid {
+    let show_grid_id = render_state.show_grid;
+
+    if let Some(id) = show_grid_id {
         if let Some(shape) = shapes.get(&id) {
             grid_layout::render_overlay(zoom, canvas, shape, shapes);
         }
     }
 
+    // Render overlays for empty grid frames
+    for shape in shapes.iter() {
+        if shape.id.is_nil() || !shape.children.is_empty() {
+            continue;
+        }
+
+        if show_grid_id == Some(shape.id) {
+            continue;
+        }
+
+        let Type::Frame(frame) = &shape.shape_type else {
+            continue;
+        };
+
+        if !matches!(frame.layout, Some(Layout::GridLayout(_, _))) {
+            continue;
+        }
+
+        if let Some(shape) = shapes.get(&shape.id) {
+            grid_layout::render_overlay(zoom, canvas, shape, shapes);
+        }
+    }
+
     canvas.restore();
     render_state.surfaces.draw_into(
         SurfaceId::UI,

render-wasm/src/shapes.rs

@@ -1074,6 +1074,10 @@ impl Shape {
         self.children.first()
     }
 
+    pub fn children_count(&self) -> usize {
+        self.children_ids_iter(false).count()
+    }
+
     pub fn children_ids(&self, include_hidden: bool) -> Vec<Uuid> {
         if include_hidden {
             return self.children.iter().rev().copied().collect();

render-wasm/src/shapes/modifiers.rs

@@ -264,7 +264,7 @@ fn propagate_transform(
 
     // If this is a layout and we're only moving don't need to reflow
     if shape.has_layout() && is_resize {
-        entries.push_back(Modifier::reflow(shape.id));
+        entries.push_back(Modifier::reflow(shape.id, false));
     }
 
     if let Some(parent) = shape.parent_id.and_then(|id| shapes.get(&id)) {
@@ -272,7 +272,7 @@ fn propagate_transform(
         // if the current transformation is not a move propagation.
         // If it's a move propagation we don't need to reflow, the parent is already changed.
         if (parent.has_layout() || parent.is_group_like()) && (is_resize || !is_propagate) {
-            entries.push_back(Modifier::reflow(parent.id));
+            entries.push_back(Modifier::reflow(parent.id, false));
         }
     }
 }
@@ -282,7 +282,7 @@ fn propagate_reflow(
     state: &State,
     entries: &mut VecDeque<Modifier>,
     bounds: &mut HashMap<Uuid, Bounds>,
-    layout_reflows: &mut Vec<Uuid>,
+    layout_reflows: &mut HashSet<Uuid>,
     reflown: &mut HashSet<Uuid>,
     modifiers: &HashMap<Uuid, Matrix>,
 ) {
@@ -300,20 +300,7 @@ fn propagate_reflow(
         Type::Frame(Frame {
             layout: Some(_), ..
         }) => {
-            let mut skip_reflow = false;
-            if shape.is_layout_horizontal_fill() || shape.is_layout_vertical_fill() {
-                if let Some(parent_id) = shape.parent_id {
-                    if parent_id != Uuid::nil() && !reflown.contains(&parent_id) {
-                        // If this is a fill layout but the parent has not been reflown yet
-                        // we wait for the next iteration for reflow
-                        skip_reflow = true;
-                    }
-                }
-            }
-
-            if !skip_reflow {
-                layout_reflows.push(*id);
-            }
+            layout_reflows.insert(*id);
         }
         Type::Group(Group { masked: true }) => {
             let children_ids = shape.children_ids(true);
@@ -340,7 +327,7 @@ fn propagate_reflow(
 
     if let Some(parent) = shape.parent_id.and_then(|id| shapes.get(&id)) {
         if parent.has_layout() || parent.is_group_like() {
-            entries.push_back(Modifier::reflow(parent.id));
+            entries.push_back(Modifier::reflow(parent.id, false));
         }
     }
 }
@@ -382,19 +369,20 @@ pub fn propagate_modifiers(
     let mut entries: VecDeque<_> = modifiers
         .iter()
         .map(|entry| {
-            // If we receibe a identity matrix we force a reflow
+            // If we receive a identity matrix we force a reflow
             if math::identitish(&entry.transform) {
-                Modifier::Reflow(entry.id)
+                Modifier::Reflow(entry.id, false)
             } else {
                 Modifier::Transform(*entry)
             }
         })
         .collect();
 
+    let shapes = &state.shapes;
     let mut modifiers = HashMap::<Uuid, Matrix>::new();
     let mut bounds = HashMap::<Uuid, Bounds>::new();
     let mut reflown = HashSet::<Uuid>::new();
-    let mut layout_reflows = Vec::<Uuid>::new();
+    let mut layout_reflows = HashSet::<Uuid>::new();
 
     // We first propagate the transforms to the children and then after
     // recalculate the layouts. The layout can create further transforms that
@@ -412,25 +400,43 @@ pub fn propagate_modifiers(
                     &mut bounds,
                     &mut modifiers,
                 ),
-                Modifier::Reflow(id) => propagate_reflow(
-                    &id,
-                    state,
-                    &mut entries,
-                    &mut bounds,
-                    &mut layout_reflows,
-                    &mut reflown,
-                    &modifiers,
-                ),
+                Modifier::Reflow(id, force_reflow) => {
+                    if force_reflow {
+                        reflown.remove(&id);
+                    }
+
+                    propagate_reflow(
+                        &id,
+                        state,
+                        &mut entries,
+                        &mut bounds,
+                        &mut layout_reflows,
+                        &mut reflown,
+                        &modifiers,
+                    )
+                }
             }
         }
 
-        for id in layout_reflows.iter() {
+        let mut layout_reflows_vec: Vec<Uuid> = layout_reflows.into_iter().collect();
+
+        // We sort the reflows so they are process first the ones that are more
+        // deep in the tree structure. This way we can be sure that the children layouts
+        // are already reflowed.
+        layout_reflows_vec.sort_unstable_by(|id_a, id_b| {
+            let da = shapes.get_depth(id_a);
+            let db = shapes.get_depth(id_b);
+            db.cmp(&da)
+        });
+
+        let mut bounds_temp = bounds.clone();
+        for id in layout_reflows_vec.iter() {
             if reflown.contains(id) {
                 continue;
             }
-            reflow_shape(id, state, &mut reflown, &mut entries, &mut bounds);
+            reflow_shape(id, state, &mut reflown, &mut entries, &mut bounds_temp);
         }
-        layout_reflows = Vec::new();
+        layout_reflows = HashSet::new();
     }
 
     modifiers

render-wasm/src/shapes/modifiers/flex_layout.rs

@@ -61,6 +61,7 @@ impl LayoutAxis {
         layout_data: &LayoutData,
         flex_data: &FlexData,
     ) -> Self {
+        let num_child = shape.children_count();
         if flex_data.is_row() {
             Self {
                 main_size: layout_bounds.width(),
@@ -73,8 +74,8 @@ impl LayoutAxis {
                 padding_across_end: layout_data.padding_bottom,
                 gap_main: layout_data.column_gap,
                 gap_across: layout_data.row_gap,
-                is_auto_main: shape.is_layout_horizontal_auto(),
-                is_auto_across: shape.is_layout_vertical_auto(),
+                is_auto_main: num_child > 0 && shape.is_layout_horizontal_auto(),
+                is_auto_across: num_child > 0 && shape.is_layout_vertical_auto(),
             }
         } else {
             Self {
@@ -88,8 +89,8 @@ impl LayoutAxis {
                 padding_across_end: layout_data.padding_right,
                 gap_main: layout_data.row_gap,
                 gap_across: layout_data.column_gap,
-                is_auto_main: shape.is_layout_vertical_auto(),
-                is_auto_across: shape.is_layout_horizontal_auto(),
+                is_auto_main: num_child > 0 && shape.is_layout_vertical_auto(),
+                is_auto_across: num_child > 0 && shape.is_layout_horizontal_auto(),
             }
         }
     }
@@ -345,7 +346,10 @@ fn distribute_fill_across_space(layout_axis: &LayoutAxis, tracks: &mut [TrackDat
                 let mut size =
                     track.across_size - child.margin_across_start - child.margin_across_end;
                 size = size.clamp(child.min_across_size, child.max_across_size);
-                size = f32::min(size, layout_axis.across_space());
+
+                if !layout_axis.is_auto_across {
+                    size = f32::min(size, layout_axis.across_space());
+                }
                 child.across_size = size;
             }
         }
@@ -620,9 +624,12 @@ pub fn reflow_flex_layout(
 
             let mut transform = Matrix::default();
 
+            let mut force_reflow = false;
             if (new_width - child_bounds.width()).abs() > MIN_SIZE
                 || (new_height - child_bounds.height()).abs() > MIN_SIZE
             {
+                // When the child is fill we need to force a reflow
+                force_reflow = true;
                 transform.post_concat(&math::resize_matrix(
                     layout_bounds,
                     child_bounds,
@@ -637,7 +644,7 @@ pub fn reflow_flex_layout(
 
             result.push_back(Modifier::transform_propagate(child.id, transform));
             if child.has_layout() {
-                result.push_back(Modifier::reflow(child.id));
+                result.push_back(Modifier::reflow(child.id, force_reflow));
             }
 
             shape_anchor = next_anchor(

render-wasm/src/shapes/modifiers/grid_layout.rs

@@ -765,9 +765,12 @@ pub fn reflow_grid_layout(
 
         let mut transform = Matrix::default();
 
+        let mut force_reflow = false;
         if (new_width - child_bounds.width()).abs() > MIN_SIZE
             || (new_height - child_bounds.height()).abs() > MIN_SIZE
         {
+            // When the child is a fill it needs to be reflown
+            force_reflow = true;
             transform.post_concat(&math::resize_matrix(
                 &layout_bounds,
                 &child_bounds,
@@ -793,7 +796,7 @@ pub fn reflow_grid_layout(
 
         result.push_back(Modifier::transform_propagate(child.id, transform));
         if child.has_layout() {
-            result.push_back(Modifier::reflow(child.id));
+            result.push_back(Modifier::reflow(child.id, force_reflow));
         }
     }
 

render-wasm/src/shapes/transform.rs

@@ -8,7 +8,7 @@ use skia::Matrix;
 #[derive(PartialEq, Debug, Clone)]
 pub enum Modifier {
     Transform(TransformEntry),
-    Reflow(Uuid),
+    Reflow(Uuid, bool),
 }
 
 impl Modifier {
@@ -18,8 +18,8 @@ impl Modifier {
     pub fn parent(id: Uuid, transform: Matrix) -> Self {
         Modifier::Transform(TransformEntry::parent(id, transform))
     }
-    pub fn reflow(id: Uuid) -> Self {
-        Modifier::Reflow(id)
+    pub fn reflow(id: Uuid, force_reflow: bool) -> Self {
+        Modifier::Reflow(id, force_reflow)
     }
 }
 

render-wasm/src/state/shapes_pool.rs

@@ -177,6 +177,26 @@ impl ShapesPoolImpl {
         }
     }
 
+    // Given an id, returns the depth in the tree-shaped structure
+    // of shapes.
+    pub fn get_depth(&self, id: &Uuid) -> usize {
+        if id == &Uuid::nil() {
+            return 0;
+        }
+
+        let Some(idx) = self.uuid_to_idx.get(id) else {
+            return 0;
+        };
+
+        let shape = &self.shapes[*idx];
+
+        let Some(parent_id) = shape.parent_id else {
+            return 0;
+        };
+
+        self.get_depth(&parent_id) + 1
+    }
+
     #[allow(dead_code)]
     pub fn iter(&self) -> std::slice::Iter<'_, Shape> {
         self.shapes.iter()

render-wasm/src/wasm/fonts.rs

@@ -31,21 +31,17 @@ impl From<RawFontStyle> for FontStyle {
 
 #[no_mangle]
 pub extern "C" fn store_font(
-    a1: u32,
-    b1: u32,
-    c1: u32,
-    d1: u32,
-    a2: u32,
-    b2: u32,
-    c2: u32,
-    d2: u32,
+    a: u32,
+    b: u32,
+    c: u32,
+    d: u32,
     weight: u32,
     style: u8,
     is_emoji: bool,
     is_fallback: bool,
 ) {
     with_state_mut!(state, {
-        let id = uuid_from_u32_quartet(a2, b2, c2, d2);
+        let id = uuid_from_u32_quartet(a, b, c, d);
         let font_bytes = mem::bytes();
         let font_style = RawFontStyle::from(style);
 
@@ -57,9 +53,6 @@ pub extern "C" fn store_font(
                 .add(family, &font_bytes, is_emoji, is_fallback);
 
         mem::free_bytes();
-
-        let shape_id = uuid_from_u32_quartet(a1, b1, c1, d1);
-        state.touch_shape(shape_id);
     });
 }