@adia-ai/web-components 0.0.2 → 0.0.4

package/a2ui/dockables/lifecycle.js

@@ -1,84 +0,0 @@
-/**
- * LifecycleDock — Runs actions on mount, unmount, and model changes.
- *
- * One per surface. Fires onMount actions immediately on dock,
- * watches model paths for changes, and runs onUnmount on undock.
- */
-import { Dockable } from './base.js';
-
-export class LifecycleDock extends Dockable {
-  kind = 'lifecycle';
-  id = 'lifecycle';
-
-  /** @type {Array} actions to run on mount */
-  onMount;
-
-  /** @type {Array} actions to run on unmount */
-  onUnmount;
-
-  /** @type {Array} model path watchers */
-  onModelChange;
-
-  /** @type {Function} (handlerName) => handlerFn */
-  #resolveHandler;
-
-  /** @type {import('../surface.js').SurfaceContext|null} */
-  #ctx = null;
-
-  /**
-   * @param {object} decl — { onMount?, onUnmount?, onModelChange? }
-   * @param {Function} resolveHandler — (name) => async (config, ctx) => result
-   */
-  constructor(decl, resolveHandler) {
-    super();
-    this.onMount = decl.onMount || [];
-    this.onUnmount = decl.onUnmount || [];
-    this.onModelChange = decl.onModelChange || [];
-    this.#resolveHandler = resolveHandler;
-  }
-
-  dock(ctx) {
-    this.#ctx = ctx;
-
-    // Run onMount actions
-    for (const action of this.onMount) {
-      this.#run(action, ctx);
-    }
-
-    // Set up model watchers
-    const unwatchers = this.onModelChange.map((watcher) => {
-      let handler = () => this.#run(watcher, ctx);
-
-      // Debounce if specified
-      if (watcher.debounce > 0) {
-        const origHandler = handler;
-        let timer;
-        handler = () => {
-          clearTimeout(timer);
-          timer = setTimeout(origHandler, watcher.debounce);
-        };
-      }
-
-      return ctx.watchModel(watcher.path, handler);
-    });
-
-    return () => unwatchers.forEach(u => u());
-  }
-
-  undock() {
-    if (this.#ctx) {
-      for (const action of this.onUnmount) {
-        this.#run(action, this.#ctx);
-      }
-      this.#ctx = null;
-    }
-  }
-
-  async #run(action, ctx) {
-    const fn = this.#resolveHandler(action.handler);
-    if (fn) {
-      try { await fn(action.config || {}, ctx); }
-      catch (err) { console.warn(`LifecycleDock: ${action.handler} failed`, err); }
-    }
-  }
-}

package/a2ui/dockables/provider.js

@@ -1,59 +0,0 @@
-/**
- * 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/manifest-runtime.js

@@ -1,226 +0,0 @@
-/**
- * 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

@@ -1,200 +0,0 @@
-/**
- * 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);
-}