🐛 Bulk remove tokens with a single undo action

* 🐛 Display missing selected tokens set info (#8098)

* 🐛 Display missing selected tokens set info

* ✨ Add integration tests to verify current active set

* 🎉 Integration with nitrate platform

* 🐛 Fix nitrate get-teams returns deleted teams

* ✨ Add nitrate to tmux devenv

* ✨ Add retry and validation to nitrate module

* ✨ Add photoUrl to profile on nitrate authenticate

* ✨ Move nitrate url to an env variable

* ♻️ Change Nitrate organization-id schema to text

* ♻️ Cleanup unused imports

* 🔧 Add control-center to nginx

* ✨ Add create org link

* 🔧 Fix nginx entrypoint

* 🐛 Fix control-center proxy pass

* 🎉 Add nitrate licence check

* Revert "✨ Add nitrate to tmux devenv"

This reverts commit dc6f6c4589.

* ✨ Add feature flag check

* 🐛 Rename licences for licenses

* ✨ MR changes

* ✨ MR changes 2

* 📎 Add the ability to have local config on start backend

* 📎 Add FIXME comment

---------

Co-authored-by: Xaviju <xavier.julian@kaleidos.net>
Co-authored-by: Juanfran <juanfran.ag@gmail.com>
Co-authored-by: Yamila Moreno <yamila.moreno@kaleidos.net>
Co-authored-by: Marina López <marina.lopez.yap@gmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

.gitignore

@@ -21,6 +21,7 @@
 .rebel_readline_history
 .repl
 .shadow-cljs
+.pnpm-store/
 /*.jpg
 /*.md
 /*.png
@@ -44,6 +45,7 @@
 /backend/resources/public/media
 /backend/target/
 /backend/experiments
+/backend/scripts/_env.local
 /bundle*
 /cd.md
 /clj-profiler/
@@ -74,6 +76,7 @@
 /library/target/
 /library/*.zip
 /external
+/penpot-nitrate
 
 clj-profiler/
 node_modules

backend/scripts/_env

@@ -13,6 +13,7 @@ export PENPOT_FLAGS="\
        disable-login-with-google \
        disable-login-with-github \
        disable-login-with-gitlab \
+       disable-telemetry \
        enable-backend-worker \
        enable-backend-asserts \
        disable-feature-fdata-pointer-map \
@@ -55,6 +56,8 @@ export PENPOT_OBJECTS_STORAGE_BACKEND=s3
 export PENPOT_OBJECTS_STORAGE_S3_ENDPOINT=http://minio:9000
 export PENPOT_OBJECTS_STORAGE_S3_BUCKET=penpot
 
+export PENPOT_NITRATE_BACKEND_URI=http://localhost:3000/control-center
+
 export JAVA_OPTS="\
        -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
        -Djdk.attach.allowAttachSelf \

backend/scripts/repl

@@ -3,6 +3,10 @@
 SCRIPT_DIR=$(dirname $0);
 source $SCRIPT_DIR/_env;
 
+if [ -f $SCRIPT_DIR/_env.local ]; then
+    source $SCRIPT_DIR/_env.local;
+fi
+
 # Initialize MINIO config
 setup_minio;
 

backend/scripts/run

@@ -3,6 +3,11 @@
 SCRIPT_DIR=$(dirname $0);
 
 source $SCRIPT_DIR/_env;
+
+if [ -f $SCRIPT_DIR/_env.local ]; then
+    source $SCRIPT_DIR/_env.local;
+fi
+
 export OPTIONS="-A:dev"
 
 entrypoint=${1:-app.main};

backend/scripts/start-dev

@@ -3,6 +3,10 @@
 SCRIPT_DIR=$(dirname $0);
 source $SCRIPT_DIR/_env;
 
+if [ -f $SCRIPT_DIR/_env.local ]; then
+    source $SCRIPT_DIR/_env.local;
+fi
+
 # Initialize MINIO config
 setup_minio;
 

backend/src/app/config.clj

@@ -225,6 +225,8 @@
     [:netty-io-threads {:optional true} ::sm/int]
     [:executor-threads {:optional true} ::sm/int]
 
+    [:nitrate-backend-uri {:optional true} ::sm/uri]
+
     ;; DEPRECATED
     [:assets-storage-backend {:optional true} :keyword]
     [:storage-assets-fs-directory {:optional true} :string]

backend/src/app/main.clj

@@ -323,6 +323,7 @@
    {::http.client/client (ig/ref ::http.client/client)
     ::db/pool            (ig/ref ::db/pool)
     ::rds/pool           (ig/ref ::rds/pool)
+    :app.nitrate/client (ig/ref :app.nitrate/client)
     ::wrk/executor       (ig/ref ::wrk/netty-executor)
     ::session/manager    (ig/ref ::session/manager)
     ::ldap/provider      (ig/ref ::ldap/provider)
@@ -339,6 +340,9 @@
     ::email/blacklist    (ig/ref ::email/blacklist)
     ::email/whitelist    (ig/ref ::email/whitelist)}
 
+   :app.nitrate/client
+   {::http.client/client (ig/ref ::http.client/client)}
+
    :app.rpc/management-methods
    {::http.client/client (ig/ref ::http.client/client)
     ::db/pool            (ig/ref ::db/pool)
@@ -348,6 +352,7 @@
     ::sto/storage        (ig/ref ::sto/storage)
     ::mtx/metrics        (ig/ref ::mtx/metrics)
     ::mbus/msgbus        (ig/ref ::mbus/msgbus)
+    :app.nitrate/client (ig/ref :app.nitrate/client)
     ::rds/client         (ig/ref ::rds/client)
     ::setup/props        (ig/ref ::setup/props)}
 

backend/src/app/nitrate.clj

@@ -0,0 +1,147 @@
+;; 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.nitrate
+  "Module that make calls to the external nitrate aplication"
+  (:require
+   [app.common.logging :as l]
+   [app.common.schema :as sm]
+   [app.config :as cf]
+   [app.http.client :as http]
+   [app.rpc :as-alias rpc]
+   [app.setup :as-alias setup]
+   [app.util.json :as json]
+   [clojure.core :as c]
+   [integrant.core :as ig]))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HELPERS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- request-builder
+  [cfg method uri management-key profile-id]
+  (fn []
+    (http/req! cfg {:method method
+                    :headers {"content-type" "application/json"
+                              "accept" "application/json"
+                              "x-shared-key" management-key
+                              "x-profile-id" (str profile-id)}
+                    :uri uri
+                    :version :http1.1})))
+
+
+(defn- with-retries
+  [handler max-retries]
+  (fn []
+    (loop [attempt 1]
+      (let [result (try
+                     (handler)
+                     (catch Exception e
+                       (if (< attempt max-retries)
+                         ::retry
+                         (do
+                           ;; TODO Error handling
+                           (l/error :hint "request fail after multiple retries" :cause e)
+                           nil))))]
+        (if (= result ::retry)
+          (recur (inc attempt))
+          result)))))
+
+
+(defn- with-validate [handler uri schema]
+  (fn []
+    (let [coercer-http   (sm/coercer schema
+                                     :type :validation
+                                     :hint (str "invalid data received calling " uri))]
+      (try
+        (coercer-http (-> (handler) :body json/decode))
+        (catch Exception e
+          ;; TODO Error handling
+          (l/error :hint "error validating json response" :cause e)
+          nil)))))
+
+(defn- request-to-nitrate
+  [{:keys [::management-key] :as cfg} method uri schema {:keys [::rpc/profile-id] :as params}]
+  (let [full-http-call (-> (request-builder cfg method uri management-key profile-id)
+                           (with-retries 3)
+                           (with-validate uri schema))]
+    (full-http-call)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; API
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn call
+  [cfg method params]
+  (when (contains? cf/flags :nitrate)
+    (let [client (get cfg ::client)
+          method (get client method)]
+      (method params))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private schema:organization
+  [:map
+   [:id ::sm/text]
+   [:name ::sm/text]])
+
+(def ^:private schema:user
+  [:map
+   [:valid ::sm/boolean]])
+
+(defn- get-team-org
+  [cfg {:keys [team-id] :as params}]
+  (let [baseuri (cf/get :nitrate-backend-uri)]
+    (request-to-nitrate cfg :get (str baseuri "/api/teams/" (str team-id)) schema:organization params)))
+
+(defn- is-valid-user
+  [cfg {:keys [profile-id] :as params}]
+  (let [baseuri (cf/get :nitrate-backend-uri)]
+    (request-to-nitrate cfg :get (str baseuri "/api/users/" (str profile-id)) schema:user params)))
+
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; INITIALIZATION
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defmethod ig/init-key ::client
+  [_ {:keys [::setup/props] :as cfg}]
+  (if (contains? cf/flags :nitrate)
+    (let [management-key (or (cf/get :management-api-key)
+                             (get props :management-key))
+          cfg (assoc cfg ::management-key management-key)]
+      {:get-team-org (partial get-team-org cfg)
+       :is-valid-user (partial is-valid-user cfg)})
+    {}))
+
+(defmethod ig/halt-key! ::client
+  [_ {:keys []}]
+  (do :stuff))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; UTILS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+
+(defn add-nitrate-licence-to-profile
+  [cfg profile]
+  (try
+    (let [nitrate-licence (call cfg :is-valid-user {:profile-id (:id profile)})]
+      (assoc profile :nitrate-licence (:valid nitrate-licence)))
+    (catch Throwable cause
+      (l/error :hint "failed to get nitrate licence"
+               :profile-id (:id profile)
+               :cause cause)
+      profile)))
+
+(defn add-org-to-team
+  [cfg team params]
+  (let [params (assoc (or params {}) :team-id (:id team))
+        org (call cfg :get-team-org params)]
+    (assoc team :organization-id (:id org) :organization-name (:name org))))

backend/src/app/rpc.clj

@@ -301,6 +301,7 @@
   (let [cfg (assoc cfg ::type "management" ::metrics-id :rpc-management-timing)]
     (->> (sv/scan-ns
           'app.rpc.management.subscription
+          'app.rpc.management.nitrate
           'app.rpc.management.exporter)
          (map (partial process-method cfg "management" wrap-management))
          (into {}))))

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

@@ -21,6 +21,7 @@
    [app.loggers.audit :as audit]
    [app.main :as-alias main]
    [app.media :as media]
+   [app.nitrate :as nitrate]
    [app.rpc :as-alias rpc]
    [app.rpc.climit :as climit]
    [app.rpc.doc :as-alias doc]
@@ -88,6 +89,8 @@
 
 ;; --- QUERY: Get profile (own)
 
+
+
 (sv/defmethod ::get-profile
   {::rpc/auth false
    ::doc/added "1.18"
@@ -98,9 +101,13 @@
   ;; no profile-id is in session, and when db call raises not found. In all other
   ;; cases we need to reraise the exception.
   (try
-    (-> (get-profile pool profile-id)
-        (strip-private-attrs)
-        (update :props filter-props))
+    (let [profile (-> (get-profile pool profile-id)
+                      (strip-private-attrs)
+                      (update :props filter-props))]
+      (if (contains? cf/flags :nitrate)
+        (nitrate/add-nitrate-licence-to-profile cfg profile)
+        profile))
+
     (catch Throwable _
       {:id uuid/zero :fullname "Anonymous User"})))
 

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

@@ -23,6 +23,7 @@
    [app.main :as-alias main]
    [app.media :as media]
    [app.msgbus :as mbus]
+   [app.nitrate :as nitrate]
    [app.rpc :as-alias rpc]
    [app.rpc.commands.profile :as profile]
    [app.rpc.doc :as-alias doc]
@@ -190,7 +191,9 @@
    ::sm/params schema:get-teams}
   [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id] :as params}]
   (dm/with-open [conn (db/open pool)]
-    (get-teams conn profile-id)))
+    (cond->> (get-teams conn profile-id)
+      (contains? cf/flags :nitrate)
+      (map #(nitrate/add-org-to-team cfg % params)))))
 
 (def ^:private sql:get-owned-teams
   "SELECT t.id, t.name,

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

@@ -0,0 +1,112 @@
+;; 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.rpc.management.nitrate
+  "Internal Nitrate HTTP API.
+       Provides authenticated access to organization management and token validation endpoints.
+       All requests must include a valid shared key token in the `x-shared-key` header, and
+       a cookie `auth-token` with the user token.
+       They will return `401 Unauthorized` if the shared key or user token are invalid."
+  (:require
+   [app.common.schema :as sm]
+   [app.common.uuid :as uuid]
+   [app.config :as cf]
+   [app.db :as db]
+   [app.msgbus :as mbus]
+   [app.rpc :as-alias rpc]
+   [app.rpc.commands.files :as files]
+   [app.rpc.commands.profile :as profile]
+   [app.rpc.doc :as doc]
+   [app.util.services :as sv]))
+
+;; ---- API: authenticate
+(def ^:private schema:profile
+  [:map
+   [:id ::sm/uuid]
+   [:name :string]
+   [:email :string]
+   [:photo-url :string]])
+
+(sv/defmethod ::authenticate
+  "Authenticate an user
+     @api GET /authenticate
+     @returns
+       200 OK: Returns the authenticated user."
+  {::doc/added "2.12"
+   ::sm/result schema:profile}
+  [cfg {:keys [::rpc/profile-id] :as params}]
+  (let [profile    (profile/get-profile cfg profile-id)]
+    {:id (get profile :id)
+     :name (get profile :fullname)
+     :email (get profile :email)
+     :photo-url (files/resolve-public-uri (get profile :photo-id))}))
+
+;; ---- API: get-teams
+
+(def ^:private sql:get-teams
+  "SELECT t.*
+     FROM team AS t
+     JOIN team_profile_rel AS tpr ON t.id = tpr.team_id
+    WHERE tpr.profile_id = ?
+      AND tpr.is_owner = 't'
+      AND t.is_default = 'f'
+      AND t.deleted_at is null;")
+
+(def ^:private schema:team
+  [:map
+   [:id ::sm/uuid]
+   [:name :string]])
+
+(def ^:private schema:get-teams-result
+  [:vector schema:team])
+
+(sv/defmethod ::get-teams
+  "List teams for which current user is owner.
+     @api GET /get-teams
+     @returns
+       200 OK: Returns the list of teams for the user."
+  {::doc/added "2.12"
+   ::sm/result schema:get-teams-result}
+  [cfg {:keys [::rpc/profile-id]}]
+  (when (contains? cf/flags :nitrate)
+    (let [current-user-id (-> (profile/get-profile cfg profile-id) :id)]
+      (->> (db/exec! cfg [sql:get-teams current-user-id])
+           (map #(select-keys % [:id :name]))))))
+
+;; ---- API: notify-team-change
+
+(def ^:private schema:notify-team-change
+  [:map
+   [:id ::sm/uuid]
+   [:organization-id ::sm/text]])
+
+
+(sv/defmethod ::notify-team-change
+  "Notify to Penpot a team change from nitrate
+     @api POST /notify-team-change
+     @returns
+       200 OK"
+  {::doc/added "2.12"
+   ::sm/params schema:notify-team-change
+   ::rpc/auth false}
+  [cfg {:keys [id organization-id organization-name]}]
+  (when (contains? cf/flags :nitrate)
+    (let [msgbus (::mbus/msgbus cfg)]
+      (mbus/pub! msgbus
+                 ;;TODO There is a bug on dashboard with teams notifications.
+                 ;;For now we send it to uuid/zero instead of team-id
+                 :topic uuid/zero
+                 :message {:type :team-org-change
+                           :team-id id
+                           :organization-id organization-id
+                           :organization-name organization-name}))))
+
+
+
+
+
+
+

common/src/app/common/flags.cljc

@@ -148,7 +148,10 @@
 
     ;; A temporal flag, enables backend code use more extensivelly
     ;; redis for caching data
-    :redis-cache})
+    :redis-cache
+
+    ;; Activates the nitrate module
+    :nitrate})
 
 (def all-flags
   (set/union email login varia))

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}

docker/devenv/files/nginx.conf

@@ -141,8 +141,14 @@ http {
             proxy_pass http://127.0.0.1:5000;
         }
 
-        location /nitrate/ {
-            proxy_pass http://127.0.0.1:3000/;
+        location /control-center {
+           proxy_pass http://127.0.0.1:3000;
+           proxy_http_version 1.1;
+
+           proxy_set_header Host $host;
+           proxy_set_header X-Real-IP $remote_addr;
+           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+           proxy_set_header X-Forwarded-Proto $scheme;
         }
 
         location /wasm-playground {

docker/images/files/nginx-entrypoint.sh

@@ -29,8 +29,9 @@ update_flags /var/www/app/js/config.js
 
 export PENPOT_BACKEND_URI=${PENPOT_BACKEND_URI:-http://penpot-backend:6060}
 export PENPOT_EXPORTER_URI=${PENPOT_EXPORTER_URI:-http://penpot-exporter:6061}
+export PENPOT_NITRATE_URI=${PENPOT_NITRATE_URI:-http://penpot-nitrate:3000}
 export PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE=${PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE:-367001600} # Default to 350MiB
-envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
+envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_NITRATE_URI,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
          < /tmp/nginx.conf.template > /etc/nginx/nginx.conf
 
 PENPOT_DEFAULT_INTERNAL_RESOLVER="$(awk 'BEGIN{ORS=" "} $1=="nameserver" { sub(/%.*$/,"",$2); print ($2 ~ ":")? "["$2"]": $2}' /etc/resolv.conf)"

docker/images/files/nginx.conf.template

@@ -139,6 +139,14 @@ http {
             proxy_pass $PENPOT_BACKEND_URI/ws/notifications;
         }
 
+        location /control-center {
+            proxy_http_version 1.1;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Real-IP $http_cf_connecting_ip;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_pass $PENPOT_NITRATE_URI$request_uri;
+        }
+
         include /etc/nginx/overrides/server.d/*.conf;
 
         location / {

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

@@ -759,87 +759,4 @@ test.describe("Tokens: Apply token", () => {
     });
     await expect(StrokeWidthPillSmall).toBeVisible();
   });
-
-  test("User applies margin token to a shape", async ({ page }) => {
-    const workspace = new WorkspacePage(page, {
-      textEditor: true,
-    });
-    // Set up
-    await workspace.mockConfigFlags(["enable-feature-token-input"]);
-    await workspace.setupEmptyFile();
-    await workspace.mockGetFile("workspace/get-file-layout-stroke-token-json");
-    await workspace.goToWorkspace();
-
-    // Select shape apply stroke
-    await workspace.layers
-      .getByTestId("layer-row")
-      .nth(1)
-      .getByRole("button", { name: "Toggle layer" })
-      .click();
-
-    await workspace.layers.getByTestId("layer-row").nth(2).click();
-
-    const rightSidebar = page.getByTestId("right-sidebar");
-    await expect(rightSidebar).toBeVisible();
-    await rightSidebar.getByTestId("add-stroke").click();
-
-    // Apply margin token from token panel
-    const tokensTab = page.getByRole("tab", { name: "Tokens" });
-    await expect(tokensTab).toBeVisible();
-    await tokensTab.click();
-    await page.getByRole("button", { name: "Dimensions 4" }).click();
-    await page.getByRole("button", { name: "dim", exact: true }).click();
-    const tokensSidebar = workspace.tokensSidebar;
-    await expect(
-      tokensSidebar.getByRole("button", { name: "dim.md" }),
-    ).toBeVisible();
-    await tokensSidebar
-      .getByRole("button", { name: "dim.md" })
-      .click({ button: "right" });
-    await page
-      .getByTestId("tokens-context-menu-for-token")
-      .getByText("Spacing")
-      .hover();
-    await page
-      .getByTestId("tokens-context-menu-for-token")
-      .getByText("Horizontal")
-      .click();
-
-    // Check if token pill is visible on right sidebar
-    const layoutItemSectionSidebar = rightSidebar.getByRole("region", {
-      name: "layout item menu",
-    });
-    await expect(layoutItemSectionSidebar).toBeVisible();
-    const marginPillMd = layoutItemSectionSidebar.getByRole("button", {
-      name: "dim.md",
-    });
-    await expect(marginPillMd).toBeVisible();
-
-    await marginPillMd.click();
-    const dimensionTokenOptionXl = page.getByRole("option", { name: "dim.xl" });
-    await expect(dimensionTokenOptionXl).toBeVisible();
-    await dimensionTokenOptionXl.click();
-
-    const marginPillXL = layoutItemSectionSidebar.getByRole("button", {
-      name: "dim.xl",
-    });
-    await expect(marginPillXL).toBeVisible();
-
-    // Detach token from right sidebar and apply another from dropdown
-    const detachButton = layoutItemSectionSidebar.getByRole("button", {
-      name: "Detach token",
-    });
-    await detachButton.click();
-    await expect(marginPillXL).not.toBeVisible();
-    const horizontalMarginInput = layoutItemSectionSidebar.getByText('Horizontal marginOpen token');
-    await expect(horizontalMarginInput).toBeVisible();
-
-    const tokenDropdown = horizontalMarginInput.getByRole('button', { name: 'Open token list' });
-    await tokenDropdown.click();
-
-    await expect(dimensionTokenOptionXl).toBeVisible();
-    await dimensionTokenOptionXl.click();
-    
-    await expect(marginPillXL).toBeVisible();
-  });
 });

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

@@ -216,4 +216,32 @@ test.describe("Tokens: Sets Tab", () => {
     await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "false");
     await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "true");
   });
+
+  test("Display active set and verify if is enabled", async ({ page }) => {
+    const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } =
+      await setupTokensFile(page);
+
+    // Create set
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+    await changeSetInput(tokenThemesSetsSidebar, "Inactive set");
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "Inactive set" })
+      .click();
+    let activeSetTitle = await tokensSidebar.getByTestId(
+      "active-token-set-title",
+    );
+    await expect(activeSetTitle).toHaveText("TOKENS - Inactive set");
+    const inactiveSetInfo = await tokensSidebar.getByTitle(
+      "This set is not active.",
+    );
+    await expect(inactiveSetInfo).toBeVisible();
+
+    // Switch active set
+
+    await tokenThemesSetsSidebar.getByRole("button", { name: "theme" }).click();
+    await expect(activeSetTitle).toHaveText("TOKENS - theme");
+    await expect(inactiveSetInfo).not.toBeVisible();
+  });
 });

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

@@ -15,6 +15,7 @@
    [app.common.time :as ct]
    [app.common.types.project :refer [valid-project?]]
    [app.common.uuid :as uuid]
+   [app.config :as cf]
    [app.main.constants :as mconst]
    [app.main.data.common :as dcm]
    [app.main.data.event :as ev]
@@ -683,12 +684,25 @@
       (rx/of (dcm/change-team-role params)
              (modal/hide)))))
 
+(defn handle-change-team-org
+  [{:keys [team-id organization-id organization-name]}]
+  (ptk/reify ::handle-change-team-org
+    ptk/UpdateEvent
+    (update [_ state]
+      (if (contains? cf/flags :nitrate)
+        (d/update-in-when state [:teams team-id] assoc
+                          :organization-id organization-id
+                          :organization-name organization-name)
+        state))))
+
+
 (defn- process-message
   [{:keys [type] :as msg}]
   (case type
     :notification           (dcm/handle-notification msg)
     :team-role-change       (handle-change-team-role msg)
     :team-membership-change (dcm/team-membership-change msg)
+    :team-org-change        (handle-change-team-org msg)
     nil))
 
 

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/data/workspace/tokens/library_edit.cljs

@@ -433,11 +433,18 @@
     ptk/WatchEvent
     (watch [it state _]
       (let [data    (dsh/lookup-file-data state)
+            token-set (if set-id
+                        (lookup-token-set state set-id)
+                        (lookup-token-set state))
+            token     (-> (get-tokens-lib state)
+                          (ctob/get-token (ctob/get-id token-set) token-id))
+            token-type (:type token)
 
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/set-token set-id token-id nil))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of (dch/commit-changes changes)
+               (ptk/data-event ::ev/event {::ev/name "delete-token" :type token-type}))))))
 
 (defn bulk-delete-tokens
   [set-id token-ids]
@@ -445,9 +452,15 @@
   (dm/assert! (every? uuid? token-ids))
   (ptk/reify ::bulk-delete-tokens
     ptk/WatchEvent
-    (watch [_ _ _]
-      (apply rx/of
-             (map #(delete-token set-id %) token-ids)))))
+    (watch [it state _]
+      (let [data    (dsh/lookup-file-data state)
+            changes (reduce (fn [changes token-id]
+                              (pcb/set-token changes set-id token-id nil))
+                            (-> (pcb/empty-changes it)
+                                (pcb/with-library-data data))
+                            token-ids)]
+        (rx/of (dch/commit-changes changes)
+               (ptk/data-event ::ev/event {::ev/name "delete-token-node"}))))))
 
 (defn duplicate-token
   [token-id]

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

@@ -35,6 +35,7 @@
    [app.main.ui.dashboard.team-form]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.nitrate.nitrate-form]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
    [app.util.i18n :as i18n :refer [tr]]
@@ -280,8 +281,8 @@
 
 (mf/defc teams-selector-dropdown*
   {::mf/private true}
-  [{:keys [team profile teams] :rest props}]
-  (let [on-create-click
+  [{:keys [team profile teams show-default-team allow-create-teams allow-create-org] :rest props}]
+  (let [on-create-team-click
         (mf/use-fn #(st/emit! (modal/show :team-form {})))
 
         on-team-click
@@ -290,18 +291,27 @@
            (let [team-id (-> (dom/get-current-target event)
                              (dom/get-data "value")
                              (uuid/parse))]
-             (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)))))]
+             (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)))))
+
+        on-create-org-click
+        (mf/use-fn
+         (fn []
+           (if (:nitrate-licence profile)
+             ;; TODO update when org creation route is ready
+             (dom/open-new-window "/control-center/org/create")
+             (st/emit! (modal/show :nitrate-form {})))))]
 
     [:> dropdown-menu* props
 
-     [:> dropdown-menu-item* {:on-click    on-team-click
-                              :data-value  (:default-team-id profile)
-                              :class       (stl/css :team-dropdown-item)}
-      [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
+     (when show-default-team
+       [:> dropdown-menu-item* {:on-click    on-team-click
+                                :data-value  (:default-team-id profile)
+                                :class       (stl/css :team-dropdown-item)}
+        [:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
 
-      [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
-      (when (= (:default-team-id profile) (:id team))
-        tick-icon)]
+        [:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
+        (when (= (:default-team-id profile) (:id team))
+          tick-icon)])
 
      (for [team-item (remove :is-default (vals teams))]
        [:> dropdown-menu-item* {:on-click    on-team-click
@@ -322,11 +332,19 @@
         (when (= (:id team-item) (:id team))
           tick-icon)])
 
-     [:hr {:role "separator" :class (stl/css :team-separator)}]
-     [:> dropdown-menu-item* {:on-click    on-create-click
-                              :class       (stl/css :team-dropdown-item :action)}
-      [:span {:class (stl/css :icon-wrapper)} add-icon]
-      [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
+     (when allow-create-teams
+       [:hr {:role "separator" :class (stl/css :team-separator)}]
+       [:> dropdown-menu-item* {:on-click    on-create-team-click
+                                :class       (stl/css :team-dropdown-item :action)}
+        [:span {:class (stl/css :icon-wrapper)} add-icon]
+        [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]])
+
+     (when allow-create-org
+       [:hr {:role "separator" :class (stl/css :team-separator)}]
+       [:> dropdown-menu-item* {:on-click    on-create-org-click
+                                :class       (stl/css :team-dropdown-item :action)}
+        [:span {:class (stl/css :icon-wrapper)} add-icon]
+        [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-org")]])]))
 
 (mf/defc team-options-dropdown*
   {::mf/private true}
@@ -476,9 +494,80 @@
                                 :data-testid "delete-team"}
         (tr "dashboard.delete-team")])]))
 
+
+(mf/defc sidebar-org-switch*
+  [{:keys [team profile]}]
+  (let [teams (->> (mf/deref refs/teams)
+                   vals
+                   (group-by :organization-id)
+                   (map (fn [[_group entries]] (first entries)))
+                   vec
+                   (d/index-by :id))
+
+        teams (update-vals teams
+                           (fn [t]
+                             (assoc t :name (str "ORG: " (:organization-name t)))))
+
+        team (assoc team :name (str "ORG: " (:organization-name team)))
+
+        show-teams-menu*
+        (mf/use-state false)
+
+        show-teams-menu?
+        (deref show-teams-menu*)
+
+        on-show-teams-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (swap! show-teams-menu* not)))
+
+        on-show-teams-keydown
+        (mf/use-fn
+         (fn [event]
+           (when (or (kbd/space? event)
+                     (kbd/enter? event))
+             (dom/prevent-default event)
+             (dom/stop-propagation event)
+             (some-> (dom/get-current-target event)
+                     (dom/click!)))))
+        close-teams-menu
+        (mf/use-fn #(reset! show-teams-menu* false))]
+
+    [:div {:class (stl/css :sidebar-team-switch)}
+     [:div {:class (stl/css :switch-content)}
+      [:button {:class (stl/css :current-team)
+                :on-click on-show-teams-click
+                :on-key-down on-show-teams-keydown}
+
+       [:div {:class (stl/css :team-name)}
+        [:img {:src (cf/resolve-team-photo-url team)
+               :class (stl/css :team-picture)
+               :alt (:name team)}]
+        [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]]
+
+       arrow-icon]]
+
+     ;; Teams Dropdown
+
+     [:> teams-selector-dropdown* {:show show-teams-menu?
+                                   :on-close close-teams-menu
+                                   :id "organizations-list"
+                                   :class (stl/css :dropdown :teams-dropdown)
+                                   :team team
+                                   :profile profile
+                                   :teams teams
+                                   :show-default-team false
+                                   :allow-create-teams false
+                                   :allow-create-org true}]]))
+
 (mf/defc sidebar-team-switch*
   [{:keys [team profile]}]
-  (let [teams (mf/deref refs/teams)
+  (let [nitrate?     (contains? cf/flags :nitrate)
+        org-id (when nitrate? (:organization-id team))
+        teams (cond->> (mf/deref refs/teams)
+                nitrate?
+                (filter #(= (-> % val :organization-id) org-id)))
 
         subscription
         (get team :subscription)
@@ -586,7 +675,10 @@
                                    :class (stl/css :dropdown :teams-dropdown)
                                    :team team
                                    :profile profile
-                                   :teams teams}]
+                                   :teams teams
+                                   :show-default-team true
+                                   :allow-create-teams true
+                                   :allow-create-org false}]
 
      [:> team-options-dropdown* {:show show-team-options-menu?
                                  :on-close close-team-options-menu
@@ -703,6 +795,8 @@
     [:*
      [:div {:class (stl/css-case :sidebar-content true)
             :ref container}
+      (when (contains? cf/flags :nitrate)
+        [:> sidebar-org-switch* {:team team :profile profile}])
       [:> sidebar-team-switch* {:team team :profile profile}]
 
       [:> sidebar-search* {:search-term search-term

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

@@ -29,14 +29,7 @@
 
 .icon {
   color: var(--color-foreground-secondary);
-  min-inline-size: var(--sp-l);
-}
-
-.text-icon {
-  color: var(--color-foreground-secondary);
-  @include t.use-typography("code-font");
-  inline-size: fit-content;
-  min-inline-size: px2rem(40);
+  min-width: var(--sp-l);
 }
 
 .invisible-button {

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/nitrate/nitrate_form.cljs

@@ -0,0 +1,48 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.nitrate.nitrate-form
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.icons :as deprecated-icon]
+   [app.util.dom :as dom]
+   [rumext.v2 :as mf]))
+
+;; FIXME: rename to `form` (remove the nitrate prefix from namespace,
+;; because it is already under nitrate)
+
+(mf/defc nitrate-form-modal*
+  {::mf/register modal/components
+   ::mf/register-as :nitrate-form}
+  []
+  (let [on-click
+        (mf/use-fn
+         (fn []
+           (dom/open-new-window "/control-center/licenses/start")))]
+
+    [:div {:class (stl/css :modal-overlay)}
+     [:div {:class (stl/css :modal-container)}
+      [:div {:class (stl/css :nitrate-form)}
+
+       [:div {:class (stl/css :modal-header)}
+        [:h2 {:class (stl/css :modal-title)}
+         "BUY NITRATE"]
+
+        [:button {:class (stl/css :modal-close-btn)
+                  :on-click modal/hide!} deprecated-icon/close]]
+
+       [:div {:class (stl/css :modal-content)}
+        "Nitrate is so cool! You should buy it!"]
+
+       [:div {:class (stl/css :modal-footer)}
+        [:div {:class (stl/css :action-buttons)}
+         [:> button* {:variant "primary"
+                      :on-click on-click}
+          "BUY NOW!"]]]]]]))
+
+

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

@@ -0,0 +1,52 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-container {
+  @extend .modal-container-base;
+}
+
+.modal-header {
+  margin-bottom: deprecated.$s-24;
+}
+
+.modal-title {
+  @include deprecated.uppercaseTitleTipography;
+  color: var(--modal-title-foreground-color);
+}
+
+.modal-close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.modal-content {
+  margin-bottom: deprecated.$s-24;
+}
+
+.nitrate-form {
+  min-width: deprecated.$s-400;
+}
+
+.action-buttons {
+  @extend .modal-action-btns;
+}
+
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+
+.accept-btn {
+  @extend .modal-accept-btn;
+
+  &.danger {
+    @extend .modal-danger-btn;
+  }
+}

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

@@ -119,7 +119,6 @@
             [:button {:class (stl/css-case
                               :toggle-content true
                               :inverse expanded?)
-                      :aria-label "Toggle layer"
                       :on-click on-toggle-collapse}
              deprecated-icon/arrow])
 

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,339 +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))
 
-        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-detach-horizontal
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (prn "token" token)
-           (run! #(on-detach-token token %) [:m2 :m4])))
-
-        on-detach-vertical
-        (mf/use-fn
-         (mf/deps on-detach-token)
-         (fn [token]
-           (run! #(on-detach-token token %) [:m1 :m3])))
+             (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 :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-vertical
-         :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-horizontal
-         :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))
@@ -534,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?
@@ -722,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*)
@@ -819,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)
@@ -836,8 +423,7 @@
          (fn [value]
            (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value}))))]
 
-    [:section {:class (stl/css :element-set)
-               :aria-label "layout item menu"}
+    [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
       [:> title-bar* {:collapsable  has-content?
                       :collapsed    (not open?)
@@ -897,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

@@ -6,21 +6,17 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/typography.scss" as *;
-@use "ds/_utils.scss" as *;
 
 .element-set {
   margin: 0;
 }
 
 .title-spacing-layout-element {
-  margin: 0 0 var(--sp-xs) 0;
+  margin: 0 0 deprecated.$s-4 0;
 }
 
 .title-spacing-empty {
-  padding-inline-start: var(--sp-xxs);
+  padding-left: deprecated.$s-2;
 }
 
 .flex-element-menu {
@@ -39,8 +35,8 @@
 }
 
 .z-index-wrapper {
-  @include use-typography("body-small");
   @extend .input-element;
+  @include deprecated.bodySmallTypography;
   grid-column: 6 / span 3;
 }
 
@@ -59,7 +55,7 @@
 }
 
 .position-options {
-  inline-size: 100%;
+  width: 100%;
   grid-column: 1 / span 5;
 }
 
@@ -79,7 +75,7 @@
   .vertical-margin,
   .horizontal-margin {
     @extend .input-element;
-    @include use-typography("body-small");
+    @include deprecated.bodySmallTypography;
   }
   .vertical-margin {
     grid-column: 1;
@@ -89,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;
@@ -110,33 +96,25 @@
 .left-margin,
 .right-margin {
   @extend .input-element;
-  @include use-typography("body-small");
+  @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;
 }
@@ -162,18 +140,14 @@
 .layout-item-max-w,
 .layout-item-max-h {
   @extend .input-element;
-  @include use-typography("body-small");
+  @include deprecated.bodySmallTypography;
   .icon-text {
     justify-content: flex-start;
-    inline-size: px2rem(80);
-    padding-block-start: var(--sp-xxs);
+    width: deprecated.$s-80;
+    padding-top: deprecated.$s-2;
   }
 }
 
 .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/src/app/main/ui/workspace/tokens/management.cljs

@@ -46,7 +46,7 @@
   {::mf/private true}
   [{:keys [tokens-lib selected-token-set-id]}]
   (let [selected-token-set
-        (mf/with-memo [tokens-lib]
+        (mf/with-memo [tokens-lib selected-token-set-id]
           (when selected-token-set-id
             (some-> tokens-lib (ctob/get-set selected-token-set-id))))
 
@@ -62,18 +62,20 @@
     [:div {:class (stl/css :sets-header-container)}
      [:> text* {:as "span"
                 :typography "headline-small"
-                :class (stl/css :sets-header)}
+                :class (stl/css :sets-header)
+                :data-testid "active-token-set-title"}
       (tr "workspace.tokens.tokens-section-title" (ctob/get-name selected-token-set))]
-     [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
+     (when (and (some? selected-token-set-id)
+                (not (token-set-active? (ctob/get-name selected-token-set))))
+       [:div {:class (stl/css :sets-header-status) :title (tr "workspace.tokens.inactive-set-description")}
         ;; NOTE: when no set in tokens-lib, the selected-token-set-id
         ;; will be `nil`, so for properly hide the inactive message we
         ;; check that at least `selected-token-set-id` has a value
-      (when (and (some? selected-token-set-id)
-                 (not (token-set-active? (ctob/get-name selected-token-set))))
+
         [:*
          [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
          [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)}
-          (tr "workspace.tokens.inactive-set")]])]]))
+          (tr "workspace.tokens.inactive-set")]]])]))
 
 (mf/defc tokens-section*
   {::mf/private true}
@@ -158,7 +160,7 @@
      [:& token-context-menu]
      [:> token-node-context-menu* {:on-delete-node delete-node}]
 
-     [:& selected-set-info* {:tokens-lib tokens-lib
+     [:> selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]
 
      (for [type filled-group]

frontend/src/app/util/object.cljc

@@ -225,118 +225,83 @@
                                   get-expr)])
 
                              (when set-expr
-                               (concat
-                                (when (and schema-n (not (list? schema-n)))
-                                  [coercer-sym `(sm/coercer ~schema-n)])
+                               [schema-sym  schema-n
 
-                                (when (and schema-n (list? schema-n))
-                                  [schema-sym schema-n])
+                                coercer-sym `(if (and (some? ~schema-sym)
+                                                      (not (fn? ~schema-sym)))
+                                               (sm/coercer ~schema-sym)
+                                               nil)
 
-                                [decode-sym decode-expr]
+                                decode-sym decode-expr
 
-                                [(make-sym pname "set-fn")
-                                 (if this?
-                                   `(fn [~val-sym]
-                                      (let [~@(if (and schema-n (list? schema-n))
-                                                [schema-sym  `(~schema-sym ~val-sym)
-                                                 coercer-sym `(sm/coercer ~schema-sym)]
-                                                [])
-                                            ~this-sym (~'js* "this")
-                                            ~fn-sym   ~set-expr
-                                            ~val-sym  ~(if schema-n
-                                                         (if decode-expr
-                                                           `(~decode-sym ~val-sym)
-                                                           `(~decode-sym ~val-sym ~decode-options))
-                                                         val-sym)
-                                            ~val-sym  ~(if schema-n
-                                                         `(~coercer-sym ~val-sym)
-                                                         val-sym)]
-                                        (.call ~fn-sym ~this-sym ~this-sym ~val-sym)))
-                                   `(fn [~val-sym]
-                                      (let [~@(if (and schema-n (list? schema-n))
-                                                [schema-sym  `(~schema-sym ~val-sym)
-                                                 coercer-sym `(sm/coercer ~schema-sym)]
-                                                [])
-                                            ~this-sym (~'js* "this")
-                                            ~fn-sym   ~set-expr
-                                            ~val-sym  ~(if schema-n
-                                                         (if decode-expr
-                                                           `(~decode-sym ~val-sym)
-                                                           `(~decode-sym ~val-sym ~decode-options))
-                                                         val-sym)
-                                            ~val-sym  ~(if schema-n
-                                                         `(~coercer-sym ~val-sym)
-                                                         val-sym)]
-                                        (.call ~fn-sym ~this-sym ~val-sym))))]))
+                                (make-sym pname "set-fn")
+                                `(fn [~val-sym]
+                                   (let [~this-sym (~'js* "this")
+                                         ~fn-sym   ~set-expr
+
+                                         ;; We only emit schema and coercer bindings if
+                                         ;; schema-n is provided
+                                         ~@(if (some? schema-n)
+                                             [schema-sym  `(if (fn? ~schema-sym)
+                                                             (~schema-sym ~val-sym)
+                                                             ~schema-sym)
+
+                                              coercer-sym `(if (nil? ~coercer-sym)
+                                                             (sm/coercer ~schema-sym)
+                                                             ~coercer-sym)
+                                              val-sym     (if (not= decode-expr 'app.common.json/->clj)
+                                                            `(~decode-sym ~val-sym)
+                                                            `(~decode-sym ~val-sym ~decode-options))
+                                              val-sym     `(~coercer-sym ~val-sym)]
+                                             [])]
+
+                                     ~(if this?
+                                        `(.call ~fn-sym ~this-sym ~this-sym ~val-sym)
+                                        `(.call ~fn-sym ~this-sym ~val-sym))))])
 
                              (when fn-expr
-                               (concat
-                                (cond
-                                  (and schema-n (not (list? schema-n)))
-                                  [coercer-sym `(sm/coercer ~schema-n)]
+                               [schema-sym  (or schema-n schema-1)
+                                coercer-sym `(if (and (some? ~schema-sym)
+                                                      (not (fn? ~schema-sym)))
+                                               (sm/coercer ~schema-sym)
+                                               nil)
+                                decode-sym decode-expr
 
-                                  (and schema-n (list? schema-n))
-                                  [schema-sym schema-n]
+                                (make-sym pname "get-fn")
+                                `(fn []
+                                   (let [~this-sym (~'js* "this")
+                                         ~fn-sym   ~fn-expr
+                                         ~fn-sym   ~(if this?
+                                                      `(.bind ~fn-sym ~this-sym ~this-sym)
+                                                      `(.bind ~fn-sym ~this-sym))
 
-                                  (and schema-1 (not (list? schema-1)))
-                                  [coercer-sym `(sm/coercer ~schema-1)]
+                                         ;; We only emit schema and coercer bindings if
+                                         ;; schema-n or schema-1 is provided
+                                         ~@(if (or schema-n schema-1)
+                                             [fn-sym `(fn* [~@(if schema-1 [val-sym] [])]
+                                                           (let [~@(if schema-n
+                                                                     [val-sym `(into-array (cljs.core/js-arguments))]
+                                                                     [])
+                                                                 ~val-sym     ~(if (not= decode-expr 'app.common.json/->clj)
+                                                                                 `(~decode-sym ~val-sym)
+                                                                                 `(~decode-sym ~val-sym ~decode-options))
 
-                                  (and schema-1 (list? schema-1))
-                                  [schema-sym schema-1])
+                                                                 ~schema-sym  (if (fn? ~schema-sym)
+                                                                                (~schema-sym ~val-sym)
+                                                                                ~schema-sym)
 
-                                [decode-sym decode-expr]
+                                                                 ~coercer-sym (if (nil? ~coercer-sym)
+                                                                                (sm/coercer ~schema-sym)
+                                                                                ~coercer-sym)
 
-                                [(make-sym pname "get-fn")
-                                 `(fn []
-                                    (let [~this-sym (~'js* "this")
-                                          ~fn-sym   ~fn-expr
-                                          ~fn-sym   ~(if this?
-                                                       `(.bind ~fn-sym ~this-sym ~this-sym)
-                                                       `(.bind ~fn-sym ~this-sym))
-
-                                          ~@(if schema-1
-                                              [fn-sym `(fn* [~val-sym]
-                                                            (let [~val-sym
-                                                                  ~(if decode-expr
-                                                                     `(~decode-sym ~val-sym)
-                                                                     `(~decode-sym ~val-sym ~decode-options))
-
-                                                                  ~@(if (or (and schema-n (list? schema-n))
-                                                                            (and schema-1 (list? schema-1)))
-                                                                      [schema-sym  `(~schema-sym ~val-sym)
-                                                                       coercer-sym `(sm/coercer ~schema-sym)]
-                                                                      [])
-
-                                                                  ~val-sym
-                                                                  (~coercer-sym ~val-sym)]
-
-                                                              (~fn-sym ~val-sym)))]
-                                              [])
-                                          ~@(if schema-n
-                                              [fn-sym `(fn* []
-                                                            (let [~val-sym
-                                                                  (into-array (cljs.core/js-arguments))
-
-                                                                  ~val-sym
-                                                                  ~(if decode-expr
-                                                                     `(~decode-sym ~val-sym)
-                                                                     `(~decode-sym ~val-sym ~decode-options))
-
-                                                                  ~@(if (or (and schema-n (list? schema-n))
-                                                                            (and schema-1 (list? schema-1)))
-                                                                      [schema-sym  `(~schema-sym ~val-sym)
-                                                                       coercer-sym `(sm/coercer ~schema-sym)]
-                                                                      [])
-
-                                                                  ~val-sym
-                                                                  (~coercer-sym ~val-sym)]
-                                                              (apply ~fn-sym ~val-sym)))]
-                                              [])
-                                          ~@(if wrap
-                                              [fn-sym `(~wrap-sym ~fn-sym)]
-                                              [])]
-
-                                      ~fn-sym))])))))))]
+                                                                 ~val-sym     (~coercer-sym ~val-sym)]
+                                                             ~(if schema-1
+                                                                `(~fn-sym ~val-sym)
+                                                                `(apply ~fn-sym ~val-sym))))]
+                                             [])]
+                                     ~(if wrap
+                                        `(~wrap-sym ~fn-sym)
+                                        fn-sym)))]))))))]
 
        `(let [~target-sym ~rsym
               ~@bindings]

frontend/translations/en.po

@@ -433,6 +433,9 @@ msgstr "(copy)"
 msgid "dashboard.create-new-team"
 msgstr "Create new team"
 
+msgid "dashboard.create-new-org"
+msgstr "Create new org"
+
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"
 msgstr "Pin this version"
@@ -6713,19 +6716,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

@@ -442,6 +442,9 @@ msgstr "(copia)"
 msgid "dashboard.create-new-team"
 msgstr "Crear nuevo equipo"
 
+msgid "dashboard.create-new-org"
+msgstr "Crear nueva organización"
+
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"
 msgstr "Guardar esta versión"
@@ -7164,11 +7167,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"