@adia-ai/web-components 0.0.25 → 0.0.27

package/components/toast/toast.js

@@ -1,14 +1,25 @@
 /**
- * <toast-ui> — Notification popup.
+ * <toast-ui> — Notification popup wired through a shared top-layer
+ * messaging channel.
  *
- * Positioned fixed, auto-dismisses after a configurable duration.
- * Animated enter/exit via translateY + opacity.
+ * All toasts — declarative AND imperative — route through one
+ * lazily-mounted `[data-toast-container][data-toast-position]` per
+ * position. Per-position singletons; consumers can post from anywhere
+ * without holding a reference to the toast component:
  *
- * Usage (declarative):
- *   <toast-ui text="Saved!" variant="success"></toast-ui>
+ *     // Imperative API
+ *     AdiaToast.show({ text: 'Saved!', variant: 'success' });
  *
- * Usage (imperative):
- *   AdiaToast.show({ text: 'Saved!', variant: 'success', duration: 3000 });
+ *     // Global event channel — same shape, dispatched on `window`.
+ *     // Any code (other components, integration scripts) can post
+ *     // without importing AdiaToast.
+ *     window.dispatchEvent(new CustomEvent('toast', {
+ *       detail: { text: 'Saved!', variant: 'success' }
+ *     }));
+ *
+ *     // Declarative — auto-routes to the per-position container on
+ *     // connect. No need to author <toast-ui> inside the container.
+ *     <toast-ui text="Saved!" variant="success"></toast-ui>
  *
  * Events:
  *   close — fired after the toast finishes its exit animation
@@ -21,6 +32,7 @@ class AdiaToast extends AdiaElement {
   #removing = false;
   #closeTimer = null;
   #openRaf = null;
+  #routed = false;
 
   static properties = {
     text:     { type: String,  default: '', reflect: true },
@@ -31,25 +43,27 @@ class AdiaToast extends AdiaElement {
 
   static parts = {
     message: '<div slot="message"></div>',
-    close:   '<span slot="close" role="button" tabindex="0" aria-label="Dismiss"></span>',
+    close:   '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>',
   };
 
   static template = () => html``;
 
-  #onClick = (e) => {
+  #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.dismiss();
   };
 
-  #onKeydown = (e) => {
-    if (e.target.closest('[slot="close"]') && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault();
-      this.dismiss();
-    }
-  };
-
   connected() {
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKeydown);
+    this.addEventListener('press', this.#onPress);
+
+    // Route declarative <toast-ui> instances into the shared per-position
+    // container so authored toasts share the same lane as imperatively-
+    // posted ones (no overlap, consistent stacking). Skipped if we're
+    // already inside a container (re-entrant connect after reparent).
+    if (!this.#routed && !this.parentElement?.matches?.('[data-toast-container]')) {
+      this.#routed = true;
+      const container = AdiaToast.#getContainer(this.position || 'bottom-right');
+      if (this.parentElement !== container) container.appendChild(this);
+    }
   }
 
   #getDuration() {
@@ -97,14 +111,19 @@ class AdiaToast extends AdiaElement {
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;
       this.removeAttribute('data-closing');
+      const container = this.parentElement;
       this.dispatchEvent(new Event('close', { bubbles: true }));
       this.remove();
+      /* If the lane is now empty, hide its popover and remove the
+         container — keeps document.body free of leaked containers. */
+      if (container?.matches?.('[data-toast-container]')) {
+        AdiaToast.#releaseContainerIfEmpty(container);
+      }
     }, this.#getDuration());
   }
 
   disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKeydown);
+    this.removeEventListener('press', this.#onPress);
     if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
     if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
     if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
@@ -121,16 +140,58 @@ class AdiaToast extends AdiaElement {
    */
   static #containers = new Map();
 
+  /**
+   * Get (or lazily create) the per-position lane. Each lane is a manual
+   * Popover-API container — `[popover="manual"]` puts it in the browser's
+   * top-layer, above ALL page content with no z-index wars, and the
+   * native popover stack lets multiple lanes coexist (e.g. one toast in
+   * top-right + another in bottom-center) without collision.
+   *
+   * `popover="manual"` (not `auto`) — toasts must NOT light-dismiss on
+   * outside click; they auto-fade by their own duration timer.
+   *
+   * Falls back gracefully if the Popover API is unsupported (Safari < 17 /
+   * Firefox < 125): the lane still renders as a `position: fixed` div via
+   * the CSS `[data-toast-container]` rules. Browser baseline (Chromium
+   * 125+, Safari 18.0+, Firefox 129+) all support `[popover]`.
+   */
   static #getContainer(position) {
-    if (AdiaToast.#containers.has(position)) return AdiaToast.#containers.get(position);
-    const el = document.createElement('div');
+    let el = AdiaToast.#containers.get(position);
+    if (el && el.isConnected) return el;
+    el = document.createElement('div');
     el.setAttribute('data-toast-container', position);
+    /* `manual` = no light-dismiss; container stays open until we
+       explicitly hidePopover() it when its last toast leaves. */
+    if ('popover' in HTMLElement.prototype) {
+      el.setAttribute('popover', 'manual');
+    }
     document.body.appendChild(el);
+    /* Show the popover so the lane lifts into the top-layer. Wrapped in
+       try/catch because some test rigs (happy-dom) don't ship the API. */
+    try { el.showPopover?.(); } catch { /* graceful fallback to fixed */ }
     AdiaToast.#containers.set(position, el);
     return el;
   }
 
+  /**
+   * Tear down the per-position lane when its last toast has been
+   * dismissed. Keeps `document.body` clean — addresses the audit's L-B4
+   * "container leak" finding (toasts permanently leaving DIVs in body).
+   */
+  static #releaseContainerIfEmpty(container) {
+    if (!container) return;
+    if (container.children.length > 0) return;
+    try { container.hidePopover?.(); } catch { /* noop */ }
+    container.remove();
+    /* Clear from the singleton map so the next post() rebuilds. */
+    for (const [pos, el] of AdiaToast.#containers) {
+      if (el === container) AdiaToast.#containers.delete(pos);
+    }
+  }
+
   static show({ text, variant = 'info', duration = 4000, position = 'bottom-right' } = {}) {
+    /* `error` is a documented alias of `danger` (Phase 6 variant table). */
+    if (variant === 'error') variant = 'danger';
     const container = AdiaToast.#getContainer(position);
     const toast = document.createElement('toast-ui');
     toast.text = text;
@@ -140,7 +201,25 @@ class AdiaToast extends AdiaElement {
     container.appendChild(toast);
     return toast;
   }
+
 }
+
+/* Install the global 'toast' CustomEvent listener once, at module load,
+   so any code can post into the channel without importing AdiaToast
+   directly:
+
+     window.dispatchEvent(new CustomEvent('toast', {
+       detail: { text: 'Saved!', variant: 'success' }
+     }));
+
+   Idempotent — guarded by a window flag so HMR / re-imports are safe. */
+if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
+  window.__adiaToastListenerInstalled = true;
+  window.addEventListener('toast', (e) => {
+    if (e?.detail && typeof e.detail === 'object') AdiaToast.show(e.detail);
+  });
+}
+
 customElements.define('toast-ui', AdiaToast);
 
 export { AdiaToast };

package/components/toolbar/toolbar.css

@@ -109,6 +109,19 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   display: flex;
   flex-direction: column;
   gap: var(--a-space-1);
+  /* Fade + lift in on first paint. */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  toolbar-ui [data-toolbar-spillover-menu]:popover-open { transition: none; }
 }
 
 /* Inside the spillover, render as a vertical list — every item (groups and

package/components/tooltip/tooltip.css

@@ -36,12 +36,20 @@
   box-shadow: var(--a-shadow-sm);
   white-space: nowrap;
   pointer-events: none;
+  /* Fade in on first paint via @starting-style. */
+  opacity: 1;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out);
   /* No z-index needed — Popover API renders in the top layer which
      has its own stacking above all document content. */
 }
 
 .tooltip-popup:popover-open {
   display: block;
+  @starting-style { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-popup { transition: none; }
 }
 
 /* ── Pointer-follow mode (chart/heatmap) ──

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "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/colors/semantics.css

@@ -176,7 +176,7 @@
   --a-primary-bg-disabled:  var(--a-accent-muted);
   --a-primary-bg-invalid:   var(--a-danger-muted);
 
-  --a-primary-fg:           var(--a-accent-text-strong);
+  --a-primary-fg:           var(--a-accent-05-tint);
   --a-primary-fg-hover:     var(--a-accent-text-strong);
   --a-primary-fg-active:    var(--a-accent-text-strong);
   --a-primary-fg-selected:  var(--a-accent-text-strong);

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 };