From 1ed692230be9166c54e4a797dcab13251f994a2c Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 23 May 2024 09:24:12 +0200
Subject: [PATCH 01/11] Abstract functionality

---
 .../main/ui/workspace/sidebar/options/menus/measures.cljs  | 7 +++----
 frontend/src/app/main/ui/workspace/tokens/core.cljs        | 3 +++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 4a26f0f39..c74a688d8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -295,7 +295,7 @@
         (mf/use-fn
          (mf/deps ids change-radius border-radius-tokens)
          (fn [token]
-           (let [token-value (some-> token wtc/resolve-token-value)]
+           (let [token-value (wtc/maybe-resolve-token-value token)]
              (st/emit!
               (change-radius (fn [shape]
                                (-> (dt/unapply-token-id shape (wtc/token-attributes :border-radius))
@@ -305,11 +305,10 @@
         (mf/use-fn
          (mf/deps ids change-radius border-radius-tokens)
          (fn [value]
-           (let [token (when (map? value) value)
-                 token-value (some-> token wtc/resolve-token-value)]
+           (let [token-value (wtc/maybe-resolve-token-value value)]
              (st/emit!
               (change-radius (fn [shape]
-                               (-> (dt/maybe-apply-token-to-shape {:token token
+                               (-> (dt/maybe-apply-token-to-shape {:token (when token-value value)
                                                                    :shape shape
                                                                    :attributes (wtc/token-attributes :border-radius)})
                                    (ctsr/set-radius-1 (or token-value value)))))))))
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index 9f0405a62..0fe4707f7 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -37,6 +37,9 @@
     int-or-double
     (throw (ex-info (str "Implement token value resolve for " value) token))))
 
+(defn maybe-resolve-token-value [{:keys [value] :as token}]
+  (when value (resolve-token-value token)))
+
 (defn group-tokens-by-type
   "Groups tokens by their `:type` property."
   [tokens]

From e181065bda45de0042fd4c8b4e36dd4457c29c5d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 23 May 2024 09:29:17 +0200
Subject: [PATCH 02/11] Formatting

---
 .../workspace/sidebar/options/menus/measures.cljs | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index c74a688d8..b6162eee0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -99,12 +99,15 @@
         selection-parents     (mf/deref selection-parents-ref)
 
         tokens (mf/deref refs/workspace-tokens)
-        border-radius-tokens (mf/use-memo (mf/deps tokens) #(wtc/tokens-name-map-for-type :border-radius tokens))
-        border-radius-options (mf/use-memo (mf/deps shape border-radius-tokens)
-                                           #(map (fn [[_k {:keys [name] :as item}]]
-                                                   (cond-> (assoc item :label name)
-                                                     (wtc/token-applied? item shape (wtc/token-attributes :border-radius)) (assoc :selected? true)))
-                                                 border-radius-tokens))
+        border-radius-tokens (mf/use-memo
+                              (mf/deps tokens)
+                              #(wtc/tokens-name-map-for-type :border-radius tokens))
+        border-radius-options (mf/use-memo
+                               (mf/deps shape border-radius-tokens)
+                               #(map (fn [[_k {:keys [name] :as item}]]
+                                       (cond-> (assoc item :label name)
+                                         (wtc/token-applied? item shape (wtc/token-attributes :border-radius)) (assoc :selected? true)))
+                                     border-radius-tokens))
 
         flex-child?       (->> selection-parents (some ctl/flex-layout?))
         absolute?         (ctl/item-absolute? shape)

From 2dd994799c93a6042455642836d1f835d1b00cd8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Thu, 23 May 2024 09:41:16 +0200
Subject: [PATCH 03/11] Abstract API

---
 .../sidebar/options/menus/measures.cljs        | 18 +++++++++---------
 .../src/app/main/ui/workspace/tokens/core.cljs |  6 ++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index b6162eee0..84cb1afb9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -99,15 +99,15 @@
         selection-parents     (mf/deref selection-parents-ref)
 
         tokens (mf/deref refs/workspace-tokens)
-        border-radius-tokens (mf/use-memo
-                              (mf/deps tokens)
-                              #(wtc/tokens-name-map-for-type :border-radius tokens))
+        tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
+
+        border-radius-tokens (:border-radius tokens-by-type)
         border-radius-options (mf/use-memo
                                (mf/deps shape border-radius-tokens)
-                               #(map (fn [[_k {:keys [name] :as item}]]
-                                       (cond-> (assoc item :label name)
-                                         (wtc/token-applied? item shape (wtc/token-attributes :border-radius)) (assoc :selected? true)))
-                                     border-radius-tokens))
+                               #(wtc/tokens-name-map->select-options
+                                 {:shape shape
+                                  :tokens border-radius-tokens
+                                  :attributes (wtc/token-attributes :border-radius)}))
 
         flex-child?       (->> selection-parents (some ctl/flex-layout?))
         absolute?         (ctl/item-absolute? shape)
@@ -296,7 +296,7 @@
 
         on-border-radius-token-unapply
         (mf/use-fn
-         (mf/deps ids change-radius border-radius-tokens)
+         (mf/deps ids change-radius)
          (fn [token]
            (let [token-value (wtc/maybe-resolve-token-value token)]
              (st/emit!
@@ -306,7 +306,7 @@
 
         on-radius-1-change
         (mf/use-fn
-         (mf/deps ids change-radius border-radius-tokens)
+         (mf/deps ids change-radius)
          (fn [value]
            (let [token-value (wtc/maybe-resolve-token-value value)]
              (st/emit!
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index 0fe4707f7..d44b83ba5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -63,6 +63,12 @@
       (get token-type [])
       (tokens-name-map)))
 
+(defn tokens-name-map->select-options [{:keys [shape tokens attributes]}]
+  (->> (tokens-name-map tokens)
+       (map (fn [[_k {:keys [name] :as item}]]
+              (cond-> (assoc item :label name)
+                (token-applied? item shape attributes) (assoc :selected? true))))))
+
 ;; Update functions ------------------------------------------------------------
 
 (defn on-apply-token [{:keys [token token-type-props selected-shapes] :as _props}]

From 406e8d110c49a141d8297bafecb9302fb98dc344 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 07:34:43 +0200
Subject: [PATCH 04/11] De-Applying token

---
 .../ui/workspace/sidebar/options/menus/measures.cljs  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 84cb1afb9..b670914bc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -108,6 +108,13 @@
                                  {:shape shape
                                   :tokens border-radius-tokens
                                   :attributes (wtc/token-attributes :border-radius)}))
+        sizing-tokens (:sizing tokens-by-type)
+        sizing-options (mf/use-memo
+                        (mf/deps shape sizing-tokens)
+                        #(wtc/tokens-name-map->select-options
+                          {:shape shape
+                           :tokens sizing-tokens
+                           :attributes (wtc/token-attributes :sizing)}))
 
         flex-child?       (->> selection-parents (some ctl/flex-layout?))
         absolute?         (ctl/item-absolute? shape)
@@ -223,6 +230,10 @@
          (mf/deps ids)
          (fn [value attr]
            (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                     (dch/update-shapes ids
+                                        #(assoc % :applied-tokens {})
+                                        {:reg-objects? true
+                                         :attrs [:applied-tokens]})
                      (udw/update-dimensions ids attr value))))
 
         on-proportion-lock-change

From 595831118d11f2acc169e6c01137e3e02f3a2ae0 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 08:36:28 +0200
Subject: [PATCH 05/11] Allow aligning dropwdown to the left

---
 .../workspace/sidebar/options/menus/measures.cljs   |  7 ++++---
 .../workspace/sidebar/options/menus/measures.scss   |  2 ++
 .../main/ui/workspace/tokens/editable_select.cljs   | 13 ++++++++-----
 .../main/ui/workspace/tokens/editable_select.scss   | 13 ++++++++++---
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index b670914bc..a972587ff 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -511,13 +511,14 @@
                [:span {:class (stl/css :icon)}  i/corner-radius]
                [:& editable-select
                 {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
-                 :on-token-remove on-border-radius-token-unapply
                  :class (stl/css :token-select)
-                 :type "number"
-                 :min 0
                  :input-class (stl/css :numeric-input)
+                 :position :right
+                 :min 0
                  :on-change on-radius-1-change
+                 :on-token-remove on-border-radius-token-unapply
                  :options border-radius-options
+                 :type "number"
                  :value (:rx values)}]]
 
               @radius-multi?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 810c79f37..10bbf5056 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -109,6 +109,7 @@
 
 .size {
   @include flexRow;
+  position: relative;
 }
 
 .height,
@@ -182,6 +183,7 @@
 .radius-1 {
   @extend .input-element;
   width: $s-108;
+  position: relative;
 }
 
 .radius-4 {
diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index afbd5a2ee..b36cadce7 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -38,11 +38,13 @@
                         :else new-value)]
         (set-value! new-value)))))
 
-(mf/defc dropdown-select [{:keys [on-close element-id element-ref options on-select]}]
+(mf/defc dropdown-select [{:keys [position on-close element-id element-ref options on-select]}]
   [:& dropdown {:show true
                 :on-close on-close}
-   [:div {:class (stl/css :custom-select-dropdown)
-          :ref element-ref}
+   [:> :div {:class (stl/css-case :custom-select-dropdown true
+                                  :custom-select-dropdown-right (= position :right)
+                                  :custom-select-dropdown-left (= position :left))
+             :ref element-ref}
     [:ul {:class (stl/css :custom-select-dropdown-list)}
      (for [[index item] (d/enumerate options)]
        (cond
@@ -60,7 +62,7 @@
                   [:span {:class (stl/css :check-icon)} i/tick]])))]]])
 
 (mf/defc editable-select
-  [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove] :as params}]
+  [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove position] :as params}]
   (let [state* (mf/use-state {:id (uuid/next)
                               :is-open? false
                               :current-value value
@@ -239,7 +241,8 @@
         i/arrow])
 
      (when (and is-open? (seq options))
-       [:& dropdown-select {:on-close close-dropdown
+       [:& dropdown-select {:position position
+                            :on-close close-dropdown
                             :element-id element-id
                             :element-ref select-wrapper-ref
                             :options options
diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
index 7bb4e7f4e..3f0eb03f9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss
@@ -9,7 +9,6 @@
 .editable-select {
   @extend .asset-element;
   margin: 0;
-  position: relative;
   display: flex;
   height: calc($s-32 - 2px); // Fixes border being clipped by the input field
   width: 100%;
@@ -62,13 +61,21 @@
     width: 0;
   }
 
+  .custom-select-dropdown-left {
+    left: 0;
+    right: unset;
+  }
+
+  .custom-select-dropdown-right {
+    right: 0;
+    left: unset;
+  }
+
   .custom-select-dropdown {
     @extend .dropdown-wrapper;
     max-height: $s-320;
     width: auto;
     margin-top: $s-4;
-    right: 0;
-    left: unset;
 
     .separator {
       margin: 0;

From bc620ba2cd436c158e58afe36c4d850b986bbe90 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 08:55:04 +0200
Subject: [PATCH 06/11] Update width value

---
 .../sidebar/options/menus/measures.cljs       | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index a972587ff..6bcebe572 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -229,12 +229,18 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value attr]
-           (st/emit! (udw/trigger-bounding-box-cloaking ids)
-                     (dch/update-shapes ids
-                                        #(assoc % :applied-tokens {})
-                                        {:reg-objects? true
-                                         :attrs [:applied-tokens]})
-                     (udw/update-dimensions ids attr value))))
+           (let [token-value (wtc/maybe-resolve-token-value value)]
+             (js/console.log "token-value" token-value value)
+             (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                       (dch/update-shapes ids
+                                          (if token-value
+                                            #(assoc-in % [:applied-tokens attr] (:id value))
+                                            #(dissoc % :applied-tokens attr))
+                                          {:reg-objects? true
+                                           :attrs [:applied-tokens]})
+                       (udw/update-dimensions ids attr (or token-value value))))))
+
+
 
         on-proportion-lock-change
         (mf/use-fn
@@ -435,13 +441,19 @@
                                     :disabled disabled-width-sizing?)
                :title (tr "workspace.options.width")}
          [:span {:class (stl/css :icon-text)} "W"]
-         [:> numeric-input* {:min 0.01
-                             :no-validate true
-                             :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
-                             :on-change on-width-change
-                             :disabled disabled-width-sizing?
-                             :className (stl/css :numeric-input)
-                             :value (:width values)}]]
+         [:& editable-select
+          {:min 0.01
+           :class (stl/css :token-select)
+           :disabled disabled-width-sizing?
+           :input-class (stl/css :numeric-input)
+           :no-validate true
+           :on-change on-width-change
+           :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
+           :options sizing-options
+           :placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+           :position :left
+           :type "number"
+           :value (:width values)}]]
         [:div {:class (stl/css-case :height true
                                     :disabled disabled-height-sizing?)
                :title (tr "workspace.options.height")}

From b6061cc4a042c9da01572172d3aa7311a4a49320 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 10:00:26 +0200
Subject: [PATCH 07/11] Fix instant value change applies shape attributes

---
 .../src/app/main/ui/workspace/tokens/editable_select.cljs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index b36cadce7..78d984661 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -135,6 +135,12 @@
                 value (or (d/parse-double value) value)]
             (set-value value)))
 
+        handle-token-change-input
+        (fn [event]
+          (let [value (-> event dom/get-target dom/get-value)
+                value (or (d/parse-double value) value)]
+            (set-token-value! value)))
+
         handle-key-down
         (mf/use-fn
          (mf/deps set-value is-open? token)
@@ -214,7 +220,7 @@
      (cond
        token [:input {:value (or (:token-value state) "")
                       :class input-class
-                      :on-change handle-change-input
+                      :on-change handle-token-change-input
                       :on-key-down handle-key-down
                       :on-focus handle-focus
                       :on-blur handle-blur

From ea9d850412fb7325d4ee742165742a507c093cdf Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 10:00:43 +0200
Subject: [PATCH 08/11] Fix selectionStart not being detectable (selectionStart
 doesnt work for number)

---
 .../src/app/main/ui/workspace/tokens/editable_select.cljs    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index 78d984661..6c487cbd3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -149,7 +149,7 @@
              token (let [backspace? (kbd/backspace? event)
                          enter? (kbd/enter? event)
                          value (-> event dom/get-target dom/get-value)
-                         caret-at-beginning? (nil? (.. event -target -selectionStart))
+                         caret-at-beginning? (zero? (.. event -target -selectionStart))
                          no-text-selected? (str/empty? (.toString (js/document.getSelection)))
                          delete-token? (and backspace? caret-at-beginning? no-text-selected?)
                          replace-token-with-value? (and enter? (seq (str/trim value)))]
@@ -223,8 +223,7 @@
                       :on-change handle-token-change-input
                       :on-key-down handle-key-down
                       :on-focus handle-focus
-                      :on-blur handle-blur
-                      :type type}]
+                      :on-blur handle-blur}]
        (= type "number") [:> numeric-input* {:autoFocus refocus?
                                              :value (or current-value "")
                                              :className input-class

From 49d9b52b121c3c2ac007eb7938d412fd4daabc1f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 10:01:13 +0200
Subject: [PATCH 09/11] Cleanup

---
 .../ui/workspace/sidebar/options/menus/measures.cljs   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 6bcebe572..ec4ea3804 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -442,15 +442,15 @@
                :title (tr "workspace.options.width")}
          [:span {:class (stl/css :icon-text)} "W"]
          [:& editable-select
-          {:min 0.01
+          {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+           :no-validate true
+           :min 0.01
            :class (stl/css :token-select)
            :disabled disabled-width-sizing?
            :input-class (stl/css :numeric-input)
-           :no-validate true
            :on-change on-width-change
            :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
            :options sizing-options
-           :placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
            :position :left
            :type "number"
            :value (:width values)}]]
@@ -523,13 +523,13 @@
                [:span {:class (stl/css :icon)}  i/corner-radius]
                [:& editable-select
                 {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+                 :min 0
                  :class (stl/css :token-select)
                  :input-class (stl/css :numeric-input)
-                 :position :right
-                 :min 0
                  :on-change on-radius-1-change
                  :on-token-remove on-border-radius-token-unapply
                  :options border-radius-options
+                 :position :right
                  :type "number"
                  :value (:rx values)}]]
 

From f52e2e3a4114a789ba1e56a8976cb5ac3d0b0a7a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 10:34:20 +0200
Subject: [PATCH 10/11] Differentiate width/height sizing selected properties

---
 .../sidebar/options/menus/measures.cljs       | 36 +++++++++++++------
 .../app/main/ui/workspace/tokens/core.cljs    |  4 +--
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index ec4ea3804..ef4ba0e3e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -109,12 +109,20 @@
                                   :tokens border-radius-tokens
                                   :attributes (wtc/token-attributes :border-radius)}))
         sizing-tokens (:sizing tokens-by-type)
-        sizing-options (mf/use-memo
+        width-options (mf/use-memo
+                       (mf/deps shape sizing-tokens)
+                       #(wtc/tokens-name-map->select-options
+                         {:shape shape
+                          :tokens sizing-tokens
+                          :attributes (wtc/token-attributes :sizing)
+                          :selected-attributes #{:width}}))
+        height-options (mf/use-memo
                         (mf/deps shape sizing-tokens)
                         #(wtc/tokens-name-map->select-options
                           {:shape shape
                            :tokens sizing-tokens
-                           :attributes (wtc/token-attributes :sizing)}))
+                           :attributes (wtc/token-attributes :sizing)
+                           :selected-attributes #{:height}}))
 
         flex-child?       (->> selection-parents (some ctl/flex-layout?))
         absolute?         (ctl/item-absolute? shape)
@@ -235,7 +243,7 @@
                        (dch/update-shapes ids
                                           (if token-value
                                             #(assoc-in % [:applied-tokens attr] (:id value))
-                                            #(dissoc % :applied-tokens attr))
+                                            #(d/dissoc-in % [:applied-tokens attr]))
                                           {:reg-objects? true
                                            :attrs [:applied-tokens]})
                        (udw/update-dimensions ids attr (or token-value value))))))
@@ -450,7 +458,7 @@
            :input-class (stl/css :numeric-input)
            :on-change on-width-change
            :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
-           :options sizing-options
+           :options width-options
            :position :left
            :type "number"
            :value (:width values)}]]
@@ -458,13 +466,19 @@
                                     :disabled disabled-height-sizing?)
                :title (tr "workspace.options.height")}
          [:span {:class (stl/css :icon-text)} "H"]
-         [:> numeric-input* {:min 0.01
-                             :no-validate true
-                             :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
-                             :on-change on-height-change
-                             :disabled disabled-height-sizing?
-                             :className (stl/css :numeric-input)
-                             :value (:height values)}]]
+         [:& editable-select
+          {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+           :no-validate true
+           :min 0.01
+           :class (stl/css :token-select)
+           :disabled disabled-height-sizing?
+           :input-class (stl/css :numeric-input)
+           :on-change on-height-change
+           :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %))
+           :options height-options
+           :position :right
+           :type "number"
+           :value (:height values)}]]
         [:button {:class (stl/css-case
                           :lock-size-btn true
                           :selected (true? proportion-lock)
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index d44b83ba5..0b972f61d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -63,11 +63,11 @@
       (get token-type [])
       (tokens-name-map)))
 
-(defn tokens-name-map->select-options [{:keys [shape tokens attributes]}]
+(defn tokens-name-map->select-options [{:keys [shape tokens attributes selected-attributes]}]
   (->> (tokens-name-map tokens)
        (map (fn [[_k {:keys [name] :as item}]]
               (cond-> (assoc item :label name)
-                (token-applied? item shape attributes) (assoc :selected? true))))))
+                (token-applied? item shape (or selected-attributes attributes)) (assoc :selected? true))))))
 
 ;; Update functions ------------------------------------------------------------
 

From cbad5033c25f6283f2520f41d57dd5e6da4844ef Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 24 May 2024 11:25:30 +0200
Subject: [PATCH 11/11] Cleanup

---
 .../app/main/ui/workspace/sidebar/options/menus/measures.cljs    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index ef4ba0e3e..0a4aeef63 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -238,7 +238,6 @@
          (mf/deps ids)
          (fn [value attr]
            (let [token-value (wtc/maybe-resolve-token-value value)]
-             (js/console.log "token-value" token-value value)
              (st/emit! (udw/trigger-bounding-box-cloaking ids)
                        (dch/update-shapes ids
                                           (if token-value