@adia-ai/web-components 0.4.6 → 0.4.8

package/components/richtext/richtext.js

@@ -1,77 +1,17 @@
-import { UIElement } from '../../core/element.js';
-import { renderMarkdown } from '../../core/markdown.js';
-
 /**
- * <richtext-ui> — Renders markdown to styled HTML.
+ * `<richtext-ui>` — auto-registers the tag on import.
  *
- * Takes markdown as a `src` URL (fetched) or `markdown` property (inline),
- * converts it to HTML, and displays it with prose-appropriate typography.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Usage:
- *   <richtext-ui src="/docs/readme.md"></richtext-ui>
- *   <richtext-ui markdown="# Hello\nSome **bold** text."></richtext-ui>
+ *   import { UIRichText } from '@adia-ai/web-components/components/richtext/class';
  *
- * Programmatic:
- *   const el = document.querySelector('richtext-ui');
- *   el.markdown = '# Title\nParagraph text.';
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
-class UIRichText extends UIElement {
-  static properties = {
-    src:      { type: String, default: '', reflect: true },
-    // Markdown bodies can be arbitrarily large; reflecting to the attribute
-    // would bloat the DOM (and break parsing on multi-line content with
-    // unescaped quotes). The property is the source of truth.
-    markdown: { type: String, default: '', reflect: false },
-  };
-
-  static template = () => null;
-
-  #bodyEl = null;
-  #lastSrc = '';
-  #lastMd = '';
-
-  connected() {
-    if (!this.#bodyEl) {
-      this.#bodyEl = document.createElement('div');
-      this.#bodyEl.setAttribute('data-richtext-body', '');
-      this.appendChild(this.#bodyEl);
-    }
-  }
-
-  render() {
-    // Fetch from URL
-    if (this.src && this.src !== this.#lastSrc) {
-      this.#lastSrc = this.src;
-      this.#lastMd = '';
-      this.#load();
-      return;
-    }
 
-    // Inline markdown
-    if (this.markdown && this.markdown !== this.#lastMd) {
-      this.#lastMd = this.markdown;
-      this.#lastSrc = '';
-      this.#bodyEl.innerHTML = renderMarkdown(this.markdown);
-    }
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIRichText } from './class.js';
 
-  async #load() {
-    try {
-      const res = await fetch(this.src);
-      if (!this.isConnected) return;
-      if (!res.ok) {
-        this.#bodyEl.innerHTML = `<p>Failed to load: ${this.src}</p>`;
-        return;
-      }
-      const md = await res.text();
-      if (!this.isConnected) return;
-      this.#bodyEl.innerHTML = renderMarkdown(md);
-    } catch (e) {
-      if (!this.isConnected) return;
-      this.#bodyEl.innerHTML = `<p>Error: ${e.message}</p>`;
-    }
-  }
-}
+defineIfFree('richtext-ui', UIRichText);
 
-customElements.define('richtext-ui', UIRichText);
 export { UIRichText };

package/components/richtext/richtext.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIRichtext
 tag: richtext-ui
@@ -9,81 +7,48 @@ version: 1
 description: Renders markdown to styled HTML.
 props:
   markdown:
-    description: "Component property: markdown."
+    description: 'Component property: markdown.'
     type: string
-    default: ""
+    default: ''
   src:
-    description: "Source URL (image, iframe, etc.)."
+    description: Source URL (image, iframe, etc.).
     type: string
-    default: ""
+    default: ''
 events: {}
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: Default slot — primary child content.
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: basic-richtext
-    description: Basic Richtext usage
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "comp"
-          ]
-        },
-        {
-          "id": "comp",
-          "component": "Richtext",
-          "src": "/images/example.jpg"
-        }
-      ]
-  - name: markdown
-    description: Inline markdown text rendered to styled HTML via the markdown attribute.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Richtext",
-          "markdown": "# Hello world\n\nWelcome to **AdiaUI**. This paragraph was parsed from markdown:\n\n- Lists\n- Render\n- Cleanly\n\n`inline code` and [links](https://example.com) work too."
-        }
-      ]
-  - name: src
-    description: Fetch a remote markdown file via src and render it; useful for docs pages.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Richtext",
-          "src": "/README.md"
-        }
-      ]
-  - name: code-blocks
-    description: Richtext with fenced code blocks; whitespace preserved and monospace styling applied.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Richtext",
-          "markdown": "## Example\n\n```js\nfunction greet(name) {\n  return `Hello, ${name}!`;\n}\n```\n\nInline `code` also works."
-        }
-      ]
+- name: basic-richtext
+  description: Basic Richtext usage
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"\
+    id\": \"comp\",\n    \"component\": \"Richtext\",\n    \"src\": \"/images/example.jpg\"\n  }\n]"
+- name: markdown
+  description: Inline markdown text rendered to styled HTML via the markdown attribute.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"markdown\": \"# Hello world\\n\\nWelcome to\
+    \ **AdiaUI**. This paragraph was parsed from markdown:\\n\\n- Lists\\n- Render\\n- Cleanly\\n\\n`inline code` and [links](https://example.com)\
+    \ work too.\"\n  }\n]"
+- name: src
+  description: Fetch a remote markdown file via src and render it; useful for docs pages.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"src\": \"/README.md\"\n  }\n]"
+- name: code-blocks
+  description: Richtext with fenced code blocks; whitespace preserved and monospace styling applied.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"markdown\": \"## Example\\n\\n```js\\nfunction\
+    \ greet(name) {\\n  return `Hello, ${name}!`;\\n}\\n```\\n\\nInline `code` also works.\"\n  }\n]"
 keywords:
-  - richtext
-synonyms: {}
+- richtext
+synonyms:
+  tags:
+  - markdown
+  - md-render
+  - rich-text
 related: []

package/components/row/class.js

@@ -0,0 +1,50 @@
+/**
+ * Non-side-effect class export for `<row-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/row`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * row-ui — Flex row layout primitive.
+ *
+ * <row-ui gap="sm" justify="space-between" wrap>...</row-ui>
+ * <row-ui draggable>...</row-ui>   wires the draggable trait, emits drag-end
+ */
+
+import { UIElement } from '../../core/element.js';
+import { draggable } from '../../traits/draggable/draggable.js';
+
+export class UIRow extends UIElement {
+  static properties = {
+    justify:   { type: String,  default: 'start',  reflect: true },
+    align:     { type: String,  default: 'center', reflect: true },
+    gap:       { type: String,  default: 'md',     reflect: true },
+    grow:      { type: Boolean, default: false,    reflect: true },
+    wrap:      { type: Boolean, default: false,    reflect: true },
+    draggable: { type: Boolean, default: false,    reflect: true },
+  };
+  static template = () => null;
+
+  #dragAttached = false;
+
+  connected() {
+    if (this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('draggable') && this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+}

package/components/row/row.a2ui.json

@@ -54,6 +54,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "drag-end": {
         "description": "Fired when a drag completes."

package/components/row/row.d.ts

@@ -0,0 +1,37 @@
+/**
+ * `<row-ui>` — Flex row layout primitive.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/row
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type RowDragEndEvent = CustomEvent<unknown>;
+
+export class UIRow extends UIElement {
+  /** Align items */
+  align: string;
+  /** Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end. */
+  draggable: boolean;
+  /** Gap between children. Accepts either the named scale (xs/sm/md/lg/xl) or a numeric rung on the spacing scale ("1"…"16"). */
+  gap: string;
+  /** Fills remaining space in a flex parent. CSS-only attribute via :scope[grow] in row.css. */
+  grow: boolean;
+  /** Justify content */
+  justify: string;
+  /** Enable flex wrap */
+  wrap: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIRow, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'drag-end', listener: (ev: RowDragEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/row/row.js

@@ -1,40 +1,17 @@
 /**
- * row-ui — Flex row layout primitive.
+ * `<row-ui>` — auto-registers the tag on import.
  *
- * <row-ui gap="sm" justify="space-between" wrap>...</row-ui>
- * <row-ui draggable>...</row-ui>   wires the draggable trait, emits drag-end
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIRow } from '@adia-ai/web-components/components/row/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-import { draggable } from '../../traits/draggable/draggable.js';
-
-class UIRow extends UIElement {
-  static properties = {
-    justify:   { type: String,  default: 'start',  reflect: true },
-    align:     { type: String,  default: 'center', reflect: true },
-    gap:       { type: String,  default: 'md',     reflect: true },
-    grow:      { type: Boolean, default: false,    reflect: true },
-    wrap:      { type: Boolean, default: false,    reflect: true },
-    draggable: { type: Boolean, default: false,    reflect: true },
-  };
-  static template = () => null;
-
-  #dragAttached = false;
-
-  connected() {
-    if (this.draggable && !this.#dragAttached) {
-      this.addTrait(draggable);
-      this.#dragAttached = true;
-    }
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIRow } from './class.js';
 
-  updated(changed) {
-    if (changed.has('draggable') && this.draggable && !this.#dragAttached) {
-      this.addTrait(draggable);
-      this.#dragAttached = true;
-    }
-  }
-}
-customElements.define('row-ui', UIRow);
+defineIfFree('row-ui', UIRow);
 
 export { UIRow };

package/components/search/class.js

@@ -0,0 +1,134 @@
+/**
+ * Non-side-effect class export for `<search-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/search`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <search-ui placeholder="Search..."></search-ui>
+ * <search-ui debounce="500"></search-ui>
+ *
+ * Search input with magnifying-glass icon, clear button, and debounce.
+ * Composes input-ui internally — no raw <input> stamping.
+ * Fires debounced 'search' event. Clear button resets and fires immediately.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UISearch extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    placeholder: { type: String, default: 'Search...', reflect: true },
+    debounce:    { type: Number, default: 300, reflect: true },
+  };
+
+  static template = () => null;
+
+  #inputEl = null;
+  #suffixEl = null;
+  #timer = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'search');
+
+    if (!this.querySelector('input-ui')) {
+      this.innerHTML = `<input-ui
+        type="search"
+        prefix="magnifying-glass"
+        suffix="x-circle"
+        placeholder="${this.placeholder}"
+        ${this.disabled ? 'disabled' : ''}
+      ></input-ui>`;
+    }
+
+    this.#inputEl = this.querySelector('input-ui');
+    if (this.#inputEl) {
+      this.#inputEl.addEventListener('input', this.#onInput);
+      this.#inputEl.addEventListener('keydown', this.#onKeydown);
+      this.#suffixEl = this.#inputEl.querySelector('[slot="suffix"]');
+      if (this.#suffixEl) {
+        this.#suffixEl.style.cursor = 'pointer';
+        this.#suffixEl.addEventListener('click', this.#onClear);
+      }
+    }
+  }
+
+  render() {
+    if (!this.#inputEl) return;
+
+    this.#inputEl.setAttribute('placeholder', this.placeholder);
+    if (this.disabled) this.#inputEl.setAttribute('disabled', '');
+    else this.#inputEl.removeAttribute('disabled');
+
+    // Reflect value for CSS (clear button visibility)
+    this.setAttribute('value', this.value || '');
+  }
+
+  #onInput = () => {
+    this.value = this.#inputEl.value;
+    this.syncValue(this.value);
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+
+    clearTimeout(this.#timer);
+    this.#timer = setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('search', {
+        bubbles: true,
+        detail: { value: this.value },
+      }));
+    }, this.debounce || 300);
+  };
+
+  #onKeydown = (e) => {
+    if (e.key === 'Enter') {
+      clearTimeout(this.#timer);
+      this.dispatchEvent(new CustomEvent('search', {
+        bubbles: true,
+        detail: { value: this.value },
+      }));
+    }
+    if (e.key === 'Escape') {
+      this.#onClear();
+    }
+  };
+
+  #onClear = () => {
+    clearTimeout(this.#timer);
+    this.value = '';
+    if (this.#inputEl) this.#inputEl.value = '';
+    this.syncValue('');
+    this.setAttribute('value', '');
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('search', {
+      bubbles: true,
+      detail: { value: '' },
+    }));
+    this.#inputEl?.focus();
+  };
+
+  focus() { this.#inputEl?.focus(); }
+
+  clear() { this.#onClear(); }
+
+  disconnected() {
+    super.disconnected();
+    clearTimeout(this.#timer);
+    this.#timer = null;
+    if (this.#inputEl) {
+      this.#inputEl.removeEventListener('input', this.#onInput);
+      this.#inputEl.removeEventListener('keydown', this.#onKeydown);
+    }
+    if (this.#suffixEl) {
+      this.#suffixEl.removeEventListener('click', this.#onClear);
+    }
+    this.#inputEl = null;
+    this.#suffixEl = null;
+  }
+}

package/components/search/search.a2ui.json

@@ -54,6 +54,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "clear": {
         "description": "Fired when the clear button is clicked"

package/components/search/search.js

@@ -1,124 +1,17 @@
 /**
- * <search-ui placeholder="Search..."></search-ui>
- * <search-ui debounce="500"></search-ui>
+ * `<search-ui>` — auto-registers the tag on import.
  *
- * Search input with magnifying-glass icon, clear button, and debounce.
- * Composes input-ui internally — no raw <input> stamping.
- * Fires debounced 'search' event. Clear button resets and fires immediately.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISearch } from '@adia-ai/web-components/components/search/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-
-class UISearch extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    placeholder: { type: String, default: 'Search...', reflect: true },
-    debounce:    { type: Number, default: 300, reflect: true },
-  };
-
-  static template = () => null;
-
-  #inputEl = null;
-  #suffixEl = null;
-  #timer = null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'search');
-
-    if (!this.querySelector('input-ui')) {
-      this.innerHTML = `<input-ui
-        type="search"
-        prefix="magnifying-glass"
-        suffix="x-circle"
-        placeholder="${this.placeholder}"
-        ${this.disabled ? 'disabled' : ''}
-      ></input-ui>`;
-    }
-
-    this.#inputEl = this.querySelector('input-ui');
-    if (this.#inputEl) {
-      this.#inputEl.addEventListener('input', this.#onInput);
-      this.#inputEl.addEventListener('keydown', this.#onKeydown);
-      this.#suffixEl = this.#inputEl.querySelector('[slot="suffix"]');
-      if (this.#suffixEl) {
-        this.#suffixEl.style.cursor = 'pointer';
-        this.#suffixEl.addEventListener('click', this.#onClear);
-      }
-    }
-  }
-
-  render() {
-    if (!this.#inputEl) return;
-
-    this.#inputEl.setAttribute('placeholder', this.placeholder);
-    if (this.disabled) this.#inputEl.setAttribute('disabled', '');
-    else this.#inputEl.removeAttribute('disabled');
-
-    // Reflect value for CSS (clear button visibility)
-    this.setAttribute('value', this.value || '');
-  }
-
-  #onInput = () => {
-    this.value = this.#inputEl.value;
-    this.syncValue(this.value);
-    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-
-    clearTimeout(this.#timer);
-    this.#timer = setTimeout(() => {
-      this.dispatchEvent(new CustomEvent('search', {
-        bubbles: true,
-        detail: { value: this.value },
-      }));
-    }, this.debounce || 300);
-  };
-
-  #onKeydown = (e) => {
-    if (e.key === 'Enter') {
-      clearTimeout(this.#timer);
-      this.dispatchEvent(new CustomEvent('search', {
-        bubbles: true,
-        detail: { value: this.value },
-      }));
-    }
-    if (e.key === 'Escape') {
-      this.#onClear();
-    }
-  };
-
-  #onClear = () => {
-    clearTimeout(this.#timer);
-    this.value = '';
-    if (this.#inputEl) this.#inputEl.value = '';
-    this.syncValue('');
-    this.setAttribute('value', '');
-    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-    this.dispatchEvent(new CustomEvent('search', {
-      bubbles: true,
-      detail: { value: '' },
-    }));
-    this.#inputEl?.focus();
-  };
-
-  focus() { this.#inputEl?.focus(); }
-
-  clear() { this.#onClear(); }
+import { defineIfFree } from '../../core/register.js';
+import { UISearch } from './class.js';
 
-  disconnected() {
-    super.disconnected();
-    clearTimeout(this.#timer);
-    this.#timer = null;
-    if (this.#inputEl) {
-      this.#inputEl.removeEventListener('input', this.#onInput);
-      this.#inputEl.removeEventListener('keydown', this.#onKeydown);
-    }
-    if (this.#suffixEl) {
-      this.#suffixEl.removeEventListener('click', this.#onClear);
-    }
-    this.#inputEl = null;
-    this.#suffixEl = null;
-  }
-}
-customElements.define('search-ui', UISearch);
+defineIfFree('search-ui', UISearch);
 
 export { UISearch };

package/components/section/section.a2ui.json

@@ -34,6 +34,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {},
     "examples": [
       {