@adia-ai/web-components 0.0.28 → 0.0.33

package/components/toast/toast.js

@@ -1,39 +1,32 @@
 /**
- * <toast-ui> — Notification popup wired through a shared top-layer
- * messaging channel.
+ * <toast-ui> — Thin facade over `<feed-ui>` / `UIFeed.post()`.
  *
- * All toasts — declarative AND imperative — route through one
- * lazily-mounted `[data-toast-container][data-toast-position]` per
- * position. Per-position singletons; consumers can post from anywhere
- * without holding a reference to the toast component:
+ * Phase 4 of `docs/specs/feed-channel.md` (SPEC-FEED-CHANNEL-001) —
+ * toast-ui no longer owns its own per-position container. Both
+ * declarative `<toast-ui>` and imperative `UIToast.show()` paths
+ * route through `UIFeed`. The element exists for back-compat:
+ * authoring `<toast-ui text="…">` still produces a feed item.
  *
- *     // Imperative API
- *     AdiaToast.show({ text: 'Saved!', variant: 'success' });
+ *     // Imperative API (delegates to UIFeed.post)
+ *     UIToast.show({ text: 'Saved!', variant: 'success' });
  *
- *     // Global event channel — same shape, dispatched on `window`.
- *     // Any code (other components, integration scripts) can post
- *     // without importing AdiaToast.
+ *     // Global event channel — same shape, same delegation.
  *     window.dispatchEvent(new CustomEvent('toast', {
  *       detail: { text: 'Saved!', variant: 'success' }
  *     }));
  *
- *     // Declarative — auto-routes to the per-position container on
- *     // connect. No need to author <toast-ui> inside the container.
+ *     // Declarative — auto-posts and removes self on connect.
  *     <toast-ui text="Saved!" variant="success"></toast-ui>
  *
- * Events:
- *   close — fired after the toast finishes its exit animation
+ * The legacy `[data-toast-container]` per-position-Map plumbing was
+ * retired in this migration; the lane infrastructure now lives in
+ * `<feed-ui>` (see ../feed/feed.js).
  */
 
-import { AdiaElement, html } from '../../core/element.js';
-
-class AdiaToast extends AdiaElement {
-  #timer = null;
-  #removing = false;
-  #closeTimer = null;
-  #openRaf = null;
-  #routed = false;
+import { UIElement, html } from '../../core/element.js';
+import { UIFeed } from '../feed/feed.js';
 
+class UIToast extends UIElement {
   static properties = {
     text:     { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'info', reflect: true },
@@ -41,185 +34,62 @@ class AdiaToast extends AdiaElement {
     position: { type: String,  default: 'bottom-right', reflect: true },
   };
 
-  static parts = {
-    message: '<div slot="message"></div>',
-    close:   '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>',
-  };
-
   static template = () => html``;
 
-  #onPress = (e) => {
-    if (e.target.closest('[slot="close"]')) this.dismiss();
-  };
-
   connected() {
-    this.addEventListener('press', this.#onPress);
-
-    // Route declarative <toast-ui> instances into the shared per-position
-    // container so authored toasts share the same lane as imperatively-
-    // posted ones (no overlap, consistent stacking). Skipped if we're
-    // already inside a container (re-entrant connect after reparent).
-    if (!this.#routed && !this.parentElement?.matches?.('[data-toast-container]')) {
-      this.#routed = true;
-      const container = AdiaToast.#getContainer(this.position || 'bottom-right');
-      if (this.parentElement !== container) container.appendChild(this);
-    }
-  }
-
-  #getDuration() {
-    const raw = getComputedStyle(this).getPropertyValue('--toast-duration').trim();
-    return parseFloat(raw) || 200;
-  }
-
-  render() {
-    const message = this.ensure('message');
-    message.textContent = this.text;
-
-    const close = this.ensure('close');
-    if (close.parentElement !== this) this.appendChild(close);
-
-    this.setAttribute('role', 'status');
-    this.setAttribute('aria-live', 'polite');
-
-    // Schedule auto-open animation
-    if (!this.hasAttribute('data-open') && !this.#removing) {
-      this.#openRaf = requestAnimationFrame(() => {
-        this.#openRaf = null;
-        this.setAttribute('data-open', '');
-      });
-    }
-
-    // Schedule auto-dismiss
-    this.#scheduleAutoDismiss();
-  }
-
-  #scheduleAutoDismiss() {
-    if (this.#timer) clearTimeout(this.#timer);
-    if (this.duration > 0) {
-      this.#timer = setTimeout(() => this.dismiss(), this.duration);
-    }
-  }
-
-  dismiss() {
-    if (this.#removing) return;
-    this.#removing = true;
-    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
-
-    this.removeAttribute('data-open');
-    this.setAttribute('data-closing', '');
-
-    this.#closeTimer = setTimeout(() => {
-      this.#closeTimer = null;
-      this.removeAttribute('data-closing');
-      const container = this.parentElement;
-      this.dispatchEvent(new Event('close', { bubbles: true }));
-      this.remove();
-      /* If the lane is now empty, hide its popover and remove the
-         container — keeps document.body free of leaked containers. */
-      if (container?.matches?.('[data-toast-container]')) {
-        AdiaToast.#releaseContainerIfEmpty(container);
-      }
-    }, this.#getDuration());
-  }
-
-  disconnected() {
-    this.removeEventListener('press', this.#onPress);
-    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
-    if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
-    if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
+    /* Declarative path: post into UIFeed and remove self. The
+       element is fire-and-forget — its only job is to forward the
+       authored attributes to the feed, then dissolve. Re-entrant
+       guard keeps this safe under HMR / dev-mode re-attachment. */
+    if (this.__routedToFeed) return;
+    this.__routedToFeed = true;
+    UIFeed.post({
+      text:     this.text,
+      variant:  this.variant === 'error' ? 'danger' : this.variant,
+      duration: this.duration,
+      position: this.position,
+    });
+    /* Schedule removal so the calling code can read the attributes
+       if it inspected this element on the same microtask. */
+    queueMicrotask(() => { try { this.remove(); } catch { /* noop */ } });
   }
 
   /**
-   * Static convenience — creates a toast, appends to body, auto-removes.
+   * Static facade — delegates to UIFeed.post(). Kept for back-compat
+   * with consumer code shaped like `customElements.get('toast-ui').show(...)`
+   * or `UIToast.show(...)`. New code should call UIFeed.post()
+   * directly.
+   *
    * @param {Object} opts
    * @param {string} opts.text
-   * @param {string} [opts.variant='info']
+   * @param {string} [opts.variant='info']  — `error` aliases to `danger`.
    * @param {number} [opts.duration=4000]
    * @param {string} [opts.position='bottom-right']
-   * @returns {AdiaToast}
-   */
-  static #containers = new Map();
-
-  /**
-   * Get (or lazily create) the per-position lane. Each lane is a manual
-   * Popover-API container — `[popover="manual"]` puts it in the browser's
-   * top-layer, above ALL page content with no z-index wars, and the
-   * native popover stack lets multiple lanes coexist (e.g. one toast in
-   * top-right + another in bottom-center) without collision.
-   *
-   * `popover="manual"` (not `auto`) — toasts must NOT light-dismiss on
-   * outside click; they auto-fade by their own duration timer.
-   *
-   * Falls back gracefully if the Popover API is unsupported (Safari < 17 /
-   * Firefox < 125): the lane still renders as a `position: fixed` div via
-   * the CSS `[data-toast-container]` rules. Browser baseline (Chromium
-   * 125+, Safari 18.0+, Firefox 129+) all support `[popover]`.
+   * @returns {{id:string|null, dismiss:function, update:function}}  FeedHandle.
    */
-  static #getContainer(position) {
-    let el = AdiaToast.#containers.get(position);
-    if (el && el.isConnected) return el;
-    el = document.createElement('div');
-    el.setAttribute('data-toast-container', position);
-    /* `manual` = no light-dismiss; container stays open until we
-       explicitly hidePopover() it when its last toast leaves. */
-    if ('popover' in HTMLElement.prototype) {
-      el.setAttribute('popover', 'manual');
-    }
-    document.body.appendChild(el);
-    /* Show the popover so the lane lifts into the top-layer. Wrapped in
-       try/catch because some test rigs (happy-dom) don't ship the API. */
-    try { el.showPopover?.(); } catch { /* graceful fallback to fixed */ }
-    AdiaToast.#containers.set(position, el);
-    return el;
+  static show(opts = {}) {
+    const { text, variant = 'info', duration = 4000, position = 'bottom-right' } = opts;
+    return UIFeed.post({
+      text,
+      variant: variant === 'error' ? 'danger' : variant,
+      duration,
+      position,
+    });
   }
-
-  /**
-   * Tear down the per-position lane when its last toast has been
-   * dismissed. Keeps `document.body` clean — addresses the audit's L-B4
-   * "container leak" finding (toasts permanently leaving DIVs in body).
-   */
-  static #releaseContainerIfEmpty(container) {
-    if (!container) return;
-    if (container.children.length > 0) return;
-    try { container.hidePopover?.(); } catch { /* noop */ }
-    container.remove();
-    /* Clear from the singleton map so the next post() rebuilds. */
-    for (const [pos, el] of AdiaToast.#containers) {
-      if (el === container) AdiaToast.#containers.delete(pos);
-    }
-  }
-
-  static show({ text, variant = 'info', duration = 4000, position = 'bottom-right' } = {}) {
-    /* `error` is a documented alias of `danger` (Phase 6 variant table). */
-    if (variant === 'error') variant = 'danger';
-    const container = AdiaToast.#getContainer(position);
-    const toast = document.createElement('toast-ui');
-    toast.text = text;
-    toast.variant = variant;
-    toast.duration = duration;
-    toast.position = position;
-    container.appendChild(toast);
-    return toast;
-  }
-
 }
 
-/* Install the global 'toast' CustomEvent listener once, at module load,
-   so any code can post into the channel without importing AdiaToast
-   directly:
-
-     window.dispatchEvent(new CustomEvent('toast', {
-       detail: { text: 'Saved!', variant: 'success' }
-     }));
-
-   Idempotent — guarded by a window flag so HMR / re-imports are safe. */
+/* Idempotent install of the global 'toast' CustomEvent listener.
+   Same shape as the historical channel — code that posts via
+   `window.dispatchEvent(new CustomEvent('toast', {detail:{…}}))`
+   keeps working. The listener delegates to UIToast.show(), which
+   delegates to UIFeed.post(). */
 if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
   window.__adiaToastListenerInstalled = true;
   window.addEventListener('toast', (e) => {
-    if (e?.detail && typeof e.detail === 'object') AdiaToast.show(e.detail);
+    if (e?.detail && typeof e.detail === 'object') UIToast.show(e.detail);
   });
 }
 
-customElements.define('toast-ui', AdiaToast);
+customElements.define('toast-ui', UIToast);
 
-export { AdiaToast };
+export { UIToast };

package/components/toast/toast.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaToast
+name: UIToast
 tag: toast-ui
 component: Toast
 category: container

package/components/toggle-group/toggle-group.a2ui.json

@@ -52,7 +52,7 @@
       "toggle",
       "group"
     ],
-    "name": "AdiaToggleGroup",
+    "name": "UIToggleGroup",
     "related": [],
     "slots": {
       "default": {

package/components/toggle-group/toggle-group.js

@@ -12,7 +12,7 @@
  *   single — restrict to one active option at a time (default false: multi-select)
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
 // ── Toggle Option ──
 //
@@ -22,7 +22,7 @@ import { AdiaElement } from '../../core/element.js';
 // group's comma-separated `value` list. Consistent with native `<option>`
 // inside `<select>`.
 
-class AdiaToggleOption extends AdiaElement {
+class UIToggleOption extends UIElement {
   static properties = {
     value:    { type: String,  default: '', reflect: true },
     text:     { type: String,  default: '', reflect: true },
@@ -59,11 +59,11 @@ class AdiaToggleOption extends AdiaElement {
     this.#stamped = false;
   }
 }
-customElements.define('toggle-option-ui', AdiaToggleOption);
+customElements.define('toggle-option-ui', UIToggleOption);
 
 // ── Toggle Group ──
 
-class AdiaToggleGroup extends AdiaElement {
+class UIToggleGroup extends UIElement {
   static properties = {
     value:  { type: String,  default: '',    reflect: true },
     single: { type: Boolean, default: false, reflect: true },
@@ -142,6 +142,6 @@ class AdiaToggleGroup extends AdiaElement {
     this.#bound = false;
   }
 }
-customElements.define('toggle-group-ui', AdiaToggleGroup);
+customElements.define('toggle-group-ui', UIToggleGroup);
 
-export { AdiaToggleGroup, AdiaToggleOption };
+export { UIToggleGroup, UIToggleOption };

package/components/toggle-group/toggle-group.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaToggleGroup
+name: UIToggleGroup
 tag: toggle-group-ui
 component: ToggleGroup
 category: navigation

package/components/toolbar/toolbar.a2ui.json

@@ -63,7 +63,7 @@
       "buttons",
       "actions"
     ],
-    "name": "AdiaToolbar",
+    "name": "UIToolbar",
     "related": [
       "button",
       "divider"

package/components/toolbar/toolbar.js

@@ -20,7 +20,7 @@
  * Platform: Popover API (top-layer) + CSS Anchor Positioning via @core/anchor.js.
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 import { anchorPopover } from '../../core/anchor.js';
 
 const SPILLOVER_ATTR = 'data-toolbar-spillover';
@@ -32,7 +32,7 @@ const SPILLOVER_MENU_ATTR = 'data-toolbar-spillover-menu';
    touch the toolbar's right edge. */
 const OVERFLOW_BUFFER = 8;
 
-class AdiaToolbar extends AdiaElement {
+class UIToolbar extends UIElement {
   static properties = {
     gap:      { type: String,  default: 'sm', reflect: true },
     align:    { type: String,  default: 'start', reflect: true },
@@ -322,20 +322,20 @@ class AdiaToolbar extends AdiaElement {
     }
   }
 }
-customElements.define('toolbar-ui', AdiaToolbar);
+customElements.define('toolbar-ui', UIToolbar);
 
 /**
  * <toolbar-group-ui> — atomic group within a toolbar.
  * Its children are displayed together with matching gap and, during overflow,
  * are moved to the spillover menu as a single unit.
  */
-class AdiaToolbarGroup extends AdiaElement {
+class UIToolbarGroup extends UIElement {
   static template = () => null;
   connected() {
     this.setAttribute('role', 'group');
   }
 }
-customElements.define('toolbar-group-ui', AdiaToolbarGroup);
+customElements.define('toolbar-group-ui', UIToolbarGroup);
 
 function isDivider(el) {
   return el?.tagName && el.tagName.toLowerCase() === 'divider-ui';
@@ -381,4 +381,4 @@ function outerWidth(el) {
   return r.width + ml + mr;
 }
 
-export { AdiaToolbar, AdiaToolbarGroup };
+export { UIToolbar, UIToolbarGroup };

package/components/toolbar/toolbar.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaToolbar
+name: UIToolbar
 tag: toolbar-ui
 component: Toolbar
 category: layout

package/components/tooltip/tooltip.a2ui.json

@@ -93,7 +93,7 @@
       "hint",
       "popover"
     ],
-    "name": "AdiaTooltip",
+    "name": "UITooltip",
     "related": [
       "button"
     ],

package/components/tooltip/tooltip.js

@@ -18,10 +18,10 @@
  * No click interaction — hover/focus only.
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 import { anchorPopover } from '../../core/anchor.js';
 
-class AdiaTooltip extends AdiaElement {
+class UITooltip extends UIElement {
   static properties = {
     text:      { type: String,  default: '',         reflect: true },
     placement: { type: String,  default: 'top',      reflect: true },
@@ -128,10 +128,10 @@ class AdiaTooltip extends AdiaElement {
     this.#target = (root && root.getElementById) ? root.getElementById(this.for) : document.getElementById(this.for);
     if (!this.#target) {
       // Warn once per (element, id) pair
-      if (!AdiaTooltip._warnedMissing) AdiaTooltip._warnedMissing = new WeakSet();
-      if (!AdiaTooltip._warnedMissing.has(this)) {
+      if (!UITooltip._warnedMissing) UITooltip._warnedMissing = new WeakSet();
+      if (!UITooltip._warnedMissing.has(this)) {
         console.warn(`[tooltip-ui] follows="pointer" [for="${this.for}"] did not resolve to an element.`);
-        AdiaTooltip._warnedMissing.add(this);
+        UITooltip._warnedMissing.add(this);
       }
       return;
     }
@@ -284,6 +284,6 @@ class AdiaTooltip extends AdiaElement {
       .replace(/"/g, '"');
   }
 }
-customElements.define('tooltip-ui', AdiaTooltip);
+customElements.define('tooltip-ui', UITooltip);
 
-export { AdiaTooltip };
+export { UITooltip };

package/components/tooltip/tooltip.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaTooltip
+name: UITooltip
 tag: tooltip-ui
 component: Tooltip
 category: container

package/components/tree/tree.a2ui.json

@@ -40,7 +40,7 @@
       "tree",
       "folder"
     ],
-    "name": "AdiaTree",
+    "name": "UITree",
     "related": [],
     "slots": {
       "default (tree-item-ui children)": {

package/components/tree/tree.js

@@ -19,9 +19,9 @@
  *   tree-select — fired on tree-ui when an item is selected (detail: { item, text, value })
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaTree extends AdiaElement {
+class UITree extends UIElement {
   static template = () => null;
 
   connected() {
@@ -144,7 +144,7 @@ class AdiaTree extends AdiaElement {
     this.removeEventListener('keydown', this.#onKey);
   }
 }
-customElements.define('tree-ui', AdiaTree);
+customElements.define('tree-ui', UITree);
 
 
 /**
@@ -163,7 +163,7 @@ customElements.define('tree-ui', AdiaTree);
  *   actions  — right-aligned action icons (eye, lock, etc.)
  *   children — nested tree-item-ns (auto-detected)
  */
-class AdiaTreeItem extends AdiaElement {
+class UITreeItem extends UIElement {
   static properties = {
     text:     { type: String,  default: '', reflect: true },
     icon:     { type: String,  default: '', reflect: true },
@@ -248,6 +248,6 @@ class AdiaTreeItem extends AdiaElement {
     if (textEl && this.text) textEl.textContent = this.text;
   }
 }
-customElements.define('tree-item-ui', AdiaTreeItem);
+customElements.define('tree-item-ui', UITreeItem);
 
-export { AdiaTree, AdiaTreeItem };
+export { UITree, UITreeItem };

package/components/tree/tree.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaTree
+name: UITree
 tag: tree-ui
 component: Tree
 category: data

package/components/upload/upload.a2ui.json

@@ -91,7 +91,7 @@
       "file-manager",
       "files"
     ],
-    "name": "AdiaUpload",
+    "name": "UIUpload",
     "related": [
       "progress",
       "button",

package/components/upload/upload.js

@@ -1,14 +1,14 @@
 /**
  * <upload-ui> — File upload with drag-and-drop.
  * Uses showOpenFilePicker (modern) with <input type="file"> fallback.
- * Form-associated via AdiaFormElement + ElementInternals.
+ * Form-associated via UIFormElement + ElementInternals.
  */
 
-import { AdiaFormElement } from '../../core/form.js';
+import { UIFormElement } from '../../core/form.js';
 
-class AdiaUpload extends AdiaFormElement {
+class UIUpload extends UIFormElement {
   static properties = {
-    ...AdiaFormElement.properties,
+    ...UIFormElement.properties,
     label:    { type: String,  default: '', reflect: true },
     accept:   { type: String,  default: '', reflect: true },
     multiple: { type: Boolean, default: false, reflect: true },
@@ -184,6 +184,6 @@ class AdiaUpload extends AdiaFormElement {
     this.#dropzoneEl = null;
   }
 }
-customElements.define('upload-ui', AdiaUpload);
+customElements.define('upload-ui', UIUpload);
 
-export { AdiaUpload };
+export { UIUpload };

package/components/upload/upload.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaUpload
+name: UIUpload
 tag: upload-ui
 component: Upload
 category: input

package/core/element.js

@@ -2,12 +2,12 @@
  * AdiaUI Core — Light DOM web component base class.
  *
  * Re-exports reactivity and rendering for backward compatibility:
- *   import { AdiaElement, signal, computed, effect, html, repeat } from './element.js';
+ *   import { UIElement, signal, computed, effect, html, repeat } from './element.js';
  *
  * Or import each layer directly:
  *   import { signal, computed, effect } from './signals.js';
  *   import { html, css, repeat } from './template.js';
- *   import { AdiaElement } from './element.js';
+ *   import { UIElement } from './element.js';
  */
 
 // Re-export reactivity primitives
@@ -16,7 +16,7 @@ export { signal, computed, effect, batch, untracked, isSignal } from './signals.
 // Re-export rendering
 export { html, css, repeat } from './template.js';
 
-// Internal imports for AdiaElement
+// Internal imports for UIElement
 import { signal, computed, effect, untracked } from './signals.js';
 import { stamp, disposeParts, KEY_MAP } from './template.js';
 
@@ -79,7 +79,7 @@ function prepareParts(ctor) {
   }
 }
 
-export class AdiaElement extends HTMLElement {
+export class UIElement extends HTMLElement {
   static get properties() { return {}; }
   static get traits() { return []; }
   static get observedAttributes() {