@adia-ai/web-components 0.0.5 → 0.0.7

package/components/card/card.css

@@ -335,6 +335,15 @@
     margin-inline-start: 0;
   }
 
+  /* Dual-cluster footer: leading action (e.g. Delete) on the inline-start
+     edge, trailing action cluster on the inline-end. margin-inline-end:
+     auto fills the gap between the two groups. */
+  > footer > [slot="action-leading"] {
+    margin-inline-end: auto;
+    display: flex;
+    gap: var(--card-footer-gap);
+  }
+
   /* ═══════ Images ═══════ */
 
   > img,

package/components/chat/chat-input.css

@@ -49,14 +49,20 @@
     border-color: var(--chat-input-border-focus);
   }
 
-  /* Textarea: no border/bg of its own — container handles it */
-  textarea-ui [slot="text"] {
+  /* Textarea: no border/bg of its own — container handles it. The
+     second selector keeps the transparent bg even when the host
+     textarea-ui carries [disabled] (streaming / submit lock) —
+     otherwise textarea.css's `:scope[disabled] [slot="text"]` rule
+     (specificity 0,3,0) paints --a-ui-bg-disabled over the container
+     bg. The `:scope` prefix boosts specificity to 0,3,1 so our rule
+     wins. */
+  textarea-ui [slot="text"],
+  :scope textarea-ui[disabled] [slot="text"] {
     border: none;
     background: transparent;
     border-radius: 0;
     box-shadow: none;
     max-height: 8rem;
-    /*min-height: var(--a-size-md);*/
     padding: var(--chat-input-textarea-pt) var(--chat-input-textarea-px) 0;
   }
 

package/components/chat/chat-input.js

@@ -23,7 +23,10 @@ import { AdiaElement } from '../../core/element.js';
  *   models       — JSON array of model options: [{value, label}] or [{label, options: [...]}]
  *   model        — currently selected model value (reflected, two-way with select)
  *   placeholder  — textarea placeholder
- *   disabled     — disable entire input
+ *   disabled     — disable entire input (textarea becomes contenteditable=false)
+ *   busy         — in-flight / streaming state: send button disabled, submit
+ *                  events suppressed, but textarea stays editable so the user
+ *                  can draft a follow-up while the model is still responding.
  *
  * Events:
  *   submit   — user pressed Enter or clicked send (detail: { text, model })
@@ -37,6 +40,7 @@ import { AdiaElement } from '../../core/element.js';
 class AdiaChatInput extends AdiaElement {
   static properties = {
     disabled:    { type: Boolean, default: false, reflect: true },
+    busy:        { type: Boolean, default: false, reflect: true },
     placeholder: { type: String,  default: 'Type a message...', reflect: true },
     model:       { type: String,  default: '', reflect: true },
   };
@@ -138,6 +142,9 @@ class AdiaChatInput extends AdiaElement {
       this.#textareaEl.disabled = this.disabled;
       this.#textareaEl.placeholder = this.placeholder;
     }
+    if (this.#sendEl) {
+      this.#sendEl.disabled = this.disabled || this.busy;
+    }
     // Sync model value to select (handles late upgrades)
     if (this.#modelEl && this.model && this.#modelEl.value !== this.model) {
       this.#modelEl.value = this.model;
@@ -154,7 +161,7 @@ class AdiaChatInput extends AdiaElement {
   };
 
   #onSubmit = () => {
-    if (this.disabled) return;
+    if (this.disabled || this.busy) return;
     const text = this.value;
     if (!text && !this.#attachments.length) return;
     this.dispatchEvent(new CustomEvent('submit', {

package/components/drawer/drawer.a2ui.json

@@ -97,7 +97,10 @@
         "description": "Direct child of <header> — grid row 2, spans the heading + action columns. Also accepts bare <p> / <small> tags."
       },
       "action": {
-        "description": "Direct child of <header> — placed in the grid's last column alongside the stamped close button. Flex container for badge + button combinations."
+        "description": "Direct child of <header> — placed in the grid's last column alongside the stamped close button. Flex container for badge + button combinations. In <footer>, self-aligns to the trailing (inline-end) edge; pair with `action-leading` for dual-cluster footers."
+      },
+      "action-leading": {
+        "description": "Direct child of <footer> — leading (inline-start) action cluster. Used for dual-cluster footers where a destructive or secondary action sits on the opposite edge from the primary trailing cluster (e.g. Delete ↔ Cancel/Save, Back ↔ Cancel/Next). Replaces the legacy <span data-spacer> hack."
       },
       "backdrop": {
         "description": "Scrim overlay behind the drawer (stamped by the component)."

package/components/drawer/drawer.css

@@ -339,4 +339,13 @@
   [slot="panel"] > [slot="footer"] > [slot="action"] ~ [slot="action"] {
     margin-inline-start: 0;
   }
+
+  /* Dual-cluster footer: leading action (e.g. Delete) on the inline-start
+     edge, trailing action cluster on the inline-end. The margin-inline-end:
+     auto on the leading slot fills the gap between the two groups. */
+  [slot="panel"] > [slot="footer"] > [slot="action-leading"] {
+    margin-inline-end: auto;
+    display: flex;
+    gap: var(--drawer-footer-gap);
+  }
 }

package/components/drawer/drawer.yaml

@@ -97,6 +97,15 @@ slots:
     description: >-
       Direct child of <header> — placed in the grid's last column alongside the
       stamped close button. Flex container for badge + button combinations.
+      In <footer>, self-aligns to the trailing (inline-end) edge; pair with
+      `action-leading` for dual-cluster footers.
+  action-leading:
+    description: >-
+      Direct child of <footer> — leading (inline-start) action cluster. Used
+      for dual-cluster footers where a destructive or secondary action sits on
+      the opposite edge from the primary trailing cluster (e.g. Delete ↔
+      Cancel/Save, Back ↔ Cancel/Next). Replaces the legacy <span data-spacer>
+      hack.
 states:
   - name: idle
     description: Default, ready for interaction.

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/core/icons.js

@@ -53,14 +53,17 @@ export function listIcons() {
 
 // 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 = {
+// In non-Vite environments (e.g. plain static serving) `import.meta.glob`
+// is undefined — fall back to empty maps so consumers using registerIcon()
+// still work.
+const weightModules = typeof import.meta.glob === 'function' ? {
   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' }),
-};
+} : { regular: {}, thin: {}, light: {}, bold: {}, fill: {}, duotone: {} };
 
 /**
  * Phosphor filename convention: `star.svg` for regular, `star-fill.svg` for

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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/patterns/adia-editor/adia-editor.a2ui.json

@@ -48,6 +48,9 @@
       "action": {
         "description": "Trailing control cluster inside <header> or <footer>. The first [slot=\"action\"] child pushes itself (and siblings) to the end of the bar; subsequent [slot=\"action\"] siblings flow with gap."
       },
+      "action-leading": {
+        "description": "Leading (inline-start) control cluster inside <header> or <footer>. Pairs with [slot=\"action\"] to produce a dual-cluster bar with space-between alignment (e.g. Back ↔ Cancel/Next, Discard ↔ Publish). Replaces the legacy <span data-spacer> hack."
+      },
       "heading": {
         "description": "Primary label inside <header> or <footer>. Rendered with --editor-title-weight + the strong foreground token."
       },

package/patterns/adia-editor/adia-editor.yaml

@@ -37,6 +37,12 @@ slots:
       Trailing control cluster inside <header> or <footer>. The first
       [slot="action"] child pushes itself (and siblings) to the end of
       the bar; subsequent [slot="action"] siblings flow with gap.
+  action-leading:
+    description: >-
+      Leading (inline-start) control cluster inside <header> or <footer>.
+      Pairs with [slot="action"] to produce a dual-cluster bar with
+      space-between alignment (e.g. Back ↔ Cancel/Next, Discard ↔
+      Publish). Replaces the legacy <span data-spacer> hack.
 
 states:
   - name: idle

package/patterns/adia-editor/css/adia-editor.layout.css

@@ -72,6 +72,15 @@ adia-editor-ui > header > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
 
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+adia-editor-ui > header > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
+
 /* ── Body: pane | canvas | pane ── */
 adia-editor-ui > [data-editor-body] {
   display: flex;
@@ -151,3 +160,12 @@ adia-editor-ui > footer > [slot="action"] {
 adia-editor-ui > footer > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
+
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+adia-editor-ui > footer > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}

package/patterns/app-shell/app-shell.a2ui.json

@@ -83,6 +83,9 @@
       "action": {
         "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap. Coexists with legacy <span data-spacer> / <div data-actions> hooks for one release — new code should prefer slots."
       },
+      "action-leading": {
+        "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right). Replaces the legacy <span data-spacer> hack."
+      },
       "heading": {
         "description": "Primary label inside any chrome bar. Medium-weight + strong fg."
       },

package/patterns/app-shell/app-shell.yaml

@@ -56,6 +56,12 @@ slots:
       subsequent siblings flow with gap. Coexists with legacy
       <span data-spacer> / <div data-actions> hooks for one release —
       new code should prefer slots.
+  action-leading:
+    description: >-
+      Leading (inline-start) control cluster inside any chrome bar.
+      Pairs with [slot="action"] for dual-cluster chrome (e.g. back
+      button + breadcrumb on the left, primary actions on the right).
+      Replaces the legacy <span data-spacer> hack.
 
 states:
   - name: idle

package/patterns/app-shell/css/app-shell.main.css

@@ -61,6 +61,14 @@ app-shell-ui > main > header > [slot="action"] {
 app-shell-ui > main > header > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+app-shell-ui > main > header > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
 
 /* ── Main > section (scroll container) ──
    Wraps [data-content-root]. Scrolls vertically, hides scrollbar. */
@@ -125,3 +133,11 @@ app-shell-ui > main > footer > [slot="action"] {
 app-shell-ui > main > footer > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+app-shell-ui > main > footer > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}

package/patterns/app-shell/css/app-shell.sidebar.css

@@ -118,6 +118,15 @@
 [data-sidebar] > footer > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+[data-sidebar] > header > [slot="action-leading"],
+[data-sidebar] > footer > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
 
 /* ── Sidebar section (scrollable body) ── */
 [data-sidebar] > section {