@ai-composer/web-component 0.0.0-stage → 0.1.0

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+import { resolve } from 'node:path';
+
+const config: StorybookConfig = {
+  framework: { name: '@storybook/web-components-vite', options: {} },
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+  viteFinal: (config) => {
+    config.resolve ??= {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@ai-composer/core': resolve(__dirname, '../../../packages/core/src/index.ts'),
+      '@ai-composer/dom': resolve(__dirname, '../../dom/src/index.ts'),
+      '@ai-composer/web-component': resolve(__dirname, '../src/index.ts'),
+      '@ai-composer/plugin-mention': resolve(__dirname, '../../../plugins/mention/src/index.ts'),
+      '@ai-composer/plugin-command': resolve(__dirname, '../../../plugins/command/src/index.ts'),
+    };
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/web-components-vite';
+import '@ai-composer/themes/css/tokens.css';
+import '@ai-composer/themes/css/default.css';
+import '@ai-composer/themes/css/dark.css';
+// Register <ai-composer-editor> for every story.
+import '@ai-composer/web-component';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'AI Composer — **universal `<ai-composer-editor>` custom element** (`@ai-composer/web-component`). Works in React, Angular, Vue, Svelte or plain HTML/JS.',
+      },
+    },
+  },
+};
+
+export default preview;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Deepak Chopkar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,6 @@
-# Temporary Holding Version
+# @ai-composer/web-component
+
+Universal <ai-composer-editor> custom element.
+
+See [`docs/`](../../docs/README.md) for guides and API reference.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @ai-composer/web-component — universal `<ai-composer-editor>` custom element.
+ *
+ * ```html
+ * <ai-composer-editor mode="chat" placeholder="Ask anything…"></ai-composer-editor>
+ *
+ * <script type="module">
+ *   import { defineAiComposerEditor } from '@ai-composer/web-component';
+ *   defineAiComposerEditor();
+ * </script>
+ * ```
+ *
+ * Attributes: mode, placeholder, disabled, readonly, max-height (CSS length).
+ * Properties: editor (external AIComposer), plugins, value.
+ * Events:     aic-change, aic-input, aic-submit, aic-focus, aic-blur (CustomEvent, detail = payload).
+ */
+import { type AIComposer, type AIComposerPlugin } from '@ai-composer/core';
+declare const TAG_NAME = "ai-composer-editor";
+export declare class AiComposerEditorElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _plugins;
+    private _editor;
+    private mounted;
+    private unsubscribes;
+    /**
+     * Plugins for the internally created editor. May be set before or after
+     * connection — after connection the internal editor is rebuilt.
+     */
+    get plugins(): AIComposerPlugin[];
+    set plugins(value: AIComposerPlugin[]);
+    /** Use an externally owned editor (takes precedence over internal creation). */
+    get editor(): AIComposer | null;
+    set editor(value: AIComposer | null);
+    get value(): string;
+    set value(json: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, next: string | null): void;
+    private remount;
+    private teardown;
+}
+/** Register <ai-composer-editor>. Idempotent. */
+export declare function defineAiComposerEditor(): void;
+export { TAG_NAME };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAG3B,QAAA,MAAM,QAAQ,uBAAuB,CAAC;AAsBtC,qBAAa,uBAAwB,SAAQ,WAAW;IACtD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,YAAY,CAAyB;IAE7C;;;OAGG;IACH,IAAI,OAAO,IAAI,gBAAgB,EAAE,CAEhC;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,EAOpC;IAED,gFAAgF;IAChF,IAAI,MAAM,IAAI,UAAU,GAAG,IAAI,CAE9B;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EAIlC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,IAAI,EAAE,MAAM,EAOrB;IAED,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAiBtF,OAAO,CAAC,OAAO;IA4Bf,OAAO,CAAC,QAAQ;CAKjB;AAED,iDAAiD;AACjD,wBAAgB,sBAAsB,IAAI,IAAI,CAK7C;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,153 @@
+/**
+ * @ai-composer/web-component — universal `<ai-composer-editor>` custom element.
+ *
+ * ```html
+ * <ai-composer-editor mode="chat" placeholder="Ask anything…"></ai-composer-editor>
+ *
+ * <script type="module">
+ *   import { defineAiComposerEditor } from '@ai-composer/web-component';
+ *   defineAiComposerEditor();
+ * </script>
+ * ```
+ *
+ * Attributes: mode, placeholder, disabled, readonly, max-height (CSS length).
+ * Properties: editor (external AIComposer), plugins, value.
+ * Events:     aic-change, aic-input, aic-submit, aic-focus, aic-blur (CustomEvent, detail = payload).
+ */
+import { createAIComposer, isAIComposer, } from '@ai-composer/core';
+import { mountAIComposer } from '@ai-composer/dom';
+const TAG_NAME = 'ai-composer-editor';
+const ATTRIBUTE_MAP = {
+    mode: 'mode',
+    placeholder: 'placeholder',
+    disabled: 'disabled',
+    readonly: 'readonly',
+    'max-height': 'maxHeight',
+};
+const FORWARDED_EVENTS = [
+    'change',
+    'input',
+    'submit',
+    'focus',
+    'blur',
+    'triggerOpen',
+    'triggerClose',
+    'commandExecute',
+    'error',
+];
+export class AiComposerEditorElement extends HTMLElement {
+    static get observedAttributes() {
+        return Object.keys(ATTRIBUTE_MAP);
+    }
+    _plugins = [];
+    _editor = null;
+    mounted = null;
+    unsubscribes = [];
+    /**
+     * Plugins for the internally created editor. May be set before or after
+     * connection — after connection the internal editor is rebuilt.
+     */
+    get plugins() {
+        return this._plugins;
+    }
+    set plugins(value) {
+        this._plugins = value;
+        if (!this.isConnected)
+            return;
+        this.teardown();
+        this._editor?.destroy();
+        this._editor = null;
+        this.remount();
+    }
+    /** Use an externally owned editor (takes precedence over internal creation). */
+    get editor() {
+        return this._editor;
+    }
+    set editor(value) {
+        if (value && !isAIComposer(value))
+            return;
+        this._editor = value;
+        if (this.isConnected)
+            this.remount();
+    }
+    get value() {
+        return this._editor ? this._editor.serialize('json') : '';
+    }
+    set value(json) {
+        if (!this._editor)
+            return;
+        try {
+            this._editor.setValue(JSON.parse(json));
+        }
+        catch {
+            this._editor.setValue(json);
+        }
+    }
+    connectedCallback() {
+        this.remount();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    attributeChangedCallback(name, _old, next) {
+        const key = ATTRIBUTE_MAP[name];
+        if (!key)
+            return;
+        // Auto-height ceiling is a pure style concern (token override).
+        if (key === 'maxHeight') {
+            if (next === null)
+                this.style.removeProperty('--aic-input-max-height');
+            else
+                this.style.setProperty('--aic-input-max-height', next);
+            return;
+        }
+        if (!this._editor)
+            return;
+        if (key === 'disabled' || key === 'readonly') {
+            this._editor.configure({ [key]: next !== null });
+        }
+        else if (next !== null) {
+            this._editor.configure({ [key]: next });
+        }
+    }
+    remount() {
+        this.teardown();
+        if (!this._editor)
+            this._editor = createAIComposer({ plugins: this._plugins });
+        this.mounted = mountAIComposer(this, this._editor, {
+            mode: this.getAttribute('mode') ?? undefined,
+        });
+        if (this.getAttribute('placeholder')) {
+            this._editor.configure({ placeholder: this.getAttribute('placeholder') });
+        }
+        if (this.hasAttribute('disabled'))
+            this._editor.configure({ disabled: true });
+        if (this.hasAttribute('readonly'))
+            this._editor.configure({ readonly: true });
+        for (const type of FORWARDED_EVENTS) {
+            this.unsubscribes.push(this._editor.on(type, (payload) => {
+                this.dispatchEvent(new CustomEvent(`aic-${type}`, {
+                    detail: payload,
+                    bubbles: type === 'submit' || type === 'change',
+                    composed: true,
+                }));
+            }));
+        }
+    }
+    teardown() {
+        for (const unsubscribe of this.unsubscribes.splice(0))
+            unsubscribe();
+        this.mounted?.destroy();
+        this.mounted = null;
+    }
+}
+/** Register <ai-composer-editor>. Idempotent. */
+export function defineAiComposerEditor() {
+    if (typeof customElements === 'undefined')
+        return;
+    if (!customElements.get(TAG_NAME)) {
+        customElements.define(TAG_NAME, AiComposerEditorElement);
+    }
+}
+export { TAG_NAME };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ai-composer/web-component",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@ai-composer/core": "^0.1.0",
+    "@ai-composer/dom": "^0.1.0"
+  },
+  "devDependencies": {
+    "@ai-composer/core": "workspace:*",
+    "@ai-composer/dom": "workspace:*",
+    "vitest": "^2.1.8",
+    "jsdom": "^25.0.1",
+    "@ai-composer/testing": "workspace:*",
+    "@ai-composer/plugin-mention": "workspace:*"
+  },
+  "module": "./index.js"
+}

package/package.json

@@ -1,6 +1,28 @@
 {
   "name": "@ai-composer/web-component",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@ai-composer/core": "^0.1.0",
+    "@ai-composer/dom": "^0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^2.1.8",
+    "jsdom": "^25.0.1",
+    "@ai-composer/dom": "0.1.0",
+    "@ai-composer/core": "0.1.0",
+    "@ai-composer/testing": "0.1.0",
+    "@ai-composer/plugin-mention": "0.1.0"
+  }
 }

package/project.json

@@ -0,0 +1,73 @@
+{
+  "name": "web-component",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-component/src",
+  "projectType": "library",
+  "tags": [
+    "scope:adapter",
+    "type:lib"
+  ],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "packages/web-component/dist",
+        "main": "packages/web-component/src/index.ts",
+        "tsConfig": "packages/web-component/tsconfig.lib.json",
+        "rootDir": "packages/web-component/src",
+        "assets": [
+          {
+            "input": "../packages/web-component",
+            "glob": "*.md",
+            "output": "."
+          }
+        ],
+        "generateExportsIfAbsent": false
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "vitest run --project web-component"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "packages/web-component/**/*.ts",
+          "packages/web-component/**/*.tsx"
+        ]
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsc -p packages/web-component/tsconfig.spec.json --noEmit"
+      }
+    },
+    "storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "storybook dev --port 6009 --no-open -c .storybook",
+        "cwd": "packages/web-component"
+      }
+    },
+    "build-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "storybook build -c .storybook --output-dir ../../dist/storybook/web-component",
+        "cwd": "packages/web-component"
+      },
+      "outputs": [
+        "{workspaceRoot}/dist/storybook/web-component"
+      ]
+    }
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,82 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createAIComposer } from '@ai-composer/core';
+import { mentionPlugin } from '@ai-composer/plugin-mention';
+import { defineAIComposerContractSuite } from '@ai-composer/testing';
+import { defineAiComposerEditor } from './index';
+
+defineAiComposerEditor();
+
+let host: HTMLDivElement | null = null;
+
+function attach(html: string): HTMLElement {
+  host = document.createElement('div');
+  host.innerHTML = html;
+  document.body.appendChild(host);
+  return host.firstElementChild as HTMLElement;
+}
+
+async function attachUpgraded(html: string): Promise<HTMLElement> {
+  const element = attach(html);
+  // mount() promotes the element itself to .aic-root
+  await vi.waitFor(() => expect(element.classList.contains('aic-root')).toBe(true));
+  return element;
+}
+
+afterEach(() => {
+  host?.remove();
+  host = null;
+});
+
+describe('<ai-composer-editor>', () => {
+  it('defines and upgrades the custom element', async () => {
+    const element = await attachUpgraded('<ai-composer-editor mode="chat"></ai-composer-editor>');
+    expect(element.getAttribute('data-aic-mode')).toBe('chat');
+    expect(element.querySelector('[data-aic-input]')).not.toBeNull();
+  });
+
+  it('attributes map to editor config', async () => {
+    const element = await attachUpgraded(
+      '<ai-composer-editor placeholder="Hi" disabled></ai-composer-editor>',
+    );
+    const editor = (element as unknown as { editor: ReturnType<typeof createAIComposer> }).editor;
+    expect(editor.getState().placeholder).toBe('Hi');
+    expect(editor.getState().disabled).toBe(true);
+  });
+
+  it('typing syncs and aic-change/aic-submit events fire', async () => {
+    const element = await attachUpgraded('<ai-composer-editor></ai-composer-editor>');
+    const editor = (element as unknown as { editor: ReturnType<typeof createAIComposer> }).editor;
+    const onChange = vi.fn();
+    element.addEventListener('aic-change', onChange);
+
+    const input = element.querySelector<HTMLElement>('[data-aic-input]');
+    input!.textContent = 'from web component';
+    input!.dispatchEvent(new Event('input', { bubbles: true }));
+
+    expect(editor.serialize('text')).toBe('from web component');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('works with plugins set before connection', async () => {
+    const hostDiv = document.createElement('div');
+    document.body.appendChild(hostDiv);
+    host = hostDiv;
+    const element = document.createElement('ai-composer-editor') as HTMLElement & {
+      plugins: unknown[];
+    };
+    element.plugins = [
+      mentionPlugin({ items: [{ id: 'u1', label: 'Ada Lovelace' }] }),
+    ];
+    hostDiv.appendChild(element); // triggers connectedCallback
+
+    const editor = (element as unknown as { editor: ReturnType<typeof createAIComposer> }).editor;
+    editor.insertText('@ad');
+    await vi.waitFor(() => expect(editor.getState().suggestions.length).toBe(1));
+    await editor.acceptSuggestion();
+    expect(editor.serialize('text')).toBe('@Ada Lovelace ');
+  });
+});
+
+defineAIComposerContractSuite((options) => createAIComposer(options), {
+  title: 'AIComposer contract (web-component package, headless reference)',
+});

package/src/index.ts

@@ -0,0 +1,166 @@
+/**
+ * @ai-composer/web-component — universal `<ai-composer-editor>` custom element.
+ *
+ * ```html
+ * <ai-composer-editor mode="chat" placeholder="Ask anything…"></ai-composer-editor>
+ *
+ * <script type="module">
+ *   import { defineAiComposerEditor } from '@ai-composer/web-component';
+ *   defineAiComposerEditor();
+ * </script>
+ * ```
+ *
+ * Attributes: mode, placeholder, disabled, readonly, max-height (CSS length).
+ * Properties: editor (external AIComposer), plugins, value.
+ * Events:     aic-change, aic-input, aic-submit, aic-focus, aic-blur (CustomEvent, detail = payload).
+ */
+
+import {
+  createAIComposer,
+  isAIComposer,
+  type AIComposer,
+  type AIComposerEventMap,
+  type AIComposerEventType,
+  type AIComposerPlugin,
+} from '@ai-composer/core';
+import { mountAIComposer, type MountedEditor } from '@ai-composer/dom';
+
+const TAG_NAME = 'ai-composer-editor';
+
+const ATTRIBUTE_MAP: Record<string, 'mode' | 'placeholder' | 'disabled' | 'readonly' | 'maxHeight'> = {
+  mode: 'mode',
+  placeholder: 'placeholder',
+  disabled: 'disabled',
+  readonly: 'readonly',
+  'max-height': 'maxHeight',
+};
+
+const FORWARDED_EVENTS: AIComposerEventType[] = [
+  'change',
+  'input',
+  'submit',
+  'focus',
+  'blur',
+  'triggerOpen',
+  'triggerClose',
+  'commandExecute',
+  'error',
+];
+
+export class AiComposerEditorElement extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return Object.keys(ATTRIBUTE_MAP);
+  }
+
+  private _plugins: AIComposerPlugin[] = [];
+  private _editor: AIComposer | null = null;
+  private mounted: MountedEditor | null = null;
+  private unsubscribes: Array<() => void> = [];
+
+  /**
+   * Plugins for the internally created editor. May be set before or after
+   * connection — after connection the internal editor is rebuilt.
+   */
+  get plugins(): AIComposerPlugin[] {
+    return this._plugins;
+  }
+  set plugins(value: AIComposerPlugin[]) {
+    this._plugins = value;
+    if (!this.isConnected) return;
+    this.teardown();
+    this._editor?.destroy();
+    this._editor = null;
+    this.remount();
+  }
+
+  /** Use an externally owned editor (takes precedence over internal creation). */
+  get editor(): AIComposer | null {
+    return this._editor;
+  }
+  set editor(value: AIComposer | null) {
+    if (value && !isAIComposer(value)) return;
+    this._editor = value;
+    if (this.isConnected) this.remount();
+  }
+
+  get value(): string {
+    return this._editor ? (this._editor.serialize('json') as unknown as string) : '';
+  }
+  set value(json: string) {
+    if (!this._editor) return;
+    try {
+      this._editor.setValue(JSON.parse(json));
+    } catch {
+      this._editor.setValue(json);
+    }
+  }
+
+  connectedCallback(): void {
+    this.remount();
+  }
+
+  disconnectedCallback(): void {
+    this.teardown();
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, next: string | null): void {
+    const key = ATTRIBUTE_MAP[name];
+    if (!key) return;
+    // Auto-height ceiling is a pure style concern (token override).
+    if (key === 'maxHeight') {
+      if (next === null) this.style.removeProperty('--aic-input-max-height');
+      else this.style.setProperty('--aic-input-max-height', next);
+      return;
+    }
+    if (!this._editor) return;
+    if (key === 'disabled' || key === 'readonly') {
+      this._editor.configure({ [key]: next !== null });
+    } else if (next !== null) {
+      this._editor.configure({ [key]: next });
+    }
+  }
+
+  private remount(): void {
+    this.teardown();
+    if (!this._editor) this._editor = createAIComposer({ plugins: this._plugins });
+
+    this.mounted = mountAIComposer(this, this._editor, {
+      mode: this.getAttribute('mode') ?? undefined,
+    });
+    if (this.getAttribute('placeholder')) {
+      this._editor.configure({ placeholder: this.getAttribute('placeholder')! });
+    }
+    if (this.hasAttribute('disabled')) this._editor.configure({ disabled: true });
+    if (this.hasAttribute('readonly')) this._editor.configure({ readonly: true });
+
+    for (const type of FORWARDED_EVENTS) {
+      this.unsubscribes.push(
+        this._editor.on(type, (payload) => {
+          this.dispatchEvent(
+            new CustomEvent(`aic-${type}`, {
+              detail: payload as AIComposerEventMap[typeof type],
+              bubbles: type === 'submit' || type === 'change',
+              composed: true,
+            }),
+          );
+        }),
+      );
+    }
+  }
+
+  private teardown(): void {
+    for (const unsubscribe of this.unsubscribes.splice(0)) unsubscribe();
+    this.mounted?.destroy();
+    this.mounted = null;
+  }
+}
+
+/** Register <ai-composer-editor>. Idempotent. */
+export function defineAiComposerEditor(): void {
+  if (typeof customElements === 'undefined') return;
+  if (!customElements.get(TAG_NAME)) {
+    customElements.define(TAG_NAME, AiComposerEditorElement);
+  }
+}
+
+export { TAG_NAME };

package/src/stories/Basic.stories.ts

@@ -0,0 +1,50 @@
+/**
+ * Basic usage — the universal custom element, plain HTML.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { defineAiComposerEditor } from '../index';
+
+defineAiComposerEditor();
+
+const meta: Meta = {
+  title: 'AI Composer/Web Component/Basic',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '`<ai-composer-editor>` is a universal custom element — works in React, Angular, Vue, Svelte or plain HTML. Attributes: `mode`, `placeholder`, `disabled`, `readonly`. Properties: `editor`, `plugins`. Events: `aic-change`, `aic-submit`.',
+      },
+    },
+  },
+  argTypes: {
+    mode: { control: 'select', options: ['compact', 'chat', 'expanded'] },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+  },
+  args: { mode: 'chat', placeholder: 'Ask anything…', disabled: false, readonly: false },
+  render: (args) => {
+    const element = document.createElement('ai-composer-editor');
+    element.setAttribute('mode', args.mode);
+    element.setAttribute('placeholder', args.placeholder);
+    if (args.disabled) element.setAttribute('disabled', '');
+    if (args.readonly) element.setAttribute('readonly', '');
+    return element;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `<ai-composer-editor mode="chat" placeholder="Ask anything…"></ai-composer-editor>`,
+      },
+      description: { story: 'Zero configuration — import the package once (`import "@ai-composer/web-component"`), then use plain HTML.' },
+    },
+  },
+};

package/src/stories/Events.stories.ts

@@ -0,0 +1,108 @@
+/**
+ * Events & API — custom events, element API, and the vanilla-JS mount story
+ * (core + dom with zero adapters — the independence proof).
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { createAIComposer } from '@ai-composer/core';
+import { mountAIComposer } from '@ai-composer/dom';
+import { mentionPlugin } from '@ai-composer/plugin-mention';
+import { defineAiComposerEditor } from '../index';
+
+defineAiComposerEditor();
+
+const meta: Meta = {
+  title: 'AI Composer/Web Component/Events & Vanilla JS',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The element emits `aic-change` / `aic-submit` custom events; the underlying editor is reachable via `element.editor`. The last story uses **no adapter at all** — `@ai-composer/core` + `@ai-composer/dom` in plain JS.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Events: Story = {
+  name: 'Events · aic-change / aic-submit',
+  render: () => {
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <ai-composer-editor mode="chat" placeholder="Type and press Enter…"></ai-composer-editor>
+      <pre style="background:#f6f7f9;padding:12px;border-radius:8px;font-size:13px">—</pre>
+    `;
+    const element = root.querySelector('ai-composer-editor')!;
+    const log = root.querySelector('pre')!;
+    const write = (line: string): void => {
+      log.textContent = `${line}\n${log.textContent}`;
+    };
+    element.addEventListener('aic-change', () => {
+      const editor = (element as unknown as { editor: ReturnType<typeof createAIComposer> }).editor;
+      write(`change → ${editor.serialize('text')}`);
+    });
+    element.addEventListener('aic-submit', (event) => {
+      write(`submit → ${JSON.stringify((event as CustomEvent).detail)}`);
+    });
+    return root;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `const el = document.querySelector('ai-composer-editor');
+el.addEventListener('aic-change', () => console.log(el.editor.serialize('text')));
+el.addEventListener('aic-submit', (e) => console.log(e.detail));`,
+      },
+    },
+  },
+};
+
+export const VanillaJsMount: Story = {
+  name: 'Vanilla JS · mountAIComposer()',
+  render: () => {
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <div style="max-width:640px"></div>
+      <pre style="background:#f6f7f9;padding:12px;border-radius:8px;font-size:13px">—</pre>
+    `;
+    const container = root.querySelector('div')!;
+    const output = root.querySelector('pre')!;
+    const editor = createAIComposer({
+      mode: 'chat',
+      placeholder: 'Vanilla JS — no framework at all',
+      plugins: [
+        mentionPlugin({ items: [{ id: 'u1', label: 'Ada Lovelace', description: 'Engineering' }] }),
+      ],
+    });
+    mountAIComposer(container, editor, { mode: 'chat' });
+    editor.subscribe((state) => {
+      output.textContent = JSON.stringify(
+        { text: editor.serialize('text'), canUndo: state.canUndo, mode: state.mode },
+        null,
+        2,
+      );
+    });
+    return root;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `import { createAIComposer } from '@ai-composer/core';
+import { mountAIComposer } from '@ai-composer/dom';
+import '@ai-composer/themes/css/tokens.css';
+import '@ai-composer/themes/css/default.css';
+
+const editor = createAIComposer({
+  mode: 'chat',
+  plugins: [mentionPlugin({ items: people })],
+});
+
+mountAIComposer(document.querySelector('#composer'), editor, { mode: 'chat' });`,
+      },
+      description: { story: 'core + dom only — no adapter, no framework. Live state panel shows the model-first document.' },
+    },
+  },
+};

package/src/stories/Mentions.stories.ts

@@ -0,0 +1,101 @@
+/**
+ * Mentions & commands — plugins set as an element property.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { mentionPlugin } from '@ai-composer/plugin-mention';
+import { commandPlugin } from '@ai-composer/plugin-command';
+import { defineAiComposerEditor } from '../index';
+
+defineAiComposerEditor();
+
+const meta: Meta = {
+  title: 'AI Composer/Web Component/Mentions & Commands',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Plugins are set as the `plugins` element property before the element connects (or re-set — the element re-mounts its editor view). The popup opens at the caret, clamps into the viewport, flips when there is no room above.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MentionFlow: Story = {
+  name: 'Interaction · type @, pick from popup',
+  render: () => {
+    const element = document.createElement('ai-composer-editor') as HTMLElement & { plugins: unknown[] };
+    element.setAttribute('mode', 'chat');
+    element.setAttribute('placeholder', 'Try typing @ad…');
+    element.plugins = [
+      mentionPlugin({
+        items: [
+          { id: 'u1', label: 'Ada Lovelace', description: 'Engineering' },
+          { id: 'u2', label: 'Grace Hopper', description: 'Engineering' },
+        ],
+      }),
+    ];
+    return element;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `const el = document.querySelector('ai-composer-editor');
+el.plugins = [mentionPlugin({ items: people })];`,
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('textbox');
+    await userEvent.click(input);
+    await userEvent.type(input, '@ad');
+    const option = await canvas.findByRole('option');
+    await expect(option.textContent).toContain('Ada Lovelace');
+    await userEvent.keyboard('{Enter}');
+    await waitFor(() => expect(canvas.getByRole('textbox').textContent).toContain('@Ada Lovelace'));
+  },
+};
+
+export const CommandMenu: Story = {
+  name: 'Interaction · slash commands',
+  render: () => {
+    const element = document.createElement('ai-composer-editor') as HTMLElement & { plugins: unknown[] };
+    element.setAttribute('mode', 'chat');
+    element.setAttribute('placeholder', 'Try typing /…');
+    element.plugins = [
+      commandPlugin({
+        commands: [
+          { id: 'summarize', label: 'Summarize', description: 'Summarize the conversation' },
+          { id: 'translate', label: 'Translate', description: 'Translate the draft' },
+        ],
+      }),
+    ];
+    return element;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `el.plugins = [
+  commandPlugin({ commands: [{ id: 'summarize', label: 'Summarize' }] }),
+];`,
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('textbox');
+    await userEvent.click(input);
+    await userEvent.type(input, '/');
+    const option = await canvas.findByRole('option');
+    await expect(option.textContent).toContain('Summarize');
+    await userEvent.keyboard('{ArrowDown}');
+    await userEvent.keyboard('{Enter}');
+    await waitFor(() => expect(canvas.getByRole('textbox').textContent).toContain('/Translate'));
+  },
+};

package/src/stories/Modes.stories.ts

@@ -0,0 +1,83 @@
+/**
+ * Modes — compact pill, chat box, expanded canvas.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { defineAiComposerEditor } from '../index';
+
+defineAiComposerEditor();
+
+const meta: Meta = {
+  title: 'AI Composer/Web Component/Modes',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '`mode` is a structural preset: **compact** = single-line pill, **chat** = auto-growing Copilot box, **expanded** = tall canvas. Change it via the attribute (or `element.editor.setMode()` for live switching with the draft preserved).',
+      },
+    },
+  },
+  argTypes: {
+    mode: { control: 'select', options: ['compact', 'chat', 'expanded'] },
+    placeholder: { control: 'text' },
+  },
+  args: { placeholder: 'Ask anything…' },
+  render: (args) => {
+    const element = document.createElement('ai-composer-editor');
+    element.setAttribute('mode', args.mode);
+    element.setAttribute('placeholder', args.placeholder);
+    return element;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Compact: Story = {
+  args: { mode: 'compact', placeholder: 'Search or ask…' },
+  parameters: {
+    docs: {
+      source: { code: `<ai-composer-editor mode="compact" placeholder="Search…"></ai-composer-editor>` },
+      description: { story: 'Inline pill while single-line; wrapped/multiline content morphs it into a rounded auto-growing box (never clips).' },
+    },
+  },
+};
+
+export const MaxHeight: Story = {
+  name: 'Max height · custom cap',
+  render: () => {
+    const element = document.createElement('ai-composer-editor');
+    element.setAttribute('mode', 'chat');
+    element.setAttribute('max-height', '96px');
+    element.setAttribute('placeholder', 'Type several lines — the box stops at 96px and scrolls…');
+    return element;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<!-- attribute (any CSS length) -->
+<ai-composer-editor mode="chat" max-height="96px"></ai-composer-editor>
+
+<!-- or the underlying token -->
+<div style="--aic-input-max-height: 40vh">
+  <ai-composer-editor mode="chat"></ai-composer-editor>
+</div>`,
+      },
+    },
+  },
+};
+
+export const Chat: Story = {
+  args: { mode: 'chat' },
+  parameters: {
+    docs: { source: { code: `<ai-composer-editor mode="chat"></ai-composer-editor>` } },
+  },
+};
+
+export const Expanded: Story = {
+  args: { mode: 'expanded', placeholder: 'Write a detailed draft…' },
+  parameters: {
+    docs: { source: { code: `<ai-composer-editor mode="expanded"></ai-composer-editor>` } },
+  },
+};

package/src/stories/States.stories.ts

@@ -0,0 +1,79 @@
+/**
+ * States — disabled, readonly, dark theme.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { createAIComposer } from '@ai-composer/core';
+import { defineAiComposerEditor } from '../index';
+
+defineAiComposerEditor();
+
+const meta: Meta = {
+  title: 'AI Composer/Web Component/States',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Boolean attributes for state; dark tokens via `data-aic-theme="dark"` on any ancestor.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Disabled: Story = {
+  render: () => {
+    const element = document.createElement('ai-composer-editor') as HTMLElement & {
+      editor: ReturnType<typeof createAIComposer>;
+    };
+    element.setAttribute('mode', 'chat');
+    element.setAttribute('placeholder', 'Disabled');
+    element.setAttribute('disabled', '');
+    element.editor = createAIComposer({ value: 'You cannot edit me', disabled: true });
+    return element;
+  },
+  parameters: {
+    docs: {
+      source: { code: `<ai-composer-editor mode="chat" disabled></ai-composer-editor>` },
+    },
+  },
+};
+
+export const Readonly: Story = {
+  render: () => {
+    const element = document.createElement('ai-composer-editor');
+    element.setAttribute('mode', 'chat');
+    element.setAttribute('placeholder', 'Readonly');
+    element.setAttribute('readonly', '');
+    return element;
+  },
+  parameters: {
+    docs: {
+      source: { code: `<ai-composer-editor mode="chat" readonly></ai-composer-editor>` },
+    },
+  },
+};
+
+export const DarkTheme: Story = {
+  render: () => {
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <div data-aic-theme="dark" style="background:#0d0e12;padding:24px;border-radius:12px">
+        <ai-composer-editor mode="chat" placeholder="Dark tokens via data-aic-theme"></ai-composer-editor>
+      </div>
+    `;
+    return root;
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      source: {
+        code: `<div data-aic-theme="dark">
+  <ai-composer-editor mode="chat"></ai-composer-editor>
+</div>`,
+      },
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "vitest.config.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "stripInternal": true,
+    "outDir": "../../dist/packages/web-component"
+  },
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "vitest.config.ts",
+    "src/test-setup.ts",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": [
+      "vitest"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "**/*.stories.ts",
+    "**/*.stories.tsx",
+    "vitest.config.ts"
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  resolve: {
+      alias: {
+        '@ai-composer/core': resolve(__dirname, '../core/src/index.ts'),
+        '@ai-composer/dom': resolve(__dirname, '../dom/src/index.ts'),
+        '@ai-composer/testing': resolve(__dirname, '../testing/src/index.ts'),
+        '@ai-composer/plugin-mention': resolve(__dirname, '../../plugins/mention/src/index.ts'),
+      },
+  },
+  test: {
+    name: 'web-component',
+    environment: 'jsdom',
+    include: ['src/**/*.test.{ts,tsx}'],
+  },
+});
+