@adia-ai/web-components 0.0.3 → 0.0.5

package/README.md

@@ -44,40 +44,45 @@ web-components/
 │   ├── markdown.js      lightweight markdown renderer
 │   └── transport.js     SSE / streaming helpers for LLM adapters
 │
-├── components/     — 80 *-n custom elements
+├── components/     — 80 *-ui custom elements
 │   └── <tag>/
 │       ├── <tag>.js       class definition (extends AdiaElement)
 │       ├── <tag>.css      @scope(tag-ui) two-block: tokens + styles
 │       ├── <tag>.yaml     authoring contract (props, slots, events, examples)
 │       └── <tag>.a2ui.json  generated — do NOT edit
 │
-├── patterns/       — Higher-level compositions (tag: `adia-*`)
-│   ├── app-shell, app-nav, section-nav   — admin layout scaffolding
-│   ├── adia-chat, adia-editor, gen-ui    — LLM + editor + gen-UI patterns
-│   └── index.js                          — registers all patterns
+├── patterns/       — Higher-level compositions
+│   ├── app-shell, app-nav*, section-nav*  — admin layout scaffolding
+│   ├── adia-chat, adia-editor, gen-ui     — LLM + editor + gen-UI patterns
+│   ├── a2ui-root                          — A2UI declarative host (moved
+│   │                                        from a2ui/ in 0.0.4; pairs
+│   │                                        with @adia-ai/a2ui-utils)
+│   └── index.js                           — registers all patterns
 │
 ├── traits/         — 40 composable behaviors via defineTrait()
 │                     (pressable, focusTrap, confetti, resizable, …)
 │
-├── a2ui/           — A2UI runtime (renderer + wiring)
-│   ├── renderer.js         consumes A2UI JSON, stamps component trees
-│   ├── registry.js         component-name → class map (aliases included)
-│   ├── wiring-engine.js    binds controllers (toggle, form, data-stream)
-│   ├── wiring-registry.js  declarative event/data wiring catalog
-│   ├── surface.js          <canvas-ui> + <a2ui-root> hosts
-│   ├── stream.js           streamed-UI incremental hydration
-│   └── manifest-runtime.js surface manifest loader
+├── a2ui/           — deprecation shim for one release
+│   └── index.js            Re-exports @adia-ai/a2ui-utils with a
+│                           one-time console.warn. Removed in 0.1.0.
+│                           All actual A2UI runtime code (renderer,
+│                           registry, streams, surface manifest,
+│                           wiring, dockables, controllers) lives in
+│                           `@adia-ai/a2ui-utils` at packages/a2ui/utils/.
 │
-├── styles/         — Global tokens and CSS layering
-│   ├── tokens.css              all --a-* design tokens
-│   ├── colors/                 primitives / semantics / scrims
-│   ├── typography.css, space.css, radius.css, shadow.css
-│   └── themes/*.css            8 themes (ocean, forest, sunset, …)
-│
-└── scripts/        — Build + dev utilities
-    └── build-components.mjs    YAML → .a2ui.json per-component
+└── styles/         — Global tokens and CSS layering
+    ├── tokens.css              all --a-* design tokens
+    ├── colors/                 primitives / semantics / scrims
+    ├── typography.css, space.css, radius.css, shadow.css
+    └── themes/*.css            8 themes (ocean, forest, sunset, …)
 ```
 
+Build + dev utilities (including `build-a2ui-data.mjs`, `qa-training.mjs`,
+`a2ui-to-html.cjs`, `mcp-call.cjs`, `mcp-pipeline.cjs`, `screenshot.cjs`)
+live at the repo-root `scripts/` directory rather than inside this
+package — they span the monorepo (MCP server, gen-ui-training data,
+component catalog) and aren't scoped to web-components alone.
+
 ## Component contract
 
 Every component is a single-file class extending `AdiaElement` (or
@@ -133,7 +138,9 @@ examples.
 ## A2UI runtime
 
 ```javascript
-import { A2UIRenderer } from '@adia-ai/web-components/a2ui';
+import { A2UIRenderer } from '@adia-ai/a2ui-utils';
+// (The old `@adia-ai/web-components/a2ui` subpath still resolves in 0.0.4
+// via a deprecation shim that prints a console.warn; removed in 0.1.0.)
 
 const renderer = new A2UIRenderer({ target: document.getElementById('canvas') });
 renderer.apply({

package/a2ui/index.js

@@ -2,7 +2,7 @@
  * DEPRECATED — the `@adia-ai/web-components/a2ui` subpath.
  *
  * The A2UI runtime was extracted into its own package `@adia-ai/a2ui-utils`
- * in 0.0.3. This file is a temporary re-export shim for one release so
+ * in 0.0.4. This file is a temporary re-export shim for one release so
  * existing consumers don't break on upgrade. It will be removed in 0.1.0.
  *
  * Migrate:

package/components/chat/chat.css

@@ -10,8 +10,7 @@
     --chat-messages-padding:      var(--a-space-4);
     --chat-messages-gap:          var(--a-space-3);
     --chat-footer-padding:        var(--a-space-3);
-    /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --chat-footer-min-height:     36px;
+    --chat-footer-min-height:     var(--a-chrome-pane-footer-height);
 
     /* ── Motion ── */
     --chat-cursor-duration:       0.8s;

package/components/code/code.css

@@ -45,6 +45,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    min-height: var(--a-chrome-pane-header-height);
     padding: var(--code-py) var(--code-px);
     background: var(--code-header-bg);
     border-bottom: 1px solid var(--code-border);
@@ -112,6 +113,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    min-height: var(--a-chrome-pane-footer-height);
     padding: var(--code-py) var(--code-px);
     background: var(--code-header-bg);
     border-top: 1px solid var(--code-border);

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

@@ -5,7 +5,7 @@
     --pane-border:          var(--a-border-subtle);
     --pane-radius:          var(--a-radius-lg);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-bar-height:      36px;
+    --pane-bar-height:      var(--a-chrome-pane-header-height);
     --pane-header-px:       var(--a-space-3);
     --pane-header-py:       var(--a-space-2);
     --pane-header-fg:       var(--a-fg);
@@ -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;
@@ -76,7 +93,7 @@
 
   /* Collapse indicator — stamped by JS as icon-ui */
   > header > [slot="chevron"] {
-    --a-icon-size: 0.5rem;
+    --a-icon-size: var(--a-caret-size);
     flex-shrink: 0;
     margin-inline-start: auto;
     color: var(--pane-chevron-fg);
@@ -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.3",
+  "version": "0.0.5",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
@@ -28,7 +28,7 @@
     "./core/provider.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-utils": "^0.0.1"
+    "@adia-ai/a2ui-utils": "^0.0.2"
   },
   "publishConfig": {
     "access": "public",

package/patterns/adia-chat/css/adia-chat.tokens.css

@@ -9,7 +9,7 @@
   --chat-radius:                unset;
 
   /* Header */
-  --chat-header-height:         48px;
+  --chat-header-height:         var(--a-chrome-app-header-height);
   --chat-header-px:             var(--a-space-4);
   --chat-header-gap:            var(--a-space-2);
   --chat-header-border:         1px solid var(--a-border-subtle);

package/patterns/adia-editor/adia-editor.a2ui.json

@@ -39,8 +39,20 @@
       "Toolbar"
     ],
     "slots": {
+      "description": {
+        "description": "Secondary metadata inside <header> or <footer> — document name, artboard size, zoom level, etc. Muted color, --a-ui-sm size."
+      },
       "default": {
         "description": "Author provides header, [data-editor-body] wrapping pane-ui[data-left], [data-canvas], pane-ui[data-right], and an optional footer."
+      },
+      "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."
+      },
+      "heading": {
+        "description": "Primary label inside <header> or <footer>. Rendered with --editor-title-weight + the strong foreground token."
+      },
+      "icon": {
+        "description": "Leading glyph inside <header> or <footer> — status dot, app icon, zoom badge, etc. Muted color, size-aware."
       }
     },
     "states": [

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

@@ -20,6 +20,23 @@ slots:
     description: >-
       Author provides header, [data-editor-body] wrapping pane-ui[data-left],
       [data-canvas], pane-ui[data-right], and an optional footer.
+  icon:
+    description: >-
+      Leading glyph inside <header> or <footer> — status dot, app icon,
+      zoom badge, etc. Muted color, size-aware.
+  heading:
+    description: >-
+      Primary label inside <header> or <footer>. Rendered with
+      --editor-title-weight + the strong foreground token.
+  description:
+    description: >-
+      Secondary metadata inside <header> or <footer> — document name,
+      artboard size, zoom level, etc. Muted color, --a-ui-sm size.
+  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.
 
 states:
   - name: idle

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

@@ -20,7 +20,16 @@ adia-editor-ui {
   background: var(--editor-bg);
 }
 
-/* ── Top bar ── */
+/* ── Top bar ──
+   Slot contract (shared with > footer below):
+     [slot="icon"]        leading glyph (status dot, app icon, etc.)
+     [slot="heading"]     primary label; strong-weight token
+     [slot="description"] secondary metadata; muted
+     [slot="action"]      trailing control cluster; first pushes to end
+   Authors may also place raw inline content (spans, buttons) directly
+   — those flow in source order. `[data-title]` / `<span data-spacer>`
+   are kept working for one release as deprecated hooks; migrate to
+   slots. */
 adia-editor-ui > header {
   display: flex;
   align-items: center;
@@ -33,11 +42,36 @@ adia-editor-ui > header {
   flex-shrink: 0;
 }
 
-adia-editor-ui > header [data-title] {
+adia-editor-ui > header [data-title],
+adia-editor-ui > header > [slot="heading"] {
   font-weight: var(--editor-title-weight);
   color: var(--editor-bar-fg-strong);
 }
 
+adia-editor-ui > header > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--editor-bar-fg);
+}
+
+adia-editor-ui > header > [slot="description"] {
+  color: var(--editor-bar-fg);
+  font-size: var(--a-ui-sm);
+}
+
+adia-editor-ui > header > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+adia-editor-ui > header > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+
 /* ── Body: pane | canvas | pane ── */
 adia-editor-ui > [data-editor-body] {
   display: flex;
@@ -72,7 +106,11 @@ adia-editor-ui pane-ui[data-right] {
   width: var(--editor-pane-width-right);
 }
 
-/* ── Bottom bar ── */
+/* ── Bottom bar ──
+   Same slot contract as > header above (icon / heading / description
+   / action). Statusbar is structurally identical to the topbar —
+   both are 36px-min chrome bands with left-aligned label content and
+   a trailing action cluster. */
 adia-editor-ui > footer {
   display: flex;
   align-items: center;
@@ -84,3 +122,32 @@ adia-editor-ui > footer {
   color: var(--editor-bar-fg);
   flex-shrink: 0;
 }
+
+adia-editor-ui > footer > [slot="heading"] {
+  font-weight: var(--editor-title-weight);
+  color: var(--editor-bar-fg-strong);
+}
+
+adia-editor-ui > footer > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--editor-bar-fg);
+}
+
+adia-editor-ui > footer > [slot="description"] {
+  color: var(--editor-bar-fg);
+  font-size: var(--a-ui-sm);
+}
+
+adia-editor-ui > footer > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+adia-editor-ui > footer > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}

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

@@ -8,7 +8,7 @@
   --editor-border:          1px solid var(--a-border-subtle);
 
   /* Top/bottom bars */
-  --editor-bar-height:      36px;
+  --editor-bar-height:      var(--a-chrome-pane-header-height);
   --editor-bar-px:          var(--a-space-3);
   --editor-bar-gap:         var(--a-space-2);
   --editor-bar-font:        var(--a-ui-size);

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,20 @@
       "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."
+      },
+      "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,23 @@ 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.
 
 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,31 @@ 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;
+}
+
 /* ── Main > section (scroll container) ──
    Wraps [data-content-root]. Scrolls vertically, hides scrollbar. */
 app-shell-ui > main > section {
@@ -39,7 +76,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 +94,34 @@ 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;
+}

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,36 @@
   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;
+}
+
 /* ── Sidebar section (scrollable body) ── */
 [data-sidebar] > section {
   flex: 1;

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

@@ -19,7 +19,7 @@
   --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
 
   /* Header / footer bars — shared by topbar + bottombar */
-  --page-header-height:     48px;
+  --page-header-height:     var(--a-chrome-app-header-height);
   --page-header-px:         var(--a-space-3);
   --page-header-gap:        var(--a-space-3);
   --page-header-font:       var(--a-ui-size);
@@ -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;

package/styles/tokens.css

@@ -102,6 +102,18 @@
   --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
   --a-size: var(--a-size-md);
 
+  /* ── Chrome heights — global app/feature UI ──
+     App-level chrome (top-level headers, footers, toolbars) is 48px;
+     pane-level chrome (pane headers, footers, toolbars) is 36px.
+     Fixed values — these are structural measurements, not typographic,
+     so they don't scale with --a-density. */
+  --a-chrome-app-header-height:   48px;
+  --a-chrome-app-footer-height:   48px;
+  --a-chrome-app-toolbar-height:  48px;
+  --a-chrome-pane-header-height:  36px;
+  --a-chrome-pane-footer-height:  36px;
+  --a-chrome-pane-toolbar-height: 36px;
+
   /* ── Toggle-control size (check, radio, switch) ──
      Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
   --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */

package/patterns/adia-chat/index.html

@@ -1,93 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AdiaUI — Chat</title>
-  <link rel="stylesheet" href="../../styles/tokens.css" />
-  <link rel="stylesheet" href="../../styles/styles.css" />
-  <link rel="stylesheet" href="adia-chat.css" />
-  <style>
-    body {
-      font-family: var(--a-font-family);
-      margin: 0;
-      height: 100dvh;
-      display: flex;
-      flex-direction: column;
-    }
-  </style>
-</head>
-<body>
-
-<adia-chat-ui id="chat" proxy-url="/api/chat" model="claude-haiku-4-5-20251001"
-  style="flex:1; border:none; border-radius:0;">
-  <header>
-    <span data-chat-name>Factory Chat</span>
-    <span data-chat-status></span>
-  </header>
-  <section data-chat-messages>
-    <empty-state-ui data-chat-empty icon="chat-circle"
-      heading="AdiaUI Chat"
-      description="Type a message to start a conversation. Connects to LLM model via proxy if available.">
-    </empty-state-ui>
-  </section>
-  <footer>
-    <chat-input-ui data-chat-input placeholder="Message Claude..."></chat-input-ui>
-  </footer>
-</adia-chat-ui>
-
-<script type="module">
-  import '../../components/index.js';
-  import '../../patterns/index.js';
-
-  const chat = document.getElementById('chat');
-
-  // Wire the model picker inside chat-input-ui. Same list as
-  // /site/playground/gen-ui — extract to a shared constant when a third
-  // consumer appears.
-  customElements.whenDefined('chat-input-ui').then(() => {
-    const chatInput = chat.querySelector('[data-chat-input]');
-    if (!chatInput) return;
-    chatInput.models = [
-      { label: 'Anthropic', options: [
-        { value: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5' },
-        { value: 'claude-sonnet-4-6',          label: 'Sonnet 4.6' },
-      ]},
-      { label: 'OpenAI', options: [
-        { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
-      ]},
-      { label: 'Google', options: [
-        { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
-      ]},
-    ];
-    chatInput.model = 'claude-haiku-4-5-20251001';
-    // Keep <adia-chat-ui>'s `model` attribute in lockstep with the chat-input
-    // picker so every send uses the user's current selection.
-    chatInput.addEventListener('change', () => {
-      if (chatInput.model) chat.setAttribute('model', chatInput.model);
-    });
-  });
-
-  // Test proxy availability — fallback to simulated if not running
-  fetch('/api/chat', { method: 'OPTIONS' }).catch(() => {
-    chat.removeAttribute('proxy-url');
-    const empty = chat.querySelector('[data-chat-empty]');
-    if (empty) empty.setAttribute('description', 'No API proxy detected. Run `node server.js` with API keys. Responses are simulated.');
-
-    chat.addEventListener('submit', async (e) => {
-      const { text } = e.detail;
-      chat.appendMessage({ role: 'user', content: text });
-      chat.appendMessage({ role: 'assistant', content: '' });
-      chat.startStreaming();
-
-      const response = `You said: "${text}"\n\nThis is a **simulated** response.\n\n\`\`\`js\nconsole.log("Hello from AdiaUI!");\n\`\`\`\n\nStart the proxy with \`node server.js\` for real LLM responses.`;
-      for (const char of response) {
-        await new Promise(r => setTimeout(r, 12));
-        chat.appendChunk(char);
-      }
-      chat.stopStreaming();
-    });
-  });
-</script>
-</body>
-</html>

package/patterns/adia-editor/index.html

@@ -1,179 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AdiaUI — Editor</title>
-  <link rel="stylesheet" href="../../styles/tokens.css" />
-  <link rel="stylesheet" href="../../styles/styles.css" />
-  <link rel="stylesheet" href="adia-editor.css" />
-  <style>
-    body {
-      font-family: var(--a-font-family);
-      margin: 0;
-      height: 100dvh;
-      display: flex;
-      flex-direction: column;
-    }
-  </style>
-</head>
-<body>
-
-<adia-editor-ui style="flex:1;">
-  <header>
-    <span data-title>AdiaUI</span>
-    <span data-spacer></span>
-    <button-ui icon="moon" variant="ghost" size="sm"></button-ui>
-    <button-ui icon="gear" variant="ghost" size="sm"></button-ui>
-  </header>
-
-  <div data-editor-body>
-
-    <!-- ═══ LEFT PANE — Navigator ═══ -->
-    <pane-ui data-left resizable>
-      <header>Navigator</header>
-      <section>
-        <header>Layers</header>
-        <tree-ui>
-          <tree-item-ui text="Page" icon="folder">
-            <tree-item-ui text="Header" icon="folder">
-              <tree-item-ui text="Logo" icon="folder"></tree-item-ui>
-              <tree-item-ui text="Nav" icon="folder">
-                <tree-item-ui text="Home" icon="folder"></tree-item-ui>
-                <tree-item-ui text="About" icon="folder"></tree-item-ui>
-                <tree-item-ui text="Contact" icon="folder"></tree-item-ui>
-              </tree-item-ui>
-            </tree-item-ui>
-            <tree-item-ui text="Hero" icon="folder">
-              <tree-item-ui text="Heading" icon="folder"></tree-item-ui>
-              <tree-item-ui text="Subheading" icon="folder"></tree-item-ui>
-              <tree-item-ui text="CTA Button" icon="folder"></tree-item-ui>
-            </tree-item-ui>
-            <tree-item-ui text="Card Grid" icon="folder">
-              <tree-item-ui text="Card 1" icon="folder"></tree-item-ui>
-              <tree-item-ui text="Card 2" icon="folder"></tree-item-ui>
-              <tree-item-ui text="Card 3" icon="folder"></tree-item-ui>
-            </tree-item-ui>
-            <tree-item-ui text="Footer" icon="folder">
-              <tree-item-ui text="Links" icon="folder"></tree-item-ui>
-              <tree-item-ui text="Copyright" icon="folder"></tree-item-ui>
-            </tree-item-ui>
-          </tree-item-ui>
-        </tree-ui>
-      </section>
-    </pane-ui>
-
-    <!-- ═══ CANVAS ═══ -->
-    <div data-canvas>Canvas</div>
-
-    <!-- ═══ RIGHT PANE — Inspector ═══ -->
-    <pane-ui data-right resizable>
-      <header>Inspector</header>
-
-      <section>
-        <header>Layout</header>
-        <div data-col style="padding:var(--a-space-2);">
-          <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
-            <input-ui prefix="X" placeholder="0" suffix="px"></input-ui>
-            <input-ui prefix="Y" placeholder="0" suffix="px"></input-ui>
-            <input-ui prefix="W" placeholder="auto" suffix="px"></input-ui>
-            <input-ui prefix="H" placeholder="auto" suffix="px"></input-ui>
-          </div>
-          <select-ui id="display-select" label="Display" placeholder="block"></select-ui>
-          <select-ui id="position-select" label="Position" placeholder="relative"></select-ui>
-        </div>
-      </section>
-
-      <section>
-        <header>Spacing</header>
-        <div data-col style="padding:var(--a-space-2);">
-          <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
-            <range-ui label="Padding" value="16" min="0" max="64" step="1" suffix="px"></range-ui>
-            <range-ui label="Margin" value="0" min="0" max="64" step="1" suffix="px"></range-ui>
-            <range-ui label="Gap" value="8" min="0" max="48" step="1" suffix="px"></range-ui>
-            <range-ui label="Radius" value="6" min="0" max="32" step="1" suffix="px"></range-ui>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <header>Typography</header>
-        <div data-col style="padding:var(--a-space-2);">
-          <select-ui id="font-select" label="Family" placeholder="GT Standard"></select-ui>
-          <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
-            <range-ui label="Size" value="14" min="8" max="72" step="1" suffix="px"></range-ui>
-            <range-ui label="Weight" value="400" min="100" max="900" step="100"></range-ui>
-            <range-ui label="Leading" value="1.5" min="0.8" max="2.5" step="0.05"></range-ui>
-            <range-ui label="Tracking" value="0" min="-0.05" max="0.1" step="0.005" suffix="em"></range-ui>
-          </div>
-          <segmented-ui value="left">
-            <segment-ui value="left" text="Left"></segment-ui>
-            <segment-ui value="center" text="Center"></segment-ui>
-            <segment-ui value="right" text="Right"></segment-ui>
-          </segmented-ui>
-        </div>
-      </section>
-
-      <section>
-        <header>Appearance</header>
-        <div data-col style="padding:var(--a-space-2);">
-          <input-ui label="Background" placeholder="#000000" prefix="#"></input-ui>
-          <input-ui label="Border" placeholder="none"></input-ui>
-          <range-ui label="Opacity" value="1" min="0" max="1" step="0.01"></range-ui>
-          <select-ui id="overflow-select" label="Overflow" placeholder="visible"></select-ui>
-        </div>
-      </section>
-
-      <footer>
-        <button-ui text="Apply" variant="primary" stretch></button-ui>
-      </footer>
-    </pane-ui>
-
-  </div>
-
-  <footer>
-    <span>Ready</span>
-    <span data-spacer></span>
-    <span>1280 × 800</span>
-    <span>100%</span>
-  </footer>
-</adia-editor-ui>
-
-<script type="module">
-  import '../../components/index.js';
-  import '../../patterns/index.js';
-
-  customElements.whenDefined('select-ui').then(() => {
-    document.getElementById('display-select').options = [
-      { value: 'block', label: 'Block' },
-      { value: 'flex', label: 'Flex' },
-      { value: 'grid', label: 'Grid' },
-      { value: 'inline', label: 'Inline' },
-      { value: 'none', label: 'None' },
-    ];
-    document.getElementById('position-select').options = [
-      { value: 'relative', label: 'Relative' },
-      { value: 'absolute', label: 'Absolute' },
-      { value: 'fixed', label: 'Fixed' },
-      { value: 'sticky', label: 'Sticky' },
-    ];
-    document.getElementById('font-select').options = [
-      { label: 'Sans', options: [
-        { value: 'gt-standard', label: 'GT Standard' },
-        { value: 'supply-sans', label: 'Supply Sans' },
-      ]},
-      { label: 'Mono', options: [
-        { value: 'gt-standard-mono', label: 'GT Standard Mono' },
-        { value: 'supply-mono', label: 'Supply Mono' },
-      ]},
-    ];
-    document.getElementById('overflow-select').options = [
-      { value: 'visible', label: 'Visible' },
-      { value: 'hidden', label: 'Hidden' },
-      { value: 'auto', label: 'Auto' },
-      { value: 'scroll', label: 'Scroll' },
-    ];
-  });
-</script>
-</body>
-</html>

package/patterns/app-shell/index.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AdiaUI — App Shell</title>
-  <link rel="stylesheet" href="../../styles/tokens.css" />
-  <link rel="stylesheet" href="../../styles/styles.css" />
-  <link rel="stylesheet" href="app-shell.css" />
-  <link rel="stylesheet" href="app-nav.css" />
-</head>
-<body>
-<app-shell-ui mode="rounded borderless">
-
-<!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->
-<aside data-sidebar="leading">
-  <header>
-    <select-ui id="workspace-select" avatar="" value="adia-ui" variant="ghost" style="flex:1"></select-ui>
-  </header>
-
-  <section>
-    <app-nav-ui id="nav">
-      <app-nav-item-ui icon="magnifying-glass" text="Search" value="search">
-        <span slot="icon"><icon-ui name="magnifying-glass"></icon-ui></span>
-        <span slot="text">Search</span>
-      </app-nav-item-ui>
-      <hr data-nav-divider />
-      <app-nav-group-ui icon="house" text="Home">
-        <app-nav-item-ui text="Dashboard" value="dashboard" selected></app-nav-item-ui>
-        <app-nav-item-ui text="Analytics" value="analytics"></app-nav-item-ui>
-        <app-nav-item-ui text="Reports" value="reports"></app-nav-item-ui>
-      </app-nav-group-ui>
-      <app-nav-group-ui icon="gear" text="Settings">
-        <app-nav-item-ui text="General" value="general"></app-nav-item-ui>
-        <app-nav-item-ui text="Team" value="team"></app-nav-item-ui>
-        <app-nav-item-ui text="Billing" value="billing"></app-nav-item-ui>
-      </app-nav-group-ui>
-    </app-nav-ui>
-  </section>
-
-  <footer>
-    <select-ui id="user-select" avatar="https://i.pravatar.cc/32?u=demo" value="demo" variant="ghost" style="flex:1"></select-ui>
-  </footer>
-  <div data-resize></div>
-</aside>
-
-<!-- ═══════════════ MAIN ═══════════════ -->
-<main>
-  <header>
-    <button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"></button-ui>
-    <breadcrumb-ui>
-      <a href="#">Home</a>
-      <span>Dashboard</span>
-    </breadcrumb-ui>
-    <span data-spacer></span>
-    <div data-actions>
-      <button-ui icon="moon" variant="ghost" size="sm"></button-ui>
-    </div>
-  </header>
-
-  <section>
-    <article data-content-root>
-      <div data-content-header>
-        <header>
-          <div>
-            <h1>Dashboard</h1>
-            <div data-actions>
-              <button-ui text="Export" variant="outline" size="sm"></button-ui>
-            </div>
-          </div>
-          <p>Welcome back. Here's what's happening.</p>
-        </header>
-      </div>
-      <div data-content-body>
-        <section data-tab-content>
-          <p style="color:var(--a-fg-muted); text-align:center;">
-            App Shell pattern demo. Resize the sidebar, toggle collapse, and explore the navigation.
-          </p>
-        </section>
-      </div>
-    </article>
-  </section>
-
-  <footer>
-    <span>AdiaUI App Shell</span>
-    <span data-spacer></span>
-    <span>v0.1.0</span>
-  </footer>
-</main>
-
-</app-shell-ui>
-
-<script type="module">
-  import '../../components/index.js';
-  import '../../patterns/index.js';
-
-  customElements.whenDefined('select-ui').then(() => {
-    document.getElementById('workspace-select').options = [
-      { label: 'Workspaces', options: [
-        { value: 'adia-ui', icon: 'stack', label: 'AdiaUI' },
-        { value: 'acme', icon: 'chart-bar', label: 'Acme App' },
-      ]},
-    ];
-    document.getElementById('user-select').options = [
-      { header: true, avatar: 'https://i.pravatar.cc/32?u=demo', label: 'Demo User', description: 'demo@example.com' },
-      { separator: true },
-      { action: 'logout', icon: 'sign-out', label: 'Log out' },
-    ];
-  });
-</script>
-</body>
-</html>