@adia-ai/web-components 0.4.7 → 0.4.8

package/components/tree/tree.a2ui.json

@@ -24,6 +24,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "data",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "tree-select": {
         "description": "Fired when an item is selected. detail: { item, text, value }"

package/components/tree/tree.d.ts

@@ -5,11 +5,21 @@
  *
  * 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.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export type TreeSelectEvent = CustomEvent<unknown>;
+
 export class UITree extends UIElement {
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITree, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'tree-select', listener: (ev: TreeSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/tree/tree.yaml

@@ -8,6 +8,10 @@ category: data
 version: 1
 description: Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages
   selection across nested tree-item-ns.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props: {}
 events:
   tree-select:

package/components/upload/upload.a2ui.json

@@ -64,6 +64,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when files are selected via click or drag-and-drop"

package/core/icons-phosphor.js

@@ -0,0 +1,93 @@
+/**
+ * Phosphor icon glob — side-effect module that wires the full
+ * @phosphor-icons/core asset tree (~9000 SVGs × 6 weights) into the
+ * registry exposed by `./icons.js`.
+ *
+ * ## When to import this
+ *
+ *   import '@adia-ai/web-components/core/icons-phosphor';
+ *
+ * Use this only when you want any Phosphor name to resolve without
+ * pre-registering it. The main barrel (`import '@adia-ai/web-components'`)
+ * and the core barrel (`import '@adia-ai/web-components/core'`) already
+ * side-effect-import this file for zero-config users.
+ *
+ * ## What this costs
+ *
+ * `import.meta.glob` with the default lazy mode tells Vite to emit one
+ * code-split chunk per matched file. The full Phosphor set is ~9000 SVGs
+ * (~1500 names × 6 weights), so `vite build` emits ~9000 chunks even if
+ * your app only renders 2 icons. The chunks are HTTP-cacheable, but:
+ *
+ *   - `vite build` graph cost scales with the Phosphor set, not your usage
+ *   - `.vite/deps` cache grows >100 MB during dev
+ *   - Static deploys without incremental upload push tens of thousands of
+ *     tiny files on every deploy
+ *   - Rollup warns "(!) Some chunks are larger than 500 KB"
+ *
+ * For production bundles with size SLOs, skip this side-effect import and
+ * register only the icons you use:
+ *
+ *   import { installIconLoaders } from '@adia-ai/web-components/core/icons';
+ *   installIconLoaders({
+ *     regular: import.meta.glob(
+ *       '/node_modules/@phosphor-icons/core/assets/regular/{caret-right,moon,sun,x}.svg',
+ *       { query: '?raw', import: 'default', eager: true }
+ *     ),
+ *   });
+ *
+ * Brace-list globs are statically analyzed; only the named files are
+ * emitted as chunks (or inlined when `eager: true`).
+ *
+ * ## Vite glob detection
+ *
+ * `import.meta.glob` is a build-time macro — Vite's AST transform replaces
+ * each call with a literal `{ path: loader }` object before the module
+ * reaches the browser. At runtime `import.meta.glob` is undefined, so a
+ * direct call throws. We wrap the assignment in try/catch to handle both:
+ *
+ *   - Vite dev/build → rewritten to literals → try block succeeds
+ *   - Static  serving → actual runtime call throws → catch falls through
+ *     to the manifest fetch below
+ */
+
+import { installIconLoaders } from './icons.js';
+
+let weightModules;
+let hasViteGlob = false;
+try {
+  weightModules = {
+    regular: import.meta.glob('/node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+    thin:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+    light:   import.meta.glob('/node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+    bold:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+    fill:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+    duotone: import.meta.glob('/node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+  };
+  hasViteGlob = true;
+} catch {
+  /* non-Vite static serving — manifest fetch below handles it */
+}
+
+if (hasViteGlob) {
+  installIconLoaders(weightModules);
+} else {
+  // Non-Vite static serving: fetch the build-time manifest in the
+  // background. No top-level await — module finishes loading immediately;
+  // icons appear once the one-shot manifest fetch resolves.
+  // The specifier is hidden behind a variable so Vite's static analysis
+  // never tries to pre-resolve it in dev (where the file doesn't exist).
+  const manifestSpec = './icons-manifest.js';
+  import(/* @vite-ignore */ manifestSpec).then(({ default: manifest }) => {
+    const modules = Object.fromEntries(Object.entries(manifest).map(([weight, names]) => {
+      const prefix = `/node_modules/@phosphor-icons/core/assets/${weight}/`;
+      const entries = names.map(name => {
+        const path = prefix + name;
+        const loader = () => fetch(path).then(r => r.ok ? r.text() : Promise.reject(new Error(`icon fetch failed: ${path}`)));
+        return [path, loader];
+      });
+      return [weight, Object.fromEntries(entries)];
+    }));
+    installIconLoaders(modules);
+  }).catch(() => { /* manifest missing — registry stays empty; consumers can registerIcon() themselves */ });
+}

package/core/icons.js

@@ -1,11 +1,56 @@
 /**
- * Icon Registry — loads SVGs from @phosphor-icons/core.
- * All icons are loaded on-demand; each weight variant is cached separately.
+ * Icon Registry — pluggable icon lookup map.
  *
  * Usage:
  *   <icon-ui name="paper-plane-right"></icon-ui>
  *   <icon-ui name="star" weight="fill"></icon-ui>
  *   <icon-ui name="heart" weight="bold"></icon-ui>
+ *
+ * ## Why this module is small
+ *
+ * This file holds the registry surface only. The Phosphor auto-glob
+ * (`@phosphor-icons/core/assets/{weight}/*.svg` × 6 weights, ~9000 SVGs)
+ * lives in the sibling side-effect module `./icons-phosphor.js`. Splitting
+ * keeps `core/icons.js` cheap to import — primitives that consume the
+ * registry API (button, input, icon) pull in the API surface without
+ * triggering Vite's per-icon code-split chunks.
+ *
+ * ## Loading icons
+ *
+ * Three paths, pick whichever matches your bundle-size budget:
+ *
+ *   1. **Zero-config (recommended for prototypes + small apps).** Import
+ *      the main barrel — it side-effect-imports `icons-phosphor.js` for
+ *      you and every Phosphor name resolves on demand:
+ *
+ *          import '@adia-ai/web-components';
+ *
+ *   2. **Opt-in full Phosphor with piecemeal component imports.** If you
+ *      import components one at a time but want every Phosphor name to
+ *      work, side-effect-import the phosphor module yourself:
+ *
+ *          import '@adia-ai/web-components/components/button';
+ *          import '@adia-ai/web-components/core/icons-phosphor';
+ *
+ *   3. **Scoped registration (recommended for production bundle-size
+ *      SLOs).** Skip `icons-phosphor.js` entirely and register only the
+ *      icons you actually use. `import.meta.glob` with a brace-list emits
+ *      one chunk per matched file — for a 4-icon app, that's ~4 chunks
+ *      instead of the ~9000 the full set would produce:
+ *
+ *          import { installIconLoaders } from '@adia-ai/web-components/core/icons';
+ *          installIconLoaders({
+ *            regular: import.meta.glob(
+ *              '/node_modules/@phosphor-icons/core/assets/regular/{caret-right,caret-up-down,moon,sun}.svg',
+ *              { query: '?raw', import: 'default', eager: true }
+ *            ),
+ *          });
+ *
+ *      Or register single SVGs directly:
+ *
+ *          import { registerIcon } from '@adia-ai/web-components/core/icons';
+ *          import caretRightSvg from './assets/caret-right.svg?raw';
+ *          registerIcon('caret-right', caretRightSvg);
  */
 
 export const ICON_WEIGHTS = ['regular', 'thin', 'light', 'bold', 'fill', 'duotone'];
@@ -49,94 +94,50 @@ export function listIcons() {
   return [...registry.keys()];
 }
 
-// ── Async loader ──
-
-// Vite dev: `import.meta.glob(...)` is a build-time macro — Vite's AST
-// transform replaces each call with a literal `{ path: loader }` object
-// before the module reaches the browser. `import.meta.glob` itself is NOT
-// exposed as a runtime property, so `typeof import.meta.glob` is always
-// `'undefined'` at run time — don't try to feature-detect with it.
+// ── Loader-map plumbing ──
 //
-// Production static serving (no Vite): the glob calls remain in the
-// source and `import.meta.glob` is undefined, so calling it throws a
-// TypeError. We wrap the assignment in try/catch to handle both worlds:
-//   - Vite dev → Vite rewrote the calls to literals → try block succeeds.
-//   - Static  → actual runtime call throws → catch block falls back to
-//                 EMPTY_WEIGHTS; the manifest branch below fills it in.
-const EMPTY_WEIGHTS = { regular: {}, thin: {}, light: {}, bold: {}, fill: {}, duotone: {} };
+// `weightModules` maps weight → ({ path → loader }). A loader is either an
+// SVG string (eager) or a `() => Promise<string>` (lazy). The default empty
+// map means lookups all miss; callers either register icons directly via
+// `registerIcon`/`registerIcons` or install a loader map via
+// `installIconLoaders` (called by `icons-phosphor.js` in the zero-config path).
 
-// `let` so the background manifest load (non-Vite branch) can swap in a
-// real map once `icons-manifest.js` resolves. `resolveLoader` reads
-// through this each call, so new icons become visible after manifest load.
-let weightModules;
-let hasViteGlob = false;
-try {
-  weightModules = {
-    regular: import.meta.glob('/node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
-    thin:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
-    light:   import.meta.glob('/node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
-    bold:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
-    fill:    import.meta.glob('/node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
-    duotone: import.meta.glob('/node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
-  };
-  hasViteGlob = true;
-} catch {
-  weightModules = EMPTY_WEIGHTS;
-}
-
-/* Flag guarding the missing-icon warn below. In Vite dev, `weightModules`
-   is populated synchronously by the glob rewrite, so the registry is ready
-   before any icon-ui element connects. In non-Vite static deploys, the
-   manifest load is async and arrives some time after first paint — warning
-   during that window would false-positive for every icon on the page.
-   Flipped to `true` in the manifest `.then()` handler below. */
-let registryReady = hasViteGlob;
+const EMPTY_WEIGHTS = { regular: {}, thin: {}, light: {}, bold: {}, fill: {}, duotone: {} };
+let weightModules = EMPTY_WEIGHTS;
 
 /* `whenIconRegistryReady` lets a component defer icon-name decisions until
    the registry is sync-checkable. <icon-ui> doesn't need it — it owns the
-   <name → svg> render and the manifest .then() handler below re-runs
-   loadIcon for every element. But components that branch on whether a
-   string IS an icon (e.g. <input-ui>'s prefix/suffix, which accept both
-   icon names and text labels like "@" or "$") need to re-evaluate after
-   manifest load, otherwise a kebab-case name baked into the DOM as text
-   never recovers. */
+   <name → svg> render and re-stamps elements when the loader map arrives.
+   But components that branch on whether a string IS an icon (e.g.
+   <input-ui>'s prefix/suffix, which accept both icon names and text labels
+   like "@" or "$") need to re-evaluate once loaders arrive, otherwise a
+   kebab-case name baked into the DOM as text never recovers. */
+let registryReady = false;
 let resolveRegistryReady;
 export const whenIconRegistryReady = new Promise((r) => { resolveRegistryReady = r; });
-if (hasViteGlob) resolveRegistryReady();
 
-// Non-Vite environments (plain static serving): fetch the build-time
-// manifest in the background and rebuild `weightModules` with lazy
-// fetch-based loaders. No top-level await — the module finishes loading
-// immediately; icons appear once the one-shot manifest fetch resolves.
-if (!hasViteGlob) {
-  // Specifier is hidden behind a variable so Vite's static analysis
-  // never tries to pre-resolve it in dev (where the file doesn't exist).
-  const manifestSpec = './icons-manifest.js';
-  import(/* @vite-ignore */ manifestSpec).then(({ default: manifest }) => {
-    weightModules = Object.fromEntries(Object.entries(manifest).map(([weight, names]) => {
-      const prefix = `/node_modules/@phosphor-icons/core/assets/${weight}/`;
-      const entries = names.map(name => {
-        const path = prefix + name;
-        const loader = () => fetch(path).then(r => r.ok ? r.text() : Promise.reject(new Error(`icon fetch failed: ${path}`)));
-        return [path, loader];
-      });
-      return [weight, Object.fromEntries(entries)];
-    }));
-    registryReady = true;
-    // icon-ui elements that asked for an icon before the manifest loaded
-    // gave up silently (resolveLoader returned null on EMPTY_WEIGHTS).
-    // Re-request every <icon-ui name> now that a real loader map is in
-    // place. Idempotent — already-loaded icons short-circuit on
-    // registry.has() inside loadIcon.
-    if (typeof document !== 'undefined') {
-      for (const el of document.querySelectorAll('icon-ui[name]')) {
-        const name = el.getAttribute('name');
-        const weight = el.getAttribute('weight') || DEFAULT_WEIGHT;
-        if (name) loadIcon(name, weight);
-      }
+/**
+ * Install a per-weight loader map and mark the registry ready. The map
+ * shape matches `import.meta.glob` output: `{ '/path/to/star.svg': loader }`.
+ *
+ * Either a lazy glob (Vite emits a chunk per icon) or `{ eager: true }`
+ * (Vite inlines the strings) works — the loader can be the SVG string
+ * directly or a thunk returning `Promise<string>`.
+ *
+ * Calling this re-stamps any `<icon-ui>` elements that asked for an icon
+ * before loaders arrived. Idempotent — calling it twice replaces the map.
+ */
+export function installIconLoaders(modules) {
+  weightModules = { ...EMPTY_WEIGHTS, ...modules };
+  registryReady = true;
+  if (typeof document !== 'undefined') {
+    for (const el of document.querySelectorAll('icon-ui[name]')) {
+      const name = el.getAttribute('name');
+      const weight = el.getAttribute('weight') || DEFAULT_WEIGHT;
+      if (name) loadIcon(name, weight);
     }
-    resolveRegistryReady();
-  }).catch(() => { /* keep EMPTY_WEIGHTS — registryReady stays false */ });
+  }
+  resolveRegistryReady();
 }
 
 /* Track which (name, weight) pairs we've already warned about so the
@@ -184,9 +185,9 @@ function resolveLoader(name, weight = DEFAULT_WEIGHT) {
 
 /**
  * Sync check: is `name` a loadable icon at the given weight? True if the
- * asset exists in the build-time glob OR has an alias that does. Does NOT
- * trigger loading. Used by components that accept either an icon name or a
- * text label (e.g. input-ui's prefix/suffix) to disambiguate.
+ * asset exists in the installed loader map OR has an alias that does. Does
+ * NOT trigger loading. Used by components that accept either an icon name
+ * or a text label (e.g. input-ui's prefix/suffix) to disambiguate.
  */
 export function isIconName(name, weight = DEFAULT_WEIGHT) {
   if (!name || typeof name !== 'string') return false;
@@ -267,16 +268,17 @@ async function loadIcon(name, weight = DEFAULT_WEIGHT) {
     if (!loader) {
       pending.delete(key);
       // Warn once per (name, weight) — but only if the registry is
-      // known-complete. In non-Vite pre-manifest mode, `weightModules` is
-      // empty and every lookup fails legitimately until the manifest
-      // resolves; warning there would be noise. The manifest `.then()`
-      // handler above re-triggers loadIcon for every element, so misses
-      // that survive the re-query are the ones worth warning about.
+      // known-complete. Pre-loader-install the map is empty + every lookup
+      // fails legitimately; warning there would be noise. `installIconLoaders`
+      // re-stamps every <icon-ui> element after install, so misses that
+      // survive the re-query are the ones worth warning about.
       if (registryReady) warnMissingIcon(name, weight);
       return;
     }
 
-    const svg = await loader();
+    // Loader may be a string (eager glob) or a thunk returning string /
+    // Promise<string> (lazy glob or fetch).
+    const svg = typeof loader === 'function' ? await loader() : loader;
     registry.set(key, svg);
 
     // Re-render any icon-ui elements showing this name+weight. Regular has

package/core/index.js

@@ -21,6 +21,11 @@ export * from './controller.js';
 export * from './provider.js';
 export * from './anchor.js';
 export * from './icons.js';
+// Side-effect-import phosphor so the core barrel preserves zero-config
+// icon resolution. Apps that want a scoped icon set should import
+// `core/icons` directly and call `installIconLoaders()` — see
+// `core/icons.js` JSDoc.
+import './icons-phosphor.js';
 export * from './markdown.js';
 export * from './transport.js';
 export * from './polyfills.js';

package/index.d.ts

@@ -129,83 +129,84 @@ export type {
   UploadChangeEventDetail,
 } from './components/upload/upload.js';
 
-// ── Non-form primitives (typed; §74 v0.4.7) ─────────────────────────
-// Property types are codegen'd from each component's `.a2ui.json`
-// sidecar by `scripts/build/dts-codegen.mjs`. Event types stay on the
-// 17 form-bearing primitives (above) where they carry semantic payload.
-export type { UIAccordion } from './components/accordion/accordion.js';
-export type { UIActionList } from './components/action-list/action-list.js';
-export type { UIAgentArtifact } from './components/agent-artifact/agent-artifact.js';
-export type { UIAgentFeedbackBar } from './components/agent-feedback-bar/agent-feedback-bar.js';
-export type { UIAgentQuestions } from './components/agent-questions/agent-questions.js';
-export type { UIAgentReasoning } from './components/agent-reasoning/agent-reasoning.js';
-export type { UIAgentSuggestions } from './components/agent-suggestions/agent-suggestions.js';
-export type { UIAgentTrace } from './components/agent-trace/agent-trace.js';
-export type { UIAlert } from './components/alert/alert.js';
-export type { UIAvatar } from './components/avatar/avatar.js';
-export type { UIBadge } from './components/badge/badge.js';
-export type { UIBlock } from './components/block/block.js';
-export type { UIBreadcrumb } from './components/breadcrumb/breadcrumb.js';
-export type { UIButton } from './components/button/button.js';
-export type { UICanvas } from './components/canvas/canvas.js';
-export type { UICard } from './components/card/card.js';
-export type { UIChart } from './components/chart/chart.js';
-export type { UIChartLegend } from './components/chart-legend/chart-legend.js';
-export type { UIChatThread } from './components/chat-thread/chat-thread.js';
-export type { UIColumn } from './components/col/col.js';
-export type { UICommand } from './components/command/command.js';
-export type { UIDemoToggle } from './components/demo-toggle/demo-toggle.js';
-export type { UIDescriptionList } from './components/description-list/description-list.js';
-export type { UIDivider } from './components/divider/divider.js';
-export type { UIDrawer } from './components/drawer/drawer.js';
-export type { UIEmbed } from './components/embed/embed.js';
-export type { UIEmptyState } from './components/empty-state/empty-state.js';
-export type { UIFeed } from './components/feed/feed.js';
-export type { UIField } from './components/field/field.js';
-export type { UIFields } from './components/fields/fields.js';
-export type { UIGrid } from './components/grid/grid.js';
-export type { UIHeatmap } from './components/heatmap/heatmap.js';
-export type { UIIcon } from './components/icon/icon.js';
-export type { UIImage } from './components/image/image.js';
-export type { UIInspector } from './components/inspector/inspector.js';
-export type { UIKbd } from './components/kbd/kbd.js';
-export type { UILink } from './components/link/link.js';
-export type { UIList } from './components/list/list.js';
-export type { UIMenu } from './components/menu/menu.js';
-export type { UIModal } from './components/modal/modal.js';
-export type { UINav } from './components/nav/nav.js';
-export type { UINavGroup } from './components/nav-group/nav-group.js';
-export type { UINavItem } from './components/nav-item/nav-item.js';
-export type { UINoodles } from './components/noodles/noodles.js';
-export type { UIPage } from './components/page/page.js';
-export type { UIPagination } from './components/pagination/pagination.js';
-export type { UIPane } from './components/pane/pane.js';
-export type { UIPipelineStatus } from './components/pipeline-status/pipeline-status.js';
-export type { UIPopover } from './components/popover/popover.js';
-export type { UIProgress } from './components/progress/progress.js';
-export type { UIProgressRow } from './components/progress-row/progress-row.js';
-export type { UIRichtext } from './components/richtext/richtext.js';
-export type { UIRow } from './components/row/row.js';
-export type { UISegment } from './components/segment/segment.js';
-export type { UISkeleton } from './components/skeleton/skeleton.js';
-export type { UIStack } from './components/stack/stack.js';
-export type { UIStepProgress } from './components/step-progress/step-progress.js';
-export type { UIStepper } from './components/stepper/stepper.js';
-export type { UIStream } from './components/stream/stream.js';
-export type { UISwatch } from './components/swatch/swatch.js';
-export type { UISwiper } from './components/swiper/swiper.js';
-export type { UITable } from './components/table/table.js';
-export type { UITableToolbar } from './components/table-toolbar/table-toolbar.js';
-export type { UITabs } from './components/tabs/tabs.js';
-export type { UITag } from './components/tag/tag.js';
-export type { UIText } from './components/text/text.js';
-export type { UITimeline } from './components/timeline/timeline.js';
-export type { UIToast } from './components/toast/toast.js';
-export type { UIToggleGroup } from './components/toggle-group/toggle-group.js';
-export type { UIToggleScheme } from './components/toggle-scheme/toggle-scheme.js';
-export type { UIToolbar } from './components/toolbar/toolbar.js';
-export type { UITooltip } from './components/tooltip/tooltip.js';
-export type { UITree } from './components/tree/tree.js';
+// ── Non-form primitives (typed; §74 v0.4.7 + §80 v0.4.8) ────────────
+// Property types + event types codegen'd from each component's
+// `.a2ui.json` sidecar by `scripts/build/dts-codegen.mjs`. Event-bearing
+// types use `export *` so consumers can import event type names
+// (e.g. `ModalCloseEvent`, `TimelineToggleEventDetail`) directly.
+export * from './components/accordion/accordion.js';
+export * from './components/action-list/action-list.js';
+export * from './components/agent-artifact/agent-artifact.js';
+export * from './components/agent-feedback-bar/agent-feedback-bar.js';
+export * from './components/agent-questions/agent-questions.js';
+export * from './components/agent-reasoning/agent-reasoning.js';
+export * from './components/agent-suggestions/agent-suggestions.js';
+export * from './components/agent-trace/agent-trace.js';
+export * from './components/alert/alert.js';
+export * from './components/avatar/avatar.js';
+export * from './components/badge/badge.js';
+export * from './components/block/block.js';
+export * from './components/breadcrumb/breadcrumb.js';
+export * from './components/button/button.js';
+export * from './components/canvas/canvas.js';
+export * from './components/card/card.js';
+export * from './components/chart/chart.js';
+export * from './components/chart-legend/chart-legend.js';
+export * from './components/chat-thread/chat-thread.js';
+export * from './components/col/col.js';
+export * from './components/command/command.js';
+export * from './components/demo-toggle/demo-toggle.js';
+export * from './components/description-list/description-list.js';
+export * from './components/divider/divider.js';
+export * from './components/drawer/drawer.js';
+export * from './components/embed/embed.js';
+export * from './components/empty-state/empty-state.js';
+export * from './components/feed/feed.js';
+export * from './components/field/field.js';
+export * from './components/fields/fields.js';
+export * from './components/grid/grid.js';
+export * from './components/heatmap/heatmap.js';
+export * from './components/icon/icon.js';
+export * from './components/image/image.js';
+export * from './components/inspector/inspector.js';
+export * from './components/kbd/kbd.js';
+export * from './components/link/link.js';
+export * from './components/list/list.js';
+export * from './components/menu/menu.js';
+export * from './components/modal/modal.js';
+export * from './components/nav/nav.js';
+export * from './components/nav-group/nav-group.js';
+export * from './components/nav-item/nav-item.js';
+export * from './components/noodles/noodles.js';
+export * from './components/page/page.js';
+export * from './components/pagination/pagination.js';
+export * from './components/pane/pane.js';
+export * from './components/pipeline-status/pipeline-status.js';
+export * from './components/popover/popover.js';
+export * from './components/progress/progress.js';
+export * from './components/progress-row/progress-row.js';
+export * from './components/richtext/richtext.js';
+export * from './components/row/row.js';
+export * from './components/segment/segment.js';
+export * from './components/skeleton/skeleton.js';
+export * from './components/stack/stack.js';
+export * from './components/step-progress/step-progress.js';
+export * from './components/stepper/stepper.js';
+export * from './components/stream/stream.js';
+export * from './components/swatch/swatch.js';
+export * from './components/swiper/swiper.js';
+export * from './components/table/table.js';
+export * from './components/table-toolbar/table-toolbar.js';
+export * from './components/tabs/tabs.js';
+export * from './components/tag/tag.js';
+export * from './components/text/text.js';
+export * from './components/timeline/timeline.js';
+export * from './components/toast/toast.js';
+export * from './components/toggle-group/toggle-group.js';
+export * from './components/toggle-scheme/toggle-scheme.js';
+export * from './components/toolbar/toolbar.js';
+export * from './components/tooltip/tooltip.js';
+export * from './components/tree/tree.js';
 
 // ── Global HTMLElementTagNameMap augmentation ───────────────────────
 //

package/index.js

@@ -23,6 +23,13 @@
  *   import '@adia-ai/web-modules/chat';       // chat-shell
  *   import '@adia-ai/web-modules/editor';     // editor-shell
  *   import '@adia-ai/web-modules/runtime';    // gen-root, a2ui-root
+ *
+ * Icon registry: the main barrel side-effect-imports
+ * `core/icons-phosphor.js` so every Phosphor name resolves without
+ * pre-registration. Apps with bundle-size SLOs should skip this barrel,
+ * import primitives piecemeal, and call `installIconLoaders()` with a
+ * scoped glob — see `core/icons.js` JSDoc.
  */
 
+import './core/icons-phosphor.js';
 export * from './components/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -54,7 +54,8 @@
     "*.css",
     "./index.js",
     "./components/**/*.js",
-    "./core/provider.js"
+    "./core/provider.js",
+    "./core/icons-phosphor.js"
   ],
   "dependencies": {
     "@adia-ai/a2ui-runtime": "^0.4.0"