@adia-ai/web-components 0.0.25 → 0.0.26

package/components/index.js

@@ -24,7 +24,6 @@ export { AdiaSegmented } from './segmented/segmented.js';
 export { AdiaRange } from './range/range.js';
 export { AdiaTree, AdiaTreeItem } from './tree/tree.js';
 export { AdiaPane } from './pane/pane.js';
-export { AdiaAppShell } from './app-shell/app-shell.js';
 export { AdiaPage } from './page/page.js';
 export { AdiaChatInput } from './chat/chat-input.js';
 export { AdiaChat } from './chat/chat.js';

package/package.json

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

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

@@ -1,18 +1,6 @@
 /* ═══════════════════════════════════════════════════════════════
    App Shell — <app-shell-ui> pattern component CSS
 
-   ⚠ DEPRECATED PATH (2026-04-29): preserved as an alias for one
-   release while consumers migrate. The CSS now lives behind the
-   <app-shell-ui> custom element at
-   packages/web-components/components/app-shell/ and ships via
-   packages/web-components/styles/components.css.
-
-   Migration: drop the explicit <link rel="stylesheet"> to this file —
-   styles/components.css now bundles the same content via the new
-   component.
-
-   Companion ADR: ../../../../.brain/adrs/0009-promote-app-shell-and-page-to-components.md.
-
    Split into constituent parts for maintainability.
    Import order matters: tokens first, then structure, then overrides.
    ═══════════════════════════════════════════════════════════════ */

package/styles/components.css

@@ -26,7 +26,6 @@
 @import "../components/range/range.css";
 @import "../components/tree/tree.css";
 @import "../components/pane/pane.css";
-@import "../components/app-shell/app-shell.css";
 @import "../components/page/page.css";
 @import "../components/chat/chat-input.css";
 @import "../components/chat/chat.css";

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

@@ -1,136 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppShell.json",
-  "title": "AppShell",
-  "description": "Application shell layout. Holds a leading nav rail, a main column\n(topbar + scroll area + statusbar), an optional trailing inspector,\nand an optional command-palette `<dialog>`. The component wires\nsidebar toggle, sidebar resize, and Cmd+K shortcut on top of the\nlong-lived CSS pattern that already targets `app-shell-ui` as a tag.\nChildren use native HTML semantic elements (`<aside data-sidebar>`,\n`<main>`, `<header>`, `<section>`, `<footer>`); the existing\nCSS scopes by tag.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "cmdK": {
-      "description": "Installs a global Cmd+K / Ctrl+K listener that opens the inner\n`<dialog data-command>` via `showModal()`. No-op when no such\ndialog is present.\n",
-      "type": "boolean",
-      "default": false
-    },
-    "component": {
-      "const": "AppShell"
-    },
-    "leadingCollapsed": {
-      "description": "Reflects to the leading aside's `[data-collapsed]`. Toggled\nprogrammatically (`shell.toggleLeading()`) or via a click on any\nelement with `[data-sidebar-toggle=\"leading\"]` inside the shell.\n",
-      "type": "boolean",
-      "default": false
-    },
-    "leadingMaxWidth": {
-      "description": "Maximum leading-aside width (px) when resizing.",
-      "type": "number",
-      "default": 480
-    },
-    "leadingMinWidth": {
-      "description": "Minimum leading-aside width (px) when resizing.",
-      "type": "number",
-      "default": 48
-    },
-    "mode": {
-      "description": "Space-separated list of layout modes. `rounded` adds border-radius\nto the scroll section; `borderless` removes chrome borders (content\nborders persist). Pass both for a soft, edgeless shell.\n",
-      "type": "string",
-      "default": ""
-    },
-    "trailingCollapsed": {
-      "description": "Reflects to the trailing aside's `[data-collapsed]`. Toggled via\n`shell.toggleTrailing()` or `[data-sidebar-toggle=\"trailing\"]`.\n",
-      "type": "boolean",
-      "default": false
-    },
-    "trailingMaxWidth": {
-      "description": "Maximum trailing-aside width (px) when resizing.",
-      "type": "number",
-      "default": 480
-    },
-    "trailingMinWidth": {
-      "description": "Minimum trailing-aside width (px) when resizing.",
-      "type": "number",
-      "default": 48
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "container",
-    "events": {
-      "command-close": {
-        "description": "Fired after the command-palette `<dialog>` closes."
-      },
-      "command-open": {
-        "description": "Fired after the command-palette `<dialog>` opens."
-      },
-      "sidebar-toggle": {
-        "description": "Fired after a sidebar's collapsed state flips. Detail:\n`{ side: 'leading'|'trailing', collapsed: boolean }`.\n"
-      }
-    },
-    "examples": [
-      {
-        "description": "Documentation shell — leading nav, topbar with breadcrumb, scroll content, statusbar.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AppShell\",\n    \"mode\": \"rounded\",\n    \"cmdK\": true,\n    \"children\": [\"leading\", \"main\", \"cmd\"]\n  },\n  {\n    \"id\": \"leading\",\n    \"component\": \"Aside\",\n    \"data-sidebar\": \"leading\",\n    \"children\": [\"nav-hdr\", \"nav-list\", \"nav-ftr\"]\n  },\n  {\n    \"id\": \"nav-hdr\",\n    \"component\": \"Header\",\n    \"children\": []\n  },\n  {\n    \"id\": \"nav-list\",\n    \"component\": \"Section\",\n    \"children\": []\n  },\n  {\n    \"id\": \"nav-ftr\",\n    \"component\": \"Footer\",\n    \"children\": []\n  },\n  {\n    \"id\": \"main\",\n    \"component\": \"Column\",\n    \"children\": [\"topbar\", \"scroll\", \"statusbar\"]\n  },\n  {\n    \"id\": \"topbar\",\n    \"component\": \"Header\",\n    \"children\": []\n  },\n  {\n    \"id\": \"scroll\",\n    \"component\": \"Section\",\n    \"scroll\": true,\n    \"children\": []\n  },\n  {\n    \"id\": \"statusbar\",\n    \"component\": \"Footer\",\n    \"children\": []\n  },\n  {\n    \"id\": \"cmd\",\n    \"component\": \"Modal\",\n    \"data-command\": true,\n    \"children\": []\n  }\n]",
-        "name": "docs-shell"
-      }
-    ],
-    "keywords": [
-      "app-shell",
-      "shell",
-      "layout",
-      "sidebar",
-      "topbar",
-      "command-palette",
-      "cmdK",
-      "dashboard-shell"
-    ],
-    "name": "AdiaAppShell",
-    "related": [
-      "aside",
-      "header",
-      "footer",
-      "section",
-      "drawer",
-      "modal",
-      "command",
-      "app-nav",
-      "section-nav"
-    ],
-    "slots": {
-      "default": {
-        "description": "Composes from native HTML children: `<aside data-sidebar=\"leading\">`,\n`<main>` (with `<header>`, `<section>`, `<footer>` inside),\noptional `<aside data-sidebar=\"trailing\">`, optional\n`<dialog data-command>`. The existing pattern CSS scopes each\nchild by tag + attribute; no `slot=` attributes needed.\n"
-      }
-    },
-    "states": [
-      {
-        "description": "Default, ready for interaction.",
-        "name": "idle"
-      },
-      {
-        "description": "Leading aside collapsed via attribute / API.",
-        "name": "leading-collapsed"
-      },
-      {
-        "description": "Trailing aside collapsed via attribute / API.",
-        "name": "trailing-collapsed"
-      },
-      {
-        "description": "Command-palette dialog is showing.",
-        "name": "command-open"
-      }
-    ],
-    "synonyms": {},
-    "tag": "app-shell-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/components/app-shell/app-shell.css

@@ -1,16 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   <app-shell-ui> component CSS
-
-   The substantive CSS lives in `patterns/app-shell/css/*.css` —
-   that surface predates this component and already targets
-   `app-shell-ui` as a tag. We re-import it here so consumers
-   importing this component's CSS get the full styling without
-   duplication. A future cleanup may invert the relationship
-   (move the CSS into this folder and have the pattern import
-   from here, or retire the pattern folder entirely once all
-   consumers have migrated to the component).
-
-   Companion ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md
-   ═══════════════════════════════════════════════════════════════ */
-
-@import "../../patterns/app-shell/app-shell.css";

package/components/app-shell/app-shell.js

@@ -1,202 +0,0 @@
-/**
- * <app-shell-ui> — Application shell layout component.
- *
- * Promotes the long-lived `patterns/app-shell/` CSS pattern (which already
- * targeted `app-shell-ui` as a tag) to a real custom element. CSS continues
- * to live in `patterns/app-shell/app-shell.css` (re-imported from this
- * component's CSS); the JS layer adds:
- *
- *   - sidebar toggle (delegated [data-sidebar-toggle="leading|trailing"])
- *   - sidebar resize (pointer drag on [data-resize])
- *   - command-palette wiring (delegated [data-command-trigger] +
- *     optional Cmd+K global shortcut when [cmd-k])
- *
- * Authoring shape (consumer markup, unchanged from the pre-existing pattern):
- *
- *   <app-shell-ui mode="rounded borderless" cmd-k>
- *     <aside data-sidebar="leading">       <-- nav rail
- *       <header>...</header>
- *       <section>...</section>
- *       <footer>...</footer>
- *       <div data-resize></div>
- *     </aside>
- *     <main>
- *       <header>...</header>               <-- topbar
- *       <section>...</section>             <-- scroll area
- *       <footer>...</footer>               <-- statusbar
- *     </main>
- *     <aside data-sidebar="trailing">...</aside>   <!-- optional inspector -->
- *     <dialog data-command>                <!-- optional cmd palette -->
- *       <command-ui>...</command-ui>
- *     </dialog>
- *   </app-shell-ui>
- *
- * Attributes:
- *   mode                — space-separated list: "rounded" | "borderless" | both.
- *   leading-collapsed   — boolean, reflects to leading aside's [data-collapsed].
- *   trailing-collapsed  — boolean, reflects to trailing aside's [data-collapsed].
- *   cmd-k               — boolean, installs Cmd+K / Ctrl+K global listener
- *                         that opens the inner <dialog data-command> via
- *                         showModal(). No-op when no such dialog is present.
- *   leading-min-width   — minimum width when resizing leading sidebar (px).
- *   leading-max-width   — maximum width (px).
- *   trailing-min-width / trailing-max-width — same for trailing.
- *
- * API:
- *   shell.toggleLeading()   shell.toggleTrailing()
- *   shell.openCommand()     shell.closeCommand()
- *
- * Events (bubbling):
- *   sidebar-toggle  { detail: { side: 'leading'|'trailing', collapsed: boolean } }
- *   command-open    no detail
- *   command-close   no detail
- *
- * Spec: docs/specs/genui-multiturn-architecture.md (orthogonal — gen-UI uses
- * this layer). ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md.
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-const DEFAULT_MIN_WIDTH = 48;
-const DEFAULT_MAX_WIDTH = 480;
-
-class AdiaAppShell extends AdiaElement {
-  static properties = {
-    mode:               { type: String,  default: '',    reflect: true },
-    leadingCollapsed:   { type: Boolean, default: false, attribute: 'leading-collapsed',  reflect: true },
-    trailingCollapsed:  { type: Boolean, default: false, attribute: 'trailing-collapsed', reflect: true },
-    cmdK:               { type: Boolean, default: false, attribute: 'cmd-k',              reflect: true },
-    leadingMinWidth:    { type: Number,  default: DEFAULT_MIN_WIDTH, attribute: 'leading-min-width' },
-    leadingMaxWidth:    { type: Number,  default: DEFAULT_MAX_WIDTH, attribute: 'leading-max-width' },
-    trailingMinWidth:   { type: Number,  default: DEFAULT_MIN_WIDTH, attribute: 'trailing-min-width' },
-    trailingMaxWidth:   { type: Number,  default: DEFAULT_MAX_WIDTH, attribute: 'trailing-max-width' },
-  };
-
-  static template = () => null;
-
-  #bound = false;
-  #drag = null; // { aside, startX, startW, side }
-
-  connected() {
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('click', this.#onClick);
-      this.addEventListener('pointerdown', this.#onPointerDown);
-    }
-    document.addEventListener('keydown', this.#onKeydown);
-  }
-
-  disconnected() {
-    document.removeEventListener('keydown', this.#onKeydown);
-    document.removeEventListener('pointermove', this.#onResizeMove);
-    document.removeEventListener('pointerup', this.#onResizeUp);
-    this.#drag = null;
-  }
-
-  render() {
-    const leading = this.querySelector(':scope > aside[data-sidebar="leading"]');
-    if (leading) leading.toggleAttribute('data-collapsed', !!this.leadingCollapsed);
-    const trailing = this.querySelector(':scope > aside[data-sidebar="trailing"]');
-    if (trailing) trailing.toggleAttribute('data-collapsed', !!this.trailingCollapsed);
-  }
-
-  // ── API ─────────────────────────────────────────────────────────
-
-  toggleLeading() {
-    this.leadingCollapsed = !this.leadingCollapsed;
-    this.dispatchEvent(new CustomEvent('sidebar-toggle', {
-      bubbles: true,
-      detail: { side: 'leading', collapsed: this.leadingCollapsed },
-    }));
-  }
-
-  toggleTrailing() {
-    this.trailingCollapsed = !this.trailingCollapsed;
-    this.dispatchEvent(new CustomEvent('sidebar-toggle', {
-      bubbles: true,
-      detail: { side: 'trailing', collapsed: this.trailingCollapsed },
-    }));
-  }
-
-  openCommand() {
-    const dialog = this.querySelector(':scope > dialog[data-command]');
-    if (!dialog || dialog.open) return;
-    dialog.showModal();
-    this.dispatchEvent(new CustomEvent('command-open', { bubbles: true }));
-  }
-
-  closeCommand() {
-    const dialog = this.querySelector(':scope > dialog[data-command]');
-    if (!dialog || !dialog.open) return;
-    dialog.close();
-    this.dispatchEvent(new CustomEvent('command-close', { bubbles: true }));
-  }
-
-  // ── Delegated click ─────────────────────────────────────────────
-
-  #onClick = (e) => {
-    const toggle = e.target.closest('[data-sidebar-toggle]');
-    if (toggle && this.contains(toggle)) {
-      const side = toggle.getAttribute('data-sidebar-toggle');
-      if (side === 'leading') { this.toggleLeading(); return; }
-      if (side === 'trailing') { this.toggleTrailing(); return; }
-    }
-    const trigger = e.target.closest('[data-command-trigger]');
-    if (trigger && this.contains(trigger)) {
-      this.openCommand();
-    }
-  };
-
-  // ── Cmd+K / Ctrl+K ──────────────────────────────────────────────
-
-  #onKeydown = (e) => {
-    if (!this.cmdK) return;
-    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-      e.preventDefault();
-      this.openCommand();
-    }
-  };
-
-  // ── Resize handle ───────────────────────────────────────────────
-  // Pointerdown on a [data-resize] inside one of the asides starts a drag.
-  // Leading aside grows when dragged right; trailing aside grows when
-  // dragged left (mirrors `<pane-ui>[side]` semantics).
-
-  #onPointerDown = (e) => {
-    const handle = e.target.closest('[data-resize]');
-    if (!handle) return;
-    const aside = handle.closest(':scope > aside[data-sidebar]');
-    if (!aside || aside.parentElement !== this) return;
-
-    const side = aside.getAttribute('data-sidebar'); // 'leading' | 'trailing'
-    this.#drag = {
-      aside,
-      side,
-      startX: e.clientX,
-      startW: aside.getBoundingClientRect().width,
-    };
-    handle.setPointerCapture?.(e.pointerId);
-    document.addEventListener('pointermove', this.#onResizeMove);
-    document.addEventListener('pointerup', this.#onResizeUp, { once: true });
-    e.preventDefault();
-  };
-
-  #onResizeMove = (e) => {
-    if (!this.#drag) return;
-    const { aside, side, startX, startW } = this.#drag;
-    const dx = e.clientX - startX;
-    const min = side === 'leading' ? this.leadingMinWidth  : this.trailingMinWidth;
-    const max = side === 'leading' ? this.leadingMaxWidth  : this.trailingMaxWidth;
-    const next = Math.max(min, Math.min(max, startW + (side === 'leading' ? dx : -dx)));
-    aside.style.width = `${next}px`;
-  };
-
-  #onResizeUp = () => {
-    this.#drag = null;
-    document.removeEventListener('pointermove', this.#onResizeMove);
-  };
-}
-
-customElements.define('app-shell-ui', AdiaAppShell);
-
-export { AdiaAppShell };

package/components/app-shell/app-shell.yaml

@@ -1,183 +0,0 @@
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppShell
-tag: app-shell-ui
-component: AppShell
-category: container
-version: 1
-description: |
-  Application shell layout. Holds a leading nav rail, a main column
-  (topbar + scroll area + statusbar), an optional trailing inspector,
-  and an optional command-palette `<dialog>`. The component wires
-  sidebar toggle, sidebar resize, and Cmd+K shortcut on top of the
-  long-lived CSS pattern that already targets `app-shell-ui` as a tag.
-  Children use native HTML semantic elements (`<aside data-sidebar>`,
-  `<main>`, `<header>`, `<section>`, `<footer>`); the existing
-  CSS scopes by tag.
-props:
-  mode:
-    description: |
-      Space-separated list of layout modes. `rounded` adds border-radius
-      to the scroll section; `borderless` removes chrome borders (content
-      borders persist). Pass both for a soft, edgeless shell.
-    type: string
-    default: ""
-    reflect: true
-  leadingCollapsed:
-    description: |
-      Reflects to the leading aside's `[data-collapsed]`. Toggled
-      programmatically (`shell.toggleLeading()`) or via a click on any
-      element with `[data-sidebar-toggle="leading"]` inside the shell.
-    type: boolean
-    default: false
-    attribute: leading-collapsed
-    reflect: true
-  trailingCollapsed:
-    description: |
-      Reflects to the trailing aside's `[data-collapsed]`. Toggled via
-      `shell.toggleTrailing()` or `[data-sidebar-toggle="trailing"]`.
-    type: boolean
-    default: false
-    attribute: trailing-collapsed
-    reflect: true
-  cmdK:
-    description: |
-      Installs a global Cmd+K / Ctrl+K listener that opens the inner
-      `<dialog data-command>` via `showModal()`. No-op when no such
-      dialog is present.
-    type: boolean
-    default: false
-    attribute: cmd-k
-    reflect: true
-  leadingMinWidth:
-    description: Minimum leading-aside width (px) when resizing.
-    type: number
-    default: 48
-    attribute: leading-min-width
-  leadingMaxWidth:
-    description: Maximum leading-aside width (px) when resizing.
-    type: number
-    default: 480
-    attribute: leading-max-width
-  trailingMinWidth:
-    description: Minimum trailing-aside width (px) when resizing.
-    type: number
-    default: 48
-    attribute: trailing-min-width
-  trailingMaxWidth:
-    description: Maximum trailing-aside width (px) when resizing.
-    type: number
-    default: 480
-    attribute: trailing-max-width
-events:
-  sidebar-toggle:
-    description: |
-      Fired after a sidebar's collapsed state flips. Detail:
-      `{ side: 'leading'|'trailing', collapsed: boolean }`.
-  command-open:
-    description: Fired after the command-palette `<dialog>` opens.
-  command-close:
-    description: Fired after the command-palette `<dialog>` closes.
-slots:
-  default:
-    description: |
-      Composes from native HTML children: `<aside data-sidebar="leading">`,
-      `<main>` (with `<header>`, `<section>`, `<footer>` inside),
-      optional `<aside data-sidebar="trailing">`, optional
-      `<dialog data-command>`. The existing pattern CSS scopes each
-      child by tag + attribute; no `slot=` attributes needed.
-states:
-  - name: idle
-    description: Default, ready for interaction.
-  - name: leading-collapsed
-    description: Leading aside collapsed via attribute / API.
-  - name: trailing-collapsed
-    description: Trailing aside collapsed via attribute / API.
-  - name: command-open
-    description: Command-palette dialog is showing.
-traits: []
-tokens: {}
-a2ui:
-  rules: []
-anti_patterns: []
-examples:
-  - name: docs-shell
-    description: Documentation shell — leading nav, topbar with breadcrumb, scroll content, statusbar.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "AppShell",
-          "mode": "rounded",
-          "cmdK": true,
-          "children": ["leading", "main", "cmd"]
-        },
-        {
-          "id": "leading",
-          "component": "Aside",
-          "data-sidebar": "leading",
-          "children": ["nav-hdr", "nav-list", "nav-ftr"]
-        },
-        {
-          "id": "nav-hdr",
-          "component": "Header",
-          "children": []
-        },
-        {
-          "id": "nav-list",
-          "component": "Section",
-          "children": []
-        },
-        {
-          "id": "nav-ftr",
-          "component": "Footer",
-          "children": []
-        },
-        {
-          "id": "main",
-          "component": "Column",
-          "children": ["topbar", "scroll", "statusbar"]
-        },
-        {
-          "id": "topbar",
-          "component": "Header",
-          "children": []
-        },
-        {
-          "id": "scroll",
-          "component": "Section",
-          "scroll": true,
-          "children": []
-        },
-        {
-          "id": "statusbar",
-          "component": "Footer",
-          "children": []
-        },
-        {
-          "id": "cmd",
-          "component": "Modal",
-          "data-command": true,
-          "children": []
-        }
-      ]
-keywords:
-  - app-shell
-  - shell
-  - layout
-  - sidebar
-  - topbar
-  - command-palette
-  - cmdK
-  - dashboard-shell
-synonyms: {}
-related:
-  - aside
-  - header
-  - footer
-  - section
-  - drawer
-  - modal
-  - command
-  - app-nav
-  - section-nav