@adia-ai/web-components 0.0.6 → 0.0.8

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 } from '../../core/element.js';
 
 class AdiaModal extends AdiaElement {
   #bound = false;
@@ -55,7 +55,10 @@ class AdiaModal extends AdiaElement {
     footer: '<footer slot="footer"></footer>',
   };
 
-  static template = () => html``;
+  // No template — modal composes from authored light-DOM children. An empty
+  // html`` result would trigger stamp() → replaceChildren(), wiping authored
+  // [slot=body|footer] before render() can migrate them into the panel.
+  // (Same rationale as drawer.js — parallel pattern.)
 
   #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.open = false;

package/components/popover/popover.js

@@ -79,7 +79,9 @@ class AdiaPopover extends AdiaElement {
     const content = this.#content ?? this.querySelector('[slot="content"]');
     if (!trigger || !content) return;
 
-    if (!content.matches(':popover-open')) content.showPopover?.();
+    if (!content.matches(':popover-open')) {
+      try { content.showPopover(); } catch { /* popover API unavailable — anchor positioning still runs */ }
+    }
 
     this.#anchorCleanup?.();
     this.#anchorCleanup = anchorPopover(trigger, content, {
@@ -102,7 +104,9 @@ class AdiaPopover extends AdiaElement {
     this.#anchorCleanup = null;
 
     const content = this.#content ?? this.querySelector('[slot="content"]');
-    if (content?.matches(':popover-open')) content.hidePopover?.();
+    if (content?.matches(':popover-open')) {
+      try { content.hidePopover(); } catch { /* popover API unavailable */ }
+    }
 
     if (this.#rafId != null) {
       cancelAnimationFrame(this.#rafId);

package/core/icons.js

@@ -51,16 +51,59 @@ export function listIcons() {
 
 // ── Async loader ──
 
-// Vite resolves each glob at build time into a map of path → module.
-// One glob per weight so the bundler can tree-shake what isn't referenced.
-const 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' }),
-};
+// 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.
+//
+// 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: {} };
+
+// `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;
+}
+
+// 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)];
+    }));
+  }).catch(() => { /* keep EMPTY_WEIGHTS */ });
+}
 
 /**
  * Phosphor filename convention: `star.svg` for regular, `star-fill.svg` for

package/core/template.js

@@ -68,12 +68,21 @@ export function stamp(result, container) {
   update(inst.p, result.values);
 }
 
+// Safari 14.0 lacks ChildNode.replaceChildren. Fallback manually removes
+// existing children, then appends the new content. Runs once per call;
+// cheap enough to be unconditional.
+function replaceChildren(container, ...nodes) {
+  if (container.replaceChildren) { container.replaceChildren(...nodes); return; }
+  while (container.firstChild) container.removeChild(container.firstChild);
+  for (const n of nodes) container.appendChild(n);
+}
+
 function mount(result, container) {
   const { strings } = result;
   const tpl = getTemplate(strings);
   const f = tpl.content.cloneNode(true);
   const parts = scan(f, result.values.length);
-  container.replaceChildren(f);
+  replaceChildren(container, f);
   return { s: strings, p: parts };
 }
 
@@ -138,7 +147,7 @@ function applyValue(p, v) {
       stamp(v, wrap(p));
     } else if (Array.isArray(v)) {
       const c = wrap(p);
-      c.replaceChildren();
+      replaceChildren(c);
       for (const item of v) {
         if (isResult(item)) {
           const el = document.createElement('span');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/patterns/a2ui-root/a2ui-root.a2ui.json

@@ -26,6 +26,10 @@
     "component": {
       "const": "A2UIRoot"
     },
+    "doc": {
+      "description": "Author-driven mode — set to an array of A2UI messages and the renderer resets + replays them. No network/transport involvement. Setting to a new array triggers a full re-render. Use this for editors, previews, tests, and any static-doc authoring loop. When both `src` and `doc` are set, `doc` wins (the stream is not opened). Pass as a JS property; not reflected to an attribute.",
+      "type": "array"
+    },
     "loading": {
       "description": "True while the stream is connecting.",
       "type": "boolean",
@@ -71,6 +75,9 @@
       },
       "a2ui-message": {
         "description": "Fired for each A2UI message received. detail: { message }"
+      },
+      "doc-replaced": {
+        "description": "Fired after a full doc reset + replay in author-driven mode. detail: { count }"
       }
     },
     "examples": [],

package/patterns/a2ui-root/a2ui-root.js

@@ -5,12 +5,24 @@
  * <a2ui-root src="/api/agent" transport="sse"></a2ui-root>
  * <a2ui-root src="ws://localhost:8080" transport="ws"></a2ui-root>
  *
+ * Static / author-driven mode — set the `doc` property (array of A2UI messages)
+ * and the renderer resets + replays them. Editors and previews can drive the
+ * surface without opening a transport. Setting `doc` to a new array re-renders
+ * from scratch (reset() + processAll()).
+ *
+ *   const root = document.querySelector('a2ui-root');
+ *   root.doc = [
+ *     { type: 'createSurface', surfaceId: 'root', root: 'c-1' },
+ *     { type: 'updateComponents', components: [{ id: 'c-1', component: 'Heading', text: 'Hi' }] },
+ *   ];
+ *
  * Events:
  *   a2ui-connected — stream connected
  *   a2ui-message   — each message received (detail: { message })
  *   a2ui-error     — stream error (detail: { error })
  *   a2ui-closed    — stream ended
  *   a2ui-action    — user interaction (detail: { name, sourceComponentId, context })
+ *   doc-replaced   — fired after a full doc reset + replay (author-driven mode)
  */
 
 import { AdiaElement } from '../../core/element.js';
@@ -36,6 +48,7 @@ class AdiaA2UIRoot extends AdiaElement {
 
   #renderer = null;
   #abortCtrl = null;
+  #doc = null;
 
   connected() {
     this.#renderer = new A2UIRenderer(this, registry, { batch: this.batch });
@@ -136,6 +149,20 @@ class AdiaA2UIRoot extends AdiaElement {
     for (const msg of messages) this.process(msg);
   }
 
+  get doc() { return this.#doc; }
+  set doc(messages) {
+    this.#doc = Array.isArray(messages) ? messages : [];
+    if (!this.#renderer) {
+      this.#renderer = new A2UIRenderer(this, registry);
+    }
+    this.#renderer.reset();
+    for (const msg of this.#doc) this.#renderer.process(msg);
+    this.dispatchEvent(new CustomEvent('doc-replaced', {
+      bubbles: true,
+      detail: { count: this.#doc.length },
+    }));
+  }
+
   reset() {
     this.#renderer?.reset();
   }

package/patterns/a2ui-root/a2ui-root.yaml

@@ -35,6 +35,15 @@ props:
     description: Batch renderer updates via requestAnimationFrame for large fan-in.
     type: boolean
     default: false
+  doc:
+    description: >-
+      Author-driven mode — set to an array of A2UI messages and the renderer
+      resets + replays them. No network/transport involvement. Setting to a
+      new array triggers a full re-render. Use this for editors, previews,
+      tests, and any static-doc authoring loop. When both `src` and `doc` are
+      set, `doc` wins (the stream is not opened). Pass as a JS property; not
+      reflected to an attribute.
+    type: array
 events:
   a2ui-connected:
     description: Fired when the stream is established.
@@ -46,6 +55,8 @@ events:
     description: "Fired when the stream errors. detail: { error }"
   a2ui-closed:
     description: Fired when the stream ends.
+  doc-replaced:
+    description: "Fired after a full doc reset + replay in author-driven mode. detail: { count }"
 slots:
   default:
     description: The rendered surface. Children are stamped by the A2UI renderer.

package/traits/intersection-observer.js

@@ -6,6 +6,10 @@ export const intersectionObserver = defineTrait({
   events: ['element-visible', 'element-hidden'],
   config: ['data-intersection-threshold'],
   setup({ host }) {
+    // No-op in environments lacking IntersectionObserver (older Safari,
+    // happy-dom without polyfill). Trait becomes inert rather than throwing.
+    if (typeof IntersectionObserver === 'undefined') return () => {};
+
     const threshold = parseFloat(host.getAttribute('data-intersection-threshold')) || 0;
 
     const observer = new IntersectionObserver((entries) => {

package/traits/resize-observer.js

@@ -6,6 +6,11 @@ export const resizeObserver = defineTrait({
   events: ['element-resize'],
   config: [],
   setup({ host }) {
+    // Guard for older browsers + non-DOM test environments (happy-dom, jsdom
+    // without polyfill). The trait becomes a no-op rather than throwing on
+    // the `new ResizeObserver` call.
+    if (typeof ResizeObserver === 'undefined') return () => {};
+
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;