@weft-js/warp 0.0.0-stage → 0.1.0

package/src/Segments.tsx

@@ -0,0 +1,70 @@
+import { dayPeriods, fieldName, hour12, isComplete, isEmpty, isSegment, ymd, parseDate, parseTime, press, segmentParts, segmentText, segmentValueText, settle, writeParts, type SegmentKind, type SegmentOptions, type SegmentPart, type IsoDate,formReset } from '@weft-js/warp-core'
+import { derived, flush, state, untrack, watch } from '@weft-js/core'
+import { use } from '@weft-js/warp-core/weft'
+
+const keyOf = (p: SegmentPart) => (isSegment(p) ? p.type : `l${p.at}`)
+
+export type SegmentState = 'empty' | 'partial' | 'complete'
+
+/**
+ * A segment group (04 §1.3): each part a role=spinbutton, ordered by the locale. `onChange` hears every edit with the
+ * group's state; the group only takes `value` when that value differs from what it holds, so a half-typed date stays.
+ */
+export function Segments({ kind, locale, value, options, label, today, clears, required, disabled, readonly, onEdit, onBlurPartial }: { kind: SegmentKind; locale: string; value: string | null; options?: SegmentOptions | undefined; label?: string | undefined; today: string; clears?: number | undefined; required?: boolean | undefined; disabled?: boolean | undefined; readonly?: boolean | undefined; onEdit: (state: SegmentState, parts: SegmentPart[]) => void; onBlurPartial?: (() => unknown) | undefined }) {
+  const make = () => writeParts(segmentParts(untrack(() => kind), untrack(() => locale), untrack(() => options)), untrack(() => kind), untrack(() => value))
+  const parts = state(make())
+  const shape = derived(() => { const l = locale; return { periods: dayPeriods(l), h12: hour12(l, options?.hourCycle), l } })
+  let group: HTMLDivElement | undefined
+  let edited = false
+  const year = () => ymd(untrack(() => today))[0]
+  const spins = () => [...group!.querySelectorAll<HTMLElement>('[data-part="segment"]')]
+  const update = (next: SegmentPart[]) => {
+    if (next === parts.value) return
+    parts.value = next
+    // the value this edit makes (null for a partial or impossible date) comes back through `value`: not a new value
+    edited = true
+    queueMicrotask(() => (edited = false))
+    const st: SegmentState = isEmpty(next) ? 'empty' : isComplete(next) ? 'complete' : 'partial'
+    onEdit(st, next)
+  }
+  // a new locale reorders the parts; a value from outside fills them
+  watch(() => locale, (l, prev) => { if (prev !== undefined && l !== prev) parts.value = make() })
+  watch(() => value, v => { if (!edited) parts.value = writeParts(parts.value, untrack(() => kind), v) })
+  watch(() => clears, (n, prev) => { if (prev !== undefined && n !== prev) parts.value = writeParts(parts.value, untrack(() => kind), null) })
+  // a half-typed date has no value to go back through
+  use(formReset, () => group, () => () => { parts.value = writeParts(parts.value, untrack(() => kind), untrack(() => value)) })
+  const onKey = (e: KeyboardEvent) => {
+    if (readonly || disabled) return
+    const at = spins().indexOf(e.target as HTMLElement)
+    if (at < 0) return
+    const r = press(parts.value, at, e.key, { year: year(), meta: e.metaKey || e.ctrlKey, rtl: getComputedStyle(group!).direction === 'rtl' })
+    if (!r.handled) return
+    e.preventDefault()
+    update(r.parts)
+    if (r.move !== undefined) spins()[r.move]?.focus()
+  }
+  const onLeave = (e: FocusEvent) => {
+    const at = spins().indexOf(e.target as HTMLElement)
+    if (at >= 0) update(settle(parts.value, at, year()))
+    if (group!.contains(e.relatedTarget as Node)) return
+    const st = parts.value.filter(isSegment)
+    if (st.some(s => s.value !== null) && st.some(s => s.value === null)) onBlurPartial?.()
+  }
+  const onPaste = (e: ClipboardEvent) => {
+    if (readonly || disabled) return
+    e.preventDefault()
+    const text = e.clipboardData?.getData('text') ?? ''
+    const k = untrack(() => kind)
+    const v = k === 'time' ? parseTime(text) : k === 'date' ? parseDate(text, locale, today as IsoDate) : /^\d{4}-\d{2}/.exec(text)?.[0] ?? null
+    if (v) update(writeParts(parts.value, k, v))
+  }
+  return (
+    <div ref={n => (group = n)} data-part="segments" role={label ? 'group' : undefined} aria-label={label} onKeyDown={onKey} onFocusOut={onLeave} onPaste={onPaste}>
+      {parts.value.map(p => (isSegment(p)
+        ? <span key={keyOf(p)} data-part="segment" data-type={p.type} role={readonly ? undefined : 'spinbutton'} tabindex={disabled ? undefined : '0'} inputmode="numeric" aria-label={fieldName(p.type, shape.value.l)} aria-valuemin={readonly ? undefined : p.min} aria-valuemax={readonly ? undefined : p.max} aria-valuenow={readonly || p.value === null ? undefined : p.value} aria-valuetext={readonly ? undefined : segmentValueText(p, shape.value.periods, shape.value.l, shape.value.h12)} aria-required={required && !readonly ? 'true' : undefined} aria-disabled={disabled ? 'true' : undefined} data-placeholder={p.value === null && !p.buf ? '' : undefined}>{segmentText(p, shape.value.periods, shape.value.h12)}</span>
+        : <span key={keyOf(p)} data-part="literal" aria-hidden="true">{p.literal}</span>))}
+    </div>
+  )
+}
+
+export const afterRender = (fn: () => void) => { flush(); fn() }

package/src/Select.tsx

@@ -0,0 +1,192 @@
+import { DownIcon } from '@weft-js/warp-icons'
+import { flush, derived, omit, untrack, type State } from '@weft-js/core'
+import { listbox, uid, type ChangeReason, type ListItem, type Presentation } from '@weft-js/warp-core'
+import { bindable } from './bind'
+import { Field, type FieldProps } from './Field'
+import { use } from '@weft-js/warp-core/weft'
+import './fields'
+import '@weft-js/warp-core/styles/components/listbox.css'
+import '@weft-js/warp-core/styles/inputs/choice.css' // the select and the field's chevron
+
+/** One Select choice. */
+export type Option = { value: string; label: string; disabled?: boolean; /** A second, quieter line of text in the row. */ hint?: string }
+/** A labelled group of Select choices. */
+export type OptionGroup = { group: string; options: Option[] }
+
+/** Past this many options a Select searches (03 §4); `searchable` says so either way. */
+const LONG = 15
+
+const Item = ({ o, on }: { o: Option; on: string }) => <option value={o.value} disabled={o.disabled} selected={o.value === on}>{o.label}</option>
+
+function Choice({ o, on }: { o: Option | OptionGroup; on: string }) {
+  return <>{'group' in o
+    ? <optgroup label={o.group}>{o.options.map(x => <Item key={x.value} o={x} on={on} />)}</optgroup>
+    : <Item o={o} on={on} />}</>
+}
+
+interface ListProps {
+  label: string
+  options: (Option | OptionGroup)[]
+  placeholder?: string
+  value?: State<string | null> | string | null
+  defaultValue?: string | null
+  /** Called with the picked option's value, and whether a pointer, a key or code picked it. */
+  onValueChange?: (value: string, reason: ChangeReason) => void
+  open?: State<boolean> | boolean
+  /** Starts open, when the component keeps its own open state. */
+  defaultOpen?: boolean
+  /** Called with `true` when the list opens and `false` when it closes. */
+  onOpenChange?: (open: boolean) => void
+  /** `auto` opens a popover, or a sheet when the viewport is under 600px wide; `popover` and `sheet` force one. */
+  presentation?: Presentation
+  /** Puts a search field at the top of the list. On by itself past 15 options. */
+  searchable?: boolean
+}
+
+const OWN = ['options', 'placeholder', 'value', 'defaultValue', 'onValueChange', 'open', 'defaultOpen', 'onOpenChange', 'presentation', 'searchable']
+
+/**
+ * What a Select holds, with or without a form behind it: the value, the row list and its action on the trigger. The
+ * carrier, when there is one, is a real <select>: `onChange`, `selectedOptions`, `required`, reset and autofill all stay
+ * true on it. A pick writes it and fires its events, and whatever a handler then writes to it stands, so code that puts
+ * `el.value` back still works.
+ */
+function useList(props: ListProps) {
+  const v = bindable<string | null>(() => props.value, () => props.defaultValue ?? undefined, null, () => props.onValueChange as ((v: string | null, r: ChangeReason) => void) | undefined)
+  const shown = bindable<boolean>(() => props.open, () => props.defaultOpen, false, () => props.onOpenChange)
+  const items = derived<ListItem[]>(() => [
+    ...(props.placeholder !== undefined ? [{ value: '', label: props.placeholder }] : []),
+    ...props.options.flatMap<ListItem>(o => ('group' in o ? o.options.map(x => ({ value: x.value, label: x.label, disabled: x.disabled, hint: x.hint, group: o.group })) : [o])),
+  ])
+  // with no value the first option shows, as a select does
+  const current = derived(() => v.value ?? items.value.find(i => !i.disabled)?.value ?? '')
+  const text = derived(() => { const c = current.value; return c === '' ? '' : items.value.find(i => i.value === c)?.label ?? '' })
+  let trigger: HTMLButtonElement | undefined
+  let carrier: HTMLSelectElement | undefined
+  let picking = false
+  const hold = () => { if (carrier && carrier.value !== current.value) carrier.value = current.value }
+  const read = () => { if (carrier && !picking && carrier.value !== current.value) v.set(carrier.value, 'programmatic') }
+  const pick = (next: string, reason: ChangeReason) => {
+    if (!carrier) return v.set(next, reason)
+    picking = true
+    carrier.value = next
+    carrier.dispatchEvent(new Event('input', { bubbles: true }))
+    carrier.dispatchEvent(new Event('change', { bubbles: true }))
+    picking = false
+    v.set(carrier.value, reason)
+    flush()
+    hold() // a value the binding holds stands
+  }
+  use(listbox, () => trigger, () => ({
+    open: props.open !== undefined || props.defaultOpen ? shown.value : undefined,
+    label: props.label,
+    items: items.value,
+    value: current.value,
+    presentation: props.presentation,
+    search: props.searchable ?? items.value.length > LONG,
+    onPick: pick,
+    onOpenChange: (o: boolean) => { if (o !== untrack(() => shown.value)) shown.set(o) },
+  }))
+  use((sel: HTMLSelectElement) => {
+    // autofill, and code that writes the select, arrive here
+    sel.addEventListener('change', read)
+    hold()
+    return { update: hold, destroy() { sel.removeEventListener('change', read) } }
+  }, () => carrier, () => [current.value, items.value])
+  return {
+    current,
+    text,
+    /** Code that wrote the select with no event: the trigger catches up on focus. */
+    refresh: read,
+    onReset: () => {
+      if (untrack(() => props.value) === undefined) v.reset()
+      hold()
+    },
+    trigger: (n: HTMLButtonElement) => (trigger = n),
+    carrier: (n: HTMLSelectElement) => (carrier = n),
+    focusTrigger: () => trigger?.focus(),
+  }
+}
+
+const Chevron = () => <span data-part="indicator" aria-hidden="true"><DownIcon /></span>
+const FOR_CARRIER = ['name', 'form', 'required', 'autocomplete', 'onChange', 'onInput', 'readonly']
+
+/**
+ * A select in the field shell, drawn by warp on every device: a popover on a desktop, a sheet on a phone (03 §4), a search
+ * input once the list is long. The trigger is a button (APG select-only combobox), and a hidden real <select> is the form
+ * value, so a form posts, resets and validates as it always did, and with scripting off that select is what shows.
+ * Handlers read `e.currentTarget.value` as usual; `onValueChange` hears the value and why.
+ */
+export function Select(props: Omit<FieldProps, 'value' | 'defaultValue'> & ListProps & { onChange?: (e: Event & { currentTarget: HTMLSelectElement }) => void }) {
+  const list = useList(untrack(() => props)) // the props object is live; only its reads track
+  return (
+    <Field
+      {...omit(props, OWN)}
+      label={props.label}
+      filled
+      labelled
+      reset={list.onReset}
+      end={<Chevron />}
+      control={p => (
+        <>
+          <button
+            ref={list.trigger}
+            type="button"
+            data-part="input"
+            id={p.id}
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            aria-labelledby={`${p.id}-l`}
+            aria-describedby={p.describedby}
+            aria-invalid={p.invalid ? 'true' : undefined}
+            aria-required={p.rest.required ? 'true' : undefined}
+            aria-readonly={p.rest.readonly ? 'true' : undefined}
+            onFocus={list.refresh}
+            {...omit(p.rest, FOR_CARRIER)}
+          >
+            <span data-part="value" data-placeholder={props.placeholder}>{list.text.value}</span>
+          </button>
+          <select
+            ref={list.carrier}
+            data-part="carrier"
+            tabindex="-1"
+            aria-hidden="true"
+            name={p.rest.name}
+            form={p.rest.form}
+            required={p.rest.required}
+            autocomplete={p.rest.autocomplete}
+            disabled={p.rest.disabled}
+            onChange={(e: Event) => (p.rest.onChange as ((e: Event) => void) | undefined)?.(e)}
+            onInput={(e: Event) => (p.rest.onInput as ((e: Event) => void) | undefined)?.(e)}
+            onFocus={list.focusTrigger}
+          >
+            {props.placeholder !== undefined && <option value="" selected={untrack(() => list.current.value) === ''}>{props.placeholder}</option>}
+            {props.options.map(o => <Choice key={'group' in o ? o.group : o.value} o={o} on={untrack(() => list.current.value)} />)}
+          </select>
+        </>
+      )}
+    />
+  )
+}
+
+/**
+ * The Select of a table row, a pager or a toolbar (03 §4): the same list with no floating label, `label` its accessible
+ * name. It carries no <option> until it opens, and no <select> at all unless `name` puts it in a form.
+ */
+export function CompactSelect(props: ListProps & { name?: string | undefined; id?: string | undefined; disabled?: boolean | undefined; describedby?: string | undefined }) {
+  const list = useList(untrack(() => props)) // the props object is live; only its reads track
+  const id = untrack(() => props.id) ?? uid('sel')
+  return (
+    <div data-scope="field" data-variant="classic" data-size="sm" data-compact="">
+      <div data-part="control" data-filled="" data-sweep="">
+        <span data-part="sweep-base" aria-hidden="true"></span><span data-part="sweep" aria-hidden="true"></span>
+        <button ref={list.trigger} type="button" data-part="input" id={id} role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label={props.label} aria-describedby={props.describedby} disabled={props.disabled}>
+          <span data-part="value" data-placeholder={props.placeholder}>{list.text.value}</span>
+        </button>
+        {props.name && <input type="hidden" name={props.name} value={list.current.value} />}
+        <Chevron />
+      </div>
+    </div>
+  )
+}

package/src/Shape.tsx

@@ -0,0 +1,20 @@
+import { skeletonShape, isPart, type ShapeSpec, type SkeletonBox, type SkeletonPart } from '@weft-js/warp-core'
+import './skeleton-css'
+
+const part = (p: SkeletonPart) => <span data-scope="skeleton" data-shape={p.shape === 'text' ? undefined : p.shape} style={p.style}></span>
+const box = (b: SkeletonBox): unknown => <div style={b.style}>{b.children.map(c => (isPart(c) ? part(c) : box(c)))}</div>
+
+/**
+ * A skeleton shaped like the content a `<Boundary>` is waiting for (research 26 §4): the spec's Skeleton parts in a
+ * SkeletonScope region (05 §5), sized by warp-core's `skeletonShape()`. Use it as `pending`:
+ * `<Boundary pending={<Shape kind="list" rows={5} />}>`. Give it the content's counts so the swap shifts nothing
+ * (X031 measures it in dev).
+ */
+export function Shape({ label = 'Loading', ...spec }: ShapeSpec & { label?: string | undefined }) {
+  const root = skeletonShape(spec)
+  return (
+    <div data-scope="skeleton-scope" aria-busy="true" role="status" aria-label={label} inert style={root.style}>
+      {root.children.map(c => (isPart(c) ? part(c) : box(c)))}
+    </div>
+  )
+}

package/src/Shell.tsx

@@ -0,0 +1,308 @@
+import { CheckIcon, type IconComponent, DownIcon, LeftIcon, MoreIcon, PanelIcon, RightIcon, SearchIcon, XIcon } from '@weft-js/warp-icons'
+import { dialog, menu, shell, uid } from '@weft-js/warp-core'
+import { derived, state, type State, untrack } from '@weft-js/core'
+import { Icon, type IconRef } from './Icon'
+import { use } from '@weft-js/warp-core/weft'
+import './styles'
+import '@weft-js/warp-core/styles/components/avatar.css'
+import '@weft-js/warp-core/styles/components/button.css'
+import '@weft-js/warp-core/styles/components/menu.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/base.css'
+import '@weft-js/warp-core/styles/layout/shell.css'
+import '@weft-js/warp-core/styles/layout/breadcrumb.css'
+
+/** A nav glyph: an icon, or a function that draws one. */
+export type NavIcon = IconRef | (() => unknown)
+/** One line of the Shell's navigation. */
+export interface NavItem {
+  id: string
+  label: string
+  icon?: NavIcon | undefined
+  href?: string | undefined
+  onSelect?: (() => void) | undefined
+  count?: number | undefined
+  /** Spoken after the count. Default " new". */
+  countLabel?: string | undefined
+  /** One of the phone bottom bar's tabs. Default the first group's first four. */
+  tab?: boolean | undefined
+}
+/** A run of nav items under an optional label. */
+export type NavGroup = { label?: string | undefined; items: NavItem[] }
+/** One step of the breadcrumb. */
+export type Crumb = { label: string; href?: string }
+/** One line of the account menu. */
+export type MenuEntry = { label: string; icon?: NavIcon | undefined; href?: string; onSelect?: () => void; shortcut?: string; keys?: string; tone?: 'critical' | undefined } | 'separator'
+/** An entry in the workspace switcher. */
+export type Workspace = { id: string; name: string; initials: string; meta?: string | undefined }
+
+/** Props for Shell. */
+export interface ShellProps {
+  /** app (default) · focus: a wizard or checkout, with no nav. */
+  variant?: 'app' | 'focus' | undefined
+  brand?: { name: string; href?: string; mark?: unknown } | undefined
+  /** The phone bar's title; always shown in focus. */
+  title?: unknown
+  /** The tablet and desktop header's path. The last is the current page. */
+  crumbs?: Crumb[]
+  /** `child` puts a back button in the brand's place on a phone, for a page under another. */
+  depth?: 'root' | 'child'
+  /** Phone, depth child: the back button in the brand's place. */
+  back?: { label: string; href?: string; onClick?: (() => void) | undefined }
+  /** Focus variant: Close at the start and the step count at the end. */
+  close?: { label: string; href?: string; onClick?: (() => void) | undefined }
+  step?: unknown
+  command?: { label?: string | undefined; hint?: string; shortcut?: string; onOpen: () => void }
+  /** Header actions, between the command field and the account button. */
+  actions?: unknown
+  account?: { name: string; email?: string; initials: string; items?: MenuEntry[] } | undefined
+  switcher?: { current: string; workspaces: Workspace[]; onSwitch: (id: string) => void } | undefined
+  /** The first group is the main list; the rest are saved views and the like (sidebar only, the More sheet below). */
+  nav?: NavGroup[] | undefined
+  /** The nav's pinned items, above the collapse toggle. */
+  foot?: NavItem[]
+  current?: string
+  /** Names the navigation landmark for screen readers. */
+  navLabel?: string
+  /** false · true: the rail · 'hidden': no rail either, the edge tab opens the sidebar. A box, so the shell can write it. */
+  collapsed?: State<boolean | 'hidden'> | undefined
+  /** Names main when `island`, or the region around a preview. */
+  label?: string | undefined
+  /** A shell inside a page (a preview, a story): main becomes a named region, as a document has one main. */
+  island?: boolean | undefined
+  dock?: unknown
+  /** Dialogs, toasts and palettes: outside main, in the top layer or fixed, so nothing here takes up room. */
+  overlays?: unknown
+  children?: unknown
+}
+
+const sweepParts = () => <><span data-part="sweep-base" aria-hidden="true"></span><span data-part="sweep" aria-hidden="true"></span></>
+const draw = (i: NavIcon | undefined) => (typeof i === 'function' ? i({}) : i ? <Icon name={i} /> : null)
+const TABS = 4
+
+function Item({ item, current, quiet, onPick }: { item: NavItem; current?: string | undefined; quiet?: boolean | undefined; onPick: () => void }) {
+  const it = untrack(() => item)
+  const press = (e: MouseEvent) => {
+    if (!it.href) e.preventDefault()
+    it.onSelect?.()
+    onPick()
+  }
+  return (
+    <a href={it.href ?? '#'} data-part="nav-item" data-sweep="" aria-current={current === it.id ? 'page' : undefined} onClick={press}>
+      <span data-part="icon">{draw(it.icon)}{sweepParts()}</span>
+      <span data-part="nav-label">{it.label}</span>
+      {it.count !== undefined && <span data-part="nav-count" style={quiet ? 'background:none;color:var(--warp-color-text-subtle)' : undefined}>{it.count}<span data-part="nav-count-label">{it.countLabel ?? ' new'}</span></span>}
+    </a>
+  )
+}
+
+function Crumbs({ items }: { items: Crumb[] }) {
+  // the first and last two stay below 1000px; the ellipsis stands for the rest
+  const rows = derived(() => items.flatMap((c, n) => {
+    const row = { key: c.label, crumb: c, collapse: n > 0 && n < items.length - 2, last: n === items.length - 1 }
+    return n === 1 && items.length > 3 ? [{ key: '…', crumb: items[items.length - 3], collapse: false, last: false, hidden: items.length - 3 }, row] : [row]
+  }))
+  return (
+    <nav data-part="crumbs" data-scope="breadcrumb" aria-label="Breadcrumb">
+      <ol>
+        {rows.value.map(r => (
+          <li key={r.key} data-part={'hidden' in r ? 'ellipsis' : undefined} data-collapse={r.collapse ? '' : undefined}>
+            {'hidden' in r
+              ? <a href={r.crumb!.href ?? '#'} aria-label={`Show ${r.hidden} more`}>…</a>
+              : r.last ? <span aria-current="page">{r.crumb.label}</span> : <a href={r.crumb.href ?? '#'}>{r.crumb.label}</a>}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  )
+}
+
+function Entry({ entry, onPick }: { entry: MenuEntry; onPick: () => void }) {
+  const e = untrack(() => entry)
+  if (e === 'separator') return <div data-part="separator" role="separator"></div>
+  return (
+    <a data-part="item" role="menuitem" tabindex="-1" style="text-decoration:none" href={e.href ?? '#'} data-tone={e.tone} aria-keyshortcuts={e.keys} onClick={(ev: MouseEvent) => { if (!e.href) ev.preventDefault(); e.onSelect?.(); onPick() }}>
+      {draw(e.icon)}
+      <span data-part="item-label">{e.label}</span>
+      {e.shortcut && <kbd data-part="shortcut" aria-hidden="true">{e.shortcut}</kbd>}
+    </a>
+  )
+}
+
+/**
+ * The app shell (02 §5-6; layout.html:874-906): one element tree, three presentations, chosen by the shell's own
+ * width: phone a top bar and bottom tabs, tablet a rail that opens as an overlay, desktop a sidebar that collapses to
+ * the rail (`[`). DOM order is the focus order: skip link, brand, back, crumbs, command, actions, account, nav items,
+ * foot, main, dock. Parts are props, not children, so that order and the overlays' place outside main hold whatever
+ * an app passes. The account menu is an APG menu button; the More sheet is modal on a native <dialog>.
+ */
+export function Shell({ variant = 'app', brand, title, crumbs, depth, back, close, step, command, actions, account, switcher, nav, foot, current, navLabel = 'Main', collapsed, label, island, dock, overlays, children }: ShellProps) {
+  const base = uid('shell')
+  const main = `${base}-main`, navId = `${base}-nav`, menuId = `${base}-menu`, sheetId = `${base}-sheet`
+  const focus = derived(() => variant === 'focus')
+  const folded = untrack(() => collapsed) ?? state<boolean | 'hidden'>(false)
+  const navOpen = state(false)
+  const wide = state(false)
+  const menuOpen = state(false)
+  const moreOpen = state(false)
+  let from: HTMLElement | null = null
+  let at: 'first' | 'last' = 'first'
+  let root: HTMLDivElement | undefined
+  let menuEl: HTMLDivElement | undefined
+  let sheetEl: HTMLDialogElement | undefined
+
+  const groups = derived(() => nav ?? [])
+  const primary = derived(() => {
+    const items = groups.value[0]?.items ?? []
+    const marked = items.some(i => i.tab)
+    return items.map((item, n) => ({ item, tab: marked ? !!item.tab : n < TABS }))
+  })
+  const extra = derived(() => groups.value.slice(1))
+  const more = derived(() => [...primary.value.filter(p => !p.tab).map(p => p.item), ...extra.value.flatMap(g => g.items), ...(foot ?? [])])
+
+  const workspace = derived(() => switcher?.workspaces.find(w => w.id === switcher.current))
+  const entries = derived(() => (account?.items ?? []).map((entry, n) => ({ entry, at: n })))
+
+  const toggle = () => {
+    if (wide.value) folded.value = !folded.value
+    else navOpen.value = !navOpen.value
+  }
+  const closeNav = () => (navOpen.value = false)
+  const toggleExpanded = derived(() => (wide.value ? !folded.value : navOpen.value))
+  const toggleLabel = derived(() => (wide.value ? (folded.value ? 'Expand sidebar' : 'Collapse sidebar') : navOpen.value ? 'Collapse navigation' : 'Expand navigation'))
+
+  const openMenu = (e: Event, where: 'first' | 'last' = 'first') => {
+    from = e.currentTarget as HTMLElement
+    at = where
+    menuOpen.value = !menuOpen.value
+  }
+  const menuKey = (e: KeyboardEvent) => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return
+    e.preventDefault()
+    if (!menuOpen.value) openMenu(e, e.key === 'ArrowUp' ? 'last' : 'first')
+  }
+  const shut = () => (menuOpen.value = false)
+
+  use(shell, () => root, () => ({
+    navOpen: navOpen.value, current, onToggle: toggle, onCloseNav: closeNav,
+    onWide: (w: boolean) => { wide.value = w; if (w) navOpen.value = folded.value === 'hidden' && navOpen.value },
+    onCommand: command?.onOpen,
+  }))
+  use(menu, () => menuEl, () => ({ open: menuOpen.value, trigger: () => from, at, onClose: shut }))
+  use(dialog, () => sheetEl, () => ({ open: moreOpen.value, onClose: () => (moreOpen.value = false) }))
+
+  const button = (d: { label: string; href?: string; onClick?: (() => void) | undefined }, part: string | undefined, icon: IconComponent) => (
+    d.href
+      ? <a href={d.href} data-scope="button" data-emphasis="ghost" data-tone="neutral" data-icon-only="" data-part={part} aria-label={d.label}>{icon({})}</a>
+      : <button type="button" data-scope="button" data-emphasis="ghost" data-tone="neutral" data-icon-only="" data-part={part} aria-label={d.label} onClick={d.onClick!}>{icon({})}</button>
+  )
+  const page = <div data-part="page">{children}</div>
+  return (
+    <div ref={n => (root = n)} data-scope="shell" data-part="root" data-variant={focus.value ? 'focus' : undefined} data-depth={depth} data-collapsed={folded.value === 'hidden' ? 'hidden' : folded.value ? '' : undefined} data-nav-open={navOpen.value ? '' : undefined}>
+      <a data-part="skip" href={`#${main}`}>Skip to content</a>
+      {folded.value === 'hidden' && <button type="button" data-part="edge-tab" aria-controls={navId} aria-expanded={navOpen.value ? 'true' : 'false'} aria-label={navOpen.value ? 'Hide navigation' : 'Show navigation'} onClick={() => (navOpen.value = !navOpen.value)}><RightIcon /></button>}
+      <div data-part="layout">
+        <header data-part="header">
+          {focus.value && close && button(close, undefined, XIcon)}
+          {!focus.value && back && button(back, 'back', LeftIcon)}
+          {!focus.value && brand && <a href={brand.href ?? '/'} data-part="brand" aria-label={`${brand.name}, home`}>{brand.mark}<span data-part="brand-name">{brand.name}</span></a>}
+          {title !== undefined && <p data-part="title">{title}</p>}
+          {!focus.value && crumbs && <Crumbs items={crumbs} />}
+          <div data-part="actions">
+            {focus.value && step !== undefined && <span style="white-space:nowrap;font-size:var(--warp-text-caption-size);color:var(--warp-color-text-subtle)">{step}</span>}
+            {!focus.value && command && (
+              <button type="button" data-part="command" data-sweep="" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K" onClick={command.onOpen}>
+                {sweepParts()}<SearchIcon />
+                <span data-part="command-label">{command.label ?? 'Search'}</span>
+                <span data-part="command-hint">{command.hint ?? 'Jump to, or run…'}</span>
+                <kbd aria-hidden="true">{command.shortcut ?? '⌘K'}</kbd>
+              </button>
+            )}
+            {!focus.value && actions}
+            {!focus.value && account && (
+              <button type="button" style="display:inline-grid;place-items:center;inline-size:var(--warp-control-md);block-size:var(--warp-control-md);border:0;background:none;padding:0;cursor:pointer;border-radius:var(--warp-radius-round)" aria-haspopup="menu" aria-expanded={menuOpen.value ? 'true' : 'false'} aria-controls={menuId} onClick={(e: Event) => openMenu(e)} onKeyDown={menuKey}>
+                <span data-scope="avatar" aria-hidden="true">{account.initials}</span><span data-part="sr-only">Account: {account.name}</span>
+              </button>
+            )}
+          </div>
+        </header>
+        {!focus.value && (
+          <nav data-part="nav" aria-label={navLabel} id={navId} onClick={(e: MouseEvent) => { if ((e.target as Element).closest?.('a')) closeNav() }}>
+            {groups.value[0]?.label !== undefined && <p data-part="nav-group" id={`${navId}-g`}>{groups.value[0].label}</p>}
+            {switcher && (
+              <button type="button" data-part="switcher" data-sweep="" aria-haspopup="menu" aria-expanded={menuOpen.value ? 'true' : 'false'} aria-controls={menuId} onClick={(e: Event) => openMenu(e)} onKeyDown={menuKey}>
+                {sweepParts()}
+                <span data-scope="avatar" data-shape="square" data-size="sm" aria-hidden="true">{workspace.value?.initials}</span>
+                <span data-part="sr-only">Workspace: </span>
+                <span data-part="org"><b>{workspace.value?.name}</b><small>{workspace.value?.meta}</small></span>
+                <span data-part="sr-only">. Switch workspace</span>
+                <DownIcon />
+              </button>
+            )}
+            <ul data-part="nav-list" aria-labelledby={groups.value[0]?.label !== undefined ? `${navId}-g` : undefined}>
+              {primary.value.map(p => <li key={p.item.id} data-tab={p.tab ? '' : undefined}><Item item={p.item} current={current} onPick={closeNav} /></li>)}
+              {more.value.length > 0 && <li data-tab="" data-part="nav-more"><button type="button" data-part="nav-item" data-sweep="" aria-haspopup="dialog" aria-expanded={moreOpen.value ? 'true' : 'false'} onClick={() => (moreOpen.value = true)}><span data-part="icon"><MoreIcon />{sweepParts()}</span><span data-part="nav-label">More</span></button></li>}
+            </ul>
+            {extra.value.length > 0 && (
+              <div data-part="nav-extra">
+                {extra.value.map(g => (
+                  <div key={g.label}>
+                    <p data-part="nav-group">{g.label}</p>
+                    <ul data-part="nav-list" aria-label={g.label}>{g.items.map(i => <li key={i.id}><Item item={i} current={current} quiet onPick={closeNav} /></li>)}</ul>
+                  </div>
+                ))}
+              </div>
+            )}
+            <div data-part="nav-foot">
+              {foot?.map(i => <Item key={i.id} item={i} current={current} onPick={closeNav} />)}
+              <button type="button" data-part="nav-toggle" aria-controls={navId} aria-expanded={toggleExpanded.value ? 'true' : 'false'} aria-label={toggleLabel.value} aria-keyshortcuts="[" onClick={toggle}><PanelIcon /></button>
+            </div>
+          </nav>
+        )}
+        {island
+          ? <div data-part="main" id={main} tabindex="-1" role="region" aria-label={label ?? 'Page content'}>{page}{dock !== undefined && <div data-part="dock">{dock}</div>}</div>
+          : <main data-part="main" id={main} tabindex="-1">{page}{dock !== undefined && <div data-part="dock">{dock}</div>}</main>}
+      </div>
+      <div data-part="scrim" data-for="nav" hidden={!navOpen.value} onClick={closeNav}></div>
+      {!focus.value && account && (
+        <aside aria-label="Account" hidden={!menuOpen.value}>
+        <div ref={n => (menuEl = n)} data-scope="menu" data-part="menu" role="menu" id={menuId} aria-label={`Account: ${account.name}${account.email ? `, ${account.email}` : ''}`} hidden={!menuOpen.value}>
+          <div aria-hidden="true" style="display:flex;gap:10px;align-items:center;padding:10px">
+            <span data-scope="avatar">{account.initials}</span>
+            <div><b style="display:block;font-weight:600">{account.name}</b><span style="font-size:var(--warp-text-caption-size);color:var(--warp-color-text-subtle)">{account.email}</span></div>
+          </div>
+          {switcher && (
+            <>
+              <div data-part="separator" role="separator"></div>
+              <div role="group" aria-label="Workspace">
+                <p data-part="group-label" aria-hidden="true" style="margin:0">Workspace</p>
+                {switcher.workspaces.map(w => (
+                  <button key={w.id} type="button" data-part="item" role="menuitemradio" tabindex="-1" aria-checked={w.id === switcher.current ? 'true' : 'false'} style="inline-size:100%;border:0;background:none;font:inherit;text-align:start" onClick={() => { switcher.onSwitch(w.id); shut(); from?.focus() }}>
+                    <span data-scope="avatar" data-shape="square" data-size="sm" aria-hidden="true">{w.initials}</span>
+                    <span data-part="item-label">{w.name}</span>
+                    <span data-part="indicator"><CheckIcon /></span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+          {entries.value.map(x => <Entry key={x.at} entry={x.entry} onPick={() => { shut(); from?.focus() }} />)}
+        </div>
+        </aside>
+      )}
+      {!focus.value && (
+        <dialog ref={n => (sheetEl = n)} data-part="sheet" aria-labelledby={sheetId} hidden={!moreOpen.value} style="margin:0;max-inline-size:none">
+          <div style="display:flex;align-items:center;justify-content:space-between">
+            <p data-part="title" id={sheetId} style="margin:0;font-weight:600">More</p>
+            <button type="button" data-scope="button" data-emphasis="ghost" data-tone="neutral" data-icon-only="" aria-label="Close" data-close="" autofocus><XIcon /></button>
+          </div>
+          <div data-scope="menu">
+            {more.value.map(i => <a key={i.id} data-part="item" style="text-decoration:none" href={i.href ?? '#'} aria-current={current === i.id ? 'page' : undefined} onClick={(e: MouseEvent) => { if (!i.href) e.preventDefault(); i.onSelect?.(); moreOpen.value = false }}>{draw(i.icon)}<span data-part="item-label">{i.label}</span>{i.count !== undefined && <span data-part="shortcut">{i.count}</span>}</a>)}
+          </div>
+        </dialog>
+      )}
+      <div data-scope="announcer" role="status" aria-live="polite"></div>
+      {overlays}
+    </div>
+  )
+}