✨ Add example ui storybook

frontend/package.json

@@ -51,6 +51,7 @@
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "workspace:./text-editor",
     "@playwright/test": "1.58.0",
+    "@penpot/ui": "workspace:./packages/ui",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-themes": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",

frontend/packages/ui/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [],
+  "plugins": []
+}

frontend/packages/ui/.gitignore

@@ -0,0 +1 @@
+dist/

frontend/packages/ui/.storybook/main.ts

@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: [],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.mts',
+      },
+    },
+  },
+};
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
+export default config;

frontend/packages/ui/README.md

@@ -0,0 +1,11 @@
+# UI
+
+A React component library with TypeScript for the Penpot ecosystem.
+
+## Commands
+
+Run from workspace root:
+
+- **`pnpm storybook:ui`** - Start Storybook for component development
+- **`pnpm build:ui`** - Build the library for production
+- **`pnpm start:ui`** - Build in watch mode for development

frontend/packages/ui/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@penpot/ui",
+  "version": "0.0.1",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "watch": "vite build --watch",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@storybook/react": "10.2.0",
+    "@storybook/react-vite": "10.2.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "react-compiler-runtime": "^1.0.0",
+    "storybook": "10.2.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  }
+}

frontend/packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/example/Example';

frontend/packages/ui/src/lib/example/Example.module.css

@@ -0,0 +1,5 @@
+.container {
+  background-color: #f0f0f0;
+  padding: 16px;
+  border: 2px solid #000;
+}

frontend/packages/ui/src/lib/example/Example.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Example from './Example';
+
+describe('Example', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Example />);
+    expect(baseElement).toBeTruthy();
+  });
+});

frontend/packages/ui/src/lib/example/Example.stories.ts

@@ -0,0 +1,12 @@
+import { Example } from './Example';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'UI/Example',
+  component: Example,
+} satisfies Meta<typeof Example>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

frontend/packages/ui/src/lib/example/Example.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import styles from './Example.module.css';
+
+export function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className={styles.container}>
+      <h1>Example!</h1>
+      <div>
+        <h2>Counter: {count}</h2>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+        <button onClick={() => setCount(0)}>Reset</button>
+      </div>
+    </div>
+
+  );
+}
+
+export default Example;

frontend/packages/ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest"],
+    "baseUrl": "."
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

frontend/packages/ui/tsconfig.lib.json

@@ -0,0 +1,37 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

frontend/packages/ui/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

frontend/packages/ui/tsconfig.storybook.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

frontend/packages/ui/vite.config.mts

@@ -0,0 +1,66 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { copyFileSync } from 'node:fs';
+
+const copyCssPlugin = () => ({
+  name: 'copy-css',
+  closeBundle: () => {
+    try {
+      copyFileSync(
+        'dist/index.css',
+        '../../resources/public/css/ui.css',
+      );
+    } catch (e) {
+      console.log('Error copying css file', e);
+    }
+  },
+});
+
+export default defineConfig(() => ({
+  root: import.meta.dirname,
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
+      pathsToAliases: false,
+    }),
+    copyCssPlugin(),
+  ],
+  build: {
+    outDir: 'dist/',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      entry: 'src/index.ts',
+      name: 'ui',
+      fileName: 'index',
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    name: 'ui',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/ui',
+      provider: 'v8' as const,
+    },
+  },
+}));

frontend/pnpm-workspace.yaml

@@ -7,3 +7,4 @@ packages:
   - "packages/draft-js"
   - "packages/mousetrap"
   - "text-editor"
+  - "packages/ui"

frontend/resources/templates/index.mustache

@@ -18,6 +18,7 @@
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
+     <link href="css/ui.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
     <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}

frontend/scripts/build-libs.js

@@ -1,6 +1,20 @@
 import * as esbuild from "esbuild";
 import { readFile } from "node:fs/promises";
 
+/**
+ * esbuild plugin to watch a directory recursively
+ */
+const watchExtraDirPlugin = {
+  name: 'watch-extra-dir',
+  setup(build) {
+    build.onLoad({ filter: /target\/index.js/, namespace: 'file' }, async (args) => {
+      return {
+        watchDirs: ["packages/ui/dist"],
+      };
+    });
+  }
+};
+
 const filter =
   /react-virtualized[/\\]dist[/\\]es[/\\]WindowScroller[/\\]utils[/\\]onScroll\.js$/;
 
@@ -36,7 +50,7 @@ const config = {
     js: '"use strict";\nvar global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
-  plugins: [fixReactVirtualized, rebuildNotify],
+  plugins: [fixReactVirtualized, rebuildNotify, watchExtraDirPlugin],
 };
 
 async function watch() {

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

@@ -67,6 +67,11 @@
                                 :on-key-down handle-keydown
                                 :disabled disabled?})]
 
+    (mf/use-effect
+     (mf/deps default-checked)
+     (fn []
+       (reset! checked* default-checked)))
+
     [:> :div props
      [:div {:id id
             :class (stl/css :switch-track)}

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

@@ -3,17 +3,15 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.types.shape.radius :as ctsr]
-   [app.common.types.token :as tk]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
-   [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.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as hooks]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.util.i18n :as i18n :refer [tr]]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]
@@ -46,63 +44,6 @@
          (identical? (get old-values :r4)
                      (get new-values :r4)))))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach radius] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach name)
-         #(on-detach % name))
-
-        r1-value   (get applied-tokens :r1)
-        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))
-        all-values-equal? (all-equal? values)
-
-        applied-token (cond
-                        (not (seq applied-tokens))
-                        nil
-
-                        (and (= radius :all) (or (not all-values-equal?) (not all-token-equal?)))
-                        :multiple
-
-                        (and all-token-equal? all-values-equal? (= radius :all))
-                        r1-value
-
-                        :else
-                        (get applied-tokens radius))
-
-
-        placeholder (if (= radius :all)
-                      (cond
-                        (or (not all-values-equal?)
-                            (not all-token-equal?))
-                        (tr "settings.multiple")
-                        :else
-                        "--")
-
-                      (cond
-                        (or (= :multiple (:applied-tokens values))
-                            (= :multiple (get values name)))
-                        (tr "settings.multiple")
-                        :else
-                        "--"))
-
-
-        props  (mf/spread-props props
-                                {:placeholder placeholder
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value values})]
-    [:> numeric-input* props]))
-
 (mf/defc border-radius-menu*
   {::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
   [{:keys [class ids values applied-tokens]}]
@@ -110,6 +51,7 @@
         (features/use-feature "tokens/numeric-input")
 
         all-values-equal? (all-equal? values)
+        all-token-equal? (and (seq applied-tokens) (all-equal? applied-tokens))
 
         radius-expanded* (mf/use-state false)
         radius-expanded  (deref radius-expanded*)
@@ -235,18 +177,30 @@
            :on-detach on-detach-all
            :icon i/corner-radius
            :min 0
-           :name :border-radius
+           :attr :border-radius
            :nillable true
            :property (tr "workspace.options.radius")
-           :class (stl/css :radius-wrapper)
-           :applied-tokens applied-tokens
-           :radius :all
+           :applied-token (cond
+                            (not (seq applied-tokens))
+                            nil
+
+                            (or (not all-values-equal?) (not all-token-equal?))
+                            :multiple
+
+                            :else
+                            (get applied-tokens :r1))
            :align :right
-           :values (if all-values-equal?
-                     (if (nil? (:r1 values))
-                       0
-                       (:r1 values))
-                     nil)}]
+           :placeholder (cond
+                          (or (not all-values-equal?)
+                              (not all-token-equal?))
+                          (tr "settings.multiple")
+                          :else
+                          "--")
+           :value (if all-values-equal?
+                    (if (nil? (:r1 values))
+                      0
+                      (:r1 values))
+                    nil)}]
 
          [:div {:class (stl/css :radius-1)
                 :title (tr "workspace.options.radius")}
@@ -276,56 +230,75 @@
            {:on-change on-radius-r1-change
             :on-detach on-detach-r1
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :property (tr "workspace.options.radius-top-left")
-            :applied-tokens applied-tokens
-            :radius :r1
+            :applied-token (get applied-tokens :r1)
             :align :right
-            :class (stl/css :radius-wrapper :dropdown-offset)
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r1))
+                               (= :multiple (get values :r1)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
+            :class (stl/css :dropdown-offset)
             :inner-class (stl/css :no-icon-input)
-            :values  (:r1 values)}]
+            :value  (:r1 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r2-change
             :on-detach on-detach-r2
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-top-right")
-            :applied-tokens applied-tokens
+            :applied-token (get applied-tokens :r2)
             :align :right
-            :class (stl/css :radius-wrapper)
             :inner-class (stl/css :no-icon-input)
-            :radius :r2
-            :values (:r2 values)}]
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r2))
+                               (= :multiple (get values :r2)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
+            :value (:r2 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r4-change
             :on-detach on-detach-r4
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-bottom-left")
-            :applied-tokens applied-tokens
-            :class (stl/css :radius-wrapper :dropdown-offset)
+            :applied-token (get applied-tokens :r4)
+            :class (stl/css :dropdown-offset)
             :inner-class (stl/css :no-icon-input)
-            :radius :r4
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r4))
+                               (= :multiple (get values :r4)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
             :align :right
-            :values (:r4 values)}]
+            :value (:r4 values)}]
 
           [:> numeric-input-wrapper*
            {:on-change on-radius-r3-change
             :on-detach on-detach-r3
             :min 0
-            :name :border-radius
+            :attr :border-radius
             :nillable true
             :property (tr "workspace.options.radius-bottom-right")
-            :applied-tokens applied-tokens
-            :radius :r3
+            :applied-token (get applied-tokens :r3)
+            :placeholder (cond
+                           (or (= :multiple (get applied-tokens :r3))
+                               (= :multiple (get values :r3)))
+                           (tr "settings.multiple")
+                           :else
+                           "--")
             :align :right
             :class (stl/css :radius-wrapper)
             :inner-class (stl/css :no-icon-input)
-            :values (:r3 values)}]]
+            :value (:r3 values)}]]
 
          [:div {:class (stl/css :radius-4)}
           [:div {:class (stl/css :small-input)}

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

@@ -40,10 +40,6 @@
   margin-inline: var(--sp-xs);
 }
 
-.radius-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
 .no-icon-input {
   padding-inline-start: px2rem(6);
 }

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

@@ -0,0 +1,37 @@
+(ns app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.types.token :as tk]
+   [app.main.ui.context :as muc]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc numeric-input-wrapper*
+  [{:keys [value attr applied-token align on-detach placeholder input-type class] :rest props}]
+  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
+
+        tokens (mf/with-memo [tokens input-type]
+                 (delay
+                   (-> (deref tokens)
+                       (select-keys (get tk/tokens-by-input (or input-type attr)))
+                       (not-empty))))
+
+        on-detach-attr
+        (mf/use-fn
+         (mf/deps on-detach attr)
+         #(on-detach % attr))
+
+        props  (mf/spread-props props
+                                {:placeholder (or placeholder
+                                                  (if (= :multiple value)
+                                                    (tr "settings.multiple")
+                                                    "--"))
+                                 :class [class (stl/css :numeric-input-wrapper)]
+                                 :applied-token applied-token
+                                 :tokens (if (delay? tokens) @tokens tokens)
+                                 :align align
+                                 :on-detach on-detach-attr
+                                 :name attr
+                                 :value value})]
+    [:> numeric-input* props]))

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

@@ -0,0 +1,9 @@
+// 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
+
+.numeric-input-wrapper {
+  --dropdown-width: var(--7-columns-dropdown-width);
+}

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

@@ -9,7 +9,6 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.types.token :as tk]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.tokens.application :as dwta]
@@ -17,10 +16,9 @@
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.select :refer [select]]
-   [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.foundations.assets.icon :as i]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.render-wasm.api :as wasm.api]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -62,36 +60,6 @@
          (identical? (get old-values :hidden)
                      (get new-values :hidden)))))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-
-        on-detach-attr (mf/use-fn
-                        (mf/deps on-detach name)
-                        #(on-detach % name))
-
-        applied-token (get applied-tokens name)
-        opacity-value (or (get values name) 1)
-
-        props  (mf/spread-props props
-                                {:placeholder (if (or (= :multiple (:applied-tokens values))
-                                                      (= :multiple opacity-value))
-                                                (tr "settings.multiple")
-                                                "--")
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :name name
-                                 :value (* 100 opacity-value)})]
-    [:> numeric-input* props]))
-
 (mf/defc layer-menu*
   {::mf/wrap [#(mf/memo' % check-layer-menu-props)]}
   [{:keys [ids values applied-tokens]}]
@@ -257,12 +225,17 @@
          :icon i/percentage
          :min 0
          :max 100
-         :name :opacity
+         :attr :opacity
          :property (tr "workspace.options.opacity")
-         :applied-tokens applied-tokens
+         :applied-token (get applied-tokens :opacity)
+         :placeholder (if (or (= :multiple (get applied-tokens :opacity))
+                              (= :multiple (or (get values name) 1)))
+                        (tr "settings.multiple")
+                        "--")
          :align :right
          :class (stl/css :numeric-input-wrapper)
-         :values values}]
+         :value (* 100
+                   (or (get values name) 1))}]
 
        [:div {:class (stl/css :input)
               :title (tr "workspace.options.opacity")}

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

@@ -47,6 +47,5 @@
 
 .numeric-input-wrapper {
   grid-column: span 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
   --dropdown-offset: #{px2rem(-35)};
 }

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

@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
    [app.common.types.shape.layout :as ctl]
-   [app.common.types.token :as tk]
    [app.config :as cf]
    [app.main.data.event :as-alias ev]
    [app.main.data.workspace :as udw]
@@ -25,15 +24,14 @@
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
-   [app.main.ui.context :as muc]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [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.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -48,44 +46,6 @@
     :column         i/column
     :column-reverse i/column-reverse))
 
-
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        input-type (cond
-                     (some #{:p2 :p4} [name])
-                     :horizontal-padding
-
-                     (some #{:p1 :p3} [name])
-                     :vertical-padding
-                     :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 (if (or (= :multiple (:applied-tokens values))
-                                                      (= :multiple (get values name))
-                                                      (nil? (get values name)))
-                                                (tr "settings.multiple")
-                                                "--")
-                                 :class (stl/css :numeric-input-layout)
-                                 :applied-token (get applied-tokens name)
-                                 :tokens tokens
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value (get values name)})]
-    [:> numeric-input* props]))
-
 ;; FLEX COMPONENTS
 
 (def layout-container-flex-attrs
@@ -415,11 +375,17 @@
          :on-focus on-focus-p1
          :icon i/padding-top-bottom
          :min 0
-         :name :p1
+         :attr :p1
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.vertical")
          :nillable true
-         :applied-tokens {:p1 applied-to-p1}
-         :values {:p1 p1}}]
+         :placeholder (if (or (= :multiple applied-to-p1)
+                              (= :multiple p1)
+                              (nil? p1))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p1
+         :value p1}]
 
        [:div {:class (stl/css :padding-simple)
               :title (tr "workspace.layout-grid.editor.padding.vertical")}
@@ -444,12 +410,18 @@
          :on-focus on-focus-p2
          :icon i/padding-left-right
          :min 0
-         :name :p2
+         :attr :p2
+         :input-type :horizontal-padding
          :align :right
          :property (tr "workspace.layout-grid.editor.padding.horizontal")
          :nillable true
-         :applied-tokens {:p2 applied-to-p2}
-         :values {:p2 p2}}]
+         :applied-token applied-to-p2
+         :placeholder (if (or (= :multiple applied-to-p2)
+                              (= :multiple p2)
+                              (nil? p2))
+                        (tr "settings.multiple")
+                        "--")
+         :value p2}]
 
        [:div {:class (stl/css :padding-simple)
               :title (tr "workspace.layout-grid.editor.padding.horizontal")}
@@ -476,6 +448,11 @@
         p3 (:p3 value)
         p4 (:p4 value)
 
+        applied-to-p1 (:p1 applied-tokens)
+        applied-to-p2 (:p2 applied-tokens)
+        applied-to-p3 (:p3 applied-tokens)
+        applied-to-p4 (:p4 applied-tokens)
+
         on-change'
         (mf/use-fn
          (mf/deps on-change ids)
@@ -535,10 +512,15 @@
          :on-focus on-focus-p1
          :icon i/padding-top
          :min 0
-         :name :p1
+         :attr :p1
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.top")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p1)
+                              (= :multiple p1))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p1
+         :value p1}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.top")}
@@ -563,11 +545,16 @@
          :on-focus on-focus-p2
          :icon i/padding-right
          :min 0
-         :name :p2
+         :attr :p2
+         :input-type :horizontal-padding
          :align :right
          :property (tr "workspace.layout-grid.editor.padding.right")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p2)
+                              (= :multiple p2))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p2
+         :value p2}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.right")}
@@ -592,10 +579,15 @@
          :on-focus on-focus-p3
          :icon i/padding-bottom
          :min 0
-         :name :p3
+         :attr :p3
+         :input-type :vertical-padding
          :property (tr "workspace.layout-grid.editor.padding.bottom")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p3)
+                              (= :multiple p3))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p3
+         :value p3}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.bottom")}
@@ -621,10 +613,15 @@
          :icon i/padding-left
          :min 0
          :align :right
-         :name :p4
+         :attr :p4
+         :input-type :horizontal-padding
          :property (tr "workspace.layout-grid.editor.padding.left")
-         :applied-tokens applied-tokens
-         :values value}]
+         :placeholder (if (or (= :multiple applied-to-p4)
+                              (= :multiple p4))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token applied-to-p4
+         :value p4}]
 
        [:div {:class (stl/css :padding-multiple)
               :title (tr "workspace.layout-grid.editor.padding.left")}
@@ -757,11 +754,16 @@
          :icon i/gap-vertical
          :nillable true
          :min 0
-         :name :row-gap
-         :applied-tokens applied-tokens
+         :attr :row-gap
          :property "Row gap"
          :values {:row-gap (:row-gap value)}
-         :disabled row-gap-disabled?}]
+         :disabled row-gap-disabled?
+         :placeholder (if (or (= :multiple (:row-gap applied-tokens))
+                              (= :multiple (:row-gap value)))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token (:row-gap applied-tokens)
+         :value (:row-gap value)}]
 
        [:div {:class (stl/css-case
                       :row-gap true
@@ -791,11 +793,15 @@
          :icon i/gap-horizontal
          :nillable true
          :min 0
-         :name :column-gap
+         :attr :column-gap
          :align :right
-         :applied-tokens applied-tokens
          :property "Column gap"
-         :values {:column-gap (:column-gap value)}
+         :placeholder (if (or (= :multiple (:column-gap applied-tokens))
+                              (= :multiple (:column-gap value)))
+                        (tr "settings.multiple")
+                        "--")
+         :applied-token (:column-gap applied-tokens)
+         :value (:column-gap value)
          :disabled col-gap-disabled?}]
 
        [:div {:class (stl/css-case

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

@@ -357,7 +357,3 @@
   grid-column: 1 / -1;
   align-items: center;
 }
-
-.numeric-input-layout {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}

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

@@ -10,7 +10,6 @@
    [app.common.data :as d]
    [app.common.schema :as sm]
    [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]
@@ -19,62 +18,16 @@
    [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]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
    [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
@@ -198,11 +151,12 @@
          :placeholder m1-placeholder
          :icon i/margin-top-bottom
          :min 0
-         :name :m1
+         :attr :m1
+         :input-type :vertical-margin
          :property "Vertical margin "
          :nillable true
-         :applied-tokens {:m1 token-applied-m1}
-         :values {:m1 m1}}]
+         :applied-token token-applied-m1
+         :value m1}]
 
        [:div {:class (stl/css :vertical-margin)
               :title "Vertical margin"}
@@ -227,12 +181,13 @@
          :icon i/margin-left-right
          :class (stl/css :horizontal-margin-wrapper)
          :min 0
-         :name :m2
+         :attr :m2
          :align :right
+         :input-type :horizontal-margin
          :property "Horizontal margin"
          :nillable true
-         :applied-tokens {:m2 token-applied-m2}
-         :values {:m2 m2}}]
+         :applied-token token-applied-m2
+         :value m2}]
 
        [:div {:class (stl/css :horizontal-margin)
               :title "Horizontal margin"}
@@ -324,11 +279,12 @@
          :icon i/margin-top
          :class (stl/css :top-margin-wrapper)
          :min 0
-         :name :m1
+         :attr :m1
+         :input-type :vertical-margin
          :property "Top margin"
          :nillable true
-         :applied-tokens {:m1 applied-token-to-m1}
-         :values {:m1 m1}}]
+         :applied-token applied-token-to-m1
+         :value m1}]
 
        [:div {:class (stl/css :top-margin)
               :title "Top margin"}
@@ -351,12 +307,13 @@
          :icon i/margin-right
          :class (stl/css :right-margin-wrapper)
          :min 0
-         :name :m2
+         :attr :m2
          :align :right
+         :input-type :horizontal-margin
          :property "Right margin"
          :nillable true
-         :applied-tokens {:m2 applied-token-to-m2}
-         :values {:m2 m2}}]
+         :applied-token applied-token-to-m2
+         :value m2}]
 
        [:div {:class (stl/css :right-margin)
               :title "Right margin"}
@@ -380,12 +337,13 @@
          :icon i/margin-bottom
          :class (stl/css :bottom-margin-wrapper)
          :min 0
-         :name :m3
+         :attr :m3
          :align :right
+         :input-type :vertical-margin
          :property "Bottom margin"
          :nillable true
-         :applied-tokens {:m3 applied-token-to-m3}
-         :values {:m3 m3}}]
+         :applied-token applied-token-to-m3
+         :value m3}]
 
        [:div {:class (stl/css :bottom-margin)
               :title "Bottom margin"}
@@ -409,11 +367,12 @@
          :icon i/margin-left
          :class (stl/css :left-margin-wrapper)
          :min 0
-         :name :m4
+         :attr :m4
          :property "Left margin"
+         :input-type :horizontal-margin
          :nillable true
-         :applied-tokens {:m4 applied-token-to-m4}
-         :values {:m4 m4}}]
+         :applied-token applied-token-to-m4
+         :value m4}]
 
        [:div {:class (stl/css :left-margin)
               :title "Left margin"}
@@ -561,7 +520,7 @@
 (def ^:private schema:layout-size-constraints
   [:map
    [:values schema:layout-item-props-schema]
-   [:applied-tokens [:map-of :keyword :string]]
+   [:applied-tokens [:maybe [:map-of :keyword :string]]]
    [:ids [::sm/vec ::sm/uuid]]
    [:v-sizing {:optional true} [:maybe [:= :fill]]]])
 
@@ -627,15 +586,15 @@
           [:> 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
+            :attr :layout-item-min-w
             :property (tr "workspace.options.layout-item.layout-item-min-w")
             :text-icon "MIN W"
+            :input-type :min-width
             :nillable true
-            :applied-tokens {:layout-item-min-w applied-token-to-min-w}
+            :applied-token applied-token-to-min-w
             :tooltip-class (stl/css :tooltip-wrapper)
-            :values {:layout-item-min-w min-w}}]
+            :value min-w}]
 
           [:div {:class (stl/css :layout-item-min-w)
                  :title (tr "workspace.options.layout-item.layout-item-min-w")}
@@ -658,15 +617,15 @@
            {: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
             :align :right
+            :input-type :max-width
+            :attr :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}}]
+            :applied-token applied-token-to-max-w
+            :value max-w}]
 
           [:div {:class (stl/css :layout-item-max-w)
                  :title (tr "workspace.options.layout-item.layout-item-max-w")}
@@ -690,14 +649,15 @@
            {:on-change on-layout-item-min-h-change
             :on-detach on-detach-token
             :text-icon "MIN H"
-            :class (stl/css :min-h-wrapper)
+            :input-type :max-height
             :min 0
-            :name :layout-item-min-h
+            :attr :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}}]
+
+            :applied-token applied-token-to-min-h
+            :value min-h}]
 
           [:div {:class (stl/css :layout-item-min-h)
                  :title (tr "workspace.options.layout-item.layout-item-min-h")}
@@ -718,16 +678,16 @@
           [:> 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
             :align :right
+            :input-type :max-height
+            :attr :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}}]
+            :applied-token applied-token-to-max-h
+            :value max-h}]
 
           [:div {:class (stl/css :layout-item-max-h)
                  :title (tr "workspace.options.layout-item.layout-item-max-h")}

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

@@ -91,12 +91,10 @@
 
 .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 {
@@ -115,39 +113,28 @@
 
 .top-margin,
 .top-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
   grid-column: 1;
   grid-row: 1;
 }
 
 .bottom-margin,
 .bottom-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
   grid-column: 2;
   grid-row: 1;
 }
 
 .left-margin,
 .left-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
   grid-column: 1;
   grid-row: 2;
 }
 
 .right-margin,
 .right-margin-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
   grid-column: 2;
   grid-row: 2;
 }
 
-.min-w-wrapper,
-.max-w-wrapper,
-.min-h-wrapper,
-.max-h-wrapper {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}
-
 .advanced-options {
   display: grid;
   grid-template-columns:

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

@@ -13,7 +13,6 @@
    [app.common.geom.shapes :as gsh]
    [app.common.logic.shapes :as cls]
    [app.common.types.shape.layout :as ctl]
-   [app.common.types.token :as tk]
    [app.main.constants :refer [size-presets]]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.interactions :as dwi]
@@ -26,13 +25,12 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.numeric-input :as deprecated-input]
-   [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]
    [app.main.ui.workspace.sidebar.options.menus.border-radius :refer  [border-radius-menu*]]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [clojure.set :as set]
@@ -91,32 +89,6 @@
                  shape)]
     (select-keys shape measure-attrs)))
 
-(mf/defc numeric-input-wrapper*
-  {::mf/private true}
-  [{:keys [values name applied-tokens align on-detach] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-        on-detach-attr
-        (mf/use-fn
-         (mf/deps on-detach name)
-         #(on-detach % name))
-
-        props  (mf/spread-props props
-                                {:placeholder (if (or (= :multiple (:applied-tokens values))
-                                                      (= :multiple (get values name)))
-                                                (tr "settings.multiple") "--")
-                                 :class (stl/css :numeric-input-measures)
-                                 :applied-token (get applied-tokens name)
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :value (get values name)})]
-    [:> numeric-input* props]))
-
 (def ^:private xf:map-type (map :type))
 (def ^:private xf:mapcat-type-to-options (mapcat type->options))
 
@@ -444,10 +416,13 @@
              :on-detach on-detach-token
              :icon i/character-w
              :min 0.01
-             :name :width
+             :attr :width
              :property (tr "workspace.options.width")
-             :applied-tokens applied-tokens
-             :values values}]
+             :applied-token (get applied-tokens :width)
+             :placeholder (if (or (= :multiple (get applied-tokens :width))
+                                  (= :multiple (get values :width)))
+                            (tr "settings.multiple") "--")
+             :value (get values :width)}]
 
            [:> numeric-input-wrapper*
             {:disabled disabled-height-sizing?
@@ -455,11 +430,11 @@
              :on-detach on-detach-token
              :min 0.01
              :icon i/character-h
-             :name :height
+             :attr :height
              :align :right
              :property (tr "workspace.options.height")
-             :applied-tokens applied-tokens
-             :values values}]]
+             :applied-token (get applied-tokens :height)
+             :value (get values :height)}]]
 
           [:*
            [:div {:class (stl/css-case :width true
@@ -503,20 +478,26 @@
              :on-change on-pos-x-change
              :on-detach on-detach-token
              :icon i/character-x
-             :name :x
+             :attr :x
              :property (tr "workspace.options.x")
-             :applied-tokens applied-tokens
-             :values values}]
+             :applied-token (get applied-tokens :x)
+             :placeholder (if (or (= :multiple (get applied-tokens :x))
+                                  (= :multiple (get values :x)))
+                            (tr "settings.multiple") "--")
+             :value (get values :x)}]
            [:> numeric-input-wrapper*
             {:disabled disabled-position?
              :on-change on-pos-y-change
              :on-detach on-detach-token
              :icon i/character-y
-             :name :y
+             :attr :y
              :align :right
              :property (tr "workspace.options.y")
-             :applied-tokens applied-tokens
-             :values values}]]
+             :applied-token (get applied-tokens :y)
+             :placeholder (if (or (= :multiple (get applied-tokens :y))
+                                  (= :multiple (get values :y)))
+                            (tr "settings.multiple") "--")
+             :value (get values :y)}]]
 
           [:*
            [:div {:class (stl/css-case :x-position true
@@ -551,10 +532,13 @@
               :icon i/rotation
               :min -359
               :max 359
-              :name :rotation
+              :attr :rotation
               :property (tr "workspace.options.rotation")
-              :applied-tokens applied-tokens
-              :values values}]
+              :applied-token (get applied-tokens :rotation)
+              :placeholder (if (or (= :multiple (get applied-tokens :rotation))
+                                   (= :multiple (get values :rotation)))
+                             (tr "settings.multiple") "--")
+              :value (get values :rotation)}]
 
             [:div {:class (stl/css :rotation)
                    :title (tr "workspace.options.rotation")}

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

@@ -156,7 +156,3 @@
   justify-content: flex-start;
   gap: deprecated.$s-4;
 }
-
-.numeric-input-measures {
-  --dropdown-width: var(--7-columns-dropdown-width);
-}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -9,50 +9,20 @@
   (:require
    [app.common.data :as d]
    [app.common.types.color :as ctc]
-   [app.common.types.token :as tk]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.select :refer [select]]
-   [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.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
+   [app.main.ui.workspace.sidebar.options.menus.input-wrapper-tokens :refer [numeric-input-wrapper*]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [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] :rest props}]
-  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
-        tokens (mf/with-memo [tokens name]
-                 (delay
-                   (-> (deref tokens)
-                       (select-keys (get tk/tokens-by-input name))
-                       (not-empty))))
-
-        on-detach-attr (mf/use-fn
-                        (mf/deps on-detach name)
-                        #(on-detach % name))
-
-        applied-token (get applied-tokens name)
-
-        props  (mf/spread-props props
-                                {:placeholder (if (= :multiple values)
-                                                (tr "settings.multiple")
-                                                "--")
-                                 :applied-token applied-token
-                                 :tokens (if (delay? tokens) @tokens tokens)
-                                 :align align
-                                 :on-detach on-detach-attr
-                                 :name name
-                                 :value values})]
-    [:> numeric-input* props]))
-
 (mf/defc stroke-row*
   [{:keys [index
            stroke
@@ -250,11 +220,11 @@
                                     :min 0
                                     :on-focus on-focus
                                     :on-blur on-blur
-                                    :name :stroke-width
+                                    :attr :stroke-width
                                     :class (stl/css :numeric-input-wrapper)
                                     :property (tr "workspace.options.stroke-width")
-                                    :applied-tokens applied-tokens
-                                    :values stroke-width}]
+                                    :applied-token (get applied-tokens :stroke-width)
+                                    :value stroke-width}]
 
         [:div {:class (stl/css :stroke-width-input)
                :title (tr "workspace.options.stroke-width")}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -47,7 +47,6 @@
 
 .numeric-input-wrapper {
   grid-column: span 2;
-  --dropdown-width: var(--7-columns-dropdown-width);
 }
 
 .stroke-alignment-select {

plugins/.husky/commit-msg

@@ -1 +0,0 @@
-pnpx --no -- commitlint --edit $1

plugins/.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-if [ -z "$HUSKY_HOOK" ] || [ "$HUSKY_HOOK" = "pre-commit" ]; then
-    pnpm run lint:affected
-fi

plugins/.husky/pre-push

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-if [ "$HUSKY_HOOK" = "pre-push" ]; then
-    pnpm run lint:affected
-fi

plugins/.vscode/extensions.json

@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "firsttris.vscode-jest-runner"
+    "prettier.prettier-vscode",
+    "dbaeumer.vscode-eslint"
   ]
 }

plugins/.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-  "prettier.singleQuote": true
+  "prettier.singleQuote": true,
+  "editor.defaultFormatter": "prettier.prettier-vscode",
+  "editor.formatOnSave": true
 }

plugins/CONTRIBUTING.md

@@ -1,134 +0,0 @@
-# Contributing Guide
-
-Thank you for your interest in contributing to Penpot Plugins. This is a
-generic guide that details how to contribute to Penpot Plugins in a way that
-is efficient for everyone. If you want a specific documentation for
-different parts of the platform, please refer to `docs/` directory.
-
-## Reporting Bugs
-
-We are using [GitHub Issues](https://github.com/penpot/penpot/issues)
-for our public bugs. We keep a close eye on this and try to make it
-clear when we have an internal fix in progress. Before filing a new
-task, try to make sure your problem doesn't already exist.
-
-If you found a bug, please report it, as far as possible with:
-
-- a detailed explanation of steps to reproduce the error
-- a browser and the browser version used
-- a dev tools console exception stack trace (if it is available)
-
-If you found a bug that you consider better discuss in private (for
-example: security bugs), consider first send an email to
-`support@penpot.app`.
-
-**We don't have formal bug bounty program for security reports; this
-is an open source application and your contribution will be recognized
-in the changelog.**
-
-## Pull requests
-
-If you want propose a change or bug fix with the Pull-Request system
-firstly you should carefully read the **DCO** section and format your
-commits accordingly.
-
-If you intend to fix a bug it's fine to submit a pull request right
-away but we still recommend to file an issue detailing what you're
-fixing. This is helpful in case we don't accept that specific fix but
-want to keep track of the issue.
-
-If you want to implement or start working in a new feature, please
-open a **question** / **discussion** issue for it. No pull-request
-will be accepted without previous chat about the changes,
-independently if it is a new feature, already planned feature or small
-quick win.
-
-If is going to be your first pull request, You can learn how from this
-free video series:
-
-https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
-
-We will use the `easy fix` mark for tag for indicate issues that are
-easy for beginners.
-
-## Commit Guidelines
-
-To maintain a clear and organized commit history in this repository, we adhere to the Conventional Commits specification. Conventional Commits provide a structured format for commit messages, making it easier to track changes, automate versioning, and improve readability.
-
-Please familiarize yourself with the Conventional Commits rules by visiting the [official Conventional Commits website](https://www.conventionalcommits.org/en/v1.0.0/). This specification outlines how to structure your commit messages, including types, scopes, and descriptions.
-
-## Code of conduct
-
-As contributors and maintainers of this project, we pledge to respect
-all people who contribute through reporting issues, posting feature
-requests, updating documentation, submitting pull requests or patches,
-and other activities.
-
-We are committed to making participation in this project a
-harassment-free experience for everyone, regardless of level of
-experience, gender, gender identity and expression, sexual
-orientation, disability, personal appearance, body size, race,
-ethnicity, age, or religion.
-
-Examples of unacceptable behavior by participants include the use of
-sexual language or imagery, derogatory comments or personal attacks,
-trolling, public or private harassment, insults, or other
-unprofessional conduct.
-
-Project maintainers have the right and responsibility to remove, edit,
-or reject comments, commits, code, wiki edits, issues, and other
-contributions that are not aligned to this Code of Conduct. Project
-maintainers who do not follow the Code of Conduct may be removed from
-the project team.
-
-This code of conduct applies both within project spaces and in public
-spaces when an individual is representing the project or its
-community.
-
-Instances of abusive, harassing, or otherwise unacceptable behavior
-may be reported by opening an issue or contacting one or more of the
-project maintainers.
-
-This Code of Conduct is adapted from the Contributor Covenant, version
-1.1.0, available from http://contributor-covenant.org/version/1/1/0/
-
-## Developer's Certificate of Origin (DCO)
-
-By submitting code you are agree and can certify the below:
-
-    Developer's Certificate of Origin 1.1
-
-    By making a contribution to this project, I certify that:
-
-    (a) The contribution was created in whole or in part by me and I
-        have the right to submit it under the open source license
-        indicated in the file; or
-
-    (b) The contribution is based upon previous work that, to the best
-        of my knowledge, is covered under an appropriate open source
-        license and I have the right under that license to submit that
-        work with modifications, whether created in whole or in part
-        by me, under the same open source license (unless I am
-        permitted to submit under a different license), as indicated
-        in the file; or
-
-    (c) The contribution was provided directly to me by some other
-        person who certified (a), (b) or (c) and I have not modified
-        it.
-
-    (d) I understand and agree that this project and the contribution
-        are public and that a record of the contribution (including all
-        personal information I submit with it, including my sign-off) is
-        maintained indefinitely and may be redistributed consistent with
-        this project or the open source license(s) involved.
-
-Then, all your code patches (**documentation are excluded**) should
-contain a sign-off at the end of the patch/commit description body. It
-can be automatically added on adding `-s` parameter to `git commit`.
-
-This is an example of the aspect of the line:
-
-    Signed-off-by: Andrey Antukh <niwi@niwi.nz>
-
-Please, use your real name (sorry, no pseudonyms or anonymous
-contributions are allowed).

plugins/apps/colors-to-tokens-plugin/project.json

@@ -68,7 +68,8 @@
           "port": 4308
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/colors-to-tokens-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/colors-to-tokens-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/colors-to-tokens-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/colors-to-tokens-plugin/tsconfig.plugin.json

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

plugins/apps/colors-to-tokens-plugin/tsconfig.spec.json

@@ -8,7 +8,9 @@
       "vite/client",
       "node",
       "vitest"
-    ]
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "include": [
     "vite.config.ts",

plugins/apps/contrast-plugin/project.json

@@ -68,7 +68,8 @@
           "port": 4302
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/contrast-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/contrast-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/contrast-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/contrast-plugin/tsconfig.plugin.json

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

plugins/apps/icons-plugin/project.json

@@ -68,7 +68,8 @@
           "port": 4303
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/icons-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/icons-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/icons-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/icons-plugin/tsconfig.plugin.json

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

plugins/apps/lorem-ipsum-plugin/project.json

@@ -68,7 +68,8 @@
           "port": 4304
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/lorem-ipsum-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/lorem-ipsum-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/lorem-ipsum-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/lorem-ipsum-plugin/tsconfig.plugin.json

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

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

@@ -67,7 +67,8 @@
           "host": "0.0.0.0"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { Component, effect, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import type { Shape } from '@penpot/plugin-types';

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

@@ -1,4 +1,7 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideZoneChangeDetection()],
+}).catch((err) => console.error(err));

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

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

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

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

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

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

plugins/apps/rename-layers-plugin/project.json

@@ -68,7 +68,8 @@
           "port": 4307
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/rename-layers-plugin/src/app/app.component.html

@@ -38,107 +38,125 @@
     </button>
   </div>
 
-  <div *ngIf="tab === 'add'" class="form">
-    <p class="explanation body-s">
-      Select layers to rename (otherwise it will apply to all layers) and enter
-      the text you want to add.
-    </p>
-    <div class="form-group">
-      <label class="input-label-hidden" for="search">Add text</label>
-      <input
-        #addElement
-        [(ngModel)]="addText"
-        class="input"
-        type="text"
-        placeholder="[Original layer name]"
-        id="addText"
-        (keydown.enter)="updateText()"
-      />
+  @if (tab === 'add') {
+    <div class="form">
+      <p class="explanation body-s">
+        Select layers to rename (otherwise it will apply to all layers) and
+        enter the text you want to add.
+      </p>
+      <div class="form-group">
+        <label class="input-label-hidden" for="search">Add text</label>
+        <input
+          #addElement
+          [(ngModel)]="addText"
+          class="input"
+          type="text"
+          placeholder="[Original layer name]"
+          id="addText"
+          (keydown.enter)="updateText()"
+        />
+      </div>
+      <button
+        type="button"
+        data-appearance="primary"
+        [class.btn-feedback]="btnFeedback"
+        [disabled]="addText === '[Original layer name]' || !addText"
+        (click)="updateText()"
+      >
+        @if (!btnFeedback) {
+          <span class="text-btn">Add</span>
+        }
+        @if (btnFeedback) {
+          <span class="icon icon-btn">
+            <svg viewBox="0 0 16 16" fill="none">
+              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
+            </svg>
+          </span>
+        }
+      </button>
+      <p class="body-s preview">Previsualization:</p>
+      <ul class="preview-list">
+        @for (preview of previewList(); track preview) {
+          <li class="preview-item">
+            <span class="original" [title]="preview.name">{{
+              preview.name
+            }}</span>
+            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
+            <span class="result" [title]="resultAddText(preview)">{{
+              resultAddText(preview)
+            }}</span>
+          </li>
+        }
+      </ul>
     </div>
-    <button
-      type="button"
-      data-appearance="primary"
-      [class.btn-feedback]="btnFeedback"
-      [disabled]="addText === '[Original layer name]' || !addText"
-      (click)="updateText()"
-    >
-      <span *ngIf="!btnFeedback" class="text-btn">Add</span>
-      <span *ngIf="btnFeedback" class="icon icon-btn">
-        <svg viewBox="0 0 16 16" fill="none">
-          <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
-        </svg>
-      </span>
-    </button>
-    <p class="body-s preview">Previsualization:</p>
-    <ul class="preview-list">
-      <li class="preview-item" *ngFor="let preview of previewList()">
-        <span class="original" [title]="preview.name">{{ preview.name }}</span>
-        <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
-        <span class="result" [title]="resultAddText(preview)">{{
-          resultAddText(preview)
-        }}</span>
-      </li>
-    </ul>
-  </div>
+  }
 
-  <div *ngIf="tab === 'replace'" class="form">
-    <p class="explanation body-s">
-      Select layers to rename (otherwise it will apply to all layers) and enter
-      the replacement text.
-    </p>
-    <div class="form-group">
-      <label class="input-label-hidden" for="search">Search</label>
-      <input
-        [(ngModel)]="textToReplace.search"
-        class="input"
-        type="text"
-        placeholder="Search"
-        id="search"
-        #searchElement
-        (keydown)="previewReplace()"
-      />
+  @if (tab === 'replace') {
+    <div class="form">
+      <p class="explanation body-s">
+        Select layers to rename (otherwise it will apply to all layers) and
+        enter the replacement text.
+      </p>
+      <div class="form-group">
+        <label class="input-label-hidden" for="search">Search</label>
+        <input
+          [(ngModel)]="textToReplace.search"
+          class="input"
+          type="text"
+          placeholder="Search"
+          id="search"
+          #searchElement
+          (keydown)="previewReplace()"
+        />
+      </div>
+      <div class="form-group">
+        <label class="input-label-hidden" for="replace">Replace</label>
+        <input
+          [(ngModel)]="textToReplace.replace"
+          class="input"
+          type="text"
+          placeholder="Write the new text"
+          id="replace"
+          (keydown.enter)="updateText()"
+        />
+      </div>
+      <button
+        type="button"
+        data-appearance="primary"
+        (click)="updateText()"
+        [class.btn-feedback]="btnFeedback"
+        [disabled]="!textToReplace.search"
+      >
+        @if (!btnFeedback) {
+          <span class="text-btn">Replace</span>
+        }
+        @if (btnFeedback) {
+          <span class="icon icon-btn icon-tick">
+            <svg width="16" height="16" fill="none">
+              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
+            </svg>
+          </span>
+        }
+      </button>
+      <p class="body-s preview">Previsualization:</p>
+      <ul class="preview-list replace">
+        @if (previewList().length === 0) {
+          <li class="no-match">No matches found</li>
+        }
+        @for (preview of previewList(); track preview) {
+          <li class="preview-item">
+            <span
+              class="original"
+              [innerHTML]="highlightMatch(preview.name)"
+              [title]="preview.name"
+            ></span>
+            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
+            <span class="result" [title]="resultReplaceText(preview.name)">{{
+              resultReplaceText(preview.name)
+            }}</span>
+          </li>
+        }
+      </ul>
     </div>
-    <div class="form-group">
-      <label class="input-label-hidden" for="replace">Replace</label>
-      <input
-        [(ngModel)]="textToReplace.replace"
-        class="input"
-        type="text"
-        placeholder="Write the new text"
-        id="replace"
-        (keydown.enter)="updateText()"
-      />
-    </div>
-    <button
-      type="button"
-      data-appearance="primary"
-      (click)="updateText()"
-      [class.btn-feedback]="btnFeedback"
-      [disabled]="!textToReplace.search"
-    >
-      <span *ngIf="!btnFeedback" class="text-btn">Replace</span>
-      <span *ngIf="btnFeedback" class="icon icon-btn icon-tick">
-        <svg width="16" height="16" fill="none">
-          <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
-        </svg>
-      </span>
-    </button>
-    <p class="body-s preview">Previsualization:</p>
-    <ul class="preview-list replace">
-      <li *ngIf="previewList().length === 0" class="no-match">
-        No matches found
-      </li>
-      <li class="preview-item" *ngFor="let preview of previewList()">
-        <span
-          class="original"
-          [innerHTML]="highlightMatch(preview.name)"
-          [title]="preview.name"
-        ></span>
-        <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
-        <span class="result" [title]="resultReplaceText(preview.name)">{{
-          resultReplaceText(preview.name)
-        }}</span>
-      </li>
-    </ul>
-  </div>
+  }
 </div>

plugins/apps/rename-layers-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/rename-layers-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/rename-layers-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/rename-layers-plugin/tsconfig.plugin.json

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

plugins/apps/table-plugin/project.json

@@ -67,7 +67,8 @@
           "port": 4306
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

plugins/apps/table-plugin/src/app/app.component.html

@@ -1,17 +1,19 @@
 <div [formGroup]="form">
   <p class="text body-s">Import a data file (CSV)</p>
-  <div class="error" *ngIf="fileError">
-    <img
-      class="close-icon"
-      (click)="clearError()"
-      src="../assets/close.svg"
-      alt="close error"
-    />
-    <span class="message body-s"
-      >Something was wrong. <br />
-      Make sure the formst is .csv</span
-    >
-  </div>
+  @if (fileError) {
+    <div class="error">
+      <img
+        class="close-icon"
+        (click)="clearError()"
+        src="../assets/close.svg"
+        alt="close error"
+      />
+      <span class="message body-s"
+        >Something was wrong. <br />
+        Make sure the formst is .csv</span
+      >
+    </div>
+  }
   <div class="input-container">
     <input
       type="file"
@@ -25,9 +27,11 @@
   <hr />
   <div class="new-table">
     <p class="text body-s">Or create a new table</p>
-    <span *ngIf="selectedColumn && selectedRow !== 0" class="tag"
-      >{{ selectedRow }} rows x {{ selectedColumn }} cols</span
-    >
+    @if (selectedColumn && selectedRow !== 0) {
+      <span class="tag"
+        >{{ selectedRow }} rows x {{ selectedColumn }} cols</span
+      >
+    }
   </div>
 
   <div class="checkbox-container">
@@ -73,21 +77,22 @@
   </div>
 
   <div class="table-grid">
-    <span
-      class="cell"
-      *ngFor="let cell of cells; index as i"
-      (mouseenter)="setColRow(i)"
-      (mouseleave)="clearColRow()"
-      (click)="createTable(i)"
-    >
+    @for (cell of cells; track cell; let i = $index) {
       <span
-        class="square"
-        [class.active]="
-          selectedCell &&
-          selectedCell.column >= getCellColRow(i).column &&
-          selectedCell.row >= getCellColRow(i).row
-        "
-      ></span>
-    </span>
+        class="cell"
+        (mouseenter)="setColRow(i)"
+        (mouseleave)="clearColRow()"
+        (click)="createTable(i)"
+      >
+        <span
+          class="square"
+          [class.active]="
+            selectedCell &&
+            selectedCell.column >= getCellColRow(i).column &&
+            selectedCell.row >= getCellColRow(i).row
+          "
+        ></span>
+      </span>
+    }
   </div>
 </div>

plugins/apps/table-plugin/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { CommonModule } from '@angular/common';
+
 import type {
   Cell,
   PluginMessageEvent,
@@ -12,7 +12,7 @@ import { filter, fromEvent, map, merge, take } from 'rxjs';
 import { FormBuilder, ReactiveFormsModule, FormGroup } from '@angular/forms';
 
 @Component({
-  imports: [RouterModule, CommonModule, ReactiveFormsModule],
+  imports: [RouterModule, ReactiveFormsModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',

plugins/apps/table-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/table-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/table-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/table-plugin/tsconfig.plugin.json

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

plugins/commitlint.config.js

@@ -1 +0,0 @@
-export default { extends: ['@commitlint/config-conventional'] };

plugins/eslint.config.js

@@ -116,4 +116,7 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
+  {
+    ignores: ['**/vite.config.*.timestamp*', '**/vitest.config.*.timestamp*'],
+  },
 ];

plugins/libs/plugins-runtime/src/lib/create-plugin.spec.ts

@@ -16,7 +16,7 @@ vi.mock('./create-sandbox.js', () => ({
 describe('createPlugin', () => {
   let mockContext: Context;
   let manifest: Manifest;
-  let onCloseCallback: ReturnType<typeof vi.fn>;
+  let onCloseCallback: () => void;
   let mockPluginManager: Awaited<ReturnType<typeof createPluginManager>>;
   let mockSandbox: ReturnType<typeof createSandbox>;
 

plugins/libs/plugins-runtime/src/lib/plugin-manager.spec.ts

@@ -18,8 +18,8 @@ vi.mock('./api/openUI.api.js', () => ({
 describe('createPluginManager', () => {
   let mockContext: Context;
   let manifest: Manifest;
-  let onCloseCallback: ReturnType<typeof vi.fn>;
-  let onReloadModal: ReturnType<typeof vi.fn>;
+  let onCloseCallback: () => void;
+  let onReloadModal: () => void;
   let mockModal: {
     setTheme: ReturnType<typeof vi.fn>;
     remove: ReturnType<typeof vi.fn>;

plugins/libs/plugins-runtime/vite.config.ts

@@ -1,4 +1,5 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
+
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
@@ -14,8 +15,7 @@ export default defineConfig({
     nxViteTsPaths(),
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
     checker({
       typescript: {

plugins/nx.json

@@ -1,12 +1,12 @@
 {
-  "cli": {
-    "packageManager": "pnpm"
-  },
   "pluginsConfig": {
     "@nx/js": {
       "analyzeSourceFiles": true
     }
   },
+  "cli": {
+    "packageManager": "pnpm"
+  },
   "release": {
     "projects": [
       "libs/plugins-styles",
@@ -52,7 +52,6 @@
       "options": {
         "buildTargetName": "build",
         "previewTargetName": "preview",
-        "testTargetName": "test",
         "serveTargetName": "serve",
         "serveStaticTargetName": "serve-static"
       }
@@ -62,6 +61,12 @@
       "options": {
         "targetName": "lint"
       }
+    },
+    {
+      "plugin": "@nx/vitest",
+      "options": {
+        "testTargetName": "test"
+      }
     }
   ],
   "generators": {
@@ -79,7 +84,62 @@
       "style": "css",
       "unitTestRunner": "none",
       "projectNameAndRootFormat": "as-provided"
+    },
+    "@nx/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@nx/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@nx/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@nx/angular:scam": {
+      "type": "component"
+    },
+    "@nx/angular:scam-directive": {
+      "type": "directive"
+    },
+    "@nx/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:resolver": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
-  "useLegacyCache": false
+  "useLegacyCache": false,
+  "nxCloudId": "69720151957fca05c743ec9a"
 }

plugins/package.json

@@ -3,11 +3,12 @@
   "version": "0.6.0",
   "type": "module",
   "license": "MIT",
+  "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
   "scripts": {
-    "start": "npm run start:app:runtime",
+    "start": "pnpm run start:app:runtime",
     "start:app:runtime": "concurrently --kill-others --names build,server \"nx run plugins-runtime:build --watch --mode development\" \"nx run plugins-runtime:preview\"",
     "start:app:styles-example": "nx run example-styles:serve --host 0.0.0.0 --port 4201",
-    "start:plugin:all": "concurrently --kill-others \"npm:start:plugin:*(!all)\"",
+    "start:plugin:all": "concurrently --kill-others \"pnpm:start:plugin:*(!all)\"",
     "start:plugin:poc-state": "nx run poc-state-plugin:init",
     "start:plugin:contrast": "nx run contrast-plugin:init",
     "start:plugin:icons": "nx run icons-plugin:init",
@@ -31,80 +32,85 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.1.4",
-    "@angular-devkit/core": "19.1.4",
-    "@angular-devkit/schematics": "19.0.7",
-    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/cli": "~19.0.0",
-    "@angular/compiler-cli": "19.1.3",
-    "@angular/language-service": "19.1.3",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
-    "@eslint/eslintrc": "^2.1.1",
-    "@eslint/js": "8.57.0",
-    "@nx/angular": "20.3.2",
-    "@nx/esbuild": "20.3.2",
-    "@nx/eslint": "20.3.2",
-    "@nx/eslint-plugin": "20.3.2",
-    "@nx/js": "20.3.2",
-    "@nx/node": "20.3.2",
-    "@nx/vite": "20.3.2",
-    "@nx/web": "20.3.2",
-    "@schematics/angular": "19.0.7",
-    "@swc-node/register": "1.9.2",
-    "@swc/core": "1.5.7",
-    "@swc/helpers": "0.5.12",
+    "@angular-devkit/build-angular": "21.1.1",
+    "@angular-devkit/core": "21.1.1",
+    "@angular-devkit/schematics": "21.1.1",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "21.1.1",
+    "@angular/compiler-cli": "21.1.1",
+    "@angular/language-service": "21.1.1",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "9.39.2",
+    "@nx/angular": "22.4.0",
+    "@nx/devkit": "^22.4.0",
+    "@nx/esbuild": "22.4.0",
+    "@nx/eslint": "22.4.0",
+    "@nx/eslint-plugin": "22.4.0",
+    "@nx/js": "22.4.0",
+    "@nx/node": "22.4.0",
+    "@nx/vite": "22.4.0",
+    "@nx/vitest": "22.4.0",
+    "@nx/web": "22.4.0",
+    "@schematics/angular": "21.1.1",
+    "@swc-node/register": "1.11.1",
+    "@swc/core": "1.15.10",
+    "@swc/helpers": "0.5.18",
     "@types/feather-icons": "^4.29.4",
-    "@types/node": "20.11.16",
-    "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "@typescript-eslint/utils": "^7.16.0",
-    "@vitest/coverage-v8": "1.6.0",
-    "@vitest/ui": "1.6.0",
-    "concurrently": "^8.2.2",
-    "esbuild": "^0.19.2",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "fs-extra": "^11.2.0",
-    "globals": "^15.1.0",
-    "happy-dom": "^13.6.2",
-    "husky": "^9.0.10",
-    "jsdom": "~22.1.0",
-    "jsonc-eslint-parser": "^2.1.0",
-    "nx": "20.3.2",
-    "prettier": "^3.4.2",
-    "swc-loader": "0.1.15",
-    "tsx": "^4.16.2",
-    "typedoc": "^0.26.5",
-    "typescript": "5.6.3",
-    "vite": "^5.0.0",
-    "vite-plugin-checker": "^0.6.4",
-    "vite-plugin-dts": "~2.3.0",
-    "vite-plugin-static-copy": "^3.1.0",
-    "vitest": "1.6.0"
+    "@types/node": "25.0.10",
+    "@typescript-eslint/eslint-plugin": "8.53.1",
+    "@typescript-eslint/parser": "8.53.1",
+    "@typescript-eslint/utils": "^8.53.1",
+    "@vitest/coverage-v8": "4.0.17",
+    "@vitest/ui": "4.0.17",
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.27.2",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "fs-extra": "^11.3.3",
+    "globals": "^17.0.0",
+    "happy-dom": "^20.3.4",
+    "jiti": "2.6.1",
+    "jsdom": "~27.4.0",
+    "jsonc-eslint-parser": "^2.4.2",
+    "nx": "22.4.0",
+    "prettier": "^3.8.1",
+    "swc-loader": "0.2.7",
+    "tsx": "^4.21.0",
+    "typedoc": "^0.28.16",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "7.3.1",
+    "vite-plugin-checker": "^0.12.0",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-static-copy": "^3.1.5",
+    "vitest": "4.0.17"
   },
   "dependencies": {
-    "@angular/animations": "19.1.3",
-    "@angular/common": "19.1.3",
-    "@angular/compiler": "19.1.3",
-    "@angular/core": "19.1.3",
-    "@angular/forms": "19.1.3",
-    "@angular/platform-browser": "19.1.3",
-    "@angular/platform-browser-dynamic": "19.1.3",
-    "@angular/router": "19.1.3",
-    "axios": "^1.6.0",
+    "@angular/animations": "21.1.1",
+    "@angular/common": "21.1.1",
+    "@angular/compiler": "21.1.1",
+    "@angular/core": "21.1.1",
+    "@angular/forms": "21.1.1",
+    "@angular/platform-browser": "21.1.1",
+    "@angular/platform-browser-dynamic": "21.1.1",
+    "@angular/router": "21.1.1",
+    "axios": "^1.13.2",
     "feather-icons": "^4.29.2",
-    "puppeteer": "^22.11.0",
-    "rxjs": "~7.8.0",
-    "ses": "^1.13.1",
-    "tslib": "^2.3.0",
-    "uuid": "^9.0.1",
-    "zod": "^3.22.4",
-    "zone.js": "0.15.0"
+    "puppeteer": "^24.35.0",
+    "rxjs": "~7.8.2",
+    "ses": "^1.14.0",
+    "tslib": "^2.8.1",
+    "uuid": "^13.0.0",
+    "zod": "^4.3.5",
+    "zone.js": "0.16.0"
   },
   "nx": {
     "includedScripts": []