@adia-ai/web-components 0.0.1

package/a2ui/dockables/provider.js

@@ -0,0 +1,59 @@
+/**
+ * ProviderDock — Injects shared context into a component subtree.
+ *
+ * Creates an <a2ui-provider> wrapper around the host element.
+ * Children can consume the context by name.
+ */
+import { Dockable } from './base.js';
+
+export class ProviderDock extends Dockable {
+  kind = 'provider';
+
+  /** @type {string} context name, e.g., "auth" */
+  id;
+
+  /** @type {string|null} component id to wrap (null = root) */
+  hostId;
+
+  /** @type {*} initial context value */
+  value;
+
+  /**
+   * @param {object} decl — { name, host?, value? }
+   */
+  constructor(decl) {
+    super();
+    this.id = `provider:${decl.name}`;
+    this.hostId = decl.host || null;
+    this.value = decl.value ?? null;
+  }
+
+  dock(ctx) {
+    const host = this.hostId
+      ? ctx.getElement(this.hostId)
+      : ctx.getRootElement();
+
+    if (!host) {
+      console.warn(`ProviderDock: host "${this.hostId}" not found`);
+      return;
+    }
+
+    const provider = document.createElement('a2ui-provider');
+    provider.setAttribute('name', this.id.replace('provider:', ''));
+    provider.value = this.value;
+
+    // Wrap: insert provider before host, move host inside
+    host.parentNode?.insertBefore(provider, host);
+    provider.appendChild(host);
+
+    return () => {
+      // Unwrap: move host back out, remove provider
+      if (provider.parentNode) {
+        provider.parentNode.insertBefore(host, provider);
+        provider.remove();
+      }
+    };
+  }
+
+  undock() {}
+}

package/a2ui/index.js

@@ -0,0 +1,19 @@
+// 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';
+
+// Tier 2: Wire
+export { SurfaceManifest } from './surface-manifest.js';
+export { ManifestRuntime } from './manifest-runtime.js';
+export { ContextStore } from './context-store.js';
+
+// 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';

package/a2ui/manifest-runtime.js

@@ -0,0 +1,226 @@
+/**
+ * Manifest Runtime — Loads a surface manifest and manages cross-surface
+ * navigation, data flow, context sharing, and lifecycle dependencies.
+ *
+ * Bridges A008 (design-time manifest) to A007 (per-surface wiring engine).
+ * Consumes a SurfaceManifest and orchestrates the live application.
+ */
+
+import { sharedContextStore } from './context-store.js';
+import { resolveData } from './wiring-registry.js';
+
+export class ManifestRuntime {
+  /** @type {import('./surface-manifest.js').SurfaceManifest} */
+  #manifest;
+
+  /** @type {Map<string, { mounted: boolean, completed: boolean }>} */
+  #surfaceState = new Map();
+
+  /** @type {Map<string, Function[]>} */
+  #triggerListeners = new Map();
+
+  /**
+   * @param {import('./surface-manifest.js').SurfaceManifest} manifest
+   */
+  constructor(manifest) {
+    this.#manifest = manifest;
+    this.#initSharedContexts();
+  }
+
+  /**
+   * Initialize shared contexts from the manifest.
+   */
+  #initSharedContexts() {
+    const json = this.#manifest.toJSON();
+    if (json.sharedContexts) {
+      for (const [name, config] of Object.entries(json.sharedContexts)) {
+        sharedContextStore.define(name, config);
+      }
+    }
+  }
+
+  /**
+   * Signal that a surface has mounted (rendered and wired).
+   * Joins shared contexts and checks lifecycle dependencies.
+   *
+   * @param {string} surfaceId
+   * @param {Record<string, string>} [params] — Resolved route params
+   */
+  async onSurfaceMount(surfaceId, params = {}) {
+    this.#surfaceState.set(surfaceId, { mounted: true, completed: false });
+
+    // Join shared contexts
+    const descriptor = this.#manifest.getSurface(surfaceId);
+    if (descriptor?.consumes) {
+      for (const contextName of Object.keys(descriptor.consumes)) {
+        await sharedContextStore.join(contextName, surfaceId, resolveData, params);
+      }
+    }
+
+    // Check depends-on: if this surface depends on another, verify it's ready
+    const deps = this.#manifest.getAssociationsTo(surfaceId, 'depends-on');
+    for (const dep of deps) {
+      const depState = this.#surfaceState.get(dep.from);
+      const condition = dep.condition || 'mounted';
+
+      let satisfied = false;
+      if (condition === 'mounted') satisfied = depState?.mounted === true;
+      if (condition === 'completed') satisfied = depState?.completed === true;
+      if (condition === 'has-data') satisfied = this.#hasContextData(surfaceId);
+
+      if (!satisfied && dep.fallback) {
+        this.#executeFallback(dep.fallback, params);
+        return false; // Surface should not proceed
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Signal that a surface has unmounted.
+   *
+   * @param {string} surfaceId
+   */
+  onSurfaceUnmount(surfaceId) {
+    this.#surfaceState.set(surfaceId, { mounted: false, completed: false });
+
+    // Leave shared contexts
+    const descriptor = this.#manifest.getSurface(surfaceId);
+    if (descriptor?.consumes) {
+      for (const contextName of Object.keys(descriptor.consumes)) {
+        sharedContextStore.leave(contextName, surfaceId);
+      }
+    }
+  }
+
+  /**
+   * Signal that a surface's primary action completed (e.g., form submitted).
+   * Fires cross-surface triggers.
+   *
+   * @param {string} surfaceId
+   * @param {string} actionName — The action that completed (e.g., "submit-checkin")
+   * @param {unknown} [result] — The action's return value
+   */
+  async onActionComplete(surfaceId, actionName, result) {
+    const state = this.#surfaceState.get(surfaceId);
+    if (state) state.completed = true;
+
+    const trigger = `action:${actionName}`;
+
+    // Process routes-to associations
+    const routes = this.#manifest.getAssociationsFrom(surfaceId, 'routes-to')
+      .filter(a => a.trigger === trigger);
+    for (const route of routes) {
+      const target = this.#manifest.getSurface(route.to);
+      if (target?.route) {
+        let path = target.route;
+        const params = this.#resolveAssocParams(route.params, result);
+        for (const [key, value] of Object.entries(params)) {
+          path = path.replace(`:${key}`, encodeURIComponent(value));
+        }
+        location.hash = path;
+      }
+    }
+
+    // Process feeds associations
+    const feeds = this.#manifest.getAssociationsFrom(surfaceId, 'feeds')
+      .filter(a => a.trigger === trigger);
+    for (const feed of feeds) {
+      if (feed.mapping) {
+        for (const [targetPath, source] of Object.entries(feed.mapping)) {
+          let value;
+          if (source.from === 'action-result') value = result;
+          else if (source.from === 'context') value = sharedContextStore.read(source.context, source.key);
+          else if (source.from === 'literal') value = source.value;
+
+          // Store for the target surface to consume when it mounts
+          sharedContextStore.update(`__feed_${feed.to}`, { [targetPath]: value });
+        }
+      }
+    }
+
+    // Process triggers associations
+    const triggers = this.#manifest.getAssociationsFrom(surfaceId, 'triggers')
+      .filter(a => a.trigger === trigger);
+    for (const trig of triggers) {
+      this.#executeTriggerEffect(trig.to, trig.effect, result);
+    }
+  }
+
+  /**
+   * Get navigation targets from a surface.
+   * @param {string} surfaceId
+   * @returns {{ surfaceId: string, route: string, trigger: string }[]}
+   */
+  getNavigationTargets(surfaceId) {
+    return this.#manifest.getAssociationsFrom(surfaceId, 'routes-to')
+      .map(a => ({
+        surfaceId: a.to,
+        route: this.#manifest.getSurface(a.to)?.route || '',
+        trigger: a.trigger || '',
+      }));
+  }
+
+  /**
+   * Get the manifest.
+   */
+  get manifest() { return this.#manifest; }
+
+  // ── Internal ──
+
+  #hasContextData(surfaceId) {
+    const descriptor = this.#manifest.getSurface(surfaceId);
+    if (!descriptor?.consumes) return true;
+    for (const contextName of Object.keys(descriptor.consumes)) {
+      if (!sharedContextStore.isPopulated(contextName)) return false;
+    }
+    return true;
+  }
+
+  #executeFallback(fallback, params) {
+    if (fallback.startsWith('redirect:')) {
+      const targetId = fallback.slice('redirect:'.length);
+      const target = this.#manifest.getSurface(targetId);
+      if (target?.route) {
+        let path = target.route;
+        for (const [key, value] of Object.entries(params)) {
+          path = path.replace(`:${key}`, encodeURIComponent(value));
+        }
+        location.hash = path;
+      }
+    }
+    // Other fallbacks: show-error, wait (future)
+  }
+
+  #resolveAssocParams(paramSpec, actionResult) {
+    const params = {};
+    if (!paramSpec) return params;
+    for (const [name, spec] of Object.entries(paramSpec)) {
+      if (spec.from === 'event-detail' || spec.from === 'action-result') {
+        params[name] = spec.key ? actionResult?.[spec.key] : actionResult;
+      } else if (spec.from === 'param') {
+        // Read from current route
+        const hash = location.hash.slice(1);
+        const match = hash.match(new RegExp(`${spec.key}/([^/]+)`));
+        if (match) params[name] = match[1];
+      } else if (spec.from === 'literal') {
+        params[name] = spec.value;
+      }
+    }
+    return params;
+  }
+
+  #executeTriggerEffect(targetSurfaceId, effect, data) {
+    if (!effect) return;
+
+    // Dispatch as a custom event that the target surface can listen for
+    document.dispatchEvent(new CustomEvent('a2ui-trigger', {
+      detail: {
+        targetSurface: targetSurfaceId,
+        effect,
+        data,
+      },
+    }));
+  }
+}

package/a2ui/registry.js

@@ -0,0 +1,200 @@
+/**
+ * A2UI Registry — maps A2UI type names to AdiaUI custom element tag names.
+ *
+ * Usage:
+ *   import { registry, resolveTag } from './registry.js';
+ *   resolveTag('Button')        // → 'button-ui'
+ *   resolveTag('ChoicePicker')  // → 'select-ui'
+ *   resolveTag('Toggle')        // → 'switch-ui'
+ */
+
+export const registry = new Map([
+
+  // ══════════════════════════════════════════════════════
+  // A2UI Protocol Types (standard catalog)
+  // ══════════════════════════════════════════════════════
+
+  // Layout
+  ['Row',              'row-ui'],
+  ['Column',           'col-ui'],
+  ['List',             'list-ui'],
+  ['Grid',             'grid-ui'],
+  ['Stack',            'stack-ui'],
+  ['Block',            'block-ui'],
+
+  // Display
+  ['Text',             'text-ui'],
+  ['Image',            'image-ui'],
+  ['Icon',             'icon-ui'],
+  ['Divider',          'divider-ui'],
+  ['Badge',            'badge-ui'],
+  ['Avatar',           'avatar-ui'],
+  ['AvatarGroup',      'avatar-group-ui'],
+  ['Progress',         'progress-ui'],
+  ['Skeleton',         'skeleton-ui'],
+  ['Code',             'code-ui'],
+  ['Stat',             'stat-ui'],
+  ['EmptyState',       'empty-state-ui'],
+
+  // Input
+  ['Input',            'input-ui'],
+  ['TextField',        'input-ui'],
+  ['TextArea',         'textarea-ui'],
+  ['CheckBox',         'check-ui'],
+  ['Toggle',           'switch-ui'],
+  ['Switch',           'switch-ui'],
+  ['Slider',           'slider-ui'],
+  ['Range',            'range-ui'],
+  ['ChoicePicker',     'select-ui'],
+  ['Select',           'select-ui'],
+  ['Radio',            'radio-ui'],
+  ['DateTimeInput',    'calendar-picker-ui'],
+  ['CalendarPicker',   'calendar-picker-ui'],
+  ['ColorPicker',      'color-picker-ui'],
+  // Search deprecated — use Input type="search" prefix="magnifying-glass"
+  ['Upload',           'upload-ui'],
+  ['OtpInput',         'otp-input-ui'],
+
+  // Action
+  ['Button',           'button-ui'],
+
+  // System State
+  ['LoadingIndicator', 'progress-ui'],
+  ['ErrorContainer',   'card-ui'],
+
+  // Container
+  ['Card',             'card-ui'],
+  ['Tabs',             'tabs-ui'],
+  ['Tab',              'tab-ui'],
+  ['Panel',            'pane-ui'],
+  ['Pane',             'pane-ui'],
+  ['Modal',            'modal-ui'],
+  ['Dialog',           'modal-ui'],
+  ['Drawer',           'drawer-ui'],
+  ['Toast',            'toast-ui'],
+  ['Popover',          'popover-ui'],
+  ['Accordion',        'accordion-ui'],
+  ['AccordionItem',    'accordion-item-ui'],
+  ['Alert',            'alert-ui'],
+  ['Tooltip',          'tooltip-ui'],
+  ['Menu',             'menu-ui'],
+
+  // Card children (native HTML elements styled by card.css)
+  ['Section',          'section'],
+  ['Header',           'header'],
+  ['Footer',           'footer'],
+
+  // Agent / Specialized
+  ['Stream',           'stream-ui'],
+  ['Table',            'table-ui'],
+  ['Chart',            'chart-ui'],
+  ['Embed',            'embed-ui'],
+  ['Swiper',           'swiper-ui'],
+  ['Slideshow',        'swiper-ui'],
+  ['Carousel',         'swiper-ui'],
+
+  // Navigation
+  ['Breadcrumb',       'breadcrumb-ui'],
+  ['Nav',              'nav-n'],
+  ['Noodles',          'noodles-ui'],
+  ['Pagination',       'pagination-ui'],
+  ['SegmentedControl', 'segmented-ui'],
+  ['Segment',          'segment-ui'],
+  ['ToggleGroup',      'toggle-group-ui'],
+
+  // Utility
+  ['Command',          'command-ui'],
+  ['Kbd',              'kbd-ui'],
+  ['Toolbar',          'toolbar-ui'],
+  ['Tag',              'tag-ui'],
+  ['Timeline',         'timeline-ui'],
+  ['TimelineItem',     'timeline-item-ui'],
+
+  // ══════════════════════════════════════════════════════
+  // AgentUI Aliases (backwards compat with -ui tags)
+  // ══════════════════════════════════════════════════════
+  ['button-ui',        'button-ui'],
+  ['card-ui',          'card-ui'],
+  ['text-ui',          'text-ui'],
+  ['input-ui',         'input-ui'],
+  ['text-field-ui',    'input-ui'],
+  ['select-ui',        'select-ui'],
+  ['toggle-ui',        'switch-ui'],
+  ['check-ui',         'check-ui'],
+  ['slider-ui',        'slider-ui'],
+  ['badge-ui',         'badge-ui'],
+  ['avatar-ui',        'avatar-ui'],
+  ['icon-ui',          'icon-ui'],
+  ['image-ui',         'image-ui'],
+  ['divider-ui',       'divider-ui'],
+  ['progress-ui',      'progress-ui'],
+  ['skeleton-ui',      'skeleton-ui'],
+  ['tabs-ui',          'tabs-ui'],
+  ['tab-ui',           'tab-ui'],
+  ['modal-ui',         'modal-ui'],
+  ['dialog-ui',        'modal-ui'],
+  ['drawer-ui',        'drawer-ui'],
+  ['toast-ui',         'toast-ui'],
+  ['popover-ui',       'popover-ui'],
+  ['panel-ui',         'pane-ui'],
+  ['accordion-ui',     'accordion-ui'],
+  ['alert-ui',         'alert-ui'],
+  ['tooltip-ui',       'tooltip-ui'],
+  ['menu-ui',          'menu-ui'],
+  ['table-ui',         'table-ui'],
+  ['chart-ui',         'chart-ui'],
+  ['code-ui',          'code-ui'],
+  ['textarea-ui',      'textarea-ui'],
+  ['radio-ui',         'radio-ui'],
+  ['tag-ui',           'tag-ui'],
+  ['search-ui',        'search-ui'],
+  ['upload-ui',        'upload-ui'],
+  ['breadcrumb-ui',    'breadcrumb-ui'],
+  ['nav-ui',           'nav-n'],
+  ['noodles-ui',       'noodles-ui'],
+  ['pagination-ui',    'pagination-ui'],
+  ['segmented-control-ui', 'segmented-ui'],
+  ['segment-ui',       'segment-ui'],
+  ['command-ui',       'command-ui'],
+  ['calendar-picker-ui', 'calendar-picker-ui'],
+  ['color-picker-ui',  'color-picker-ui'],
+  ['kbd-ui',           'kbd-ui'],
+  ['toolbar-ui',       'toolbar-ui'],
+  ['otp-input-ui',     'otp-input-ui'],
+  ['embed-ui',         'embed-ui'],
+  ['stream-ui',        'stream-ui'],
+  ['row-ui',           'row-ui'],
+  ['col-ui',           'col-ui'],
+  ['grid-ui',          'grid-ui'],
+  ['stack-ui',         'stack-ui'],
+  ['block-ui',         'block-ui'],
+  ['list-ui',          'list-ui'],
+  ['range-ui',         'range-ui'],
+  ['datetime-ui',      'calendar-picker-ui'],
+  ['timeline-ui',      'timeline-ui'],
+  ['timeline-item-ui', 'timeline-item-ui'],
+  ['avatar-group-ui',  'avatar-group-ui'],
+
+  // Aliases (alternate names)
+  ['Keyboard',         'kbd-ui'],
+  ['DatePicker',       'calendar-picker-ui'],
+  ['CommandPalette',   'command-ui'],
+  ['Segmented',        'segmented-ui'],
+  ['OTP',              'otp-input-ui'],
+]);
+
+/**
+ * Resolve an A2UI component type to a AdiaUI tag name.
+ * @param {string} type — A2UI type name or AgentUI tag
+ * @returns {string|null} — AdiaUI tag name or null
+ */
+export function resolveTag(type) {
+  return registry.get(type) || null;
+}
+
+/**
+ * Register a custom component type.
+ */
+export function registerType(type, tagName) {
+  registry.set(type, tagName);
+}