✨ Restore back node based http server for e2e tests

.github/workflows/plugins-deploy-package.yml

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

.github/workflows/plugins-deploy-packages.yml

@@ -1,11 +1,143 @@
 name: Plugins/packages deployer
 
 on:
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+    paths:
+      - 'plugins/apps/*-plugin/**'
+      - 'libs/plugins-styles/**'
   workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch'
+        type: choice
+        required: true
+        default: 'develop'
+        options:
+          - develop
+          - staging
+          - main
 
 jobs:
-  print_text_job:
+  detect-changes:
     runs-on: ubuntu-latest
+    outputs:
+      colors_to_tokens: ${{ steps.filter.outputs.colors_to_tokens }}
+      create_palette: ${{ steps.filter.outputs.create_palette }}
+      lorem_ipsum: ${{ steps.filter.outputs.lorem_ipsum }}
+      rename_layers: ${{ steps.filter.outputs.rename_layers }}
+      contrast: ${{ steps.filter.outputs.contrast }}
+      icons: ${{ steps.filter.outputs.icons }}
+      poc_state: ${{ steps.filter.outputs.poc_state }}
+      table: ${{ steps.filter.outputs.table }}
+      # [For new plugins]
+      #   Add more outputs here
     steps:
-      - name: Print Hello World
-        run: echo "Hello, World!"
+      - uses: actions/checkout@v4
+      - id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            colors_to_tokens:
+              - 'plugins/apps/colors-to-tokens-plugin/**'
+              - 'libs/plugins-styles/**'
+            contrast:
+              - 'plugins/apps/contrast-plugin/**'
+              - 'libs/plugins-styles/**'
+            create_palette:
+              - 'plugins/apps/create-palette-plugin/**'
+              - 'libs/plugins-styles/**'
+            icons:
+              - 'plugins/apps/icons-plugin/**'
+              - 'libs/plugins-styles/**'
+            lorem_ipsum:
+              - 'plugins/apps/lorem-ipsum-plugin/**'
+              - 'libs/plugins-styles/**'
+            rename_layers:
+              - 'plugins/apps/rename-layers-plugin/**'
+              - 'libs/plugins-styles/**'
+            table:
+              - 'plugins/apps/table-plugin/**'
+              - 'libs/plugins-styles/**'
+           # [For new plugins]
+           #   Add more plugin filters here
+           #     another_plugin:
+           #       - 'plugins/apps/another-plugin/**'
+           #       - 'libs/plugins-styles/**'
+
+  colors-to-tokens-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.colors_to_tokens == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: colors-to-tokens
+
+  contrast-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.contrast == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: contrast
+
+  create-palette-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.create_palette == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: create-palette
+
+  icons-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.icons == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: icons
+
+  lorem-ipsum-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.lorem_ipsum == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: lorem-ipsum
+
+  rename-layers-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.rename_layers == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: rename-layers
+
+  table-plugin:
+    needs: detect-changes
+    if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.table == 'true'
+    uses: ./.github/workflows/plugins-deploy-package.yml
+    secrets: inherit
+    with:
+      gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+      plugin_name: table
+
+  # [For new plugins]
+  #   Add more jobs for other plugins below, following the same pattern
+  #     another-plugin:
+  #       needs: detect-changes
+  #       if: github.event_name == 'workflow_dispatch' || needs.detect-changes.outputs.another_plugin == 'true'
+  #       uses: ./.github/workflows/plugins-deploy-package.yml
+  #       secrets: inherit
+  #       with:
+  #         gh_ref: "${{ inputs.gh_ref || github.ref_name }}"
+  #         plugin_name: another

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

@@ -474,8 +474,6 @@
    :height #{:sizing :dimensions}
    :max-width #{:sizing :dimensions}
    :max-height #{:sizing :dimensions}
-   :min-width #{:sizing :dimensions}
-   :min-height #{:sizing :dimensions}
    :x #{:dimensions}
    :y #{:dimensions}
    :rotation #{:number :rotation}

frontend/playwright.config.js

@@ -85,7 +85,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     timeout: 2 * 60 * 1000,
-    command: "caddy file-server --root resources/public/ --listen :3000",
+    command: "node ./scripts/e2e-server.js",
     url: "http://localhost:3000",
     reuseExistingServer: !process.env.CI,
   },

frontend/scripts/e2e-server.js

@@ -0,0 +1,20 @@
+import express from "express";
+import compression from "compression";
+
+import { fileURLToPath } from "url";
+import path from "path";
+
+const app = express();
+const port = 3000;
+
+app.use(compression());
+
+const staticPath = path.join(
+  fileURLToPath(import.meta.url),
+  "../../resources/public",
+);
+app.use(express.static(staticPath));
+
+app.listen(port, () => {
+  console.log(`Listening at 0.0.0.0:${port}`);
+});

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

@@ -539,11 +539,10 @@
             value shape-ids
             #{:stroke-width}
             page-id))
-
-    (some attributes #{:max-width :max-height :layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w})
+    (some attributes #{:max-width :max-height})
     (conj #(update-layout-sizing-limits
             value shape-ids
-            (set (filter attributes #{:max-width :max-height :layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w}))
+            (set (filter attributes #{:max-width :max-height}))
             page-id))))
 
 (defn apply-dimensions-token

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

@@ -189,7 +189,6 @@
                                      :float
                                      :string
                                      [:= :multiple]]]]
-   [:text-icon {:optional true} :string]
    [:default {:optional true} [:maybe :string]]
    [:placeholder {:optional true} :string]
    [:icon {:optional true} [:maybe schema:icon]]
@@ -217,8 +216,7 @@
            is-selected-on-focus nillable
            tokens applied-token empty-to-end
            on-change on-blur on-focus on-detach
-           property align ref name
-           text-icon]
+           property align ref name]
     :rest props}]
 
   (let [;; NOTE: we use mfu/bean here for transparently handle
@@ -639,23 +637,14 @@
                                 :on-change store-raw-value
                                 :variant "comfortable"
                                 :disabled disabled
-                                :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)}]
-
-                                                  text-icon
-                                                  [:div {:class (stl/css :text-icon)
-                                                         :aria-labelledby property}
-                                                   text-icon])]))
+                                :slot-start (when icon
+                                              (mf/html [:> tooltip*
+                                                        {:content property
+                                                         :id property}
+                                                        [:> icon* {:icon-id icon
+                                                                   :size "s"
+                                                                   :aria-labelledby property
+                                                                   :class (stl/css :icon)}]]))
                                 :slot-end (when-not disabled
                                             (when (some? tokens)
                                               (mf/html [:> icon-button* {:variant "ghost"
@@ -687,23 +676,14 @@
                               :disabled disabled
                               :on-blur on-blur
                               :class inner-class
-                              :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)}]
-
-                                                text-icon
-                                                [:div {:class (stl/css :text-icon)
-                                                       :aria-labelledby property}
-                                                 text-icon])]))
+                              :slot-start (when icon
+                                            (mf/html [:> tooltip*
+                                                      {:content property
+                                                       :id property}
+                                                      [:> icon* {:icon-id icon
+                                                                 :size "s"
+                                                                 :aria-labelledby property
+                                                                 :class (stl/css :icon)}]]))
                               :token-wrapper-ref token-wrapper-ref
                               :token-detach-btn-ref token-detach-btn-ref
                               :detach-token detach-token})))]
@@ -738,41 +718,21 @@
     (mf/with-effect [dropdown-options]
       (mf/set-ref-val! options-ref dropdown-options))
 
-    (if (some? icon)
-      [:div {:class (dm/str class " " (stl/css :input-wrapper))
-             :ref wrapper-ref}
+    [:div {:class (dm/str 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 (dm/str class " " (stl/css :input-wrapper))
-             :aria-labelledby property
-             :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

@@ -32,14 +32,6 @@
   min-width: var(--sp-l);
 }
 
-.text-icon {
-  color: var(--color-foreground-secondary);
-  @include t.use-typography("code-font");
-  width: fit-content;
-  // TODO: Review
-  min-width: 40px;
-}
-
 .invisible-button {
   position: absolute;
   inset-inline-end: 0;

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

@@ -17,7 +17,7 @@
   --token-field-outline-color: none;
   --token-field-height: var(--sp-xxxl);
   --token-field-margin: unset;
-  display: inline-flex;
+  display: grid;
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;

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

@@ -9,18 +9,13 @@
   (:require
    [app.common.data :as d]
    [app.common.types.shape.layout :as ctl]
-   [app.common.types.token :as tk]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.shape-layout :as dwsl]
-   [app.main.data.workspace.tokens.application :as dwta]
-   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.title-bar :refer [title-bar*]]
-   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
    [app.main.ui.ds.controls.radio-buttons :refer [radio-buttons*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
@@ -29,51 +24,6 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach placeholder] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        input-type (cond
-                     (some #{:m2 :m4} [name])
-                     :horizontal-margin
-
-                     (some #{:m1 :m3} [name])
-                     :vertical-margin
-
-                     (= name :layout-item-max-w)
-                     :max-width
-
-                     (= name :layout-item-max-h)
-                     :max-height
-
-                     (= name :layout-item-min-w)
-                     :min-width
-
-                     (= name :layout-item-min-h)
-                     :min-height
-
-                     :else
-                     name)
-
-        tokens (mf/with-memo [tokens input-type]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input input-type))
-                       (not-empty))))
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach name)
-         #(on-detach % name))
-
-        props  (mf/spread-props props
-                                {:placeholder (or placeholder "--")
-                                 :applied-token (get applied-tokens name)
-                                 :tokens tokens
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value (get values name)})]
-    [:> numeric-input* props]))
-
 (def layout-item-attrs
   [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
    :layout-item-margin-type ;; :simple :multiple
@@ -96,325 +46,147 @@
   (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4)))
 
 (mf/defc margin-simple*
-  [{:keys [value on-change on-blur applied-tokens ids]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        m1 (:m1 value)
+  [{:keys [value on-change on-blur]}]
+  (let [m1 (:m1 value)
         m2 (:m2 value)
         m3 (:m3 value)
         m4 (:m4 value)
 
+        m1-placeholder (if (and (not= value :multiple) (not= m1 m3)) (tr "settings.multiple") "--")
+        m2-placeholder (if (and (not= value :multiple) (not= m2 m4)) (tr "settings.multiple") "--")
+
         m1 (when (and (not= value :multiple) (= m1 m3)) m1)
         m2 (when (and (not= value :multiple) (= m2 m4)) m2)
 
-        token-applied-m1 (:m1 applied-tokens)
-        token-applied-m2 (:m2 applied-tokens)
-        token-applied-m3 (:m3 applied-tokens)
-        token-applied-m4 (:m4 applied-tokens)
-
-        token-applied-m1 (if (and (not= applied-tokens :multiple) (= token-applied-m1 token-applied-m3)) token-applied-m1
-                             :multiple)
-
-        token-applied-m2 (if (and (not= applied-tokens :multiple) (= token-applied-m2 token-applied-m4)) token-applied-m2
-                             :multiple)
-
-        m1-placeholder (if (and (not= value :multiple)
-                                (= m1 m3)
-                                (= token-applied-m1 token-applied-m3))
-                         "--"
-                         (tr "settings.multiple"))
-
-        m2-placeholder (if (and (not= value :multiple)
-                                (= m2 m4)
-                                (= token-applied-m2 token-applied-m4))
-                         "--"
-                         (tr "settings.multiple"))
-
         on-focus
         (mf/use-fn
-         (fn [attr event]
-           (case attr
-             :m1 (select-margins true false true false)
-             :m2 (select-margins false true false true))
-           (dom/select-target event)))
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (case attr
+               :m1 (select-margins true false true false)
+               :m2 (select-margins false true false true))
+
+             (dom/select-target event))))
 
-        on-detach-token
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
         on-change'
         (mf/use-fn
-         (mf/deps on-change ids)
-         (fn [value attr]
-           (if (or (string? value) (int? value))
-             (on-change :simple attr value)
-             (do
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     (if (= :m1 attr)
-                                                 #{:m1 :m3}
-                                                 #{:m2 :m4})
-                                    :shape-ids ids}))))))
-
-        on-focus-m1
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m1))
-
-        on-focus-m2
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m2))
-
-        on-m1-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m1))
-
-        on-m2-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m2))]
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :simple attr value))))]
 
     [:div {:class (stl/css :margin-simple)}
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m1-change
-         :on-detach on-detach-token
-         :class (stl/css :vertical-margin-wrapper)
-         :on-blur on-blur
-         :on-focus on-focus-m1
-         :placeholder m1-placeholder
-         :icon i/margin-top-bottom
-         :min 0
-         :name :m1
-         :property "Vertical margin "
-         :nillable true
-         :applied-tokens {:m1 token-applied-m1}
-         :values {:m1 m1}}]
+     [:div {:class (stl/css :vertical-margin)
+            :title "Vertical margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-top-bottom]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder m1-placeholder
+                                           :data-name "m1"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m1}]]
 
-       [:div {:class (stl/css :vertical-margin)
-              :title "Vertical margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-top-bottom]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder m1-placeholder
-                                             :data-name "m1"
-                                             :on-focus on-focus-m1
-                                             :on-change on-m1-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m1}]])
-
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m2-change
-         :on-detach on-detach-token
-         :on-blur on-blur
-         :on-focus on-focus-m2
-         :placeholder m2-placeholder
-         :icon i/margin-left-right
-         :class (stl/css :horizontal-margin-wrapper)
-         :min 0
-         :name :m2
-         :align :right
-         :property "Horizontal margin"
-         :nillable true
-         :applied-tokens {:m2 token-applied-m2}
-         :values {:m2 m2}}]
-
-       [:div {:class (stl/css :horizontal-margin)
-              :title "Horizontal margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-left-right]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder m2-placeholder
-                                             :data-name "m2"
-                                             :on-focus on-focus-m2
-                                             :on-change on-m2-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m2}]])]))
+     [:div {:class (stl/css :horizontal-margin)
+            :title "Horizontal margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-left-right]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder m2-placeholder
+                                           :data-name "m2"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m2}]]]))
 
 (mf/defc margin-multiple*
-  [{:keys [value on-change on-blur applied-tokens ids]}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        m1     (:m1 value)
+  [{:keys [value on-change on-blur]}]
+  (let [m1     (:m1 value)
         m2     (:m2 value)
         m3     (:m3 value)
         m4     (:m4 value)
 
-        applied-token-to-m1     (:m1 applied-tokens)
-        applied-token-to-m2     (:m2 applied-tokens)
-        applied-token-to-m3     (:m3 applied-tokens)
-        applied-token-to-m4     (:m4 applied-tokens)
-
-        on-detach-token
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
-
         on-focus
         (mf/use-fn
-         (fn [attr event]
-           (select-margin attr)
-           (dom/select-target event)))
-
-        on-focus-m1
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m1))
-
-        on-focus-m2
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m2))
-
-        on-focus-m3
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m1))
-
-        on-focus-m4
-        (mf/use-fn (mf/deps on-focus) #(on-focus :m2))
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (select-margin attr)
+             (dom/select-target event))))
 
         on-change'
         (mf/use-fn
-         (mf/deps on-change ids)
-         (fn [value attr]
-           (if (or (string? value) (int? value))
-             (on-change :multiple attr value)
-             (do
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     #{attr}
-                                    :shape-ids ids}))))))
-
-
-        on-m1-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m1))
-
-        on-m2-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m2))
-
-        on-m3-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m3))
-
-        on-m4-change
-        (mf/use-fn (mf/deps on-change') #(on-change' % :m4))]
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :multiple attr value))))]
 
     [:div {:class (stl/css :margin-multiple)}
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m1-change
-         :on-detach on-detach-token
-         :on-blur on-blur
-         :on-focus on-focus-m1
-         :icon i/margin-top
-         :class (stl/css :top-margin-wrapper)
-         :min 0
-         :name :m1
-         :property "Top margin"
-         :nillable true
-         :applied-tokens {:m1 applied-token-to-m1}
-         :values {:m1 m1}}]
+     [:div {:class (stl/css :top-margin)
+            :title "Top margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-top]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder "--"
+                                           :data-name "m1"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m1}]]
+     [:div {:class (stl/css :right-margin)
+            :title "Right margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-right]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder "--"
+                                           :data-name "m2"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m2}]]
 
-       [:div {:class (stl/css :top-margin)
-              :title "Top margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-top]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder "--"
-                                             :data-name "m1"
-                                             :on-focus on-focus-m1
-                                             :on-change on-m1-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m1}]])
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m2-change
-         :on-detach on-detach-token
-         :on-blur on-blur
-         :on-focus on-focus-m2
-         :icon i/margin-right
-         :class (stl/css :right-margin-wrapper)
-         :min 0
-         :name :m2
-         :align :right
-         :property "Right margin"
-         :nillable true
-         :applied-tokens {:m2 applied-token-to-m2}
-         :values {:m2 m2}}]
+     [:div {:class (stl/css :bottom-margin)
+            :title "Bottom margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-bottom]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder "--"
+                                           :data-name "m3"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m3}]]
 
-       [:div {:class (stl/css :right-margin)
-              :title "Right margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-right]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder "--"
-                                             :data-name "m2"
-                                             :on-focus on-focus-m2
-                                             :on-change on-m2-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m2}]])
+     [:div {:class (stl/css :left-margin)
+            :title "Left margin"}
+      [:span {:class (stl/css :icon)}
+       deprecated-icon/margin-left]
+      [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
+                                           :placeholder "--"
+                                           :data-name "m4"
+                                           :on-focus on-focus
+                                           :on-change on-change'
+                                           :on-blur on-blur
+                                           :nillable true
+                                           :value m4}]]]))
 
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m3-change
-         :on-detach on-detach-token
-         :on-blur on-blur
-         :on-focus on-focus-m3
-         :icon i/margin-bottom
-         :class (stl/css :bottom-margin-wrapper)
-         :min 0
-         :name :m3
-         :align :right
-         :property "Bottom margin"
-         :nillable true
-         :applied-tokens {:m3 applied-token-to-m3}
-         :values {:m3 m3}}]
-
-       [:div {:class (stl/css :bottom-margin)
-              :title "Bottom margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-bottom]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder "--"
-                                             :data-name "m3"
-                                             :on-focus on-focus-m3
-                                             :on-change on-m3-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m3}]])
-
-     (if token-numeric-inputs
-       [:> numeric-input-wrapper*
-        {:on-change on-m4-change
-         :on-detach on-detach-token
-         :on-blur on-blur
-         :on-focus on-focus-m4
-         :icon i/margin-left
-         :class (stl/css :left-margin-wrapper)
-         :min 0
-         :name :m4
-         :property "Left margin"
-         :nillable true
-         :applied-tokens {:m4 applied-token-to-m4}
-         :values {:m4 m4}}]
-
-       [:div {:class (stl/css :left-margin)
-              :title "Left margin"}
-        [:span {:class (stl/css :icon)}
-         deprecated-icon/margin-left]
-        [:> deprecated-input/numeric-input* {:class (stl/css :numeric-input)
-                                             :placeholder "--"
-                                             :data-name "m4"
-                                             :on-focus on-focus-m4
-                                             :on-change on-m4-change
-                                             :on-blur on-blur
-                                             :nillable true
-                                             :value m4}]])]))
 
 (mf/defc margin-section*
   {::mf/private true
-   ::mf/expect-props #{:value :type :on-type-change :on-change :applied-tokens :ids}}
+   ::mf/expect-props #{:value :type :on-type-change :on-change}}
   [{:keys [type on-type-change] :as props}]
   (let [type       (d/nilv type :simple)
         on-blur    (mf/use-fn #(select-margins false false false false))
@@ -520,187 +292,8 @@
                                  :label "Align self end"
                                  :value "end"}]}])
 
-(mf/defc layout-size-constraints*
-  {::mf/private true
-   ::mf/expect-props #{:value :applied-tokens :ids :v-sizing}}
-  [{:keys [values v-sizing ids applied-tokens] :as props}]
-  (let [token-numeric-inputs
-        (features/use-feature "tokens/numeric-input")
-
-        min-w (get values :layout-item-min-w)
-
-        max-w (get values :layout-item-max-w)
-
-        min-h (get values :layout-item-min-h)
-
-        max-h (get values :layout-item-max-h)
-
-        applied-token-to-min-w (get applied-tokens :layout-item-min-w)
-
-        applied-token-to-max-w (get applied-tokens :layout-item-max-w)
-
-        applied-token-to-min-h (get applied-tokens :layout-item-min-h)
-
-        applied-token-to-max-h (get applied-tokens :layout-item-max-h)
-
-        on-detach-token
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [token attr]
-           (st/emit! (dwta/unapply-token {:token (first token)
-                                          :attributes #{attr}
-                                          :shape-ids ids}))))
-
-        on-size-change
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [value attr]
-           (if (or (string? value) (int? value))
-             (st/emit! (dwsl/update-layout-child ids {attr value}))
-             (do
-               (st/emit!
-                (dwta/toggle-token {:token     (first value)
-                                    :attrs     #{attr}
-                                    :shape-ids ids}))))))
-
-        on-layout-item-min-w-change
-        (mf/use-fn (mf/deps on-size-change) #(on-size-change % :layout-item-min-w))
-
-        on-layout-item-max-w-change
-        (mf/use-fn (mf/deps on-size-change) #(on-size-change % :layout-item-max-w))
-
-        on-layout-item-min-h-change
-        (mf/use-fn (mf/deps on-size-change) #(on-size-change % :layout-item-min-h))
-
-        on-layout-item-max-h-change
-        (mf/use-fn (mf/deps on-size-change) #(on-size-change % :layout-item-max-h))]
-
-    [:div {:class (stl/css :advanced-options)}
-     (when (= (:layout-item-h-sizing values) :fill)
-       [:div {:class (stl/css :horizontal-fill)}
-        (if token-numeric-inputs
-          [:> numeric-input-wrapper*
-           {:on-change on-layout-item-min-w-change
-            :on-detach on-detach-token
-            :class (stl/css :min-w-wrapper)
-            :min 0
-            :name :layout-item-min-w
-            :property (tr "workspace.options.layout-item.layout-item-min-w")
-            :text-icon "MIN W"
-            :nillable true
-            :applied-tokens {:layout-item-min-w applied-token-to-min-w}
-            :tooltip-class (stl/css :tooltip-wrapper)
-            :values {:layout-item-min-w min-w}}]
-
-          [:div {:class (stl/css :layout-item-min-w)
-                 :title (tr "workspace.options.layout-item.layout-item-min-w")}
-
-           [:span {:class (stl/css :icon-text)} "MIN W"]
-           [:> deprecated-input/numeric-input*
-            {:class (stl/css :numeric-input)
-             :no-validate true
-             :min 0
-             :data-wrap true
-             :placeholder "--"
-             :data-attr "layout-item-min-w"
-             :on-focus dom/select-target
-             :on-change on-layout-item-min-w-change
-             :value (get values :layout-item-min-w)
-             :nillable true}]])
-
-        (if token-numeric-inputs
-          [:> numeric-input-wrapper*
-           {:on-change on-layout-item-max-w-change
-            :on-detach on-detach-token
-            :text-icon "MAX W"
-            :class (stl/css :max-w-wrapper)
-            :min 0
-            :name :layout-item-max-w
-            :property (tr "workspace.options.layout-item.layout-item-max-w")
-            :nillable true
-            :tooltip-class (stl/css :tooltip-wrapper)
-            :applied-tokens {:layout-item-max-w applied-token-to-max-w}
-            :values {:layout-item-max-w max-w}}]
-
-          [:div {:class (stl/css :layout-item-max-w)
-                 :title (tr "workspace.options.layout-item.layout-item-max-w")}
-           [:span {:class (stl/css :icon-text)} "MAX W"]
-           [:> deprecated-input/numeric-input*
-            {:class (stl/css :numeric-input)
-             :no-validate true
-             :min 0
-             :data-wrap true
-             :placeholder "--"
-             :data-attr "layout-item-max-w"
-             :on-focus dom/select-target
-             :on-change on-layout-item-max-w-change
-             :value (get values :layout-item-max-w)
-             :nillable true}]])])
-
-     (when (= v-sizing :fill)
-       [:div {:class (stl/css :vertical-fill)}
-        (if token-numeric-inputs
-          [:> numeric-input-wrapper*
-           {:on-change on-layout-item-min-h-change
-            :on-detach on-detach-token
-            :text-icon "MIN H"
-            :class (stl/css :min-h-wrapper)
-            :min 0
-            :name :layout-item-min-h
-            :property (tr "workspace.options.layout-item.layout-item-min-h")
-            :nillable true
-            :tooltip-class (stl/css :tooltip-wrapper)
-
-            :applied-tokens {:layout-item-min-h applied-token-to-min-h}
-            :values {:layout-item-min-h min-h}}]
-
-          [:div {:class (stl/css :layout-item-min-h)
-                 :title (tr "workspace.options.layout-item.layout-item-min-h")}
-           [:span {:class (stl/css :icon-text)} "MIN H"]
-           [:> deprecated-input/numeric-input*
-            {:class (stl/css :numeric-input)
-             :no-validate true
-             :min 0
-             :data-wrap true
-             :placeholder "--"
-             :data-attr "layout-item-min-h"
-             :on-focus dom/select-target
-             :on-change on-layout-item-min-h-change
-             :value (get values :layout-item-min-h)
-             :nillable true}]])
-
-        (if token-numeric-inputs
-          [:> numeric-input-wrapper*
-           {:on-change on-layout-item-max-h-change
-            :on-detach on-detach-token
-            :class (stl/css :max-h-wrapper)
-            :min 0
-            :text-icon "MAX H"
-            :name :layout-item-max-h
-            :property (tr "workspace.options.layout-item.layout-item-max-h")
-            :nillable true
-            :tooltip-class (stl/css :tooltip-wrapper)
-            :applied-tokens {:layout-item-max-h applied-token-to-max-h}
-            :values {:layout-item-max-h max-h}}]
-
-          [:div {:class (stl/css :layout-item-max-h)
-                 :title (tr "workspace.options.layout-item.layout-item-max-h")}
-
-           [:span {:class (stl/css :icon-text)} "MAX H"]
-           [:> deprecated-input/numeric-input*
-            {:class (stl/css :numeric-input)
-             :no-validate true
-             :min 0
-             :data-wrap true
-             :placeholder "--"
-             :data-attr "layout-item-max-h"
-             :on-focus dom/select-target
-             :on-change on-layout-item-max-h-change
-             :value (get values :layout-item-max-h)
-             :nillable true}]])])]))
-
 (mf/defc layout-item-menu
-  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout? :applied-tokens}
+  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout?}
    ::mf/props :obj}
   [{:keys [ids values
            ^boolean is-layout-child?
@@ -708,8 +301,7 @@
            ^boolean is-grid-parent?
            ^boolean is-flex-parent?
            ^boolean is-flex-layout?
-           ^boolean is-grid-layout?
-           applied-tokens]}]
+           ^boolean is-grid-layout?]}]
 
   (let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents  (mf/deref selection-parents*)
@@ -805,7 +397,16 @@
          (fn [value]
            (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing (keyword value)}))))
 
-        ;; Position
+        ;; Size and position
+        on-size-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+             (st/emit! (dwsl/update-layout-child ids {attr value})))))
+
         on-change-position
         (mf/use-fn
          (mf/deps ids)
@@ -882,13 +483,74 @@
           [:> margin-section* {:value (:layout-item-margin values)
                                :type (:layout-item-margin-type values)
                                :on-type-change on-margin-type-change
-                               :applied-tokens applied-tokens
-                               :ids ids
                                :on-change on-margin-change}])
 
         (when (or (= h-sizing :fill)
                   (= v-sizing :fill))
-          [:> layout-size-constraints* {:ids ids
-                                        :values values
-                                        :applied-tokens applied-tokens
-                                        :v-sizing v-sizing}])])]))
+          [:div {:class (stl/css :advanced-options)}
+           (when (= (:layout-item-h-sizing values) :fill)
+             [:div {:class (stl/css :horizontal-fill)}
+              [:div {:class (stl/css :layout-item-min-w)
+                     :title (tr "workspace.options.layout-item.layout-item-min-w")}
+
+               [:span {:class (stl/css :icon-text)} "MIN W"]
+               [:> deprecated-input/numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-min-w"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-min-w)
+                 :nillable true}]]
+
+              [:div {:class (stl/css :layout-item-max-w)
+                     :title (tr "workspace.options.layout-item.layout-item-max-w")}
+               [:span {:class (stl/css :icon-text)} "MAX W"]
+               [:> deprecated-input/numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-max-w"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-max-w)
+                 :nillable true}]]])
+
+           (when (= v-sizing :fill)
+             [:div {:class (stl/css :vertical-fill)}
+              [:div {:class (stl/css :layout-item-min-h)
+                     :title (tr "workspace.options.layout-item.layout-item-min-h")}
+
+               [:span {:class (stl/css :icon-text)} "MIN H"]
+               [:> deprecated-input/numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-min-h"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-min-h)
+                 :nillable true}]]
+
+              [:div {:class (stl/css :layout-item-max-h)
+                     :title (tr "workspace.options.layout-item.layout-item-max-h")}
+
+               [:span {:class (stl/css :icon-text)} "MAX H"]
+               [:> deprecated-input/numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-max-h"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-max-h)
+                 :nillable true}]]])])])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss

@@ -85,16 +85,6 @@
   }
 }
 
-.vertical-margin-wrapper {
-  grid-column: 1;
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
-.horizontal-margin-wrapper {
-  grid-column: 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
 .margin-multiple {
   display: grid;
   grid-template-columns: subgrid;
@@ -109,30 +99,22 @@
   @include deprecated.bodySmallTypography;
 }
 
-.top-margin,
-.top-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
+.top-margin {
   grid-column: 1;
   grid-row: 1;
 }
 
-.bottom-margin,
-.bottom-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
+.bottom-margin {
   grid-column: 2;
   grid-row: 1;
 }
 
-.left-margin,
-.left-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
+.left-margin {
   grid-column: 1;
   grid-row: 2;
 }
 
-.right-margin,
-.right-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
+.right-margin {
   grid-column: 2;
   grid-row: 2;
 }
@@ -169,7 +151,3 @@
 .inputs-wrapper {
   grid-column: 1 / span 2;
 }
-
-.tooltip-wrapper {
-  inline-size: 100%;
-}

frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs

@@ -114,7 +114,6 @@
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
-         :applied-tokens applied-tokens
          :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -113,7 +113,6 @@
                              :is-layout-container? false
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
-                             :applied-tokens applied-tokens
                              :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -135,7 +135,6 @@
          :is-flex-layout? is-flex-layout?
          :is-grid-layout? is-grid-layout?
          :is-layout-child? is-layout-child?
-         :applied-tokens applied-tokens
          :is-layout-container? is-layout-container?
          :shape shape}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -139,7 +139,6 @@
          :is-layout-container? false
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
-         :applied-tokens applied-tokens
          :values layout-item-values}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -409,7 +409,7 @@
         [layout-container-ids layout-container-values layout-container-tokens]
         (get-attrs shapes objects :layout-container)
 
-        [layout-item-ids layout-item-values layout-item-tokens]
+        [layout-item-ids layout-item-values {}]
         (get-attrs shapes objects :layout-item)
 
         components
@@ -471,7 +471,6 @@
          :is-layout-container? all-flex-layout-container?
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
-         :applied-tokens layout-item-tokens
          :values layout-item-values}])
 
      (when-not (or (empty? constraint-ids) ^boolean is-layout-child?)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -113,7 +113,6 @@
                              :is-layout-container? false
                              :is-flex-parent? is-flex-parent?
                              :is-grid-parent? is-grid-parent?
-                             :applied-tokens applied-tokens
                              :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -112,7 +112,6 @@
          :values layout-item-values
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
-         :applied-tokens applied-tokens
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -180,7 +180,6 @@
            :is-layout-child? true
            :is-flex-parent? is-flex-parent?
            :is-grid-parent? is-grid-parent?
-           :applied-tokens applied-tokens
            :shape shape}])
 
        (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

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

@@ -154,7 +154,6 @@
          :is-layout-child? true
          :is-flex-parent? is-flex-parent?
          :is-grid-parent? is-grid-parent?
-         :applied-tokens applied-tokens
          :shape shape}])
 
      (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)

frontend/translations/en.po

@@ -6713,19 +6713,19 @@ msgstr "Advanced options"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs:543
 msgid "workspace.options.layout-item.layout-item-max-h"
-msgstr "Max height"
+msgstr "Max.Height"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs:510
 msgid "workspace.options.layout-item.layout-item-max-w"
-msgstr "Max width"
+msgstr "Max.Width"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs:527
 msgid "workspace.options.layout-item.layout-item-min-h"
-msgstr "Min height"
+msgstr "Min.Height"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs:494
 msgid "workspace.options.layout-item.layout-item-min-w"
-msgstr "Min width"
+msgstr "Min.Width"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
 #, unused

frontend/translations/es.po

@@ -7164,11 +7164,11 @@ msgstr "Ancho"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:535, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:552
 msgid "workspace.options.x"
-msgstr "Eje X"
+msgstr "eje X"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:545, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:563
 msgid "workspace.options.y"
-msgstr "Eje Y"
+msgstr "eje Y"
 
 #: src/app/main/ui/workspace/viewport/path_actions.cljs:140
 msgid "workspace.path.actions.add-node"

plugins/apps/colors-to-tokens-plugin/wrangler.toml

@@ -1,7 +1,7 @@
 name = "color-to-tokens-plugin"
 compatibility_date = "2025-01-01"
 
-assets = { directory = "../../dist/apps/color-to-tokens-plugin/browser" }
+assets = { directory = "../../dist/apps/colors-to-tokens-plugin/browser" }
 
 [[routes]]
 pattern = "WORKER_URI"