@westopp/windo 0.1.0

package/src/client/Inspector.tsx

@@ -0,0 +1,586 @@
+// Inspector — Controls (props-as-JSON editor) / Props (cards) / Code /
+// Variants / Context. Collapsible to a slim rail (right) or bar (bottom).
+//
+// Adapted from the mock inspector.jsx for windo: components live in the iframe,
+// so Controls edits JSON only (no generated widgets) and Variants are
+// click-to-apply cards summarising their prop patch instead of live renders.
+
+import type { KeyboardEvent, ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { isPreviewMessage, isWindoMessage, WINDO_MSG } from '../protocol'
+import type { WindoContextControlMeta, WindoContextMeta, WindoControlDescriptor, WindoEnvState, WindoLogEntry, WindoPropDoc } from '../types'
+import { Icons } from './icons'
+import type { ChromeEnv, InspectorProps } from './internal-types'
+
+const INSPECTOR_TABS = ['Controls', 'Props', 'Code', 'Variants', 'Context', 'Console'] as const
+type InspectorTab = (typeof INSPECTOR_TABS)[number]
+
+/* ---------- Controls tab: props as editable JSON + read-only schema ---------- */
+
+function schemaTypeOf(field: WindoControlDescriptor): string {
+  let base: string
+  if (field.kind === 'enum' && field.options?.length) base = field.options.map(o => `"${o}"`).join(' | ')
+  else base = field.kind
+  return field.optional ? `${base}?` : base
+}
+
+interface ControlsTabProps {
+  valuesJson: string
+  setValuesJson: InspectorProps['setValuesJson']
+  dirty: boolean
+  onSave: InspectorProps['onSave']
+  onReset: InspectorProps['onReset']
+  parseErrors: InspectorProps['parseErrors']
+  renderError: InspectorProps['renderError']
+  fields: WindoControlDescriptor[]
+}
+
+function ControlsTab({ valuesJson, setValuesJson, dirty, onSave, onReset, parseErrors, renderError, fields }: ControlsTabProps) {
+  const [flash, setFlash] = useState(false)
+
+  useEffect(() => {
+    if (!flash) return
+    const t = setTimeout(() => setFlash(false), 1600)
+    return () => clearTimeout(t)
+  }, [flash])
+
+  function save() {
+    onSave()
+    setFlash(true)
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      save()
+    }
+  }
+
+  const hasError = parseErrors.length > 0 || renderError !== null
+
+  return (
+    <div className="wb-codeedit">
+      <div className="wb-edit-main">
+        <div className="wb-codeedit-bar">
+          <span className="lbl">
+            Props · JSON
+            {dirty && <span className="wb-dirty-dot" title="Unsaved changes"></span>}
+            {flash && !dirty && <span className="wb-saved-flash">saved ✓</span>}
+          </span>
+          <button type="button" className="wb-ghostbtn" onClick={onReset} title="Reset props to defaults">
+            Reset
+          </button>
+          <button type="button" className="wb-save" disabled={!dirty} onClick={save} title="Save (⌘↵)">
+            Save
+          </button>
+        </div>
+        <textarea
+          className={`wb-codearea${hasError ? ' invalid' : ''}`}
+          spellCheck="false"
+          rows={Math.max(8, valuesJson.split('\n').length + 1)}
+          value={valuesJson}
+          onChange={e => setValuesJson(e.target.value)}
+          onKeyDown={onKeyDown}
+          aria-label="Component props as JSON"
+        />
+        {parseErrors.length > 0 && (
+          <div className="wb-code-error">
+            {parseErrors.map(err => (
+              <div key={`${err.path}:${err.message}`}>
+                {err.path}: {err.message}
+              </div>
+            ))}
+          </div>
+        )}
+        {renderError && <div className="wb-code-error">{renderError.message}</div>}
+      </div>
+      <div className="wb-schema">
+        <div className="wb-schema-title">Schema</div>
+        {fields.map(field => (
+          <div className="wb-schema-row" key={field.key}>
+            <span className="k">{field.key}</span>
+            <span className="t">{schemaTypeOf(field)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/* ---------- Props tab: cards ---------- */
+
+function PropsTab({ props }: { props: WindoPropDoc[] }) {
+  return (
+    <div className="wb-prop-cards">
+      {props.map(p => (
+        <div className="wb-prop-card" key={p.name}>
+          <div className="row1">
+            <span className="pname">{p.name}</span>
+            {p.default !== undefined && <span className="pdefault">default {p.default}</span>}
+          </div>
+          <div className="ptype">{p.type}</div>
+          {p.desc && <p className="pdesc">{p.desc}</p>}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/* ---------- Code tab ---------- */
+
+function CodeTab({ code }: { code: string | null }) {
+  const [copied, setCopied] = useState(false)
+
+  if (!code) {
+    return <div style={{ padding: '20px 16px', color: 'var(--faint)', fontSize: 12.5 }}>No code snippet for this component.</div>
+  }
+
+  function copy() {
+    if (!code) return
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1400)
+    })
+  }
+
+  return (
+    <div className="wb-code-wrap">
+      <pre className="wb-code">{code}</pre>
+      <button type="button" className={`wb-copy${copied ? ' copied' : ''}`} onClick={copy}>
+        {copied ? (
+          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="m5 13 4 4L19 7"></path>
+          </svg>
+        ) : (
+          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="9" y="9" width="11" height="11" rx="2"></rect>
+            <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
+          </svg>
+        )}
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+    </div>
+  )
+}
+
+/* ---------- Variants tab: live, auto-scaled component thumbnails ---------- */
+
+// Components live only inside a preview iframe, so each variant gets its own
+// iframe driven through the same postMessage protocol as the main canvas: select
+// the component, push the merged props (defaults + variant patch), mirror the
+// ambient env. The whole cell is click-to-apply — it commits the patch into the
+// Controls editor and the main canvas.
+const VARIANT_NAT_W = 760
+const VARIANT_NAT_H = 220
+
+interface VariantCellProps {
+  iframeSrc: string
+  id: string
+  label: string
+  patch: Record<string, unknown>
+  defaults: unknown
+  env: WindoEnvState
+  onApplyVariant: InspectorProps['onApplyVariant']
+}
+
+function VariantCell({ iframeSrc, id, label, patch, defaults, env, onApplyVariant }: VariantCellProps) {
+  const frameRef = useRef<HTMLIFrameElement>(null)
+  const thumbRef = useRef<HTMLDivElement>(null)
+  const [scale, setScale] = useState(0.25)
+
+  const merged = useMemo(() => JSON.stringify({ ...((defaults as object) ?? {}), ...patch }), [defaults, patch])
+
+  // Drive this cell's iframe: on its `ready` (and whenever props/env change)
+  // push the selection, merged props, and env so it mirrors the canvas.
+  useEffect(() => {
+    const frame = frameRef.current
+    if (!frame) return
+    const send = () => {
+      const win = frame.contentWindow
+      if (!win) return
+      win.postMessage({ source: WINDO_MSG, dir: 'host', type: 'select', id }, '*')
+      win.postMessage({ source: WINDO_MSG, dir: 'host', type: 'set-props', id, json: merged }, '*')
+      win.postMessage({ source: WINDO_MSG, dir: 'host', type: 'set-env', env }, '*')
+    }
+    const onMessage = (e: MessageEvent) => {
+      if (e.source !== frame.contentWindow) return
+      if (!isWindoMessage(e.data) || !isPreviewMessage(e.data)) return
+      if (e.data.type === 'ready') send()
+    }
+    window.addEventListener('message', onMessage)
+    send() // re-sync when already-ready (props/env changed after first load)
+    return () => window.removeEventListener('message', onMessage)
+  }, [id, merged, env])
+
+  // Scale the natural-width render down to the cell's content width.
+  useEffect(() => {
+    const thumb = thumbRef.current
+    if (!thumb) return
+    const measure = () => {
+      const w = thumb.clientWidth
+      if (w) setScale(w / VARIANT_NAT_W)
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(thumb)
+    return () => ro.disconnect()
+  }, [])
+
+  // The cell is a div (it contains an iframe, which can't live inside a button);
+  // a transparent button overlay is the real click/focus target.
+  return (
+    <div className="wb-variant-cell clickable">
+      <div className="wb-variant-stage">
+        <div className="wb-variant-thumb" ref={thumbRef} style={{ height: Math.round(VARIANT_NAT_H * scale) }}>
+          <iframe
+            ref={frameRef}
+            src={iframeSrc}
+            className="wb-variant-frame"
+            title={`${label} preview`}
+            tabIndex={-1}
+            style={{ width: VARIANT_NAT_W, height: VARIANT_NAT_H, transform: `scale(${scale})` }}
+          />
+        </div>
+      </div>
+      <div className="wb-variant-label">
+        <span className="vname">{label}</span>
+        <span className="vapply">apply</span>
+      </div>
+      <button type="button" className="wb-variant-apply" aria-label={`Apply variant ${label}`} title="Apply this variant" onClick={() => onApplyVariant(patch)} />
+    </div>
+  )
+}
+
+interface VariantsTabProps {
+  iframeSrc: string
+  describe: InspectorProps['describe']
+  env: ChromeEnv
+  onApplyVariant: InspectorProps['onApplyVariant']
+}
+
+function VariantsTab({ iframeSrc, describe, env, onApplyVariant }: VariantsTabProps) {
+  const variants = describe?.variants ?? []
+  const previewEnv = useMemo<WindoEnvState>(
+    () => ({
+      colorScheme: env.colorScheme,
+      viewport: { width: VARIANT_NAT_W, height: VARIANT_NAT_H, name: 'desktop' },
+      reducedMotion: env.reducedMotion,
+      direction: env.direction,
+      locale: env.locale,
+      contexts: env.contexts,
+    }),
+    [env.colorScheme, env.reducedMotion, env.direction, env.locale, env.contexts]
+  )
+
+  if (!variants.length) {
+    return <div className="wb-context-empty">No variant gallery — use the Controls tab and resize the canvas to explore states.</div>
+  }
+  return (
+    <div className="wb-variants">
+      {variants.map(vr => (
+        <VariantCell key={vr.label} iframeSrc={iframeSrc} id={describe?.id ?? ''} label={vr.label} patch={vr.props} defaults={describe?.defaults} env={previewEnv} onApplyVariant={onApplyVariant} />
+      ))}
+    </div>
+  )
+}
+
+/* ---------- Context tab ---------- */
+
+interface ContextControlProps {
+  control: WindoContextControlMeta
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+function ContextControl({ control, value, onChange }: ContextControlProps) {
+  const label = control.label ?? control.key
+  let field: ReactNode
+  if (control.type === 'enum') {
+    field = (
+      <select className="wb-ctrl-input" value={String(value)} onChange={e => onChange(e.target.value)}>
+        {(control.options ?? []).map(o => (
+          <option key={o} value={o}>
+            {o}
+          </option>
+        ))}
+      </select>
+    )
+  } else if (control.type === 'boolean') {
+    const checked = Boolean(value)
+    field = <button type="button" role="switch" aria-checked={checked} aria-label={label} className={`wb-switch${checked ? ' on' : ''}`} onClick={() => onChange(!checked)} />
+  } else if (control.type === 'number') {
+    field = (
+      <input
+        type="number"
+        className="wb-ctrl-input"
+        value={value === undefined || value === null ? '' : Number(value)}
+        min={control.min}
+        max={control.max}
+        step={control.step}
+        onChange={e => onChange(e.target.valueAsNumber)}
+      />
+    )
+  } else {
+    field = <input type="text" className="wb-ctrl-input" value={value === undefined || value === null ? '' : String(value)} onChange={e => onChange(e.target.value)} />
+  }
+  return (
+    <div className="wb-ctrl-row">
+      <span className="clbl">{label}</span>
+      <span className="cfield">{field}</span>
+    </div>
+  )
+}
+
+interface ContextSectionProps {
+  ctx: WindoContextMeta
+  env: ChromeEnv
+  setContextValue: InspectorProps['setContextValue']
+}
+
+function ContextSection({ ctx, env, setContextValue }: ContextSectionProps) {
+  const stored = env.contexts[ctx.name] ?? {}
+  return (
+    <div className="wb-context-group">
+      <div className="wb-context-group-head">
+        <span className="gname">{ctx.label ?? ctx.name}</span>
+        <span className="grow" />
+        {ctx.hasProvider && <span className="gtag">provider</span>}
+      </div>
+      {ctx.description && <p className="wb-context-group-desc">{ctx.description}</p>}
+      {ctx.controls.length === 0 ? (
+        <div className="wb-ctrl-row">
+          <span className="clbl">No controls</span>
+        </div>
+      ) : (
+        ctx.controls.map(control => {
+          const current = control.key in stored ? stored[control.key] : control.default
+          return <ContextControl key={control.key} control={control} value={current} onChange={value => setContextValue(ctx.name, control.key, value)} />
+        })
+      )}
+    </div>
+  )
+}
+
+interface ContextTabProps {
+  contexts: WindoContextMeta[]
+  env: ChromeEnv
+  setEnv: InspectorProps['setEnv']
+  setContextValue: InspectorProps['setContextValue']
+}
+
+function ContextTab({ contexts, env, setEnv, setContextValue }: ContextTabProps) {
+  return (
+    <div className="wb-context">
+      {contexts.map(ctx => (
+        <ContextSection key={ctx.name} ctx={ctx} env={env} setContextValue={setContextValue} />
+      ))}
+      <div className="wb-context-group">
+        <div className="wb-context-group-head">
+          <span className="gname">Environment</span>
+        </div>
+        <div className="wb-ctrl-row">
+          <span className="clbl">Direction</span>
+          <span className="cfield">
+            <select className="wb-ctrl-input" value={env.direction} onChange={e => setEnv({ direction: e.target.value as ChromeEnv['direction'] })}>
+              <option value="ltr">ltr</option>
+              <option value="rtl">rtl</option>
+            </select>
+          </span>
+        </div>
+        <div className="wb-ctrl-row">
+          <span className="clbl">Reduced motion</span>
+          <span className="cfield">
+            <button
+              type="button"
+              role="switch"
+              aria-checked={env.reducedMotion}
+              aria-label="Reduced motion"
+              className={`wb-switch${env.reducedMotion ? ' on' : ''}`}
+              onClick={() => setEnv({ reducedMotion: !env.reducedMotion })}
+            />
+          </span>
+        </div>
+        <div className="wb-ctrl-row">
+          <span className="clbl">Locale</span>
+          <span className="cfield">
+            <input type="text" className="wb-ctrl-input" value={env.locale} onChange={e => setEnv({ locale: e.target.value })} />
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/* ---------- Logs strip ---------- */
+
+function formatLogTime(ts: number): string {
+  try {
+    return new Date(ts).toLocaleTimeString(undefined, { hour12: false })
+  } catch {
+    return ''
+  }
+}
+
+function formatLogMessage(entry: WindoLogEntry): string {
+  const body = entry.args.map(a => (typeof a === 'string' ? a : JSON.stringify(a))).join(', ') || '—'
+  return body.length > 800 ? `${body.slice(0, 800)}…` : body
+}
+
+function formatStateValue(value: unknown): string {
+  if (value === undefined) return 'undefined'
+  const out = typeof value === 'string' ? value : (JSON.stringify(value) ?? 'undefined')
+  return out.length > 80 ? `${out.slice(0, 80)}…` : out
+}
+
+function LogsStrip({ logs, clearLogs }: { logs: InspectorProps['logs']; clearLogs: InspectorProps['clearLogs'] }) {
+  const recent = logs.slice(-50)
+  return (
+    <div className="wb-logs">
+      <div className="wb-logs-bar">
+        <span className="lbl">Logs</span>
+        <span className="cnt">{logs.length}</span>
+        <button type="button" className="wb-ghostbtn" onClick={clearLogs} disabled={!logs.length} title="Clear logs">
+          Clear
+        </button>
+      </div>
+      {logs.length === 0 ? (
+        <div className="wb-logs-empty">
+          Events the component emits via <code>ctx.logger.log(…)</code> land here — e.g. a button’s click handler or an action’s <code>run</code>. Interact with the preview to see them.
+        </div>
+      ) : (
+        <div className="wb-logs-list">
+          {recent.map(entry => (
+            <div className="wb-log log" key={entry.seq}>
+              <span className="ltime">{formatLogTime(entry.ts)}</span>
+              <span className="lmsg">{formatLogMessage(entry)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* ---------- Inspector shell ---------- */
+
+export function Inspector(props: InspectorProps) {
+  const {
+    entry,
+    describe,
+    iframeSrc,
+    valuesJson,
+    setValuesJson,
+    dirty,
+    onSave,
+    onReset,
+    parseErrors,
+    renderError,
+    logs,
+    clearLogs,
+    state,
+    contexts,
+    env,
+    setEnv,
+    setContextValue,
+    onApplyVariant,
+    position,
+    collapsed,
+    onToggle,
+  } = props
+  const [tab, setTab] = useState<InspectorTab>('Controls')
+  const stateKeys = Object.keys(state)
+
+  const status = entry?.status ?? 'stable'
+
+  if (collapsed) {
+    if (position === 'right') {
+      return (
+        <div className="wb-inspector right collapsed">
+          <button type="button" className="wb-iconbtn" title="Expand inspector" onClick={onToggle}>
+            {Icons.chevsLeft}
+          </button>
+          <span className="wb-rail-label">Inspector{entry ? ` — ${entry.title}` : ''}</span>
+        </div>
+      )
+    }
+    return (
+      <div className="wb-inspector bottom collapsed">
+        <button type="button" className="wb-iconbtn" title="Expand inspector" onClick={onToggle}>
+          {Icons.chevsUp}
+        </button>
+        <span className="cname">{entry?.title ?? 'Inspector'}</span>
+        <span className={`wb-status ${status}`}>{status}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`wb-inspector ${position}`}>
+      {position === 'right' && (
+        <div className="wb-doc-head" style={{ paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>
+          <h2>
+            {entry?.title ?? 'Inspector'}
+            <span className={`wb-status ${status}`}>{status}</span>
+            <button type="button" className="wb-iconbtn" style={{ marginLeft: 'auto', marginRight: -7 }} title="Collapse inspector" onClick={onToggle}>
+              {Icons.chevsRight}
+            </button>
+          </h2>
+          {entry?.description && <p>{entry.description}</p>}
+          {entry?.deprecation && (
+            <div className="wb-deprecated-note" style={{ margin: '10px 0 0 0' }}>
+              {entry.deprecation}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="wb-tabs" role="tablist">
+        {INSPECTOR_TABS.map(t => (
+          <button type="button" key={t} role="tab" aria-selected={tab === t} className={`wb-tab${tab === t ? ' on' : ''}`} onClick={() => setTab(t)}>
+            {t}
+          </button>
+        ))}
+        <span className="wb-tabs-aux">
+          {position === 'bottom' && (
+            <>
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry?.deprecation || entry?.description}</span>
+              <span className={`wb-status ${status}`}>{status}</span>
+              <button type="button" className="wb-iconbtn" title="Collapse inspector" onClick={onToggle}>
+                {Icons.chevsDown}
+              </button>
+            </>
+          )}
+        </span>
+      </div>
+      {stateKeys.length > 0 && (
+        <div className="wb-state" title="Component-local state (read-only) — driven by actions and the component">
+          <span className="wb-state-label">state</span>
+          {stateKeys.map(k => (
+            <span className="wb-state-item" key={k}>
+              <span className="k">{k}</span>
+              <span className="v">{formatStateValue(state[k])}</span>
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="wb-inspector-body">
+        {tab === 'Controls' && (
+          <ControlsTab
+            valuesJson={valuesJson}
+            setValuesJson={setValuesJson}
+            dirty={dirty}
+            onSave={onSave}
+            onReset={onReset}
+            parseErrors={parseErrors}
+            renderError={renderError}
+            fields={describe?.descriptor.fields ?? []}
+          />
+        )}
+        {tab === 'Props' && <PropsTab props={describe?.props ?? []} />}
+        {tab === 'Code' && <CodeTab code={describe?.code ?? null} />}
+        {tab === 'Variants' && <VariantsTab iframeSrc={iframeSrc} describe={describe} env={env} onApplyVariant={onApplyVariant} />}
+        {tab === 'Context' && <ContextTab contexts={contexts} env={env} setEnv={setEnv} setContextValue={setContextValue} />}
+        {tab === 'Console' && <LogsStrip logs={logs} clearLogs={clearLogs} />}
+      </div>
+    </div>
+  )
+}

package/src/client/Sidebar.tsx

@@ -0,0 +1,108 @@
+// Sidebar / library nav. Groups come from config (ordered); entries are placed
+// under the group whose slug matches entry.group. Collapsed groups persist to
+// localStorage under windo:navgroups; an active search query forces all open.
+
+import { useState } from 'react'
+import { Icons } from './icons'
+import type { SidebarProps } from './internal-types'
+
+const STORAGE_KEY = 'windo:navgroups'
+
+function loadClosedGroups(): Record<string, boolean> {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
+    if (raw && typeof raw === 'object' && !Array.isArray(raw)) return raw as Record<string, boolean>
+  } catch {
+    /* corrupted — fall through */
+  }
+  return {}
+}
+
+function GroupChevron() {
+  return (
+    <svg aria-hidden="true" className="chev" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  )
+}
+
+export function Sidebar(props: SidebarProps) {
+  const { groups, manifest, selected, onSelect, query, setQuery, collapsed, onToggle } = props
+  const [closedGroups, setClosedGroups] = useState(loadClosedGroups)
+
+  function toggleGroup(slug: string) {
+    setClosedGroups(prev => {
+      const next = { ...prev }
+      if (next[slug]) {
+        delete next[slug]
+      } else {
+        next[slug] = true
+      }
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+      } catch {
+        /* storage unavailable — keep in-memory state */
+      }
+      return next
+    })
+  }
+
+  if (collapsed) {
+    return (
+      <aside className="wb-sidebar collapsed">
+        <button type="button" className="wb-iconbtn" title="Expand library" onClick={onToggle}>
+          {Icons.chevsRight}
+        </button>
+        <span className="wb-rail-label">Library</span>
+      </aside>
+    )
+  }
+
+  const q = query.trim().toLowerCase()
+  const groupName = (slug: string) => groups.find(g => g.slug === slug)?.name ?? slug
+  const filtered = manifest.filter(e => !q || e.title.toLowerCase().includes(q) || groupName(e.group).toLowerCase().includes(q))
+
+  return (
+    <aside className="wb-sidebar">
+      <div className="wb-sidebar-head">
+        <div className="wb-search">
+          {Icons.search}
+          <input type="text" placeholder="Search components…" value={query} onChange={e => setQuery(e.target.value)} />
+        </div>
+        <button type="button" className="wb-iconbtn" title="Collapse library" onClick={onToggle}>
+          {Icons.chevsLeft}
+        </button>
+      </div>
+      <nav className="wb-nav">
+        {groups.map(group => {
+          const items = filtered.filter(e => e.group === group.slug)
+          if (!items.length) return null
+          const open = !!q || !closedGroups[group.slug]
+          const holdsSelected = items.some(e => e.id === selected)
+          return (
+            <div className="wb-nav-group" key={group.slug}>
+              <button type="button" className={`wb-nav-group-label${open ? '' : ' closed'}`} aria-expanded={open} onClick={() => toggleGroup(group.slug)}>
+                <GroupChevron />
+                <span className="cat">{group.name}</span>
+                <span className="grow" />
+                {!open && holdsSelected && <span className="seldot" title="Contains selected component" />}
+                {!open && <span className="cnt">{items.length}</span>}
+              </button>
+              {open && (
+                <div className="wb-nav-list">
+                  {items.map(e => (
+                    <button type="button" key={e.id} className={`wb-nav-item${e.id === selected ? ' selected' : ''}`} onClick={() => onSelect(e.id)}>
+                      <span className="name">{e.title}</span>
+                      {e.status !== 'stable' && <span className={`wb-status ${e.status}`}>{e.status}</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+        {!filtered.length && <div className="wb-nav-empty">No components match “{query}”</div>}
+      </nav>
+    </aside>
+  )
+}