From ee96862ed508ca9545f5a81928afdf4579566816 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Tue, 6 Feb 2024 12:16:28 +0100
Subject: [PATCH] feat: load plugin

---
 apps/example-plugin/.babelrc                  |   3 +
 apps/example-plugin/.eslintrc.json            |  18 +
 apps/example-plugin/.swcrc                    |   8 +
 apps/example-plugin/index.html                |  16 +
 apps/example-plugin/project.json              |   8 +
 apps/example-plugin/public/favicon.ico        | Bin 0 -> 15086 bytes
 apps/example-plugin/public/manifest.json      |   4 +
 apps/example-plugin/src/app/app.element.css   |  65 ++
 .../src/app/app.element.spec.ts               |  21 +
 apps/example-plugin/src/app/app.element.ts    |  57 ++
 apps/example-plugin/src/assets/.gitkeep       |   0
 apps/example-plugin/src/main.ts               |   1 +
 apps/example-plugin/src/plugin.ts             |  36 +
 apps/example-plugin/src/styles.css            |   1 +
 apps/example-plugin/tsconfig.app.json         |   9 +
 apps/example-plugin/tsconfig.json             |  30 +
 apps/example-plugin/tsconfig.spec.json        |  26 +
 apps/example-plugin/vite.config.ts            |  58 ++
 docs/create-api.md                            |  14 +
 docs/create-plugin.md                         |  35 +
 docs/index.mustache                           |  72 ++
 docs/plugin-usage.md                          |  52 ++
 .../plugins-runtime}/.eslintrc.json           |   2 +-
 libs/plugins-runtime/README.md                |  11 +
 .../plugins-runtime}/package.json             |   5 +-
 .../plugins-runtime}/project.json             |   0
 libs/plugins-runtime/src/index.ts             |  34 +
 libs/plugins-runtime/src/lib/api/index.ts     | 114 +++
 .../plugins-runtime/src/lib/api/openUI.api.ts |  10 +
 libs/plugins-runtime/src/lib/create-modal.ts  |  14 +
 libs/plugins-runtime/src/lib/global.d.ts      |   5 +
 libs/plugins-runtime/src/lib/load-plugin.ts   |  31 +
 .../src/lib/models/manifest.model.ts          |   4 +
 .../src/lib/models/manifest.schema.ts         |   6 +
 .../src/lib/models/open-ui-options.model.ts   |   4 +
 .../src/lib/models/open-ui-options.schema.ts  |   6 +
 .../src/lib/models/plugin-config.model.ts     |   3 +
 .../plugins-runtime/src/lib/parse-manifest.ts |  35 +
 libs/plugins-runtime/src/lib/plugin-modal.ts  | 105 +++
 .../plugins-runtime}/tsconfig.json            |   2 +-
 .../plugins-runtime}/tsconfig.lib.json        |   0
 .../plugins-runtime}/tsconfig.spec.json       |   0
 .../plugins-runtime}/vite.config.ts           |   0
 nx.json                                       |  14 +-
 package-lock.json                             | 788 +-----------------
 package.json                                  |   8 +-
 plugins-runtime/README.md                     |  23 -
 plugins-runtime/src/index.ts                  |  13 -
 plugins-runtime/src/lib/component.ts          |   5 -
 tsconfig.base.json                            |   2 +-
 50 files changed, 962 insertions(+), 816 deletions(-)
 create mode 100644 apps/example-plugin/.babelrc
 create mode 100644 apps/example-plugin/.eslintrc.json
 create mode 100644 apps/example-plugin/.swcrc
 create mode 100644 apps/example-plugin/index.html
 create mode 100644 apps/example-plugin/project.json
 create mode 100644 apps/example-plugin/public/favicon.ico
 create mode 100644 apps/example-plugin/public/manifest.json
 create mode 100644 apps/example-plugin/src/app/app.element.css
 create mode 100644 apps/example-plugin/src/app/app.element.spec.ts
 create mode 100644 apps/example-plugin/src/app/app.element.ts
 create mode 100644 apps/example-plugin/src/assets/.gitkeep
 create mode 100644 apps/example-plugin/src/main.ts
 create mode 100644 apps/example-plugin/src/plugin.ts
 create mode 100644 apps/example-plugin/src/styles.css
 create mode 100644 apps/example-plugin/tsconfig.app.json
 create mode 100644 apps/example-plugin/tsconfig.json
 create mode 100644 apps/example-plugin/tsconfig.spec.json
 create mode 100644 apps/example-plugin/vite.config.ts
 create mode 100644 docs/create-api.md
 create mode 100644 docs/create-plugin.md
 create mode 100644 docs/index.mustache
 create mode 100644 docs/plugin-usage.md
 rename {plugins-runtime => libs/plugins-runtime}/.eslintrc.json (93%)
 create mode 100644 libs/plugins-runtime/README.md
 rename {plugins-runtime => libs/plugins-runtime}/package.json (62%)
 rename {plugins-runtime => libs/plugins-runtime}/project.json (100%)
 create mode 100644 libs/plugins-runtime/src/index.ts
 create mode 100644 libs/plugins-runtime/src/lib/api/index.ts
 create mode 100644 libs/plugins-runtime/src/lib/api/openUI.api.ts
 create mode 100644 libs/plugins-runtime/src/lib/create-modal.ts
 create mode 100644 libs/plugins-runtime/src/lib/global.d.ts
 create mode 100644 libs/plugins-runtime/src/lib/load-plugin.ts
 create mode 100644 libs/plugins-runtime/src/lib/models/manifest.model.ts
 create mode 100644 libs/plugins-runtime/src/lib/models/manifest.schema.ts
 create mode 100644 libs/plugins-runtime/src/lib/models/open-ui-options.model.ts
 create mode 100644 libs/plugins-runtime/src/lib/models/open-ui-options.schema.ts
 create mode 100644 libs/plugins-runtime/src/lib/models/plugin-config.model.ts
 create mode 100644 libs/plugins-runtime/src/lib/parse-manifest.ts
 create mode 100644 libs/plugins-runtime/src/lib/plugin-modal.ts
 rename {plugins-runtime => libs/plugins-runtime}/tsconfig.json (91%)
 rename {plugins-runtime => libs/plugins-runtime}/tsconfig.lib.json (100%)
 rename {plugins-runtime => libs/plugins-runtime}/tsconfig.spec.json (100%)
 rename {plugins-runtime => libs/plugins-runtime}/vite.config.ts (100%)
 delete mode 100644 plugins-runtime/README.md
 delete mode 100644 plugins-runtime/src/index.ts
 delete mode 100644 plugins-runtime/src/lib/component.ts

diff --git a/apps/example-plugin/.babelrc b/apps/example-plugin/.babelrc
new file mode 100644
index 0000000..f2f3806
--- /dev/null
+++ b/apps/example-plugin/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@nx/js/babel"]
+}
diff --git a/apps/example-plugin/.eslintrc.json b/apps/example-plugin/.eslintrc.json
new file mode 100644
index 0000000..9d9c0db
--- /dev/null
+++ b/apps/example-plugin/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/example-plugin/.swcrc b/apps/example-plugin/.swcrc
new file mode 100644
index 0000000..a2d5b04
--- /dev/null
+++ b/apps/example-plugin/.swcrc
@@ -0,0 +1,8 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2016"
+  }
+}
diff --git a/apps/example-plugin/index.html b/apps/example-plugin/index.html
new file mode 100644
index 0000000..150cd66
--- /dev/null
+++ b/apps/example-plugin/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ExamplePlugin</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/example-plugin/project.json b/apps/example-plugin/project.json
new file mode 100644
index 0000000..70a3f4d
--- /dev/null
+++ b/apps/example-plugin/project.json
@@ -0,0 +1,8 @@
+{
+  "name": "example-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/example-plugin/src",
+  "tags": [],
+  "targets": {}
+}
diff --git a/apps/example-plugin/public/favicon.ico b/apps/example-plugin/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
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
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/example-plugin/public/manifest.json b/apps/example-plugin/public/manifest.json
new file mode 100644
index 0000000..08729d9
--- /dev/null
+++ b/apps/example-plugin/public/manifest.json
@@ -0,0 +1,4 @@
+{
+  "name": "Example plugin",
+  "code": "http://localhost:4201/plugin.js"
+}
diff --git a/apps/example-plugin/src/app/app.element.css b/apps/example-plugin/src/app/app.element.css
new file mode 100644
index 0000000..9e06afc
--- /dev/null
+++ b/apps/example-plugin/src/app/app.element.css
@@ -0,0 +1,65 @@
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+h1,
+h2,
+p,
+pre {
+  margin: 0;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+h1,
+h2 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}
+svg {
+  display: block;
+  vertical-align: middle;
+}
+
+svg {
+  shape-rendering: auto;
+  text-rendering: optimizeLegibility;
+}
+
+.wrapper {
+  width: 100%;
+}
+
+button {
+  padding: 0.5rem;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+h1 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
diff --git a/apps/example-plugin/src/app/app.element.spec.ts b/apps/example-plugin/src/app/app.element.spec.ts
new file mode 100644
index 0000000..3ac2318
--- /dev/null
+++ b/apps/example-plugin/src/app/app.element.spec.ts
@@ -0,0 +1,21 @@
+import { AppElement } from './app.element';
+
+describe('AppElement', () => {
+  let app: AppElement;
+
+  beforeEach(() => {
+    app = new AppElement();
+  });
+
+  it('should create successfully', () => {
+    expect(app).toBeTruthy();
+  });
+
+  it('should have a greeting', () => {
+    app.connectedCallback();
+
+    expect(app.querySelector('h1').innerHTML).toContain(
+      'Welcome example-plugin'
+    );
+  });
+});
diff --git a/apps/example-plugin/src/app/app.element.ts b/apps/example-plugin/src/app/app.element.ts
new file mode 100644
index 0000000..2312190
--- /dev/null
+++ b/apps/example-plugin/src/app/app.element.ts
@@ -0,0 +1,57 @@
+import './app.element.css';
+
+export class AppElement extends HTMLElement {
+  public static observedAttributes = [];
+
+  connectedCallback() {
+    window.addEventListener('message', function (event) {
+      if (event.data.type === 'pingpong') {
+        console.log('iframe', event.data.content);
+      } else if (event.data.type === 'page') {
+        console.log('iframe', event.data);
+        const projectName = document.getElementById('project-name');
+
+        if (projectName) {
+          projectName.innerText = event.data.content;
+        }
+      } else if (event.data.type === 'init') {
+        const projectName = document.getElementById('project-name');
+
+        if (projectName) {
+          projectName.innerText = event.data.content.name;
+        }
+      }
+    });
+
+    this.innerHTML = `
+    <div class="wrapper">
+      <h1>Test area</h1>
+
+      <p>Current project name: <span id="project-name">Unknown</span></p>
+
+      <p>
+        <button type="button" class="act-ping-pong">Ping Pong message</button>
+      </p>
+
+      <p>
+        <button type="button" class="act-close-plugin">Close plugin</button>
+      </p>
+    </div>
+      `;
+
+    const pingPongAction = this.querySelector<HTMLElement>('.act-ping-pong');
+
+    pingPongAction?.addEventListener('click', () => {
+      parent.postMessage({ content: 'ping' }, '*');
+    });
+
+    const closeAction = this.querySelector<HTMLElement>('.act-close-plugin');
+
+    closeAction?.addEventListener('click', () => {
+      parent.postMessage({ content: 'close' }, '*');
+    });
+
+    parent.postMessage({ content: 'ready' }, '*');
+  }
+}
+customElements.define('app-root', AppElement);
diff --git a/apps/example-plugin/src/assets/.gitkeep b/apps/example-plugin/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/example-plugin/src/main.ts b/apps/example-plugin/src/main.ts
new file mode 100644
index 0000000..fdb879d
--- /dev/null
+++ b/apps/example-plugin/src/main.ts
@@ -0,0 +1 @@
+import './app/app.element';
diff --git a/apps/example-plugin/src/plugin.ts b/apps/example-plugin/src/plugin.ts
new file mode 100644
index 0000000..2ce2a3a
--- /dev/null
+++ b/apps/example-plugin/src/plugin.ts
@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+export declare global {
+  declare namespace globalThis {
+    export const penpot = {
+      ui: {},
+    };
+  }
+}
+
+penpot.log('Hello from plugin');
+
+penpot.ui.open('Plugin name', 'http://localhost:4201', {
+  width: 500,
+  height: 600,
+});
+
+penpot.ui.onMessage((message) => {
+  if (message.content === 'ping') {
+    penpot.log('ping received');
+    penpot.ui.sendMessage({ type: 'pingpong', content: 'pong' });
+  } else if (message.content === 'close') {
+    penpot.closePlugin();
+  } else if (message.content === 'ready') {
+    penpot.ui.sendMessage({
+      type: 'init',
+      content: {
+        name: penpot.getPageState().name,
+      },
+    });
+  }
+});
+
+penpot.on('pagechange', (page) => {
+  penpot.ui.sendMessage({ type: 'page', content: page.name });
+});
diff --git a/apps/example-plugin/src/styles.css b/apps/example-plugin/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/apps/example-plugin/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/example-plugin/tsconfig.app.json b/apps/example-plugin/tsconfig.app.json
new file mode 100644
index 0000000..3253fc8
--- /dev/null
+++ b/apps/example-plugin/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/apps/example-plugin/tsconfig.json b/apps/example-plugin/tsconfig.json
new file mode 100644
index 0000000..cee4bba
--- /dev/null
+++ b/apps/example-plugin/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/apps/example-plugin/tsconfig.spec.json b/apps/example-plugin/tsconfig.spec.json
new file mode 100644
index 0000000..3c002c2
--- /dev/null
+++ b/apps/example-plugin/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "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"
+  ]
+}
diff --git a/apps/example-plugin/vite.config.ts b/apps/example-plugin/vite.config.ts
new file mode 100644
index 0000000..3e1dc47
--- /dev/null
+++ b/apps/example-plugin/vite.config.ts
@@ -0,0 +1,58 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/apps/example-plugin',
+
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+
+  plugins: [nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  build: {
+    outDir: '../../dist/apps/example-plugin',
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    rollupOptions: {
+      input: {
+        plugin: 'src/plugin.ts',
+        index: './index.html',
+      },
+      output: {
+        entryFileNames: '[name].js',
+      },
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/apps/example-plugin',
+      provider: 'v8',
+    },
+  },
+});
diff --git a/docs/create-api.md b/docs/create-api.md
new file mode 100644
index 0000000..e11848c
--- /dev/null
+++ b/docs/create-api.md
@@ -0,0 +1,14 @@
+Add your API in `libs/plugins-runtime/src/lib/api/index.ts`.
+
+Try to use `zod` to validate the input an output, for example:
+
+```ts
+{
+  sum: z.function()
+    .args(z.number(), z.number())
+    .returns(z.number())
+    .implement((callback, time) => {
+      setTimeout(callback, time);
+    });
+}
+```
diff --git a/docs/create-plugin.md b/docs/create-plugin.md
new file mode 100644
index 0000000..b36e192
--- /dev/null
+++ b/docs/create-plugin.md
@@ -0,0 +1,35 @@
+npx nx g @nx/web:application example-plugin --directory=apps/example-plugin
+
+Create a manifes.json in /public
+
+```json
+{
+  "name": "Example plugin",
+  "url": "http://localhost:4201",
+  "code": "http://localhost:4201/plugin.js"
+}
+```
+
+Add to the example vite.config.ts
+
+```json
+build: {
+  rollupOptions: {
+    input: {
+      plugin: 'src/plugin.ts',
+      index: './index.html',
+    },
+    output: {
+      entryFileNames: '[name].js',
+    },
+  },
+}
+```
+
+Run static server `npx nx run example-plugin:serve-static --port 4201`
+
+Go to penpot and load the plugin.
+
+```ts
+ɵloadPlugin({ manifest: 'http://localhost:4201/manifest.json' });
+```
diff --git a/docs/index.mustache b/docs/index.mustache
new file mode 100644
index 0000000..0f074f0
--- /dev/null
+++ b/docs/index.mustache
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Penpot - Design Freedom for Teams</title>
+
+    <meta name="description" content="The open-source solution for design and prototyping.">
+    <meta property="og:locale" content="en_US">
+    <meta property="og:title" content="Penpot | Design Freedom for Teams">
+    <meta property="og:description" content="The open-source solution for design and prototyping">
+    <meta property="og:image" content="https://penpot.app/images/workspace-ui.jpg">
+    <meta name="twitter:title" content="Penpot | Design Freedom for Teams">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:description" content="The open-source solution for design and prototyping">
+    <meta name="twitter:image" content="https://penpot.app/images/workspace-ui.jpg">
+    <meta name="twitter:site" content="@penpotapp">
+    <meta name="twitter:creator" content="@penpotapp">
+    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
+    <link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
+    {{#isDebug}}
+    <link href="css/debug.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
+    {{/isDebug}}
+
+    <link rel="icon" href="images/favicon.png" />
+    <script type="importmap">
+      {"imports": {"plugins-runtime": "http://localhost:4200/index.mjs"}}
+    </script>
+
+    <script type="module" src="http://localhost:4200/index.mjs"></script>
+
+    <script>
+      window.penpotTranslations = JSON.parse({{& translations}});
+      window.penpotThemes = {{& themes}};
+      window.penpotVersion = "%version%";
+      window.penpotBuildDate = "%buildDate%";
+    </script>
+
+    {{# manifest}}
+    <script>window.penpotWorkerURI="{{& worker}}"</script>
+    <script defer src="{{& config}}"></script>
+    <script defer src="{{& polyfills}}"></script>
+    {{/manifest}}
+
+  </head>
+  <body>
+    {{>../public/images/sprites/symbol/icons.svg}}
+    {{>../public/images/sprites/symbol/cursors.svg}}
+    <div id="app"></div>
+    <section id="modal"></section>
+    {{# manifest}}
+
+    <script defer src="{{& shared}}"></script>
+    <script defer src="{{& main}}"></script>
+
+    <penpot-plugins />
+    {{/manifest}}
+
+
+    <script type="importmap">
+      {"imports": {"plugins-runtime": "http://localhost:4200/index.mjs"}}
+    </script>
+
+    <script type="module">
+      import * as runtime from "plugins-runtime";
+
+      // console.log(globalThis.app.plugins);
+      runtime.initialize(globalThis.app.plugins);
+    </script>
+
+  </body>
+</html>
diff --git a/docs/plugin-usage.md b/docs/plugin-usage.md
new file mode 100644
index 0000000..9f49cc6
--- /dev/null
+++ b/docs/plugin-usage.md
@@ -0,0 +1,52 @@
+Open UI:
+
+```ts
+penpot.ui.open('Plugin name', 'http://localhost:4201', {
+  width: 500,
+  height: 600,
+});
+```
+
+### Messages
+
+Receive message from iframe:
+
+```ts
+penpot.ui.onMessage((message) => {
+  penpot.log('Received message:', message);
+});
+```
+
+Send message from iframe:
+
+```ts
+parent.postMessage({ content: 'text' }, '*');
+```
+
+Send message from plugin
+
+```ts
+penpot.ui.sendMessage({ type: 'hello' });
+```
+
+Send message from plugin:
+
+```ts
+window.addEventListener('message', function (event) {
+  console.log('Message received from plugin: ', event.data);
+});
+```
+
+### Events
+
+Current events `pagechange` and `filechange`.
+
+```ts
+const event = (page) => {
+  penpot.log(page.name);
+};
+
+penpot.on('pagechange', event);
+
+penpot.off('pagechange', event);
+```
diff --git a/plugins-runtime/.eslintrc.json b/libs/plugins-runtime/.eslintrc.json
similarity index 93%
rename from plugins-runtime/.eslintrc.json
rename to libs/plugins-runtime/.eslintrc.json
index 4069f0d..0dc93dd 100644
--- a/plugins-runtime/.eslintrc.json
+++ b/libs/plugins-runtime/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["../.eslintrc.json"],
+  "extends": ["../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/libs/plugins-runtime/README.md b/libs/plugins-runtime/README.md
new file mode 100644
index 0000000..54dc2e8
--- /dev/null
+++ b/libs/plugins-runtime/README.md
@@ -0,0 +1,11 @@
+# plugins-runtime
+
+Go to to the [this branch](https://github.com/penpot/penpot/tree/niwinz-poc-plugins) in the Penpot local code.
+
+Copy `penpot-plugins/docs/index.mustache` to `penpot/frontend/resources/templates/index.mustache`.
+
+Run the penpot runtime with `npm start`.
+
+Now you can go to penpot and see the `log` of this file `plugins-runtime/src/index.ts`.
+
+See [this docs about how to install plugins](../docs/create-plugin.md).
diff --git a/plugins-runtime/package.json b/libs/plugins-runtime/package.json
similarity index 62%
rename from plugins-runtime/package.json
rename to libs/plugins-runtime/package.json
index 117ef6a..a3e8d73 100644
--- a/plugins-runtime/package.json
+++ b/libs/plugins-runtime/package.json
@@ -1,7 +1,10 @@
 {
   "name": "plugins-runtime",
   "version": "0.0.1",
-  "dependencies": {},
+  "dependencies": {
+    "ses": "^1.1.0",
+    "zod": "^3.22.4"
+  },
   "module": "./index.mjs",
   "typings": "./index.d.ts"
 }
diff --git a/plugins-runtime/project.json b/libs/plugins-runtime/project.json
similarity index 100%
rename from plugins-runtime/project.json
rename to libs/plugins-runtime/project.json
diff --git a/libs/plugins-runtime/src/index.ts b/libs/plugins-runtime/src/index.ts
new file mode 100644
index 0000000..9268803
--- /dev/null
+++ b/libs/plugins-runtime/src/index.ts
@@ -0,0 +1,34 @@
+import 'ses';
+import './lib/plugin-modal';
+
+import { ɵloadPlugin } from './lib/load-plugin';
+import { setFileState, setPageState } from './lib/api';
+
+repairIntrinsics({
+  evalTaming: 'unsafeEval',
+});
+
+globalThis.ɵloadPlugin = ɵloadPlugin;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function initialize(api: any) {
+  console.log('plugin context');
+
+  globalThis.ɵloadPlugin = ɵloadPlugin;
+
+  console.log(api);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  api.addListener('plugin-page', 'page', (page: any) => {
+    console.log('Page Changed:', page);
+
+    setPageState(page);
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  api.addListener('plugin-file', 'file', (file: any) => {
+    console.log('File Changed:', file);
+
+    setFileState(file);
+  });
+}
diff --git a/libs/plugins-runtime/src/lib/api/index.ts b/libs/plugins-runtime/src/lib/api/index.ts
new file mode 100644
index 0000000..17ab4e2
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/api/index.ts
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { OpenUIOptions } from '../models/open-ui-options.model';
+import openUIApi from './openUI.api';
+import z from 'zod';
+
+type Callback<T> = (message: T) => void;
+
+const validEvents = ['pagechange', 'filechange'] as const;
+
+let uiMessagesCallbacks: Callback<any>[] = [];
+
+let modal: HTMLElement | null = null;
+
+let pageState = {} as any;
+let fileState = {} as any;
+
+const eventListeners: Map<string, Callback<unknown>[]> = new Map();
+
+window.addEventListener('message', (event) => {
+  for (const callback of uiMessagesCallbacks) {
+    callback(event.data);
+  }
+});
+
+export function triggerEvent<T>(type: string, message: T) {
+  const listeners = eventListeners.get(type) || [];
+  listeners.forEach((listener) => listener(message));
+}
+
+export function setPageState(page: unknown) {
+  pageState = page;
+
+  triggerEvent('pagechange', page);
+}
+
+export function setFileState(file: unknown) {
+  fileState = file;
+
+  triggerEvent('filechange', file);
+}
+
+export function createApi() {
+  const closePlugin = () => {
+    if (modal) {
+      modal.remove();
+    }
+
+    uiMessagesCallbacks = [];
+    modal = null;
+  };
+
+  const penpot = {
+    ui: {
+      open: (name: string, url: string, options: OpenUIOptions) => {
+        modal = openUIApi(name, url, options);
+
+        modal.addEventListener('close', closePlugin, {
+          once: true,
+        });
+      },
+      sendMessage: (message: unknown) => {
+        const event = new CustomEvent('message', {
+          detail: message,
+        });
+
+        modal?.dispatchEvent(event);
+      },
+      onMessage: z
+        .function()
+        .args(z.function())
+        .implement((callback) => {
+          uiMessagesCallbacks.push(callback);
+        }),
+    },
+    log: console.log,
+    setTimeout: z
+      .function()
+      .args(z.function(), z.number())
+      .implement((callback, time) => {
+        setTimeout(callback, time);
+      }),
+    closePlugin,
+    on: (type: string, fn: Callback<unknown>) => {
+      // z.function alter fn, so can't use it here
+      z.enum(validEvents).parse(type);
+      z.function().parse(fn);
+
+      const listeners = eventListeners.get(type) || [];
+
+      listeners.push(fn);
+      eventListeners.set(type, listeners);
+    },
+    off: (type: string, fn: () => void) => {
+      z.enum(validEvents).parse(type);
+      z.function().parse(fn);
+
+      const listeners = eventListeners.get(type) || [];
+
+      eventListeners.set(
+        type,
+        listeners.filter((listener) => listener !== fn)
+      );
+    },
+    getFileState: () => {
+      return fileState;
+    },
+    getPageState: () => {
+      return pageState;
+    },
+  };
+
+  return penpot;
+}
diff --git a/libs/plugins-runtime/src/lib/api/openUI.api.ts b/libs/plugins-runtime/src/lib/api/openUI.api.ts
new file mode 100644
index 0000000..8179875
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/api/openUI.api.ts
@@ -0,0 +1,10 @@
+import z from 'zod';
+import { openUISchema } from '../models/open-ui-options.schema';
+import { createModal } from '../create-modal';
+
+export default z
+  .function()
+  .args(z.string(), z.string(), openUISchema)
+  .implement((title, url, options) => {
+    return createModal(title, url, options);
+  });
diff --git a/libs/plugins-runtime/src/lib/create-modal.ts b/libs/plugins-runtime/src/lib/create-modal.ts
new file mode 100644
index 0000000..6cf4300
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/create-modal.ts
@@ -0,0 +1,14 @@
+import { OpenUIOptions } from './models/open-ui-options.model';
+
+export function createModal(name: string, url: string, options: OpenUIOptions) {
+  const modal = document.createElement('plugin-modal');
+
+  modal.setAttribute('title', name);
+  modal.setAttribute('iframe-src', url);
+  modal.setAttribute('width', String(options.width || 300));
+  modal.setAttribute('height', String(options.height || 400));
+
+  document.body.appendChild(modal);
+
+  return modal;
+}
diff --git a/libs/plugins-runtime/src/lib/global.d.ts b/libs/plugins-runtime/src/lib/global.d.ts
new file mode 100644
index 0000000..ef89512
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/global.d.ts
@@ -0,0 +1,5 @@
+export declare global {
+  declare namespace globalThis {
+    function ɵloadPlugin(cofig: PluginConfig): void;
+  }
+}
diff --git a/libs/plugins-runtime/src/lib/load-plugin.ts b/libs/plugins-runtime/src/lib/load-plugin.ts
new file mode 100644
index 0000000..caa3e90
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/load-plugin.ts
@@ -0,0 +1,31 @@
+import { PluginConfig } from './models/plugin-config.model';
+import { createApi } from './api';
+import { parseManifest } from './parse-manifest';
+
+let isLockedDown = false;
+let lastApi: ReturnType<typeof createApi> | undefined;
+
+export const ɵloadPlugin = async function (config: PluginConfig) {
+  const { code } = await parseManifest(config);
+
+  try {
+    if (!isLockedDown) {
+      isLockedDown = true;
+      hardenIntrinsics();
+    }
+
+    if (lastApi) {
+      lastApi.closePlugin();
+    }
+
+    lastApi = createApi();
+
+    const c = new Compartment({
+      penpot: harden(lastApi),
+    });
+
+    c.evaluate(code);
+  } catch (error) {
+    console.error(error);
+  }
+};
diff --git a/libs/plugins-runtime/src/lib/models/manifest.model.ts b/libs/plugins-runtime/src/lib/models/manifest.model.ts
new file mode 100644
index 0000000..a099a29
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/models/manifest.model.ts
@@ -0,0 +1,4 @@
+import z from 'zod';
+import { manifestSchema } from './manifest.schema';
+
+export type Manifest = z.infer<typeof manifestSchema>;
diff --git a/libs/plugins-runtime/src/lib/models/manifest.schema.ts b/libs/plugins-runtime/src/lib/models/manifest.schema.ts
new file mode 100644
index 0000000..1ab71c5
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/models/manifest.schema.ts
@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const manifestSchema = z.object({
+  name: z.string(),
+  code: z.string().url(),
+});
diff --git a/libs/plugins-runtime/src/lib/models/open-ui-options.model.ts b/libs/plugins-runtime/src/lib/models/open-ui-options.model.ts
new file mode 100644
index 0000000..72e1248
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/models/open-ui-options.model.ts
@@ -0,0 +1,4 @@
+import z from 'zod';
+import { openUISchema } from './open-ui-options.schema';
+
+export type OpenUIOptions = z.infer<typeof openUISchema>;
diff --git a/libs/plugins-runtime/src/lib/models/open-ui-options.schema.ts b/libs/plugins-runtime/src/lib/models/open-ui-options.schema.ts
new file mode 100644
index 0000000..f008033
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/models/open-ui-options.schema.ts
@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const openUISchema = z.object({
+  width: z.number().positive(),
+  height: z.number().positive(),
+});
diff --git a/libs/plugins-runtime/src/lib/models/plugin-config.model.ts b/libs/plugins-runtime/src/lib/models/plugin-config.model.ts
new file mode 100644
index 0000000..d85eb02
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/models/plugin-config.model.ts
@@ -0,0 +1,3 @@
+export interface PluginConfig {
+  manifest: string;
+}
diff --git a/libs/plugins-runtime/src/lib/parse-manifest.ts b/libs/plugins-runtime/src/lib/parse-manifest.ts
new file mode 100644
index 0000000..effccb3
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/parse-manifest.ts
@@ -0,0 +1,35 @@
+import { Manifest } from './models/manifest.model';
+import { manifestSchema } from './models/manifest.schema';
+import { PluginConfig } from './models/plugin-config.model';
+
+function loadManifest(url: string): Promise<Manifest> {
+  return fetch(url)
+    .then((response) => response.json())
+    .then((manifest: Manifest) => {
+      const parseResult = manifestSchema.safeParse(manifest);
+
+      if (!parseResult.success) {
+        throw new Error('Invalid plugin manifest');
+      }
+
+      return manifest;
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
+
+function loadCode(url: string): Promise<string> {
+  return fetch(url).then((response) => response.text());
+}
+
+export async function parseManifest(config: PluginConfig) {
+  const manifest = await loadManifest(config.manifest);
+  const code = await loadCode(manifest.code);
+
+  return {
+    manifest,
+    code,
+  };
+}
diff --git a/libs/plugins-runtime/src/lib/plugin-modal.ts b/libs/plugins-runtime/src/lib/plugin-modal.ts
new file mode 100644
index 0000000..34f0c29
--- /dev/null
+++ b/libs/plugins-runtime/src/lib/plugin-modal.ts
@@ -0,0 +1,105 @@
+export class PluginModalElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    const title = this.getAttribute('title');
+    const iframeSrc = this.getAttribute('iframe-src');
+    const width = Number(this.getAttribute('width') || '300');
+    const height = Number(this.getAttribute('height') || '400');
+
+    if (!title || !iframeSrc) {
+      throw new Error('title and iframe-src attributes are required');
+    }
+
+    if (!this.shadowRoot) {
+      throw new Error('Error creating shadow root');
+    }
+
+    const header = document.createElement('div');
+    header.classList.add('header');
+
+    const h1 = document.createElement('h1');
+    h1.textContent = title;
+
+    header.appendChild(h1);
+
+    const closeButton = document.createElement('button');
+    closeButton.setAttribute('type', 'button');
+    closeButton.textContent = '❌';
+    closeButton.addEventListener('click', () => {
+      if (!this.shadowRoot) {
+        return;
+      }
+
+      this.shadowRoot.dispatchEvent(
+        new CustomEvent('close', {
+          composed: true,
+          bubbles: true,
+        })
+      );
+    });
+
+    header.appendChild(closeButton);
+
+    const iframe = document.createElement('iframe');
+    iframe.src = iframeSrc;
+
+    this.addEventListener('message', (e: Event) => {
+      if (!iframe.contentWindow) {
+        return;
+      }
+
+      iframe.contentWindow.postMessage((e as CustomEvent).detail, '*');
+    });
+
+    this.shadowRoot.appendChild(header);
+    this.shadowRoot.appendChild(iframe);
+
+    const style = document.createElement('style');
+    style.textContent = `
+        :host {
+          display: flex;
+          flex-direction: column;
+          position: fixed;
+          inset-block-end: 10px;
+          inset-inline-start: 10px;
+          z-index: 1000;
+          background: white;
+          padding: 20px;
+          border-radius: 5px;
+          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+          inline-size: ${width}px;
+          block-size: ${height}px;
+        }
+
+        .header {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        button {
+          background: transparent;
+          border: 0;
+          cursor: pointer;
+        }
+
+        h1 {
+          color: blue;
+          font-family: Arial, sans-serif;
+        }
+
+        iframe {
+          border: none;
+          inline-size: 100%;
+          block-size: 100%;
+        }
+    `;
+
+    this.shadowRoot.appendChild(style);
+  }
+}
+
+customElements.define('plugin-modal', PluginModalElement);
diff --git a/plugins-runtime/tsconfig.json b/libs/plugins-runtime/tsconfig.json
similarity index 91%
rename from plugins-runtime/tsconfig.json
rename to libs/plugins-runtime/tsconfig.json
index 451a604..f5b8565 100644
--- a/plugins-runtime/tsconfig.json
+++ b/libs/plugins-runtime/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,
diff --git a/plugins-runtime/tsconfig.lib.json b/libs/plugins-runtime/tsconfig.lib.json
similarity index 100%
rename from plugins-runtime/tsconfig.lib.json
rename to libs/plugins-runtime/tsconfig.lib.json
diff --git a/plugins-runtime/tsconfig.spec.json b/libs/plugins-runtime/tsconfig.spec.json
similarity index 100%
rename from plugins-runtime/tsconfig.spec.json
rename to libs/plugins-runtime/tsconfig.spec.json
diff --git a/plugins-runtime/vite.config.ts b/libs/plugins-runtime/vite.config.ts
similarity index 100%
rename from plugins-runtime/vite.config.ts
rename to libs/plugins-runtime/vite.config.ts
diff --git a/nx.json b/nx.json
index f02dd38..ef42b7c 100644
--- a/nx.json
+++ b/nx.json
@@ -1,4 +1,9 @@
 {
+  "pluginsConfig": {
+    "@nx/js": {
+      "analyzeSourceFiles": true
+    }
+  },
   "extends": "nx/presets/npm.json",
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "targetDefaults": {
@@ -26,9 +31,12 @@
       }
     }
   ],
-  "pluginsConfig": {
-    "@nx/js": {
-      "analyzeSourceFiles": true
+  "generators": {
+    "@nx/web:application": {
+      "style": "css",
+      "linter": "eslint",
+      "unitTestRunner": "vitest",
+      "e2eTestRunner": "none"
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 96907db..3125612 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
         "packages/*"
       ],
       "dependencies": {
-        "tslib": "^2.3.0"
+        "ses": "^1.1.0",
+        "tslib": "^2.3.0",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
         "@commitlint/cli": "^18.6.0",
@@ -2411,261 +2413,10 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+    "node_modules/@endo/env-options": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@endo/env-options/-/env-options-1.1.1.tgz",
+      "integrity": "sha512-uCwlJ8Vkndx/VBBo36BdYHdxSoQPy7ZZpwyJNfv86Rh4B1IZfqzCRPf0u0mPgJdzOr7lShQey60SuYwoMSZ9Xg=="
     },
     "node_modules/@esbuild/linux-x64": {
       "version": "0.19.12",
@@ -2683,102 +2434,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3348,102 +3003,6 @@
         "@nx/eslint": "18.0.2"
       }
     },
-    "node_modules/@nx/nx-darwin-arm64": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-18.0.2.tgz",
-      "integrity": "sha512-zFW5GDrH3GRdm5FePCYuCAEWvJ/G7iiB3jgP0zvLTRe06BQ4Z3bKCQu1v0B/mA7kR+cCY0ZtgHE+9UhK+lWarw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-darwin-x64": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-18.0.2.tgz",
-      "integrity": "sha512-Iihl8MK7NiDxn6pyhe/sctEv5J2MOK2bLJH3hBgJXbq8h278jAXqM5zLxVO49Kya65K7idAu1g5nvrRtafUIXg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-freebsd-x64": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-18.0.2.tgz",
-      "integrity": "sha512-D6pFFLRZs5f99oF3nHWMHhEYBVDB7x0kaDuR+96FfQlZXPU2SSQ+fzV1TREeQPhfHf9owgcduiE4utrOgJBTOQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm-gnueabihf": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-18.0.2.tgz",
-      "integrity": "sha512-TCEKHBByEqIjiMNGOWS3maPpqQq1syUKOfp4fLJyE9A+NEK0th/6s65RWtzQR/GBUsi5r5y5g/pt+XFup+DrMA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm64-gnu": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-18.0.2.tgz",
-      "integrity": "sha512-oYWeWtLmtM2LmsTStc6P4xUSJvpZxHZCoHIAFw1Rw7LQRbTyky19XR87F2mbEJbhSPMymeeLDR6SN0JSplODLg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-linux-arm64-musl": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-18.0.2.tgz",
-      "integrity": "sha512-9I27P5IilvICsLJxmh79OG6Y21uFKaqDAKCDlc608cyAH48Rq9xVM24DEQD0cITbfOjMRBBO2rMl7XX3b81w9Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@nx/nx-linux-x64-gnu": {
       "version": "18.0.2",
       "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-18.0.2.tgz",
@@ -3476,38 +3035,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@nx/nx-win32-arm64-msvc": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-18.0.2.tgz",
-      "integrity": "sha512-pLc0SC/bEh8TC5H//pD+vHYUNCdYLWsMB9xAdey6V2qmKPrrDuWTs69qh0zCW4S1Jm8C9XK1av5mWIp2Fj8KnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nx/nx-win32-x64-msvc": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-18.0.2.tgz",
-      "integrity": "sha512-alWijWoroV65IRLdAQhFpINS9SRYSncWVT7CYe1iWwjiT16Un2i4NDoselpADuAsYC+Rgd+4h5Y+XzwtsQ55gg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@nx/vite": {
       "version": "18.0.2",
       "resolved": "https://registry.npmjs.org/@nx/vite/-/vite-18.0.2.tgz",
@@ -3597,110 +3124,6 @@
         }
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
-      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
-      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
-      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
-      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
-      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
-      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
-      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
-      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
@@ -3727,45 +3150,6 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
-      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
-      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
-      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@rushstack/node-core-library": {
       "version": "3.64.2",
       "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.64.2.tgz",
@@ -3987,86 +3371,6 @@
         }
       }
     },
-    "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.107.tgz",
-      "integrity": "sha512-47tD/5vSXWxPd0j/ZllyQUg4bqalbQTsmqSw0J4dDdS82MWqCAwUErUrAZPRjBkjNQ6Kmrf5rpCWaGTtPw+ngw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-darwin-x64": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.107.tgz",
-      "integrity": "sha512-hwiLJ2ulNkBGAh1m1eTfeY1417OAYbRGcb/iGsJ+LuVLvKAhU/itzsl535CvcwAlt2LayeCFfcI8gdeOLeZa9A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.107.tgz",
-      "integrity": "sha512-I2wzcC0KXqh0OwymCmYwNRgZ9nxX7DWnOOStJXV3pS0uB83TXAkmqd7wvMBuIl9qu4Hfomi9aDM7IlEEn9tumQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.107.tgz",
-      "integrity": "sha512-HWgnn7JORYlOYnGsdunpSF8A+BCZKPLzLtEUA27/M/ZuANcMZabKL9Zurt7XQXq888uJFAt98Gy+59PU90aHKg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.107.tgz",
-      "integrity": "sha512-vfPF74cWfAm8hyhS8yvYI94ucMHIo8xIYU+oFOW9uvDlGQRgnUf/6DEVbLyt/3yfX5723Ln57U8uiMALbX5Pyw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@swc/core-linux-x64-gnu": {
       "version": "1.3.107",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.107.tgz",
@@ -4099,54 +3403,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.107.tgz",
-      "integrity": "sha512-J3P14Ngy/1qtapzbguEH41kY109t6DFxfbK4Ntz9dOWNuVY3o9/RTB841ctnJk0ZHEG+BjfCJjsD2n8H5HcaOA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.107.tgz",
-      "integrity": "sha512-ZBUtgyjTHlz8TPJh7kfwwwFma+ktr6OccB1oXC8fMSopD0AxVnQasgun3l3099wIsAB9eEsJDQ/3lDkOLs1gBA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.3.107",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.107.tgz",
-      "integrity": "sha512-Eyzo2XRqWOxqhE1gk9h7LWmUf4Bp4Xn2Ttb0ayAXFp6YSTxQIThXcT9kipXZqcpxcmDwoq8iWbbf2P8XL743EA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@swc/counter": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.2.tgz",
@@ -6677,20 +5933,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -9386,6 +8628,14 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/ses": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ses/-/ses-1.2.0.tgz",
+      "integrity": "sha512-+klZ2zjFPbHAkf9owGeih+ZB1lqUqvVoCeL5IpNXmIZPhI5rGE1tR729EZmfBzmPh8j+CrsLr/+cTZUmHGFr9g==",
+      "dependencies": {
+        "@endo/env-options": "^1.1.1"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz",
@@ -10972,6 +10222,14 @@
       "optionalDependencies": {
         "commander": "^9.4.1"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index fa9454b..9e6b7d6 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "npx nx run plugins-runtime:serve-static",
+    "start": "npx nx run plugins-runtime:serve-static --port 4200",
+    "start:example": "npx nx run example-plugin:serve-static --port 4201",
     "build": "npx nx build plugins-runtime --emptyOutDir=true",
     "lint": "nx run-many --all --target=lint --parallel",
     "lint:affected": "npx nx affected --target=lint",
@@ -42,7 +43,8 @@
     "packages/*"
   ],
   "dependencies": {
-    "tslib": "^2.3.0"
+    "ses": "^1.1.0",
+    "tslib": "^2.3.0",
+    "zod": "^3.22.4"
   }
 }
-
diff --git a/plugins-runtime/README.md b/plugins-runtime/README.md
deleted file mode 100644
index 7523a7c..0000000
--- a/plugins-runtime/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# plugins-runtime
-
-Go to to the [this branch](https://github.com/penpot/penpot/tree/niwinz-poc-plugins) in the Penpot local code.
-
-Open `penpot/frontend/resources/templates/index.mustache` and replace the below:
-
-```html
-<script type="importmap">
-  { "imports": { "plugins-runtime": "/js/plugins-runtime.mjs" } }
-</script>
-```
-
-New code:
-
-```
-<script type="importmap">
-  {"imports": {"plugins-runtime": "http://localhost:4200/index.mjs"}}
-</script>
-```
-
-Run the penpot runtime with `npm start`.
-
-Now you can go to penpot and see the `log` of this file `plugins-runtime/src/index.ts`.
diff --git a/plugins-runtime/src/index.ts b/plugins-runtime/src/index.ts
deleted file mode 100644
index 332de3d..0000000
--- a/plugins-runtime/src/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export function initialize(api: any) {
-  console.log('plugin context');
-  console.log(api);
-
-  api.addListener('plugin-page', 'page', (page: any) => {
-    console.log('Page Changed:', page);
-  });
-
-  api.addListener('plugin file', 'file', (file: any) => {
-    console.log('File Changed:', file);
-  });
-}
diff --git a/plugins-runtime/src/lib/component.ts b/plugins-runtime/src/lib/component.ts
deleted file mode 100644
index f38883f..0000000
--- a/plugins-runtime/src/lib/component.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export class PenpotRuntimeElement extends HTMLElement {
-  // connectedCallback() {}
-}
-
-customElements.define('plugins-runtime', PenpotRuntimeElement);
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 0a6714c..0d6f281 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -15,7 +15,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "plugins-runtime": ["plugins-runtime/src/index.ts"],
+      "plugins-runtime": ["libs/plugins-runtime/src/index.ts"],
       "plugins-styles": ["plugins-styles/src/index.ts"]
     }
   },