@adia-ai/web-components 0.0.4 → 0.0.6

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/pane/pane.a2ui.json

@@ -35,6 +35,16 @@
       "description": "Component property: resizable.",
       "type": "boolean",
       "default": false
+    },
+    "side": {
+      "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable).\n",
+      "type": "string",
+      "enum": [
+        "",
+        "leading",
+        "trailing"
+      ],
+      "default": ""
     }
   },
   "required": [

package/components/pane/pane.css

@@ -54,6 +54,23 @@
     overflow: hidden;
   }
 
+  /* Side-aware border treatment.
+     `leading`  — pane sits at the leading edge of a horizontal row, so
+                  the only visual separator it needs is on its trailing
+                  edge (right in LTR).
+     `trailing` — mirror: only a leading-edge border (left in LTR).
+     Default (no side attr) keeps the full 4-sided border. */
+  :scope[side="leading"],
+  :scope[side="trailing"] {
+    border: none;
+  }
+  :scope[side="leading"] {
+    border-inline-end: 1px solid var(--pane-border);
+  }
+  :scope[side="trailing"] {
+    border-inline-start: 1px solid var(--pane-border);
+  }
+
   /* ── Pane header ── */
   > header {
     display: flex;
@@ -101,16 +118,23 @@
     display: none;
   }
 
-  /* Section header */
+  /* Section header — section's padding is the single source of horizontal inset;
+     content inside the section must not add its own padding. */
   > section > header {
     font-size: var(--pane-section-header-size);
     color: var(--pane-section-header-fg);
-    padding-bottom: var(--pane-gap-xs);
+    padding-bottom: var(--pane-col-gap);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     font-weight: var(--pane-section-header-weight);
   }
 
+  /* Defensive: a data-col directly under a section inherits the section's inset;
+     adding its own padding would compound and misalign with the section header. */
+  > section > [data-col] {
+    padding: 0;
+  }
+
   /* Section divider between sections */
   > section + section {
     border-top: 1px solid var(--pane-border);
@@ -143,11 +167,16 @@
     border-bottom: none;
   }
 
-  /* ── Resize handle ── */
+  /* ── Resize handle ──
+     Default (no side) positions the grabber on the right edge. When
+     `side="trailing"` is set, flip the grabber to the left edge so it
+     sits on the pane's "inner" side (where it meets the sibling
+     content/pane in a horizontal row). `inset-inline-*` lets the rules
+     stay LTR/RTL-safe. */
   [slot="resize"] {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     width: var(--pane-resize-width);
     cursor: col-resize;
@@ -156,6 +185,11 @@
     z-index: 1;
   }
 
+  :scope[side="trailing"] > [slot="resize"] {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+  }
+
   [slot="resize"]:hover {
     background: var(--pane-resize-fg-hover);
   }

package/components/pane/pane.js

@@ -19,6 +19,12 @@
  *   resizable    — boolean, enables drag-to-resize (width)
  *   min-width    — minimum width when resizing (default: 200)
  *   max-width    — maximum width when resizing (default: 600)
+ *   side         — 'leading' | 'trailing' | '' (default). When set, the
+ *                  pane is treated as a horizontal sibling: the default
+ *                  four-sided border is suppressed, only the inner-edge
+ *                  border is drawn, the resize grabber moves to that
+ *                  inner edge, and the resize-drag direction flips so
+ *                  trailing panes grow when dragged leftward.
  *
  * JS API:
  *   pane.collapsed = true/false
@@ -33,6 +39,7 @@ class AdiaPane extends AdiaElement {
     resizable:  { type: Boolean, default: false, reflect: true },
     minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
     maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
+    side:       { type: String,  default: '', reflect: true },
   };
 
   static template = () => null;
@@ -116,7 +123,12 @@ class AdiaPane extends AdiaElement {
 
   #onResizeMove = (e) => {
     if (!this.#dragging) return;
-    const dx = e.clientX - this.#startX;
+    // For a trailing pane the grabber sits on the LEFT edge but the pane
+    // is anchored on the RIGHT side of its flex row — dragging leftward
+    // should GROW the pane (grabber moves further left = more width),
+    // not shrink it. Negate dx in that case.
+    const sign = this.side === 'trailing' ? -1 : 1;
+    const dx = (e.clientX - this.#startX) * sign;
     const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
     this.style.width = `${w}px`;
   };

package/components/pane/pane.yaml

@@ -26,6 +26,18 @@ props:
     description: "Component property: resizable."
     type: boolean
     default: false
+  side:
+    description: |
+      Opts a pane into horizontal-sibling chrome: suppresses the default
+      four-sided border and moves the resize grabber to the inner edge
+      (right edge for `leading`, left edge for `trailing`). Also flips the
+      resize-drag direction so `trailing` panes grow when dragged leftward.
+      Unset keeps the pane-intrinsic chrome (full border, right-edge
+      grabber when resizable).
+    type: string
+    default: ""
+    enum: ["", leading, trailing]
+    reflect: true
 events: {}
 slots:
   header:

package/package.json

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

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-nav-group/app-nav-group.css

@@ -16,6 +16,9 @@
     --nav-group-bg-hover:      var(--a-bg-muted);
     --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
     --nav-group-badge-size:    var(--a-ui-sm);
+
+    --nav-item-child-height:    var(--a-size-sm);
+    --nav-item-child-font:      var(--nav-group-font-size);
   }
 
   :scope {

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

@@ -74,8 +74,23 @@
       "Command"
     ],
     "slots": {
+      "description": {
+        "description": "Secondary metadata inside any chrome bar. Muted + --a-ui-sm size."
+      },
       "default": {
         "description": "Author-supplied page DOM. Expected structure — aside[data-sidebar] for navigation, main for content, optional dialog[data-command] for Cmd+K."
+      },
+      "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."
+      },
+      "icon": {
+        "description": "Leading glyph inside any chrome bar — > main > header / footer and [data-sidebar] > header / footer. Muted color, flex-align."
       }
     },
     "states": [

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

@@ -39,6 +39,29 @@ slots:
     description: >-
       Author-supplied page DOM. Expected structure — aside[data-sidebar] for
       navigation, main for content, optional dialog[data-command] for Cmd+K.
+  icon:
+    description: >-
+      Leading glyph inside any chrome bar — > main > header / footer and
+      [data-sidebar] > header / footer. Muted color, flex-align.
+  heading:
+    description: >-
+      Primary label inside any chrome bar. Medium-weight + strong fg.
+  description:
+    description: >-
+      Secondary metadata inside any chrome bar. Muted + --a-ui-sm size.
+  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.
 
 states:
   - name: idle

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

@@ -13,7 +13,19 @@ app-shell-ui > main {
 }
 
 /* ── Main > header (topbar) ──
-   Contains: sidebar toggle, breadcrumb, spacer, action buttons */
+   Contains: sidebar toggle, breadcrumb, spacer, action buttons.
+
+   Slot contract (shared with > main > footer and [data-sidebar] >
+   header/footer) — identical to card-ui / drawer-ui / adia-editor-ui:
+     [slot="icon"]        leading glyph
+     [slot="heading"]     primary label; strong weight + strong fg
+     [slot="description"] secondary metadata; muted fg + --a-ui-sm
+     [slot="action"]      trailing cluster; first pushes to end
+   The legacy data-sidebar-toggle / breadcrumb-ui / <span data-spacer>
+   / <div data-actions> hooks (see app-shell.helpers.css) remain
+   fully supported — slots are additive, not a replacement. Use slots
+   for simpler chrome surfaces; keep breadcrumb + data-actions for
+   docs-style shells where those conventions carry semantic weight. */
 app-shell-ui > main > header {
   display: flex;
   align-items: center;
@@ -25,6 +37,39 @@ app-shell-ui > main > header {
   flex-shrink: 0;
 }
 
+app-shell-ui > main > header > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+app-shell-ui > main > header > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+app-shell-ui > main > header > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+app-shell-ui > main > header > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+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. */
 app-shell-ui > main > section {
@@ -39,7 +84,11 @@ app-shell-ui > main > section {
 app-shell-ui > main > section::-webkit-scrollbar { display: none; }
 
 /* ── Main > footer (status bar) ──
-   Last child auto-pushed to trailing edge via margin-inline-start: auto. */
+   Legacy pattern: last-child auto-pushed to trailing edge via
+   margin-inline-start: auto (works when authors use a simple
+   <span>…</span><span>version</span> shape).
+   Slot pattern: same icon / heading / description / action vocabulary
+   as > main > header (see comment block above). */
 app-shell-ui > main > footer {
   flex-shrink: 0;
   display: flex;
@@ -53,6 +102,42 @@ app-shell-ui > main > footer {
   color: var(--page-header-fg-muted);
 }
 
-app-shell-ui > main > footer > :last-child {
+/* Legacy: bare <span>…</span><span>version</span> shapes. Only kicks
+   in when NO slot="action" is present, so it doesn't fight the slot
+   rule below. */
+app-shell-ui > main > footer:not(:has(> [slot="action"])) > :last-child {
   margin-inline-start: auto;
 }
+
+app-shell-ui > main > footer > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+app-shell-ui > main > footer > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+app-shell-ui > main > footer > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+app-shell-ui > main > footer > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+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

@@ -60,7 +60,13 @@
   width: var(--page-sidebar-width-trailing);
 }
 
-/* ── Sidebar header / footer ── */
+/* ── Sidebar header / footer ──
+   Share the same slot contract as > main > header/footer (see
+   app-shell.main.css top-of-file comment): icon / heading /
+   description / action. Sidebar chromes are typically single-child
+   (a workspace-select or user-select) so the slot rules rarely come
+   into play — but they stay consistent for authors that compose
+   richer sidebar chromes. */
 [data-sidebar] > header,
 [data-sidebar] > footer {
   display: flex;
@@ -83,6 +89,45 @@
   border-top: var(--page-border);
 }
 
+[data-sidebar] > header > [slot="icon"],
+[data-sidebar] > footer > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+[data-sidebar] > header > [slot="heading"],
+[data-sidebar] > footer > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+[data-sidebar] > header > [slot="description"],
+[data-sidebar] > footer > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+[data-sidebar] > header > [slot="action"],
+[data-sidebar] > footer > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+[data-sidebar] > header > [slot="action"] ~ [slot="action"],
+[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 {
   flex: 1;

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

@@ -108,8 +108,6 @@
   --nav-item-trailing-border: var(--a-border-subtle);
   --nav-item-trailing-radius: var(--a-radius-sm);
   --nav-item-trailing-px:     var(--a-space-0-5);
-  --nav-item-child-height:    var(--a-size-sm);
-  --nav-item-child-font:      var(--a-ui-sm);
 
   /* Global icon size bump */
   --a-icon-size: 18px;