@adia-ai/web-components 0.0.2 → 0.0.4

package/README.md

@@ -44,40 +44,45 @@ web-components/
 │   ├── markdown.js      lightweight markdown renderer
 │   └── transport.js     SSE / streaming helpers for LLM adapters
 │
-├── components/     — 80 *-n custom elements
+├── components/     — 80 *-ui custom elements
 │   └── <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 (tag: `adia-*`)
-│   ├── app-shell, app-nav, section-nav   — admin layout scaffolding
-│   ├── adia-chat, adia-editor, gen-ui    — LLM + editor + gen-UI patterns
-│   └── index.js                          — registers all patterns
+├── 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
 │
 ├── traits/         — 40 composable behaviors via defineTrait()
 │                     (pressable, focusTrap, confetti, resizable, …)
 │
-├── a2ui/           — A2UI runtime (renderer + wiring)
-│   ├── renderer.js         consumes A2UI JSON, stamps component trees
-│   ├── registry.js         component-name → class map (aliases included)
-│   ├── wiring-engine.js    binds controllers (toggle, form, data-stream)
-│   ├── wiring-registry.js  declarative event/data wiring catalog
-│   ├── surface.js          <canvas-ui> + <a2ui-root> hosts
-│   ├── stream.js           streamed-UI incremental hydration
-│   └── manifest-runtime.js surface manifest loader
+├── a2ui/           — deprecation shim for one release
+│   └── index.js            Re-exports @adia-ai/a2ui-utils with a
+│                           one-time console.warn. Removed in 0.1.0.
+│                           All actual A2UI runtime code (renderer,
+│                           registry, streams, surface manifest,
+│                           wiring, dockables, controllers) lives in
+│                           `@adia-ai/a2ui-utils` at packages/a2ui/utils/.
 │
-├── styles/         — Global tokens and CSS layering
-│   ├── tokens.css              all --a-* design tokens
-│   ├── colors/                 primitives / semantics / scrims
-│   ├── typography.css, space.css, radius.css, shadow.css
-│   └── themes/*.css            8 themes (ocean, forest, sunset, …)
-│
-└── scripts/        — Build + dev utilities
-    └── build-components.mjs    YAML → .a2ui.json per-component
+└── styles/         — Global tokens and CSS layering
+    ├── tokens.css              all --a-* design tokens
+    ├── colors/                 primitives / semantics / scrims
+    ├── typography.css, space.css, radius.css, shadow.css
+    └── themes/*.css            8 themes (ocean, forest, sunset, …)
 ```
 
+Build + dev utilities (including `build-a2ui-data.mjs`, `qa-training.mjs`,
+`a2ui-to-html.cjs`, `mcp-call.cjs`, `mcp-pipeline.cjs`, `screenshot.cjs`)
+live at the repo-root `scripts/` directory rather than inside this
+package — they span the monorepo (MCP server, gen-ui-training data,
+component catalog) and aren't scoped to web-components alone.
+
 ## Component contract
 
 Every component is a single-file class extending `AdiaElement` (or
@@ -133,7 +138,9 @@ examples.
 ## A2UI runtime
 
 ```javascript
-import { A2UIRenderer } from '@adia-ai/web-components/a2ui';
+import { A2UIRenderer } from '@adia-ai/a2ui-utils';
+// (The old `@adia-ai/web-components/a2ui` subpath still resolves in 0.0.4
+// via a deprecation shim that prints a console.warn; removed in 0.1.0.)
 
 const renderer = new A2UIRenderer({ target: document.getElementById('canvas') });
 renderer.apply({

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.4. 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.js

@@ -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)

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.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/badge/badge.js

@@ -14,7 +14,7 @@
  * 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' },

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.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 = {

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'];

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.

package/components/card/card.js

@@ -23,8 +23,8 @@
  *   draggable — enables drag handle + cursor:grab; wires the draggable trait
  */
 
-import { AdiaElement } from '@core/element.js';
-import { draggable } from '@traits/draggable.js';
+import { AdiaElement } from '../../core/element.js';
+import { draggable } from '../../traits/draggable.js';
 
 class AdiaCard extends AdiaElement {
   static properties = {

package/components/chart/chart.js

@@ -19,7 +19,7 @@
  *   .data = [{...}, ...]  — array of data objects
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /* ── Helpers ────────────────────────────────────────────────────── */
 

package/components/chat/chat-input.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <chat-input-ui> — Composable chat input bar.

package/components/chat/chat.css

@@ -10,8 +10,7 @@
     --chat-messages-padding:      var(--a-space-4);
     --chat-messages-gap:          var(--a-space-3);
     --chat-footer-padding:        var(--a-space-3);
-    /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --chat-footer-min-height:     36px;
+    --chat-footer-min-height:     var(--a-chrome-pane-footer-height);
 
     /* ── Motion ── */
     --chat-cursor-duration:       0.8s;

package/components/chat/chat.js

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import { renderMarkdown } from '@core/markdown.js';
+import { AdiaElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/components/check/check.js

@@ -3,8 +3,8 @@
  * Pure CSS checkmark via border trick on [slot="box"]::after. No SVG.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { html } from '@core/element.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
 
 class AdiaCheck extends AdiaFormElement {
   static properties = {

package/components/code/code.css

@@ -45,6 +45,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    min-height: var(--a-chrome-pane-header-height);
     padding: var(--code-py) var(--code-px);
     background: var(--code-header-bg);
     border-bottom: 1px solid var(--code-border);
@@ -112,6 +113,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    min-height: var(--a-chrome-pane-footer-height);
     padding: var(--code-py) var(--code-px);
     background: var(--code-header-bg);
     border-top: 1px solid var(--code-border);

package/components/code/code.js

@@ -9,7 +9,7 @@
  * updates the rendered code in place.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaCode extends AdiaElement {
   static properties = {

package/components/col/col.js

@@ -4,7 +4,7 @@
  * <col-ui gap="md" align="center">...</col-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaCol extends AdiaElement {
   static properties = {

package/components/color-picker/color-picker.js

@@ -16,7 +16,7 @@
  * Form-associated via AdiaFormElement + ElementInternals.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 // ── OKLCH ↔ sRGB conversion ──────────────────────────────
 

package/components/command/command.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <command-ui> — Searchable command palette.

package/components/description-list/description-list.js

@@ -19,7 +19,7 @@
  *   items     — optional JSON array of {term, description} pairs
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDescriptionList extends AdiaElement {
   static properties = {

package/components/divider/divider.js

@@ -7,7 +7,7 @@
  * Renders as a simple line, or a line broken by centered text.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDivider extends AdiaElement {
   static properties = {

package/components/drawer/drawer.js

@@ -29,7 +29,7 @@
  *   close — fired after the drawer finishes closing
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaDrawer extends AdiaElement {
   #bound = false;

package/components/embed/embed.js

@@ -10,7 +10,7 @@
  *   aspect — optional CSS aspect-ratio (e.g. '16/9')
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaEmbed extends AdiaElement {
   static properties = {

package/components/empty-state/empty-state.js

@@ -9,7 +9,7 @@
  * Note: Uses 'heading' attribute instead of 'title' to avoid native tooltip.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaEmptyState extends AdiaElement {
   static properties = {

package/components/grid/grid.js

@@ -5,7 +5,7 @@
  * <grid-ui columns="2" column-gap="2" row-gap="4">...</grid-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaGrid extends AdiaElement {
   static properties = {

package/components/heatmap/heatmap.js

@@ -20,7 +20,7 @@
  *   title — optional header title
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 

package/components/icon/icon.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 AdiaIcon extends AdiaElement {
   static properties = {

package/components/image/image.js

@@ -14,7 +14,7 @@
  * Raw:    strips chrome (no background, no radius) for edge-to-edge rendering
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaImage extends AdiaElement {
   static properties = {

package/components/input/input.js

@@ -7,8 +7,8 @@
  *   <input-ui placeholder="Search" prefix="search"></input-ui>
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { isIconName } from '@core/icons.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { isIconName } from '../../core/icons.js';
 
 const renderAffix = (v) => isIconName(v)
   ? `<icon-ui name="${v}"></icon-ui>`

package/components/inspector/inspector.js

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import { registry } from '../../a2ui/registry.js';
+import { AdiaElement } from '../../core/element.js';
+import { registry } from '@adia-ai/a2ui-utils';
 import '../tabs/tabs.js';
 import '../tabs/tab.js';
 import '../code/code.js';

package/components/kbd/kbd.js

@@ -6,7 +6,7 @@
  * Em-relative sizing so it scales with surrounding text.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaKbd extends AdiaElement {
   static properties = {

package/components/list/list.js

@@ -19,7 +19,7 @@
  *   - Fires `selection-change` with { key, previousKey }.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaList extends AdiaElement {
   static properties = {

package/components/menu/menu.js

@@ -15,8 +15,8 @@
  *   • Roving focus + arrow/Home/End/Enter/Escape keyboard nav.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaMenu extends AdiaElement {
   static properties = {

package/components/modal/modal.js

@@ -29,7 +29,7 @@
  *   close — fired after the modal finishes closing
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 
 class AdiaModal extends AdiaElement {
   #bound = false;

package/components/noodles/noodles.js

@@ -10,7 +10,7 @@
  * Supports bezier, step, and straight curve modes.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 let nextId = 0;
 

package/components/otp-input/otp-input.js

@@ -8,7 +8,7 @@
  * Events: 'complete' (detail: {value}), 'input'
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaOtpInput extends AdiaFormElement {
   static properties = {

package/components/pagination/pagination.js

@@ -8,7 +8,7 @@
  *   page-change — { detail: { page } }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaPagination extends AdiaElement {
   static properties = {

package/components/pane/pane.css

@@ -5,7 +5,7 @@
     --pane-border:          var(--a-border-subtle);
     --pane-radius:          var(--a-radius-lg);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-bar-height:      36px;
+    --pane-bar-height:      var(--a-chrome-pane-header-height);
     --pane-header-px:       var(--a-space-3);
     --pane-header-py:       var(--a-space-2);
     --pane-header-fg:       var(--a-fg);
@@ -76,7 +76,7 @@
 
   /* Collapse indicator — stamped by JS as icon-ui */
   > header > [slot="chevron"] {
-    --a-icon-size: 0.5rem;
+    --a-icon-size: var(--a-caret-size);
     flex-shrink: 0;
     margin-inline-start: auto;
     color: var(--pane-chevron-fg);

package/components/pane/pane.js

@@ -25,7 +25,7 @@
  *   pane.toggle()
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaPane extends AdiaElement {
   static properties = {

package/components/pipeline-status/pipeline-status.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <pipeline-status-ui> — Single updating pipeline status indicator.