@adia-ai/web-components 0.0.1 → 0.0.3

package/a2ui/index.js

@@ -1,19 +1,25 @@
-// Tier 1: Render
-export { registry, resolveTag, registerType } from './registry.js';
-export { A2UIRenderer } from './renderer.js';
-export { sseStream, wsStream, mockStream, mcpStream, jsonlStream } from './stream.js';
-export { AdiaA2UIRoot } from './root.js';
+/**
+ * DEPRECATED — the `@adia-ai/web-components/a2ui` subpath.
+ *
+ * The A2UI runtime was extracted into its own package `@adia-ai/a2ui-utils`
+ * in 0.0.3. This file is a temporary re-export shim for one release so
+ * existing consumers don't break on upgrade. It will be removed in 0.1.0.
+ *
+ * Migrate:
+ *   - import { A2UIRenderer } from '@adia-ai/web-components/a2ui';
+ *   + import { A2UIRenderer } from '@adia-ai/a2ui-utils';
+ *
+ * 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';
+ */
 
-// Tier 2: Wire
-export { SurfaceManifest } from './surface-manifest.js';
-export { ManifestRuntime } from './manifest-runtime.js';
-export { ContextStore } from './context-store.js';
+if (typeof console !== 'undefined' && !globalThis.__a2ui_subpath_warned) {
+  globalThis.__a2ui_subpath_warned = true;
+  console.warn(
+    '[@adia-ai/web-components] The `/a2ui` subpath export is deprecated and will be removed in 0.1.0. ' +
+    'Import from `@adia-ai/a2ui-utils` instead.'
+  );
+}
 
-// Tier 3: Gen-UI
-export { A2UIValidator } from './validator.js';
-export { A2UIGenerator } from './generator.js';
-export { savePattern, importPattern, buildPatternJSON } from './pattern-export.js';
-export * from './retrieval/index.js';
-
-// Learning
-export { feedbackStore } from './retrieval/feedback-store.js';
+export * from '@adia-ai/a2ui-utils';

package/components/accordion/accordion.js

@@ -12,7 +12,7 @@
  *   toggle — { detail: { open } }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Accordion Container ────────────────────────────────────────
 

package/components/action-list/action-list.js

@@ -15,7 +15,7 @@
  * or activated via keyboard (Enter / Space). Keyboard nav: ArrowUp/Down, Home/End.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaActionList extends AdiaElement {
   static properties = {};

package/components/agent-artifact/agent-artifact.js

@@ -26,7 +26,7 @@
  *   artifact-toggle — detail: { collapsed }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 const TONE_TO_BADGE_VARIANT = {
   neutral: 'default',

package/components/agent-feedback-bar/agent-feedback-bar.js

@@ -30,7 +30,7 @@
  *   .reset()                      clear status, re-enable buttons
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAgentFeedbackBar extends AdiaElement {
   static properties = {

package/components/agent-questions/agent-questions.js

@@ -26,7 +26,7 @@
  *   questions-answer — detail: { selected: string[], option: chosen | null }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAgentQuestions extends AdiaElement {
   static properties = {

package/components/agent-reasoning/agent-reasoning.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "autocollapse": {
-      "description": "Auto-collapse after finish().",
-      "type": "boolean",
-      "default": true
-    },
     "collapsed": {
       "description": "Start collapsed.",
       "type": "boolean",
@@ -31,10 +26,21 @@
       "type": "string",
       "default": ""
     },
-    "mode": {
-      "description": "compact | expanded",
+    "noAutocollapse": {
+      "description": "Disable auto-collapse after finish().",
+      "type": "boolean",
+      "default": false
+    },
+    "status": {
+      "description": "Drives the status icon — idle, active (spinner), done (check), error (warning).",
       "type": "string",
-      "default": "compact"
+      "enum": [
+        "idle",
+        "active",
+        "done",
+        "error"
+      ],
+      "default": "active"
     }
   },
   "required": [

package/components/agent-reasoning/agent-reasoning.css

@@ -149,7 +149,7 @@
   /* ═══════ Plan — card in content+aside, marker empty ═══════ */
 
   [data-reasoning-plan] {
-    grid-column: content / -1 !important;
+    grid-column: content / -1;
     display: flex;
     flex-direction: column;
     gap: var(--a-space-1);

package/components/agent-reasoning/agent-reasoning.js

@@ -33,9 +33,9 @@
  *   r.finish('2 iterations · 94/100 · 7s');
  *
  * Attributes:
- *   collapsed     — start collapsed
- *   autocollapse  — collapse 1.2s after finish (default: true)
- *   heading       — fallback summary label while active
+ *   collapsed         — start collapsed
+ *   no-autocollapse   — disable auto-collapse 1.2s after finish (default: false — auto-collapse on)
+ *   heading           — fallback summary label while active
  *   status        — 'idle' | 'active' | 'done' | 'error' (default: 'active')
  *                   Drives the status icon: spinner / check-circle / warning-circle
  *
@@ -45,7 +45,7 @@
  *   reasoning-finish       — .finish() was called (detail: { summary, status })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // Status lifecycle for the reasoning surface as a whole.
 //   active  — still thinking (default; renders the spinner)
@@ -56,10 +56,10 @@ const REASONING_STATUSES = new Set(['idle', 'active', 'done', 'error']);
 
 class AdiaAgentReasoning extends AdiaElement {
   static properties = {
-    collapsed:    { type: Boolean, default: false,    reflect: true },
-    autocollapse: { type: Boolean, default: true,     reflect: true },
-    heading:      { type: String,  default: '',       reflect: true },
-    status:       { type: String,  default: 'active', reflect: true },
+    collapsed:       { type: Boolean, default: false,    reflect: true },
+    noAutocollapse:  { type: Boolean, default: false,    reflect: true, attribute: 'no-autocollapse' },
+    heading:         { type: String,  default: '',       reflect: true },
+    status:          { type: String,  default: 'active', reflect: true },
   };
 
   static template = () => null;
@@ -202,7 +202,7 @@ class AdiaAgentReasoning extends AdiaElement {
     }));
 
     if (this.#finishTimer != null) clearTimeout(this.#finishTimer);
-    if (this.autocollapse && !isError) {
+    if (!this.noAutocollapse && !isError) {
       this.#finishTimer = setTimeout(() => {
         this.#finishTimer = null;
         this.collapsed = true;

package/components/agent-reasoning/agent-reasoning.yaml

@@ -8,10 +8,11 @@ category: agent
 version: 1
 description: Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.
 props:
-  autocollapse:
-    description: Auto-collapse after finish().
+  noAutocollapse:
+    description: Disable auto-collapse after finish().
     type: boolean
-    default: true
+    default: false
+    attribute: no-autocollapse
   collapsed:
     description: Start collapsed.
     type: boolean
@@ -20,10 +21,12 @@ props:
     description: Fallback summary label.
     type: string
     default: ""
-  mode:
-    description: compact | expanded
+  status:
+    description: Drives the status icon — idle, active (spinner), done (check), error (warning).
     type: string
-    default: compact
+    default: active
+    reflect: true
+    enum: [idle, active, done, error]
 events:
   reasoning-finish:
     description: "Fired on reasoning-finish."

package/components/agent-suggestions/agent-suggestions.js

@@ -24,7 +24,7 @@
  *   suggestion-select — detail: { label, prompt, index }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAgentSuggestions extends AdiaElement {
   static properties = {

package/components/agent-trace/agent-trace.js

@@ -34,7 +34,7 @@
  *   trace-toggle — summary opened/closed
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAgentTrace extends AdiaElement {
   static properties = {

package/components/alert/alert.js

@@ -11,7 +11,7 @@
  *   close — fired when the user dismisses the alert
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAlert extends AdiaElement {
   static properties = {

package/components/avatar/avatar.a2ui.json

@@ -21,11 +21,6 @@
       "type": "string",
       "default": ""
     },
-    "initials": {
-      "description": "Explicit initials override. When set, takes precedence over `name`.",
-      "type": "string",
-      "default": ""
-    },
     "name": {
       "description": "User name for initials (first letter of each word, max 2).",
       "type": "string",
@@ -65,11 +60,6 @@
       "description": "Display name (for initials)",
       "type": "string",
       "default": ""
-    },
-    "variant": {
-      "description": "Color/emphasis variant for the placeholder background + initials foreground.",
-      "type": "string",
-      "default": "default"
     }
   },
   "required": [

package/components/avatar/avatar.css

@@ -120,7 +120,7 @@
   /* Hover: pop single avatar */
   :scope > avatar-ui:hover {
     transform: translateY(-2px) scale(1.05);
-    z-index: 99 !important;
+    z-index: 99;
   }
 
   /* Group hover: spread apart */

package/components/avatar/avatar.js

@@ -13,7 +13,7 @@
  * Overlapping avatar stack with +N overflow counter.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Avatar ──────────────────────────────────────────────────
 

package/components/avatar/avatar.yaml

@@ -12,10 +12,6 @@ props:
     description: User name for initials (first letter of each word, max 2).
     type: string
     default: ""
-  initials:
-    description: Explicit initials override. When set, takes precedence over `name`.
-    type: string
-    default: ""
   icon:
     description: Phosphor icon name shown instead of initials when `src`/`name` are empty.
     type: string
@@ -27,10 +23,6 @@ props:
     enum:
       - circle
       - square
-  variant:
-    description: Color/emphasis variant for the placeholder background + initials foreground.
-    type: string
-    default: default
   size:
     description: >-
       Avatar size. Canonical scale (xs/sm/md/lg/xl); long-form aliases

package/components/badge/badge.a2ui.json

@@ -34,14 +34,14 @@
       "default": "md"
     },
     "status": {
-      "description": "Semantic status shorthand. Auto-maps to variant and sets text.",
+      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → accent \"Beta\". Use `variant` + `text` directly for custom chips.",
       "type": "string",
       "enum": [
-        "New",
-        "Updated",
-        "Deprecated",
-        "Removed",
-        "Beta"
+        "new",
+        "updated",
+        "deprecated",
+        "removed",
+        "beta"
       ],
       "default": ""
     },

package/components/badge/badge.js

@@ -2,6 +2,7 @@
  * <badge-ui text="New" variant="accent"></badge-ui>
  * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
  * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ * <badge-ui status="beta"></badge-ui>                                ← status shorthand
  *
  * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
  *
@@ -10,9 +11,18 @@
  * Icon: optional leading icon (any registered icon name; "dot" for legend
  *       markers). Inherits the variant's foreground color so legend chips
  *       read as a single visual unit instead of icon + label collage.
+ * Status: semantic shorthand that auto-maps variant + text.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
+
+const STATUS_MAP = {
+  new:        { variant: 'success', text: 'New' },
+  updated:    { variant: 'info',    text: 'Updated' },
+  deprecated: { variant: 'warning', text: 'Deprecated' },
+  removed:    { variant: 'danger',  text: 'Removed' },
+  beta:       { variant: 'accent',  text: 'Beta' },
+};
 
 class AdiaBadge extends AdiaElement {
   static properties = {
@@ -20,6 +30,7 @@ class AdiaBadge extends AdiaElement {
     variant: { type: String,  default: 'default', reflect: true },
     size:    { type: String,  default: 'md', reflect: true },
     icon:    { type: String,  default: '',        reflect: true },
+    status:  { type: String,  default: '',        reflect: true },
   };
 
   static template = () => null;
@@ -29,6 +40,16 @@ class AdiaBadge extends AdiaElement {
   }
 
   render() {
+    // Status shorthand wins over explicit variant/text while it's set —
+    // mixing is unsupported. Converges in one extra render pass.
+    if (this.status) {
+      const entry = STATUS_MAP[this.status];
+      if (entry) {
+        if (this.variant !== entry.variant) this.variant = entry.variant;
+        if (this.text !== entry.text) this.text = entry.text;
+      }
+    }
+
     if (this.text) this.setAttribute('aria-label', this.text);
 
     // Stamp / update the leading icon. Pattern mirrors button-ui so the same

package/components/badge/badge.yaml

@@ -25,14 +25,17 @@ props:
       - xl
   status:
     description: Semantic status shorthand. Auto-maps to variant and sets text.
+      `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning
+      "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta".
+      Use `variant` + `text` directly for custom chips.
     type: string
     default: ""
     enum:
-      - New
-      - Updated
-      - Deprecated
-      - Removed
-      - Beta
+      - new
+      - updated
+      - deprecated
+      - removed
+      - beta
   text:
     description: Badge text content. Falls back to existing textContent.
     type: string

package/components/block/block.js

@@ -8,7 +8,7 @@
  *   margin  — none | xs | sm | md | lg | xl (default 'none')
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaBlock extends AdiaElement {
   static properties = {

package/components/breadcrumb/breadcrumb.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaBreadcrumb extends AdiaElement {
   static properties = {

package/components/button/button.a2ui.json

@@ -18,11 +18,6 @@
       "type": "string",
       "default": "button"
     },
-    "active": {
-      "description": "Indicates an active/pressed toggle state (for group-buttons and segmented controls).",
-      "type": "boolean",
-      "default": false
-    },
     "component": {
       "const": "Button"
     },
@@ -36,11 +31,6 @@
       "type": "string",
       "default": ""
     },
-    "iconRight": {
-      "description": "Trailing Phosphor icon name (rendered after text).",
-      "type": "string",
-      "default": ""
-    },
     "size": {
       "description": "Sizing scale (xs/sm/md/lg/xl).",
       "type": "string",
@@ -70,7 +60,6 @@
         "default",
         "solid",
         "outline",
-        "outlined",
         "ghost",
         "danger",
         "primary",

package/components/button/button.css

@@ -13,7 +13,7 @@
     --button-fg-hover:         var(--a-ui-text-hover);
     --button-border-hover:     transparent;
     --button-bg-primary:       var(--a-primary);
-    --button-fg-primary:       white;
+    --button-fg-primary:       var(--a-chrome-light);
     --button-bg-outline:       transparent;
     --button-fg-outline:       var(--a-fg);
     --button-border-outline:   var(--a-ui-border);

package/components/button/button.js

@@ -1,5 +1,5 @@
-import { AdiaElement, signal, html } from '@core/element.js';
-import { getIcon } from '@core/icons.js';
+import { AdiaElement, signal, html } from '../../core/element.js';
+import { getIcon } from '../../core/icons.js';
 
 class AdiaButton extends AdiaElement {
   static properties = {
@@ -37,7 +37,7 @@ class AdiaButton extends AdiaElement {
   #onClick = (e) => {
     if (this.disabled) { e.stopPropagation(); return; }
     if (this.type === 'submit') {
-      const form = this.closest('form, form-container-n');
+      const form = this.closest('form');
       if (form?.requestSubmit) form.requestSubmit();
     }
     this.dispatchEvent(new Event('press', { bubbles: true }));

package/components/button/button.yaml

@@ -12,11 +12,6 @@ props:
     description: HTML button type (button, submit, reset)
     type: string
     default: button
-  active:
-    description: Indicates an active/pressed toggle state (for group-buttons and segmented controls).
-    type: boolean
-    default: false
-    reflect: true
   stretch:
     description: "Makes the button stretch to fill the parent's width"
     type: boolean
@@ -31,11 +26,6 @@ props:
     description: Leading Phosphor icon name (rendered before text).
     type: string
     default: ""
-  iconRight:
-    description: Trailing Phosphor icon name (rendered after text).
-    type: string
-    default: ""
-    attribute: icon-right
   size:
     description: "Sizing scale (xs/sm/md/lg/xl)."
     type: string
@@ -58,7 +48,6 @@ props:
       - default
       - solid
       - outline
-      - outlined
       - ghost
       - danger
       - primary

package/components/calendar-picker/calendar-picker.js

@@ -15,8 +15,8 @@
  * Keyboard: Arrow keys navigate days, Enter selects, Escape closes.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 const DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -58,6 +58,18 @@ class AdiaCalendarPicker extends AdiaFormElement {
   #viewYear = new Date().getFullYear();
   #viewMonth = new Date().getMonth();
   #focusedDay = null;
+  #popoverClickBound = false;
+
+  #onPopoverClick = (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const prev = target.closest('[data-cal-prev]');
+    if (prev) { e.stopPropagation(); this.#navigate(-1); return; }
+    const next = target.closest('[data-cal-next]');
+    if (next) { e.stopPropagation(); this.#navigate(1); return; }
+    const day = target.closest('[data-cal-day][data-date]:not([disabled])');
+    if (day) { e.stopPropagation(); this.#selectDate(day.dataset.date); }
+  };
 
   connected() {
     super.connected();
@@ -88,6 +100,8 @@ class AdiaCalendarPicker extends AdiaFormElement {
       this.#popover.setAttribute('slot', 'popover');
       this.#popover.setAttribute('popover', 'manual');
       this.appendChild(this.#popover);
+      this.#popover.addEventListener('click', this.#onPopoverClick);
+      this.#popoverClickBound = true;
     } else {
       const display = this.querySelector('[slot="display"]');
       if (display) display.textContent = this.#displayText();
@@ -95,6 +109,10 @@ class AdiaCalendarPicker extends AdiaFormElement {
 
     if (!this.#popover) this.#popover = this.querySelector('[slot="popover"]');
     if (!this.#trigger) this.#trigger = this.querySelector('[slot="trigger"]');
+    if (this.#popover && !this.#popoverClickBound) {
+      this.#popover.addEventListener('click', this.#onPopoverClick);
+      this.#popoverClickBound = true;
+    }
 
     // Toggle popover
     if (this.open) {
@@ -195,23 +213,7 @@ class AdiaCalendarPicker extends AdiaFormElement {
     h += '</div>';
 
     this.#popover.innerHTML = h;
-
-    // Wire events
-    this.#popover.querySelector('[data-cal-prev]')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.#navigate(-1);
-    });
-    this.#popover.querySelector('[data-cal-next]')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.#navigate(1);
-    });
-
-    for (const btn of this.#popover.querySelectorAll('[data-cal-day][data-date]:not([disabled])')) {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.#selectDate(btn.dataset.date);
-      });
-    }
+    // Events are delegated on #popover (see #onPopoverClick) — no per-element wiring.
   }
 
   #navigate(delta) {
@@ -312,6 +314,10 @@ class AdiaCalendarPicker extends AdiaFormElement {
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
     document.removeEventListener('pointerdown', this.#onOutside);
+    if (this.#popover && this.#popoverClickBound) {
+      this.#popover.removeEventListener('click', this.#onPopoverClick);
+    }
+    this.#popoverClickBound = false;
     this.#anchorCleanup?.();
     this.#anchorCleanup = null;
     this.#popover?.hidePopover?.();

package/components/canvas/canvas.js

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import '../../a2ui/root.js';
+import { AdiaElement } from '../../core/element.js';
+import '../../patterns/a2ui-root/a2ui-root.js';
 
 /**
  * <canvas-ui> — A2UI rendering surface.
@@ -89,7 +89,7 @@ export class AdiaCanvas extends AdiaElement {
     this.#rootEl = document.createElement('a2ui-root');
 
     if (this.theme) {
-      const themeEl = document.createElement('theme-n');
+      const themeEl = document.createElement('theme-ui');
       themeEl.setAttribute('preset', this.theme);
       themeEl.appendChild(this.#rootEl);
       this.#rootContainer.appendChild(themeEl);