@baseworks/ui 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,184 @@
-# Temporary Holding Version
+# @baseworks/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The design system: **tokens**, **primitives**, and the **application frame**.
+Plain CSS and React — no utility framework, no runtime styling.
+
+```tsx
+import '@baseworks/ui/styles.css'          // once, in the root layout
+import { Button, Card, Table, Pill } from '@baseworks/ui'
+```
+
+## Three layers
+
+| File | What is in it |
+|---|---|
+| `tokens.css` | Colour, type, shadow. One palette, light and dark. The only place a value is written. |
+| `primitives.css` | Buttons, cards, tables, forms, dialogs, palette, toast. |
+| `frame.css` | Rail, sub panel, top bar, assistant, and the centered gate. |
+
+`styles.css` imports all three. A product that wants the look without the frame
+imports the first two.
+
+## The palette
+
+**Warm paper, ultramarine ink.** One palette, in a light and a dark form.
+`prefers-color-scheme` chooses until the viewer does, with `ThemeToggle` in the
+top bar. There is no brand switcher — a second palette is a second design to
+keep correct in every state.
+
+|  | Light | Dark |
+|---|---|---|
+| Page | `#FBFAF8` | `#1A1815` |
+| Card | `#FFFFFF` | `#221F1B` |
+| Text | `#1A1916` | `#EDE9E1` |
+| Secondary | `#67635B` | `#A5A096` |
+| Accent | `#2B44CE` | `#A9B5FF` |
+| ok · warn · crit | `#16794F` `#8A6112` `#B3362F` | `#4FC28C` `#DFB255` `#F0736B` |
+
+Two decisions are worth knowing, because they are the reason it looks like this.
+
+**The neutrals are warm, not grey.** A console that is mostly tables and text is
+sat in front of for hours, and a paper ground is easier to read than the cool
+grey every admin panel ships with. Closest shadcn base: `stone`.
+
+**The accent is 231° and that is functional.** The interface is full of status,
+and ok/warn/crit own green, amber and red. An accent near any of them turns
+"this is a link" into "this is a problem". Ultramarine sits 76° from ok, 169°
+from warn and 132° from crit, so an accented thing never reads as a state. The
+palette this replaced used a vermilion accent that sat beside its own crit red.
+
+Every pairing the interface actually makes was measured rather than eyeballed:
+body text ≥ 14:1, secondary ≥ 5.7:1, the accent as a link ≥ 7.4:1, a button
+label on the accent ≥ 7.4:1, each status pill against its own tinted background
+≥ 4.7:1.
+
+`tokens.css` also carries shadcn/ui's names (`--background`, `--primary`,
+`--border`, …) as aliases, so a component copied in from there inherits this
+palette. They are raw colour values — the form shadcn uses with Tailwind v4, not
+the older `hsl(var(--background))` triplets.
+
+### Light and dark
+
+```tsx
+<script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />  // in <head>
+<ThemeToggle />                                                      // in the top bar
+```
+
+`data-theme="light|dark"` on `<html>` overrides the system in both directions —
+a forced dark on a light machine, and a forced light on a dark one. The script
+in `<head>` restores a stored choice before the first paint; without it the page
+renders the system's answer and then flips.
+
+`ThemeToggle` renders both icons and lets CSS hide one, under the same
+conditions that pick the palette. Asking JavaScript which theme is on cannot be
+answered until after hydration, so a viewer on a dark machine would see the
+wrong icon for a frame on every load.
+
+`resolvedTheme()` is the honest answer to "which theme is on": `currentTheme()`
+can say `system`, which is a setting rather than a colour.
+
+## Type
+
+Instrument Sans for the interface, IBM Plex Mono for anything literal (an id, a
+token, a path), and **Instrument Serif for page titles only**. One serif, at the
+top of a document, and nowhere else — it gives the console a voice without
+making a table harder to read.
+
+## Components
+
+The components are thin. They put the right class on the right element and hold
+the behaviour that would otherwise be retyped in every screen: the outside-click
+that closes a menu, where focus lands in a confirm dialog, the highlight in the
+palette. They never know what the product is.
+
+| | |
+|---|---|
+| Layout | `PageHead` `Card` `CardBody` `CardGrid` `Stats` `Stat` `KeyValue` |
+| Data | `Table` `Pill` `CellName` `CellSub` |
+| Forms | `Field` `FormRow` `FormError` `Switch` `Button` `IconButton` |
+| Telling | `Attention` `Toast` `CodeBox` `Chips` |
+| Overlays | `ConfirmDialog` `SlideOver` `Popover` `MenuItem` `CommandPalette` `Gate` |
+| Chrome | `ThemeToggle` |
+
+### The shape of a list screen
+
+A screen that shows a list *is* the list. What you can do to it lives in the
+card's header — `<Card actions={<Button small>Add a customer</Button>}>` — and
+the form it opens is a `SlideOver`, not another card above the table. The list
+stays on screen while you type, which matters because you are usually adding to
+something you are looking at, and a form that pushes the list away makes you
+close it to check what is already there.
+
+The module's own menu lists places, not actions. An "Add a customer" entry there
+would be a menu item whose job is to scroll you to a button.
+
+Three of them carry a rule rather than a look:
+
+- **`ConfirmDialog`** puts focus on Cancel, never on the destructive button, so
+  a reflex Enter destroys nothing; `typeToConfirm` makes the person write the
+  resource's name, which is the only guard against acting on the wrong row.
+- **`Table`** takes `columns` and a `note`, and renders the note as one
+  full-width row when there are no rows — loading, error, or empty. Screens used
+  to hand-roll that row with a `colSpan` they had to keep in step with the
+  header.
+- **`SlideOver`** stays in the DOM and moves off-screen, which is what makes it
+  animate and what it then has to compensate for: it focuses its first field
+  when it opens, because an `autoFocus` inside fires at mount while the panel is
+  closed, and it is `inert` while closed, so a keyboard does not tab into a
+  panel nobody can see. That focus effect depends on `open` alone and reads
+  `onClose` through a ref — depending on the callback made it re-run on every
+  render, since callers write `onClose={() => setOpen(false)}`, and focus then
+  jumped back to the first field on every keystroke in any other one.
+
+## The frame
+
+`Frame` is the whole shell — rail, sub panel, top bar, assistant, ⌘K, toast,
+confirm — and it is **presentational**. It knows how a surface is laid out and
+nothing about what the surface is for:
+
+```tsx
+<Frame
+  modules={modules} pathname={pathname} onNavigate={(href) => router.push(href)}
+  counts={counts} icons={ICONS}
+  railTop={<OrgSwitcher …/>} railBottom={<AccountMenu …/>}
+  topbarLeft={<ModeTag/>} topbarRight={<ThemeToggle/>}
+  assistant={(s) => <AssistantPanel {...s} />}
+>
+  {children}
+</Frame>
+```
+
+Everything that knows what a product *is* — which modules exist, who is signed
+in, which organization is active, what the counts count — arrives as props or
+slots. What the frame owns is the state that belongs to the layout: which panel
+is open, whether the assistant has taken the middle column, what the palette is
+showing, the toast that is up. Screens reach the last two through `useFrame()`.
+
+A surface supplies its own `Module[]`; `activeModule(pathname, modules)` decides
+which is current, longest-prefix wins. `navigationCommands` turns the same list
+into ⌘K entries, so a new module is reachable the moment it is added.
+
+`AssistantPanel` takes `onAsk` — that is where a surface binds a real agent.
+Without it the panel says it is a preview, which keeps the frame demonstrable
+before the tools exist. It **expands into the middle column**: an answer that is
+a table needs the room a table needs, and the expand state lives in `Frame`
+because widening the panel takes space from the content beside it.
+
+Also here, because every surface was otherwise writing them again:
+`useResource` (loading, error, refresh, `enabled`), and the formatters `age`,
+`until`, `untilEpoch`, `money`, `amount`.
+
+## How it is consumed
+
+The package ships **source**, not a build: consumers list it in
+`transpilePackages`. It has no repository of its own yet, so it is tracked in
+the baseworks-ts root alongside `packages/tsconfig`. When it is published it
+gets `dotlabshq/baseworks-ui`, a `tsup` build, and a line in PACKAGES.md §2.
+
+## Where it came from
+
+Ported from the zone9 console (`apps/web`), which is where this shell was
+designed and proven. What came across is what no product owns: tokens, frame,
+primitives. What stayed behind is everything that knows about servers, regions
+or domains. `apps/console` is the reference consumer; zone9 becomes one when it
+drops its copy.

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@baseworks/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "The baseworks design system: tokens, primitives and the application frame. Plain CSS and React, no utility framework.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./tokens.css": "./src/tokens.css",
+    "./primitives.css": "./src/primitives.css",
+    "./frame.css": "./src/frame.css"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "typescript": "^5.9.3",
+    "@baseworks/tsconfig": "0.1.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
 }

package/src/assistant.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+/**
+ * The assistant, sliding in from the right.
+ *
+ * The panel is generic; what it is connected to is not. `onAsk` is where a
+ * surface binds a real agent — given none, the panel answers with a note that
+ * says so, which is honest and keeps the frame demonstrable before the tools
+ * exist. Nothing here computes an answer.
+ *
+ * `expanded` is owned by the frame, not by this component: widening the panel
+ * takes room from the content beside it, so the decision belongs where both
+ * are laid out.
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+
+type Msg = { id: number; kind: 'user' | 'bot' | 'typing'; body?: ReactNode }
+let nextId = 1
+
+export interface AssistantPanelProps {
+  open: boolean
+  onClose: () => void
+  /** Whether the panel has taken the middle column as well. */
+  expanded?: boolean
+  onToggleExpand?: () => void
+  /** The two-letter mark in the panel's head. */
+  mark?: ReactNode
+  title?: string
+  subtitle?: string
+  /** The first thing it says. */
+  greeting?: ReactNode
+  /**
+   * Answer a question. Return the reply's body; throw to show an error as a
+   * reply. Absent means the panel is a design preview and says so.
+   */
+  onAsk?: (text: string) => Promise<ReactNode>
+}
+
+const PREVIEW = 'This is a design preview — the assistant is not connected yet. It will use the same tools the screens and the CLI use.'
+
+export function AssistantPanel({
+  open,
+  onClose,
+  expanded = false,
+  onToggleExpand,
+  mark = 'bw',
+  title = 'Assistant',
+  subtitle = 'does what the screens do',
+  greeting = 'Hello. I can answer questions about what is here and, once the tools are connected, act on your behalf — always asking before a write.',
+  onAsk,
+}: AssistantPanelProps) {
+  const [msgs, setMsgs] = useState<Msg[]>([{ id: 0, kind: 'bot', body: greeting }])
+  const [text, setText] = useState('')
+  const [busy, setBusy] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
+  }, [msgs])
+
+  const add = (m: Omit<Msg, 'id'>) => {
+    const id = nextId++
+    setMsgs((p) => [...p, { ...m, id }])
+    return id
+  }
+
+  const send = async () => {
+    const asked = text.trim()
+    if (!asked || busy) return
+    add({ kind: 'user', body: asked })
+    setText('')
+    const typing = add({ kind: 'typing' })
+    setBusy(true)
+    try {
+      const body = onAsk ? await onAsk(asked) : await new Promise<ReactNode>((r) => setTimeout(() => r(PREVIEW), 700))
+      setMsgs((p) => p.filter((m) => m.id !== typing))
+      add({ kind: 'bot', body })
+    } catch (err) {
+      setMsgs((p) => p.filter((m) => m.id !== typing))
+      add({ kind: 'bot', body: err instanceof Error && err.message ? err.message : 'That did not answer.' })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <aside className={'chat' + (open ? ' open' : '') + (expanded ? ' expanded' : '')} aria-label={title}>
+      <div className="chat-inner">
+        <div className="chat-head">
+          <div className="brand-mark" style={{ width: 26, height: 26, fontSize: 13, margin: 0 }}>{mark}</div>
+          <div>
+            <div className="ttl">{title}</div>
+            <div className="sub">{subtitle}</div>
+          </div>
+          {onToggleExpand && (
+            <button
+              className="icon-btn chat-expand"
+              onClick={onToggleExpand}
+              aria-label={expanded ? 'Narrow the assistant' : 'Widen the assistant'}
+              aria-pressed={expanded}
+              title={expanded ? 'Narrow' : 'Widen'}
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7">
+                {expanded ? <path d="M9.5 2v4.5H14M6.5 14V9.5H2" /> : <path d="M14 2H9.5v4.5M2 14h4.5V9.5" />}
+              </svg>
+            </button>
+          )}
+          <button className="icon-btn close" onClick={onClose} aria-label="Close">✕</button>
+        </div>
+        <div className="chat-scroll" ref={scrollRef}>
+          {msgs.map((m) =>
+            m.kind === 'typing' ? (
+              <div key={m.id} className="typing"><i /><i /><i /></div>
+            ) : (
+              <div key={m.id} className={'msg ' + m.kind}>{m.body}</div>
+            ),
+          )}
+        </div>
+        <div className="chat-input">
+          <input
+            type="text"
+            placeholder="Ask for something…"
+            aria-label="Message"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && void send()}
+          />
+          <button className="send" onClick={() => void send()} aria-label="Send" disabled={busy}>
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M2 8h11M9 4l4 4-4 4" /></svg>
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}

package/src/button.tsx

@@ -0,0 +1,31 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+export type ButtonTone = 'primary' | 'ghost' | 'danger'
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** `danger` is for the irreversible one; it is never the default. */
+  tone?: ButtonTone
+  small?: boolean
+  children: ReactNode
+}
+
+/**
+ * One button shape for the whole system.
+ *
+ * `type` defaults to "button": inside a form the HTML default is "submit", so a
+ * secondary button that only opens a menu would submit the form instead.
+ */
+export function Button({ tone = 'primary', small, className, type, children, ...rest }: ButtonProps) {
+  const cls = ['btn', tone === 'ghost' && 'ghost', tone === 'danger' && 'danger', small && 'sm', className]
+    .filter(Boolean).join(' ')
+  return <button type={type ?? 'button'} className={cls} {...rest}>{children}</button>
+}
+
+/** A square icon-only button, as used in the top bar. Always needs a label. */
+export function IconButton({ label, className, type, children, ...rest }:
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & { label: string; children: ReactNode }) {
+  return (
+    <button type={type ?? 'button'} className={['icon-btn', className].filter(Boolean).join(' ')}
+      title={label} aria-label={label} {...rest}>{children}</button>
+  )
+}

package/src/card.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react'
+
+/** The title of a screen, and one line saying what it is. */
+export function PageHead({ title, children, actions }: { title: ReactNode; children?: ReactNode; actions?: ReactNode }) {
+  return (
+    <div className="page-head">
+      <div><h1>{title}</h1>{children && <p>{children}</p>}</div>
+      {actions && <><div className="spacer" />{actions}</>}
+    </div>
+  )
+}
+
+/**
+ * A card. `title` gives it a header; `hint` is the one-sentence explanation
+ * that sits on the right of that header — the place to say what the card is
+ * for, so the screen does not need a paragraph above it.
+ *
+ * `actions` is what you can do to the thing in the card, in its own header:
+ * "Add a customer" above the directory it will appear in. That is where a
+ * reader looks for it, and it keeps the form that follows out of the page —
+ * see `SlideOver`.
+ */
+export function Card({ id, title, hint, actions, children, style, className }: {
+  id?: string
+  title?: ReactNode
+  hint?: ReactNode
+  actions?: ReactNode
+  children: ReactNode
+  style?: React.CSSProperties
+  /**
+   * Added to `card`, for the few things a card can be that are not about its
+   * contents — `no-print`, most of all. Wrapping a card in a div to carry such
+   * a class looks harmless and is not: `.card:last-child` drops the bottom
+   * margin, so the wrapped card loses the gap under it and the next one appears
+   * welded to it.
+   */
+  className?: string
+}) {
+  return (
+    <div className={className ? `card ${className}` : 'card'} id={id} style={style}>
+      {title && (
+        <div className="card-head">
+          <h2>{title}</h2>
+          {hint && <span className="cell-sub">{hint}</span>}
+          {actions && <div className="card-actions">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+/** Padded body for a card whose content is not a table. */
+export function CardBody({ children, style }: { children: ReactNode; style?: React.CSSProperties }) {
+  return <div className="card-pad" style={style}>{children}</div>
+}
+
+/** Two columns on a wide screen, one on a narrow one. */
+export function CardGrid({ children }: { children: ReactNode }) {
+  return <div className="grid2">{children}</div>
+}
+
+/** The strip of numbers at the top of an overview. */
+export function Stats({ children }: { children: ReactNode }) {
+  return <div className="stats">{children}</div>
+}
+
+/**
+ * One number. `value` is undefined until its source answers — the dash says
+ * "not known yet" rather than showing a zero that would read as a fact.
+ */
+export function Stat({ label, value, note }: { label: ReactNode; value: ReactNode; note?: ReactNode }) {
+  return (
+    <div className="stat">
+      <div className="k">{label}</div>
+      <div className="v num">{value ?? '–'}</div>
+      {note && <div className="s">{note}</div>}
+    </div>
+  )
+}
+
+/** A labelled row inside a card: what it is on the left, the value on the right. */
+export function KeyValue({ label, children }: { label: ReactNode; children: ReactNode }) {
+  return <div className="kv"><span>{label}</span><b>{children}</b></div>
+}

package/src/command-palette.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+export type PaletteItem = {
+  label: string
+  /** The intent name, shown on the right. The palette, the API and the assistant share it. */
+  intent: string
+  run: () => void
+}
+
+/**
+ * ⌘K. Presentational: it filters, moves the highlight and calls `run`. What is
+ * in the list is the application's business, never the palette's.
+ */
+export function CommandPalette({ open, onClose, items, placeholder = 'What do you want to do?' }: {
+  open: boolean
+  onClose: () => void
+  items: PaletteItem[]
+  placeholder?: string
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [q, setQ] = useState('')
+  const [hl, setHl] = useState(0)
+
+  useEffect(() => { if (open) { setQ(''); setHl(0); inputRef.current?.focus() } }, [open])
+
+  const shown = useMemo(
+    () => items.filter((it) => !q || `${it.label} ${it.intent}`.toLowerCase().includes(q.toLowerCase())),
+    [items, q],
+  )
+  if (!open) return null
+
+  const pick = (it: PaletteItem) => { onClose(); it.run() }
+
+  return (
+    <div className="cmdk on" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="cmdk-box">
+        <input ref={inputRef} type="text" placeholder={placeholder} value={q}
+          onChange={(e) => { setQ(e.target.value); setHl(0) }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); setHl((h) => Math.min(h + 1, shown.length - 1)) }
+            if (e.key === 'ArrowUp') { e.preventDefault(); setHl((h) => Math.max(h - 1, 0)) }
+            if (e.key === 'Escape') onClose()
+            if (e.key === 'Enter' && shown[hl]) pick(shown[hl])
+          }} />
+        <div className="cmdk-list">
+          {shown.map((it, i) => (
+            <button key={it.intent + it.label} className={'cmdk-item' + (i === hl ? ' hl' : '')}
+              onMouseEnter={() => setHl(i)} onClick={() => pick(it)}>
+              <span>{it.label}</span><span className="k">{it.intent}</span>
+            </button>
+          ))}
+          {shown.length === 0 && <div className="cell-sub" style={{ padding: '10px 14px' }}>Nothing matches.</div>}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/commands.ts

@@ -0,0 +1,27 @@
+'use client'
+
+/**
+ * What ⌘K can do, derived from the module list so a new module is reachable
+ * the moment it is added. A screen's own commands (create, revoke, switch) are
+ * appended by whoever owns the action.
+ */
+
+import type { PaletteItem } from './command-palette'
+import type { Module } from './nav'
+
+/**
+ * The palette offers what the rail offers. A command for something the surface
+ * has filtered out would fail on the way in, and offering it is a worse answer
+ * than not knowing about it.
+ */
+export function navigationCommands(modules: Module[], go: (href: string) => void): PaletteItem[] {
+  const out: PaletteItem[] = []
+  for (const m of modules) {
+    for (const it of m.items) {
+      if (!it.href) continue
+      const slug = it.label.toLowerCase().replace(/\s+/g, '-')
+      out.push({ label: `→ ${m.title} · ${it.label}`, intent: `${m.key}.${slug}`, run: () => go(it.href!) })
+    }
+  }
+  return out
+}

package/src/dialog.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+export type ConfirmRequest = {
+  title: string
+  /** What is about to happen, in one sentence. */
+  intro: string
+  /** What disappears for good. */
+  losses?: string[]
+  /** A footnote: a grace period, where the data goes. */
+  note?: string
+  confirmLabel: string
+  /** When set, the confirm button stays closed until this is typed exactly. */
+  typeToConfirm?: string
+  onConfirm: () => Promise<void>
+}
+
+/**
+ * The confirmation for a destructive action.
+ *
+ * Two things here are deliberate. Focus lands on Cancel (or on the text box),
+ * never on the destructive button, so a reflex Enter destroys nothing. And
+ * `typeToConfirm` is the only guard against clicking the right button on the
+ * wrong row — deletion has no undo, so the name has to be written out.
+ *
+ * A failure keeps the dialog open and shows why: closing it would leave the
+ * person believing the thing happened.
+ */
+export function ConfirmDialog({ request, onClose }: { request: ConfirmRequest | null; onClose: () => void }) {
+  const [typed, setTyped] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const cancelRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!request) return
+    setTyped(''); setError(null); setBusy(false)
+    const t = setTimeout(() => (request.typeToConfirm ? inputRef.current : cancelRef.current)?.focus(), 30)
+    return () => clearTimeout(t)
+  }, [request])
+
+  useEffect(() => {
+    if (!request) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !busy) onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [request, busy, onClose])
+
+  if (!request) return null
+  const ready = !request.typeToConfirm || typed.trim() === request.typeToConfirm
+
+  const run = async () => {
+    if (!ready || busy) return
+    setBusy(true); setError(null)
+    try {
+      await request.onConfirm()
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'The action failed.')
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="dialog-wrap" onMouseDown={() => !busy && onClose()}>
+      <div className="dialog" role="alertdialog" aria-modal="true" aria-label={request.title}
+        onMouseDown={(e) => e.stopPropagation()}>
+        <div className="dialog-head"><span className="sev" /><h3>{request.title}</h3></div>
+        <div className="dialog-body">
+          <p>{request.intro}</p>
+          {request.losses && request.losses.length > 0 && (
+            <ul className="dialog-losses">{request.losses.map((l) => <li key={l}>{l}</li>)}</ul>
+          )}
+          {request.note && <p className="cell-sub">{request.note}</p>}
+          {request.typeToConfirm && (
+            <div className="field">
+              <label htmlFor="confirm-name">Type <span className="mono">{request.typeToConfirm}</span> to confirm</label>
+              <input id="confirm-name" ref={inputRef} type="text" autoComplete="off" spellCheck={false}
+                value={typed} disabled={busy} onChange={(e) => setTyped(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && run()} />
+            </div>
+          )}
+          {error && <div className="form-error">{error}</div>}
+        </div>
+        <div className="dialog-foot">
+          <button className="btn ghost" ref={cancelRef} onClick={onClose} disabled={busy}>Cancel</button>
+          <button className="btn danger" onClick={run} disabled={!ready || busy}>
+            {busy ? 'Working…' : request.confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}