@adia-ai/web-components 0.4.6 → 0.4.7

package/components/rating/class.js

@@ -0,0 +1,148 @@
+/**
+ * Non-side-effect class export for `<rating-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/rating`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <rating-ui> — Discrete pictorial rating (stars by default).
+ *
+ * Supports keyboard (arrows), mouse hover preview, and 0.5-step precision.
+ * The host is role=slider per ARIA APG for custom rating widgets.
+ *
+ *   <rating-ui value="3.5" max="5" allow-half name="review"></rating-ui>
+ *   <rating-ui value="4" icon="heart" variant="accent"></rating-ui>
+ *   <rating-ui value="5" readonly></rating-ui>
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UIRating extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    /** value: Number — overrides UIFormElement.value (String); syncs as string on form submit. */
+    value:     { type: Number,  default: 0, reflect: true },
+    max:       { type: Number,  default: 5, reflect: true },
+    icon:      { type: String,  default: 'star', reflect: true },
+    readonly:  { type: Boolean, default: false, reflect: true },
+    allowHalf: { type: Boolean, default: false, reflect: true, attribute: 'allow-half' },
+    size:      { type: String,  default: 'md', reflect: true },
+  };
+
+  static template = () => null;
+
+  #hoverValue = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'slider');
+    this.setAttribute('aria-orientation', 'horizontal');
+    this.setAttribute('aria-valuemin', '0');
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', this.readonly ? '-1' : '0');
+    this.addEventListener('pointermove', this.#onPointer);
+    this.addEventListener('pointerleave', this.#onLeave);
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    const max = Number(this.max) || 5;
+    const display = this.#hoverValue ?? (Number(this.value) || 0);
+
+    const symbols = Array.from({ length: max }, (_, i) => {
+      const slotValue = i + 1;
+      const fill =
+        display >= slotValue        ? 'full' :
+        display >= slotValue - 0.5  ? 'half' :
+                                      'empty';
+      return `
+        <span data-rating-symbol data-fill="${fill}" aria-hidden="true">
+          <icon-ui name="${this.icon}" data-rating-symbol-bg></icon-ui>
+          <icon-ui name="${this.icon}" weight="fill" data-rating-symbol-fg></icon-ui>
+        </span>
+      `;
+    }).join('');
+
+    this.innerHTML = symbols;
+    this.setAttribute('aria-valuemax', String(max));
+    this.setAttribute('aria-valuenow', String(Number(this.value) || 0));
+    this.setAttribute('aria-valuetext', `${Number(this.value) || 0} out of ${max}`);
+    if (this.readonly) this.setAttribute('aria-readonly', 'true');
+    else this.removeAttribute('aria-readonly');
+  }
+
+  #valueFromEvent(e) {
+    const symbols = [...this.querySelectorAll('[data-rating-symbol]')];
+    const target = symbols.find(s => s.contains(e.target));
+    if (!target) return null;
+    const idx = symbols.indexOf(target);
+    if (idx === -1) return null;
+    if (this.allowHalf) {
+      const rect = target.getBoundingClientRect();
+      const isHalf = (e.clientX - rect.left) < rect.width / 2;
+      return idx + (isHalf ? 0.5 : 1);
+    }
+    return idx + 1;
+  }
+
+  #onPointer = (e) => {
+    if (this.readonly || this.disabled) return;
+    const v = this.#valueFromEvent(e);
+    if (v == null) return;
+    if (v !== this.#hoverValue) {
+      this.#hoverValue = v;
+      this.render();
+    }
+  };
+
+  #onLeave = () => {
+    if (this.#hoverValue == null) return;
+    this.#hoverValue = null;
+    this.render();
+  };
+
+  #onClick = (e) => {
+    if (this.readonly || this.disabled) return;
+    const v = this.#valueFromEvent(e);
+    if (v == null) return;
+    this.#commit(v);
+  };
+
+  #onKey = (e) => {
+    if (this.readonly || this.disabled) return;
+    const step = this.allowHalf ? 0.5 : 1;
+    const max = Number(this.max) || 5;
+    const v = Number(this.value) || 0;
+    let next = v;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp')   { next = Math.min(max, v + step); }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { next = Math.max(0, v - step); }
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End')  next = max;
+    else return;
+    e.preventDefault();
+    this.#commit(next);
+  };
+
+  #commit(v) {
+    this.value = v;
+    this.#hoverValue = null;
+    this.syncValue(String(v));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+    this.render();
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('pointermove', this.#onPointer);
+    this.removeEventListener('pointerleave', this.#onLeave);
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}

package/components/rating/rating.js

@@ -1,138 +1,17 @@
 /**
- * <rating-ui> — Discrete pictorial rating (stars by default).
+ * `<rating-ui>` — auto-registers the tag on import.
  *
- * Supports keyboard (arrows), mouse hover preview, and 0.5-step precision.
- * The host is role=slider per ARIA APG for custom rating widgets.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- *   <rating-ui value="3.5" max="5" allow-half name="review"></rating-ui>
- *   <rating-ui value="4" icon="heart" variant="accent"></rating-ui>
- *   <rating-ui value="5" readonly></rating-ui>
+ *   import { UIRating } from '@adia-ai/web-components/components/rating/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-
-class UIRating extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    /** value: Number — overrides UIFormElement.value (String); syncs as string on form submit. */
-    value:     { type: Number,  default: 0, reflect: true },
-    max:       { type: Number,  default: 5, reflect: true },
-    icon:      { type: String,  default: 'star', reflect: true },
-    readonly:  { type: Boolean, default: false, reflect: true },
-    allowHalf: { type: Boolean, default: false, reflect: true, attribute: 'allow-half' },
-    size:      { type: String,  default: 'md', reflect: true },
-  };
-
-  static template = () => null;
-
-  #hoverValue = null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'slider');
-    this.setAttribute('aria-orientation', 'horizontal');
-    this.setAttribute('aria-valuemin', '0');
-    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', this.readonly ? '-1' : '0');
-    this.addEventListener('pointermove', this.#onPointer);
-    this.addEventListener('pointerleave', this.#onLeave);
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  render() {
-    const max = Number(this.max) || 5;
-    const display = this.#hoverValue ?? (Number(this.value) || 0);
-
-    const symbols = Array.from({ length: max }, (_, i) => {
-      const slotValue = i + 1;
-      const fill =
-        display >= slotValue        ? 'full' :
-        display >= slotValue - 0.5  ? 'half' :
-                                      'empty';
-      return `
-        <span data-rating-symbol data-fill="${fill}" aria-hidden="true">
-          <icon-ui name="${this.icon}" data-rating-symbol-bg></icon-ui>
-          <icon-ui name="${this.icon}" weight="fill" data-rating-symbol-fg></icon-ui>
-        </span>
-      `;
-    }).join('');
-
-    this.innerHTML = symbols;
-    this.setAttribute('aria-valuemax', String(max));
-    this.setAttribute('aria-valuenow', String(Number(this.value) || 0));
-    this.setAttribute('aria-valuetext', `${Number(this.value) || 0} out of ${max}`);
-    if (this.readonly) this.setAttribute('aria-readonly', 'true');
-    else this.removeAttribute('aria-readonly');
-  }
-
-  #valueFromEvent(e) {
-    const symbols = [...this.querySelectorAll('[data-rating-symbol]')];
-    const target = symbols.find(s => s.contains(e.target));
-    if (!target) return null;
-    const idx = symbols.indexOf(target);
-    if (idx === -1) return null;
-    if (this.allowHalf) {
-      const rect = target.getBoundingClientRect();
-      const isHalf = (e.clientX - rect.left) < rect.width / 2;
-      return idx + (isHalf ? 0.5 : 1);
-    }
-    return idx + 1;
-  }
-
-  #onPointer = (e) => {
-    if (this.readonly || this.disabled) return;
-    const v = this.#valueFromEvent(e);
-    if (v == null) return;
-    if (v !== this.#hoverValue) {
-      this.#hoverValue = v;
-      this.render();
-    }
-  };
-
-  #onLeave = () => {
-    if (this.#hoverValue == null) return;
-    this.#hoverValue = null;
-    this.render();
-  };
-
-  #onClick = (e) => {
-    if (this.readonly || this.disabled) return;
-    const v = this.#valueFromEvent(e);
-    if (v == null) return;
-    this.#commit(v);
-  };
-
-  #onKey = (e) => {
-    if (this.readonly || this.disabled) return;
-    const step = this.allowHalf ? 0.5 : 1;
-    const max = Number(this.max) || 5;
-    const v = Number(this.value) || 0;
-    let next = v;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowUp')   { next = Math.min(max, v + step); }
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { next = Math.max(0, v - step); }
-    else if (e.key === 'Home') next = 0;
-    else if (e.key === 'End')  next = max;
-    else return;
-    e.preventDefault();
-    this.#commit(next);
-  };
-
-  #commit(v) {
-    this.value = v;
-    this.#hoverValue = null;
-    this.syncValue(String(v));
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-    this.render();
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIRating } from './class.js';
 
-  disconnected() {
-    super.disconnected();
-    this.removeEventListener('pointermove', this.#onPointer);
-    this.removeEventListener('pointerleave', this.#onLeave);
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-}
+defineIfFree('rating-ui', UIRating);
 
-customElements.define('rating-ui', UIRating);
 export { UIRating };

package/components/richtext/class.js

@@ -0,0 +1,87 @@
+/**
+ * Non-side-effect class export for `<richtext-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/richtext`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
+
+/**
+ * <richtext-ui> — Renders markdown to styled HTML.
+ *
+ * Takes markdown as a `src` URL (fetched) or `markdown` property (inline),
+ * converts it to HTML, and displays it with prose-appropriate typography.
+ *
+ * Usage:
+ *   <richtext-ui src="/docs/readme.md"></richtext-ui>
+ *   <richtext-ui markdown="# Hello\nSome **bold** text."></richtext-ui>
+ *
+ * Programmatic:
+ *   const el = document.querySelector('richtext-ui');
+ *   el.markdown = '# Title\nParagraph text.';
+ */
+export 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);
+    }
+  }
+
+  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>`;
+    }
+  }
+}

package/components/richtext/richtext.a2ui.json

@@ -73,7 +73,13 @@
         "name": "idle"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "markdown",
+        "md-render",
+        "rich-text"
+      ]
+    },
     "tag": "richtext-ui",
     "tokens": {},
     "traits": [],

package/components/richtext/richtext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `<richtext-ui>` — Renders markdown to styled HTML.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/richtext
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIRichtext extends UIElement {
+  /** Component property: markdown. */
+  markdown: string;
+  /** Source URL (image, iframe, etc.). */
+  src: string;
+}

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;
+    }
+  }
+}