WIP

frontend/package.json

@@ -52,6 +52,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

@@ -8,3 +8,4 @@ packages:
   - "packages/mousetrap"
   - "packages/tokenscript"
   - "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/buttons/icon_button.cljs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/app/plugins/api.cljs

@@ -364,10 +364,13 @@
                   (cb/with-objects (:objects page))
                   (cb/add-object shape))]
 
-          (st/emit! (ch/commit-changes changes)
-                    (se/event plugin-id "create-shape" :type :text)
-                    (dwwt/resize-wasm-text-debounce (:id shape)))
-
+          (st/emit!
+           (ch/commit-changes changes)
+<<<<<<< HEAD
+           (se/event plugin-id "create-shape" :type :text))
+=======
+           (dwwt/resize-wasm-text-debounce (:id shape)))
+>>>>>>> origin/staging-render
           (shape/shape-proxy plugin-id (:id shape)))))
 
     :createShapeFromSvg

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/.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check=true

plugins/.vscode/extensions.json

@@ -1,8 +1,3 @@
 {
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "firsttris.vscode-jest-runner"
-  ]
+  "recommendations": ["esbenp.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/angular.json

@@ -0,0 +1,490 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "apps",
+  "projects": {
+    "contrast-plugin": {
+      "projectType": "application",
+      "root": "apps/contrast-plugin",
+      "sourceRoot": "apps/contrast-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/contrast-plugin",
+            "index": "apps/contrast-plugin/src/index.html",
+            "browser": "apps/contrast-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/contrast-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/contrast-plugin/src/_headers",
+              "apps/contrast-plugin/src/favicon.ico",
+              "apps/contrast-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/contrast-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "contrast-plugin:build:production" },
+            "development": {
+              "buildTarget": "contrast-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4302
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "icons-plugin": {
+      "projectType": "application",
+      "root": "apps/icons-plugin",
+      "sourceRoot": "apps/icons-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/icons-plugin",
+            "index": "apps/icons-plugin/src/index.html",
+            "browser": "apps/icons-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/icons-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/icons-plugin/src/_headers",
+              "apps/icons-plugin/src/favicon.ico",
+              "apps/icons-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/icons-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "icons-plugin:build:production" },
+            "development": {
+              "buildTarget": "icons-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4303
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "lorem-ipsum-plugin": {
+      "projectType": "application",
+      "root": "apps/lorem-ipsum-plugin",
+      "sourceRoot": "apps/lorem-ipsum-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/lorem-ipsum-plugin",
+            "index": "apps/lorem-ipsum-plugin/src/index.html",
+            "browser": "apps/lorem-ipsum-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/lorem-ipsum-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/lorem-ipsum-plugin/src/_headers",
+              "apps/lorem-ipsum-plugin/src/favicon.ico",
+              "apps/lorem-ipsum-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/lorem-ipsum-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "lorem-ipsum-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "lorem-ipsum-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4304
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "table-plugin": {
+      "projectType": "application",
+      "root": "apps/table-plugin",
+      "sourceRoot": "apps/table-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/table-plugin",
+            "index": "apps/table-plugin/src/index.html",
+            "browser": "apps/table-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/table-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/table-plugin/src/_headers",
+              "apps/table-plugin/src/favicon.ico",
+              "apps/table-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/table-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "table-plugin:build:production" },
+            "development": {
+              "buildTarget": "table-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4306
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "rename-layers-plugin": {
+      "projectType": "application",
+      "root": "apps/rename-layers-plugin",
+      "sourceRoot": "apps/rename-layers-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/rename-layers-plugin",
+            "index": "apps/rename-layers-plugin/src/index.html",
+            "browser": "apps/rename-layers-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/rename-layers-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/rename-layers-plugin/src/_headers",
+              "apps/rename-layers-plugin/src/favicon.ico",
+              "apps/rename-layers-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/rename-layers-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "rename-layers-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "rename-layers-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4307
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "colors-to-tokens-plugin": {
+      "projectType": "application",
+      "root": "apps/colors-to-tokens-plugin",
+      "sourceRoot": "apps/colors-to-tokens-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/colors-to-tokens-plugin",
+            "index": "apps/colors-to-tokens-plugin/src/index.html",
+            "browser": "apps/colors-to-tokens-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/colors-to-tokens-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/colors-to-tokens-plugin/src/_headers",
+              "apps/colors-to-tokens-plugin/src/favicon.ico",
+              "apps/colors-to-tokens-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/colors-to-tokens-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "colors-to-tokens-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "colors-to-tokens-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4308
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "poc-state-plugin": {
+      "projectType": "application",
+      "root": "apps/poc-state-plugin",
+      "sourceRoot": "apps/poc-state-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/poc-state-plugin",
+            "index": "apps/poc-state-plugin/src/index.html",
+            "browser": "apps/poc-state-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/poc-state-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/poc-state-plugin/src/favicon.ico",
+              "apps/poc-state-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/poc-state-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "poc-state-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "poc-state-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4309
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

plugins/apps/colors-to-tokens-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "colors-to-tokens-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build colors-to-tokens-plugin",
+    "build:dev": "ng build colors-to-tokens-plugin --configuration development",
+    "serve": "ng serve colors-to-tokens-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

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

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/src/plugin.ts

@@ -41,7 +41,7 @@ penpot.ui.onMessage<PluginUIEvent>((message) => {
 
 function resize(width: number, height: number) {
   if ('resize' in penpot.ui) {
-    (penpot as any).ui.resize(width, height);
+    penpot.ui.resize(width, height);
   }
 }
 

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/colors-to-tokens-plugin/vite.config.ts

@@ -1,15 +1,11 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/colors-to-tokens-plugin',
   test: {
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

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

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/colors-to-tokens-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/contrast-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

plugins/apps/contrast-plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "contrast-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build contrast-plugin",
+    "build:dev": "ng build contrast-plugin --configuration development",
+    "serve": "ng serve contrast-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

plugins/apps/contrast-plugin/project.json

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

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/contrast-plugin/vite.config.ts

@@ -1,14 +1,10 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/contrast-plugin',
   test: {
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/contrast-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/contrast-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/create-palette-plugin/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@nx/js/babel"]
-}

plugins/apps/create-palette-plugin/.swcrc

@@ -1,8 +0,0 @@
-{
-  "jsc": {
-    "parser": {
-      "syntax": "typescript"
-    },
-    "target": "es2016"
-  }
-}

plugins/apps/create-palette-plugin/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "create-palette-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "vite build --watch --mode development",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

plugins/apps/create-palette-plugin/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "create-palette-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "sourceRoot": "apps/create-palette-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {}
-}

plugins/apps/create-palette-plugin/vite.config.ts

@@ -1,12 +1,9 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
-
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/create-palette-plugin',
-
   server: {
     port: 4305,
     host: '0.0.0.0',
@@ -16,14 +13,7 @@ export default defineConfig({
     port: 4305,
     host: '0.0.0.0',
   },
-
-  plugins: [nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
+  plugins: [tsconfigPaths()],
   build: {
     outDir: '../../dist/apps/create-palette-plugin',
     reportCompressedSize: true,
@@ -40,12 +30,8 @@ export default defineConfig({
       },
     },
   },
-
   test: {
     globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
 

plugins/apps/create-palette-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/create-palette-plugin" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/e2e/eslint.config.js

@@ -7,7 +7,7 @@ export default [
   {
     languageOptions: {
       parser: typescriptEslintParser,
-      parserOptions: { project: './apps/e2e/tsconfig.json' },
+      parserOptions: { project: './tsconfig.json' },
     },
   },
   {

plugins/apps/e2e/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "e2e",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "vitest",
+    "lint": "eslint ."
+  }
+}

plugins/apps/e2e/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "e2e",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "implicitDependencies": [],
-  "tags": ["type:e2e"],
-  "targets": {}
-}

plugins/apps/e2e/src/utils/agent.ts

@@ -107,6 +107,7 @@ export async function Agent() {
 
       console.log('Running plugin code...');
       await page.evaluate((testingPlugin) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (globalThis as any).ɵloadPlugin({
           pluginId: 'TEST',
           name: 'Test',

plugins/apps/e2e/vite.config.ts

@@ -1,16 +1,12 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/e2e',
   test: {
     testTimeout: 20000,
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'happy-dom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/example-styles/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@nx/js/babel"]
-}

plugins/apps/example-styles/.swcrc

@@ -1,8 +0,0 @@
-{
-  "jsc": {
-    "parser": {
-      "syntax": "typescript"
-    },
-    "target": "es2016"
-  }
-}

plugins/apps/example-styles/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-styles",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "vite build --watch --mode development",
+    "preview": "vite preview",
+    "lint": "eslint ."
+  }
+}

plugins/apps/example-styles/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "example-styles",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "sourceRoot": "apps/example-styles/src",
-  "tags": ["type:app"],
-  "targets": {}
-}

plugins/apps/example-styles/src/app/app.element.ts

@@ -25,7 +25,8 @@ export class AppElement extends HTMLElement {
       el.remove();
     });
 
-    (window as any).hljs.highlightAll();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).hljs?.highlightAll();
   }
 
   getIndentationSize(str: string) {

plugins/apps/example-styles/vite.config.ts

@@ -1,12 +1,9 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
-
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/example-styles',
-
   server: {
     port: 4201,
     host: '0.0.0.0',
@@ -17,12 +14,7 @@ export default defineConfig({
     host: '0.0.0.0',
   },
 
-  plugins: [nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
+  plugins: [tsconfigPaths()],
 
   build: {
     outDir: '../../dist/apps/example-styles',
@@ -34,9 +26,6 @@ export default defineConfig({
 
   test: {
     globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
 

plugins/apps/icons-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

plugins/apps/icons-plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "icons-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build icons-plugin",
+    "build:dev": "ng build icons-plugin --configuration development",
+    "serve": "ng serve icons-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

plugins/apps/icons-plugin/project.json

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

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

@@ -1,7 +1,6 @@
 import { Component, inject, signal } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { FeatherIconNames, icons } from 'feather-icons';
-import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { IconButtonComponent } from './components/icon-button/icon-button.component';
 import { IconSearchComponent } from './components/icon-search/icon-search.component';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -10,12 +9,7 @@ import { PluginMessageEvent } from '../model';
 
 @Component({
   selector: 'app-root',
-  imports: [
-    RouterModule,
-    SafeHtmlPipe,
-    IconButtonComponent,
-    IconSearchComponent,
-  ],
+  imports: [RouterModule, IconButtonComponent, IconSearchComponent],
   styleUrl: './app.component.css',
   template: `<div class="icons-plugin">
     <div class="icons-search">

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/icons-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/icons-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/lorem-ipsum-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "lorem-ipsum-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build lorem-ipsum-plugin",
+    "build:dev": "ng build lorem-ipsum-plugin --configuration development",
+    "serve": "ng serve lorem-ipsum-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

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

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

@@ -101,7 +101,7 @@ export function generateCharacters(count: number, startWithLorem = true) {
 }
 
 export function generateWords(count: number, startWithLorem = true) {
-  let words = [];
+  const words = [];
 
   if (startWithLorem) {
     words.push(...lorem.split(' ').slice(0, count));
@@ -115,9 +115,9 @@ export function generateWords(count: number, startWithLorem = true) {
 }
 
 export function generateSentences(count: number, startWithLorem = true) {
-  let sentences = [];
+  const sentences = [];
   for (let i = 0; i < count; i++) {
-    let sentenceLength = Math.floor(Math.random() * 10) + 3; // between 3 and 12 words per sentence
+    const sentenceLength = Math.floor(Math.random() * 10) + 3; // between 3 and 12 words per sentence
     let sentence = generateWords(sentenceLength, false);
 
     if (startWithLorem && i === 0) {
@@ -131,9 +131,9 @@ export function generateSentences(count: number, startWithLorem = true) {
 }
 
 export function generateParagraphs(count: number, startWithLorem = true) {
-  let paragraphs = [];
+  const paragraphs = [];
   for (let i = 0; i < count; i++) {
-    let paragraphLength = Math.floor(Math.random() * 5) + 3; // between 3 and 7 sentences per paragraph
+    const paragraphLength = Math.floor(Math.random() * 5) + 3; // between 3 and 7 sentences per paragraph
     paragraphs.push(
       generateSentences(paragraphLength, startWithLorem && i === 0),
     );

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/lorem-ipsum-plugin/vite.config.ts

@@ -1,15 +1,11 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/lorem-ipsum-plugin',
   test: {
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/lorem-ipsum-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/lorem-ipsum-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

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

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

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

@@ -0,0 +1,13 @@
+{
+  "name": "poc-state-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build poc-state-plugin",
+    "build:dev": "ng build poc-state-plugin --configuration development",
+    "serve": "ng serve poc-state-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

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

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/src/plugin.ts

@@ -533,7 +533,7 @@ async function exportSelected() {
   const selection = await penpot.selection[0];
 
   if (selection) {
-    let data = await selection.export({ type: 'png', skipChildren: true });
+    const data = await selection.export({ type: 'png', skipChildren: true });
     penpot.ui.sendMessage({
       type: 'start-download',
       name: 'export.png',
@@ -547,8 +547,8 @@ async function resizeModal() {
 }
 
 async function saveLocalStorage() {
-  let oldvalue = penpot.localStorage.getItem('test');
-  let newvalue = oldvalue ? parseInt(oldvalue, 10) + 1 : 1;
+  const oldvalue = penpot.localStorage.getItem('test');
+  const newvalue = oldvalue ? parseInt(oldvalue, 10) + 1 : 1;
   console.log(newvalue);
   penpot.localStorage.setItem('test', newvalue);
 }