@adia-ai/web-components 0.0.2 → 0.0.3

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);
-}