@adia-ai/web-components 0.0.28 → 0.0.29

package/README.md

@@ -46,20 +46,16 @@ web-components/
 │   └── data-stream.js   `data-stream-*` attribute trait (HTTP/SSE/WS,
 │                        signal-backed, refcounted shared transports)
 │
-├── components/     — 80 *-ui custom elements
+├── components/     — 80 *-ui custom elements (primitives)
 │   └── <tag>/
 │       ├── <tag>.js       class definition (extends AdiaElement)
 │       ├── <tag>.css      @scope(tag-ui) two-block: tokens + styles
 │       ├── <tag>.yaml     authoring contract (props, slots, events, examples)
 │       └── <tag>.a2ui.json  generated — do NOT edit
 │
-├── patterns/       — Higher-level compositions
-│   ├── app-shell, app-nav*, section-nav*  — admin layout scaffolding
-│   ├── adia-chat, adia-editor, gen-ui     — LLM + editor + gen-UI patterns
-│   ├── a2ui-root                          — A2UI declarative host (moved
-│   │                                        from a2ui/ in 0.0.4; pairs
-│   │                                        with @adia-ai/a2ui-utils)
-│   └── index.js                           — registers all patterns
+│  Composite elements (app-shell, app-nav*, adia-chat, adia-editor,
+│  gen-ui, a2ui-root) ship in the sibling `@adia-ai/web-modules`
+│  package as of 0.0.29 — see ADR-0012 for the three-tier rationale.
 │
 ├── traits/         — 42 composable behaviors via defineTrait()
 │                     (pressable, focusTrap, confetti, resizable, …)

package/a2ui/index.js

@@ -11,7 +11,7 @@
  *
  * The declarative `<a2ui-root>` custom element also moved — it now lives
  * in the patterns directory. Import it via:
- *   import '@adia-ai/web-components/patterns/a2ui-root/a2ui-root.js';
+ *   import '@adia-ai/web-modules/runtime/a2ui-root/a2ui-root.js';
  */
 
 if (typeof console !== 'undefined' && !globalThis.__a2ui_subpath_warned) {

package/components/canvas/canvas.js

@@ -1,5 +1,5 @@
 import { AdiaElement } from '../../core/element.js';
-import '../../patterns/a2ui-root/a2ui-root.js';
+import '../../../web-modules/runtime/a2ui-root/a2ui-root.js';
 
 /**
  * <canvas-ui> — A2UI rendering surface.

package/components/feed/feed.css

@@ -131,6 +131,15 @@ feed-item-ui[data-closing] {
   }
 }
 
+/* Phase 2 max-queue: items above [max] are appended with [data-queued]
+   and stay invisible until a visible sibling dismisses (at which point
+   `releaseContainerIfEmpty` strips the attribute). Display:none keeps
+   them out of the layout AND screen-reader-invisible — items not yet
+   shown shouldn't be announced. */
+feed-item-ui[data-queued] {
+  display: none;
+}
+
 /* Reduced-motion: skip slide-in/out, keep opacity. */
 @media (prefers-reduced-motion: reduce) {
   feed-item-ui[data-open],

package/components/feed/feed.js

@@ -59,6 +59,11 @@ class AdiaFeedItem extends AdiaElement {
     variant:     { type: String,  default: 'default',    reflect: true },
     duration:    { type: Number,  default: 4000,         reflect: true },
     dismissible: { type: Boolean, default: false,        reflect: true },
+    // Phase 2: action-required policy. When set, the item carries an
+    // action button that the user MUST click (or dismiss) before the
+    // item goes away. Spec §2.3 — action-required role=alertdialog,
+    // focus is trapped until choice is made.
+    action:      { type: String,  default: '',           reflect: true },
   };
 
   static parts = {
@@ -67,9 +72,21 @@ class AdiaFeedItem extends AdiaElement {
   static template = () => html``;
 
   #onPress = (e) => {
-    if (e.target.closest('[data-feed-close]')) this.dismiss();
+    if (e.target.closest('[data-feed-close]')) { this.dismiss(); return; }
+    // Phase 2: action button — fires the action callback (if registered
+    // via FeedHandle.update with onAction) then dismisses. The handle's
+    // .update({onAction: fn}) populates this.#onAction below.
+    if (e.target.closest('[data-feed-action]')) {
+      try { this.#onAction?.(); } catch (err) { console.warn('[feed-item] action handler threw:', err); }
+      this.dismiss();
+    }
   };
 
+  // Phase 2 focus-trap state — only used when the policy is action-required.
+  #onAction = null;
+  #focusTrapPrev = null;
+  #onTrapKeydown = null;
+
   connected() {
     this.addEventListener('press', this.#onPress);
   }
@@ -95,17 +112,22 @@ class AdiaFeedItem extends AdiaElement {
     }
 
     /* Inferred policy roles per spec §2.4. Auto-fade gets `status`;
-       sticky danger/warning gets `alert`; action-required gets
-       `alertdialog` (a future phase wires the focus trap). */
+       sticky danger/warning gets `alert`; action-required (sticky +
+       has [action]) gets `alertdialog` and a focus trap. */
     const isSticky = !this.duration || this.duration <= 0;
     const isLoud   = this.variant === 'danger' || this.variant === 'warning';
+    const isActionRequired = isSticky && !!this.action;
     let role = 'status';
-    if (isSticky && isLoud) role = 'alert';
+    if (isActionRequired) role = 'alertdialog';
+    else if (isSticky && isLoud) role = 'alert';
     this.setAttribute('role', role);
-    this.setAttribute('aria-live', role === 'alert' ? 'assertive' : 'polite');
+    this.setAttribute('aria-live', role === 'alert' || role === 'alertdialog' ? 'assertive' : 'polite');
+    if (isActionRequired) this.setAttribute('aria-modal', 'false'); // not page-blocking; focus-trap only
 
     /* Render dismiss button for sticky items (spec §2.2 — default true
-       for sticky, false for auto-fade). */
+       for sticky, false for auto-fade). Action-required items still
+       allow Escape to dismiss for safety; the action button is not the
+       only escape. */
     const wantsClose = this.dismissible || isSticky;
     let close = this.querySelector(':scope > [data-feed-close]');
     if (wantsClose && !close) {
@@ -120,6 +142,27 @@ class AdiaFeedItem extends AdiaElement {
       close.remove();
     }
 
+    /* Phase 2 — render the action button when [action] is set. Sits
+       between the body and the close button. */
+    let actionBtn = this.querySelector(':scope > [data-feed-action]');
+    if (this.action) {
+      if (!actionBtn) {
+        actionBtn = document.createElement('button-ui');
+        actionBtn.setAttribute('data-feed-action', '');
+        actionBtn.setAttribute('variant', 'ghost');
+        actionBtn.setAttribute('size', 'sm');
+        if (close && close.parentElement === this) this.insertBefore(actionBtn, close);
+        else                                       this.appendChild(actionBtn);
+      }
+      actionBtn.setAttribute('text', this.action);
+    } else if (actionBtn) {
+      actionBtn.remove();
+    }
+
+    /* Focus-trap activation for action-required. */
+    if (isActionRequired) this.#installFocusTrap();
+    else                  this.#uninstallFocusTrap();
+
     if (!this.hasAttribute('data-open') && !this.#removing) {
       this.#openRaf = requestAnimationFrame(() => {
         this.#openRaf = null;
@@ -156,14 +199,55 @@ class AdiaFeedItem extends AdiaElement {
     for (const k of Object.keys(patch)) {
       if (k in AdiaFeedItem.properties) this[k] = patch[k];
     }
+    // Phase 2: handle is set via the FeedHandle's update(); not a
+    // reflected attribute, so it lives outside the property loop.
+    if (typeof patch.onAction === 'function') this.#onAction = patch.onAction;
     this.#scheduleAutoDismiss();
   }
 
+  // Phase 2 focus-trap. Installs on action-required items; saves the
+  // previously-focused element so we can return focus on dismiss; cycles
+  // Tab/Shift-Tab between focusable descendants; Escape dismisses.
+  #installFocusTrap() {
+    if (this.#onTrapKeydown) return; // already installed
+    this.#focusTrapPrev = document.activeElement;
+    const focusables = () => [...this.querySelectorAll('button, button-ui, [tabindex]:not([tabindex="-1"]), input, [data-feed-action], [data-feed-close]')]
+      .filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
+    this.#onTrapKeydown = (e) => {
+      if (e.key === 'Escape') { e.stopPropagation(); this.dismiss(); return; }
+      if (e.key !== 'Tab') return;
+      const els = focusables();
+      if (!els.length) return;
+      const first = els[0];
+      const last  = els[els.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+    };
+    this.addEventListener('keydown', this.#onTrapKeydown, true);
+    // Move focus into the item — prefer the action button.
+    queueMicrotask(() => {
+      const els = focusables();
+      const action = this.querySelector('[data-feed-action]');
+      (action || els[0])?.focus?.();
+    });
+  }
+
+  #uninstallFocusTrap() {
+    if (!this.#onTrapKeydown) return;
+    this.removeEventListener('keydown', this.#onTrapKeydown, true);
+    this.#onTrapKeydown = null;
+    // Restore focus to whatever had it before the trap engaged.
+    try { this.#focusTrapPrev?.focus?.(); } catch { /* element may have been removed */ }
+    this.#focusTrapPrev = null;
+  }
+
   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; }
+    this.#uninstallFocusTrap();
   }
 }
 
@@ -205,6 +289,12 @@ class AdiaFeed {
    * @param {string} [opts.position='bottom-right']
    * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
    * @param {string} [opts.id]
+   * @param {string} [opts.action]  Phase 2 — action button label. When set,
+   *                                duration is forced to null (sticky); the
+   *                                item gets role=alertdialog + focus trap.
+   * @param {function} [opts.onAction]  Phase 2 — callback invoked when the
+   *                                action button is pressed. Item dismisses
+   *                                after the callback returns.
    */
   static post(opts = {}) {
     const {
@@ -216,18 +306,30 @@ class AdiaFeed {
       position = 'bottom-right',
       dismissible,
       id,
+      action = '',
+      onAction,
     } = opts;
     const v = variant === 'error' ? 'danger' : variant;  // documented alias
     const container = AdiaFeed.get(position);
+    // Phase 2 max-queue: items above [max] queue with [data-queued] and
+    // become visible as visible items dismiss.
+    const max = parseInt(container.getAttribute('max') || '5', 10);
+    const visibleCount = [...container.children].filter((c) =>
+      c.tagName === 'FEED-ITEM-UI' && !c.hasAttribute('data-queued')
+    ).length;
     const item = document.createElement('feed-item-ui');
     if (id) item.setAttribute('data-id', id);
     item.text = text;
     item.heading = heading;
     item.icon = icon;
     item.variant = v;
-    item.duration = duration;
+    // Action-required forces sticky.
+    item.duration = action ? 0 : duration;
     if (dismissible != null) item.dismissible = !!dismissible;
+    if (action) item.action = action;
+    if (visibleCount >= max) item.setAttribute('data-queued', '');
     container.appendChild(item);
+    if (typeof onAction === 'function') item.update({ onAction });
     return {
       id: id ?? null,
       dismiss: () => item.dismiss(),
@@ -253,9 +355,16 @@ class AdiaFeed {
     AdiaFeed.#containers.clear();
   }
 
-  /** Internal: drop a lane when its last item exits. */
+  /** Internal: drop a lane when its last item exits. Also rotates the
+   *  Phase 2 max-queue: when a visible item leaves, promote the oldest
+   *  queued sibling so the visible-count returns to [max]. */
   static releaseContainerIfEmpty(container) {
-    if (!container || container.children.length > 0) return;
+    if (!container) return;
+    // Promote the oldest queued sibling (if any) before deciding whether
+    // to release. The queue is FIFO; queued items live at the tail.
+    const queued = container.querySelector('feed-item-ui[data-queued]');
+    if (queued) queued.removeAttribute('data-queued');
+    if (container.children.length > 0) return;
     try { container.hidePopover?.(); } catch { /* noop */ }
     container.remove();
     for (const [pos, el] of AdiaFeed.#containers) {

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>` / `AdiaFeed.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 `AdiaToast.show()` paths
+ * route through `AdiaFeed`. The element exists for back-compat:
+ * authoring `<toast-ui text="…">` still produces a feed item.
  *
- *     // Imperative API
+ *     // Imperative API (delegates to AdiaFeed.post)
  *     AdiaToast.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';
+import { AdiaFeed } from '../feed/feed.js';
 
 class AdiaToast extends AdiaElement {
-  #timer = null;
-  #removing = false;
-  #closeTimer = null;
-  #openRaf = null;
-  #routed = false;
-
   static properties = {
     text:     { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'info', reflect: true },
@@ -41,178 +34,55 @@ 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 AdiaFeed 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;
+    AdiaFeed.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 AdiaFeed.post(). Kept for back-compat
+   * with consumer code shaped like `customElements.get('toast-ui').show(...)`
+   * or `AdiaToast.show(...)`. New code should call AdiaFeed.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 AdiaFeed.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 AdiaToast.show(), which
+   delegates to AdiaFeed.post(). */
 if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
   window.__adiaToastListenerInstalled = true;
   window.addEventListener('toast', (e) => {

package/index.css

@@ -7,8 +7,9 @@
  * + typography — via the colors tree) → component styles → global
  * resets.
  *
- * Pattern CSS (adia-chat, adia-editor, app-shell, etc.) is NOT
- * bundled here — each page links its own patterns explicitly.
+ * Composite-element CSS (adia-chat, adia-editor, app-shell, etc.)
+ * lives in the sibling `@adia-ai/web-modules` package as of 0.0.29
+ * (see ADR-0012). Each page links its own cluster CSS explicitly.
  * Opinionated theme overrides live in `./styles/themes.css`; link
  * them separately when you want the 8 named themes.
  *

package/index.js

@@ -2,17 +2,25 @@
  * @adia-ai/web-components — main entry.
  *
  *   import '@adia-ai/web-components';
- *   import { AdiaButton, AdiaAppShell } from '@adia-ai/web-components';
+ *   import { AdiaButton } from '@adia-ai/web-components';
  *
- * Loading this file registers every component + pattern custom
- * element (side effect of each module's `customElements.define(...)`
- * call). Pair with `@adia-ai/web-components/css` (the all-in-one
- * stylesheet) or link tokens/components/resets individually.
+ * Loading this file registers every primitive (side effect of each
+ * module's `customElements.define(...)` call). Pair with
+ * `@adia-ai/web-components/css` (the all-in-one stylesheet) or link
+ * tokens/components/resets individually.
  *
  * If you only want a subset, use the subpath imports:
  *   import '@adia-ai/web-components/components/button';
- *   import { AdiaAppShell } from '@adia-ai/web-components/patterns';
+ *
+ * Composite elements (app-shell, app-nav, adia-chat, adia-editor,
+ * gen-ui, a2ui-root) shipped here as `patterns/` until 0.0.28 — they
+ * now live in `@adia-ai/web-modules` (see ADR-0012).
+ *
+ *   import '@adia-ai/web-modules';            // every cluster
+ *   import '@adia-ai/web-modules/shell';      // app-shell, app-nav*, section-nav*
+ *   import '@adia-ai/web-modules/chat';       // adia-chat
+ *   import '@adia-ai/web-modules/editor';     // adia-editor
+ *   import '@adia-ai/web-modules/runtime';    // gen-ui, a2ui-root
  */
 
 export * from './components/index.js';
-export * from './patterns/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
@@ -11,8 +11,6 @@
     "./core/*":       "./core/*.js",
     "./components":   "./components/index.js",
     "./components/*": "./components/*/*.js",
-    "./patterns":     "./patterns/index.js",
-    "./patterns/*":   "./patterns/*/*.js",
     "./styles/*":     "./styles/*",
     "./traits":       "./traits/index.js",
     "./traits/*":     "./traits/*.js",
@@ -23,7 +21,6 @@
     "components/",
     "styles/",
     "traits/",
-    "patterns/",
     "a2ui/",
     "index.js",
     "index.css"
@@ -32,7 +29,6 @@
     "*.css",
     "./index.js",
     "./components/**/*.js",
-    "./patterns/**/*.js",
     "./core/provider.js"
   ],
   "dependencies": {