@adia-ai/web-components 0.0.28 → 0.0.33

package/patterns/app-shell/app-shell.js

@@ -1,251 +0,0 @@
-/**
- * <app-shell-ui mode="rounded borderless">
- *   <aside data-sidebar="leading">...</aside>
- *   <main>...</main>
- *   <aside data-sidebar="trailing">...</aside>
- *   <dialog data-command>...</dialog>
- * </app-shell-ui>
- *
- * Behavior-only app shell. Stamps no HTML — the page author writes the
- * structure using semantic elements + data attributes. The component
- * auto-wires four JS behaviors that CSS can't handle:
- *
- *   1. Sidebar resize (drag handle with snap thresholds)
- *   2. Sidebar toggle (collapse/restore width)
- *   3. Command palette (Cmd+K keyboard shortcut)
- *   4. ResizeObserver (select placement in narrow sidebars)
- *
- * CSS handles everything else: layout, collapse, container queries,
- * sticky headers, scroll containment, mode composition.
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-const SNAP_THRESHOLD = 96;
-const SNAP_MIN_USABLE = 160;
-
-class AdiaAppShell extends AdiaElement {
-  static properties = {
-    mode: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #sidebarWidths = new Map();
-  #resizeCleanups = [];
-  #sidebarRO = null;
-  #cmdKeyHandler = null;
-
-  connected() {
-    this.#setupToggles();
-    this.#setupResizeHandles();
-    this.#setupCommandPalette();
-    this.#setupResizeObserver();
-  }
-
-  disconnected() {
-    // Clean up resize handles
-    for (const cleanup of this.#resizeCleanups) cleanup();
-    this.#resizeCleanups = [];
-
-    // Clean up ResizeObserver
-    this.#sidebarRO?.disconnect();
-    this.#sidebarRO = null;
-
-    // Clean up Cmd+K
-    if (this.#cmdKeyHandler) {
-      document.removeEventListener('keydown', this.#cmdKeyHandler);
-      this.#cmdKeyHandler = null;
-    }
-  }
-
-  // ── Sidebar persistence ────────────────────────────────────
-
-  #persistSidebar(sidebarName, width) {
-    try { localStorage.setItem(`adia-sidebar-${sidebarName}`, width); } catch {}
-  }
-
-  #restoreSidebars() {
-    for (const sidebar of this.querySelectorAll('[data-sidebar]')) {
-      const name = sidebar.getAttribute('data-sidebar');
-      try {
-        const saved = localStorage.getItem(`adia-sidebar-${name}`);
-        if (saved) {
-          sidebar.style.width = saved;
-          // Only store as the "previous expanded width" if it's actually expanded.
-          // If collapsed, keep the default expanded width so toggle can restore it.
-          const w = parseFloat(saved);
-          if (isNaN(w) || w > SNAP_THRESHOLD) {
-            this.#sidebarWidths.set(name, saved);
-          }
-        }
-      } catch {}
-    }
-  }
-
-  // ── 1. Sidebar toggle ──────────────────────────────────────
-
-  #setupToggles() {
-    this.#restoreSidebars();
-
-    for (const btn of this.querySelectorAll('[data-sidebar-toggle]')) {
-      const sidebarName = btn.getAttribute('data-sidebar-toggle');
-      btn.addEventListener('click', () => {
-        const sidebar = this.querySelector(`[data-sidebar="${sidebarName}"]`);
-        if (!sidebar) return;
-
-        const isCollapsed = sidebar.getBoundingClientRect().width <= SNAP_THRESHOLD;
-
-        if (isCollapsed) {
-          // Expand: restore previous width
-          const prev = this.#sidebarWidths.get(sidebarName);
-          sidebar.style.width = prev || '';
-          this.#persistSidebar(sidebarName, prev || '');
-        } else {
-          // Collapse: save current width, set to min
-          this.#sidebarWidths.set(sidebarName, sidebar.style.width || getComputedStyle(sidebar).width);
-          const minW = getComputedStyle(sidebar).minWidth;
-          sidebar.style.width = minW;
-          this.#persistSidebar(sidebarName, minW);
-        }
-
-        this.dispatchEvent(new CustomEvent('sidebar-toggle', {
-          bubbles: true,
-          detail: { sidebar: sidebarName, expanded: !isCollapsed },
-        }));
-      });
-    }
-  }
-
-  // ── 2. Sidebar resize handles ──────────────────────────────
-
-  #setupResizeHandles() {
-    for (const handle of this.querySelectorAll('[data-sidebar] > [data-resize]')) {
-      const sidebar = handle.parentElement;
-      const sidebarName = sidebar.getAttribute('data-sidebar');
-      const isLeading = sidebarName === 'leading';
-
-      const onPointerDown = (e) => {
-        e.preventDefault();
-        handle.setPointerCapture(e.pointerId);
-        const startX = e.clientX;
-        const startW = sidebar.getBoundingClientRect().width;
-        sidebar.setAttribute('data-resizing', '');
-        document.documentElement.style.cursor = 'col-resize';
-
-        const onMove = (e) => {
-          const dx = e.clientX - startX;
-          const max = parseInt(getComputedStyle(sidebar).getPropertyValue('max-width')) || 480;
-          const w = Math.max(48, Math.min(max, startW + (isLeading ? dx : -dx)));
-          sidebar.style.width = `${w}px`;
-        };
-
-        const onUp = () => {
-          sidebar.removeAttribute('data-resizing');
-          document.documentElement.style.cursor = '';
-          handle.removeEventListener('pointermove', onMove);
-          handle.removeEventListener('pointerup', onUp);
-
-          // Snap logic
-          const w = sidebar.getBoundingClientRect().width;
-          if (w <= SNAP_THRESHOLD) {
-            sidebar.style.width = getComputedStyle(sidebar).minWidth;
-          } else if (w < SNAP_MIN_USABLE) {
-            sidebar.style.width = `${SNAP_MIN_USABLE}px`;
-          }
-
-          this.#persistSidebar(sidebarName, sidebar.style.width);
-          this.dispatchEvent(new CustomEvent('sidebar-resize', {
-            bubbles: true,
-            detail: { sidebar: sidebarName, width: sidebar.getBoundingClientRect().width },
-          }));
-        };
-
-        handle.addEventListener('pointermove', onMove);
-        handle.addEventListener('pointerup', onUp);
-      };
-
-      handle.addEventListener('pointerdown', onPointerDown);
-      this.#resizeCleanups.push(() => handle.removeEventListener('pointerdown', onPointerDown));
-    }
-  }
-
-  // ── 3. Command palette ─────────────────────────────────────
-
-  #setupCommandPalette() {
-    const dialog = this.querySelector('dialog[data-command]');
-    if (!dialog) return;
-
-    const cmdEl = dialog.querySelector('command-ui');
-    const nav = this.querySelector('app-nav-ui');
-
-    const openCmd = () => {
-      dialog.showModal();
-      if (cmdEl) { cmdEl.open = true; cmdEl.value = ''; cmdEl.focus(); }
-    };
-
-    const closeCmd = () => {
-      dialog.close();
-      if (cmdEl) cmdEl.open = false;
-    };
-
-    // Trigger elements
-    for (const trigger of this.querySelectorAll('[data-command-trigger]')) {
-      trigger.addEventListener('click', (e) => {
-        e.stopPropagation();
-        openCmd();
-      });
-    }
-
-    // Backdrop click closes
-    dialog.addEventListener('click', (e) => {
-      if (e.target === dialog) closeCmd();
-    });
-
-    // Command-n events
-    if (cmdEl) {
-      cmdEl.addEventListener('dismiss', closeCmd);
-      cmdEl.addEventListener('select', (e) => {
-        closeCmd();
-        if (nav) {
-          const item = nav.querySelector(`app-nav-item-ui[value="${e.detail.value}"]`);
-          if (item) nav.select(item);
-        }
-        this.dispatchEvent(new CustomEvent('command-select', {
-          bubbles: true,
-          detail: e.detail,
-        }));
-      });
-    }
-
-    // Cmd+K / Ctrl+K
-    this.#cmdKeyHandler = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        dialog.open ? closeCmd() : openCmd();
-      }
-    };
-    document.addEventListener('keydown', this.#cmdKeyHandler);
-  }
-
-  // ── 4. ResizeObserver for select placement ─────────────────
-
-  #setupResizeObserver() {
-    this.#sidebarRO = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const sidebar = entry.target;
-        const narrow = entry.contentBoxSize[0].inlineSize <= SNAP_THRESHOLD;
-        for (const sel of sidebar.querySelectorAll('select-ui')) {
-          sel.setAttribute('placement', narrow ? 'right' : 'bottom-start');
-        }
-      }
-    });
-
-    for (const sb of this.querySelectorAll('[data-sidebar]')) {
-      this.#sidebarRO.observe(sb);
-    }
-  }
-}
-
-customElements.define('app-shell-ui', AdiaAppShell);
-export { AdiaAppShell };

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

@@ -1,89 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppShell
-tag: app-shell-ui
-component: AppShell
-category: layout
-version: 1
-description: |
-  Behavior-only application shell. Wires sidebar toggles, resize handles,
-  a Cmd+K command palette, and a ResizeObserver that drives responsive
-  sidebar collapse. Author supplies the DOM (aside[data-sidebar], main,
-  dialog[data-command]); app-shell-ui binds the interactions.
-
-props:
-  mode:
-    type: string
-    default: ""
-    enum: ["", rounded, borderless]
-    reflect: true
-    description: Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.
-
-events:
-  sidebar-toggle:
-    description: Fired when a sidebar is collapsed or expanded.
-    detail:
-      sidebar: string
-      expanded: boolean
-  sidebar-resize:
-    description: Fired as a sidebar is dragged; debounced on the trailing edge.
-    detail:
-      sidebar: string
-      width: number
-  command-select:
-    description: Forwarded from the command palette when an option is chosen.
-    detail:
-      value: string
-
-slots:
-  default:
-    description: >-
-      Author-supplied page DOM. Expected structure — aside[data-sidebar] for
-      navigation, main for content, optional dialog[data-command] for Cmd+K.
-  icon:
-    description: >-
-      Leading glyph inside any chrome bar — > main > header / footer and
-      [data-sidebar] > header / footer. Muted color, flex-align.
-  heading:
-    description: >-
-      Primary label inside any chrome bar. Medium-weight + strong fg.
-  description:
-    description: >-
-      Secondary metadata inside any chrome bar. Muted + --a-ui-sm size.
-  action:
-    description: >-
-      Trailing control cluster inside any chrome bar. The first
-      [slot="action"] child pushes itself (and siblings) to the end;
-      subsequent siblings flow with gap. Coexists with legacy
-      <span data-spacer> / <div data-actions> hooks for one release —
-      new code should prefer slots.
-  action-leading:
-    description: >-
-      Leading (inline-start) control cluster inside any chrome bar.
-      Pairs with [slot="action"] for dual-cluster chrome (e.g. back
-      button + breadcrumb on the left, primary actions on the right).
-      Replaces the legacy <span data-spacer> hack.
-
-states:
-  - name: idle
-    description: Default, interactive shell.
-  - name: collapsed-leading
-    attribute: data-sidebar-leading-collapsed
-    description: Leading sidebar is collapsed; content expands.
-  - name: collapsed-trailing
-    attribute: data-sidebar-trailing-collapsed
-    description: Trailing sidebar (inspector) is collapsed.
-
-traits: []
-
-a2ui:
-  rules:
-    - >-
-      app-shell-ui is a behavior wrapper; its children are native HTML landmarks
-      (aside, main, header). Don't wrap them in col-ui/row-ui — app-shell.css
-      handles grid layout based on [data-sidebar] attributes.
-
-keywords: [app-shell, shell, layout, admin, dashboard, sidebar, nav]
-synonyms:
-  admin:     [dashboard, shell, app-shell]
-  dashboard: [admin, shell, app-shell]
-related: [AppNav, AppNavGroup, AppNavItem, Command]

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

@@ -1,86 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Sidebar collapsed state
-
-   @container sidebar (max-width: 96px)
-
-   All collapse behavior is CSS-driven via container queries.
-   JS only handles:
-     - Resize drag with snap (≤96px → 48px, 97-159px → 160px)
-     - Toggle button (sets width to min/restore)
-     - Select placement attribute (bottom-start → right)
-     - Nav-group popover-vs-toggle (checks width at click time)
-   ═══════════════════════════════════════════════════════════════ */
-
-@container sidebar (max-width: 96px) {
-  /* Center header/footer content */
-  header, footer {
-    justify-content: center;
-    padding: var(--page-sidebar-px);
-  }
-
-  /* Center section content */
-  section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  /* Select: hide text + caret, keep leading icon/avatar */
-  select-ui [slot="display"],
-  select-ui [slot="caret"] {
-    display: none;
-  }
-
-  select-ui [slot="trigger"] {
-    justify-content: center;
-    padding: 0;
-    min-height: var(--page-header-height);
-  }
-
-  /* Select leading: bump icon/avatar size for collapsed state */
-  select-ui [slot="leading"] {
-    --a-icon-size: var(--page-sidebar-collapsed-icon);
-    font-size: var(--page-sidebar-collapsed-icon);
-  }
-
-  select-ui img[slot="leading"] {
-    width: var(--page-sidebar-collapsed-avatar);
-    height: var(--page-sidebar-collapsed-avatar);
-  }
-
-  /* Nav: hide all text/meta, show only icons */
-  app-nav-ui [slot="text"],
-  app-nav-ui [slot="badge"],
-  app-nav-ui [slot="caret"],
-  app-nav-ui [slot="trailing"],
-  app-nav-ui [data-nav-label],
-  app-nav-ui [data-nav-divider] {
-    display: none !important;
-  }
-
-  /* Nav items/group headers: center icon, ensure square hit area */
-  app-nav-group-ui [slot="header"] {
-    justify-content: center;
-    padding: 0;
-    min-height: var(--nav-group-row-height);
-    min-width: var(--nav-group-row-height);
-  }
-
-  app-nav-item-ui {
-    justify-content: center;
-    padding: 0;
-    min-height: var(--nav-item-row-height);
-    min-width: var(--nav-item-row-height);
-  }
-
-  /* Button: icon-only mode */
-  button-ui {
-    --button-px: 0;
-    width: auto !important;
-    justify-content: center;
-  }
-
-  button-ui [slot="trailing"] {
-    display: none;
-  }
-}

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

@@ -1,42 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Layout helpers
-
-   Generic layout utilities used across admin pages.
-   ═══════════════════════════════════════════════════════════════ */
-
-/* Flex spacer — pushes siblings to opposite ends */
-[data-spacer] { flex: 1; }
-
-/* Inline action group (buttons, icons) */
-[data-actions] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-}
-
-/* ── Form layout helpers ── */
-
-/* 2-column grid (default), 3-column with data-grid="3" */
-[data-grid] {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--page-grid-gap);
-}
-
-[data-grid="3"] {
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-/* Vertical stack */
-[data-col] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--page-grid-gap);
-}
-
-/* Horizontal row */
-[data-row] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-grid-gap);
-}

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

@@ -1,172 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Main column (topbar + scroll + footer)
-   ═══════════════════════════════════════════════════════════════ */
-
-/* ── Main column ── */
-app-shell-ui > main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  border-inline: var(--page-main-border);
-}
-
-/* ── Edge breathing room when adjacent chrome is absent ──
-   When the shell has no visible chrome on a given edge of the content
-   surface, `> main > section` owns a small inset against that edge so
-   the rounded/elevated surface doesn't sit flush with the viewport.
-   The `:has(... :not([hidden]))` probe catches both "element missing
-   from the DOM" AND "element present but [hidden]" — toggling
-   [hidden] flips the inset live with no JS coordination. Scope is the
-   section, not main, so the topbar/statusbar inside main keep
-   spanning full-width even when the section gets its inset.
-
-   Block-edge probes accept either an app-level chrome bar
-   (`app-shell-ui > header / > footer`) OR a main-level chrome bar
-   (`> main > header / > main > footer`). Either qualifies as
-   "chrome present" and suppresses the corresponding margin. */
-app-shell-ui:not(:has(> aside[data-sidebar="trailing"]:not([hidden]))) > main > section {
-  margin-inline-end: var(--a-space-2);
-}
-app-shell-ui:not(:has(> header:not([hidden]), > main > header:not([hidden]))) > main > section {
-  margin-block-start: var(--a-space-2);
-}
-app-shell-ui:not(:has(> footer:not([hidden]), > main > footer:not([hidden]))) > main > section {
-  margin-block-end: var(--a-space-2);
-}
-
-/* ── Main > header (topbar) ──
-   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;
-  gap: var(--page-header-gap);
-  min-height: var(--page-header-height);
-  padding: 0 var(--page-header-px);
-  border-bottom: var(--page-border);
-  font-size: var(--page-header-font);
-  flex-shrink: 0;
-}
-
-app-shell-ui > main > header > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--page-header-fg-muted);
-}
-app-shell-ui > main > header > [slot="heading"] {
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
-}
-app-shell-ui > main > header > [slot="description"] {
-  color: var(--page-header-fg-muted);
-  font-size: var(--a-ui-sm);
-}
-app-shell-ui > main > header > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-app-shell-ui > main > header > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-app-shell-ui > main > header > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}
-
-/* ── Main > section (scroll container) ──
-   Wraps [data-content-root]. Scrolls vertically, hides scrollbar.
-   Soft elevation via --page-content-shadow (defaults to --a-shadow-md)
-   so the content surface lifts off the chrome canvas regardless of
-   mode — pairs with --page-content-radius under "rounded" and stays
-   visible under "borderless". */
-app-shell-ui > main > section {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-  background: var(--page-content-bg);
-  box-shadow: var(--page-content-shadow);
-}
-
-app-shell-ui > main > section::-webkit-scrollbar { display: none; }
-
-/* ── Main > footer (status bar) ──
-   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;
-  align-items: center;
-  margin-top: auto;
-  gap: var(--page-header-gap);
-  min-height: var(--page-header-height);
-  padding: 0 var(--page-header-px);
-  border-top: var(--page-border);
-  font-size: var(--page-header-font);
-  color: var(--page-header-fg-muted);
-}
-
-/* Legacy: bare <span>…</span><span>version</span> shapes. Only kicks
-   in when NO slot="action" is present, so it doesn't fight the slot
-   rule below. */
-app-shell-ui > main > footer:not(:has(> [slot="action"])) > :last-child {
-  margin-inline-start: auto;
-}
-
-app-shell-ui > main > footer > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--page-header-fg-muted);
-}
-app-shell-ui > main > footer > [slot="heading"] {
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
-}
-app-shell-ui > main > footer > [slot="description"] {
-  color: var(--page-header-fg-muted);
-  font-size: var(--a-ui-sm);
-}
-app-shell-ui > main > footer > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-app-shell-ui > main > footer > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-app-shell-ui > main > footer > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}

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

@@ -1,44 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Root layout + modes
-
-   Structure:
-     app-shell-ui                               — root shell (flex row, fixed viewport)
-       aside[data-sidebar="leading"]           — nav sidebar (resizable, collapsible)
-       main                                    — center column (topbar + scroll + footer)
-         header                                — topbar
-         section                               — scroll container
-           article[data-content-root]          — page wrapper (sticky bands + centered body)
-             div[data-content-header] > header — sticky page title + tabs
-             div[data-content-body] > section  — centered reading column (tab/form content)
-         footer                                — status bar
-       aside[data-sidebar="trailing"]          — inspector sidebar
-       dialog[data-command]                    — command palette
-
-   Modes (space-separated on mode attribute):
-     "rounded"    — border-radius on scroll section
-     "borderless" — removes chrome borders (content borders persist)
-   ═══════════════════════════════════════════════════════════════ */
-
-/* ── Page modes ── */
-app-shell-ui[mode~="rounded"] > main > section {
-  border-radius: var(--page-content-radius);
-}
-
-app-shell-ui[mode~="borderless"] {
-  --page-main-border: none;
-  --page-border: none;
-  /* Note: --page-content-border is NOT reset — content dividers persist */
-}
-
-/* ── Page shell ── */
-app-shell-ui {
-  display: flex;
-  height: 100dvh;
-  overflow: hidden;
-  background: var(--page-bg);
-  position: fixed;
-  inset: 0;
-  overscroll-behavior: none;
-  font-family: var(--page-font-family);
-  font-size: var(--page-body-size);
-}