@adia-ai/web-components 0.0.3 → 0.0.4

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.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);
@@ -76,7 +76,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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-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);

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>