@weft-js/warp 0.0.0-stage → 0.1.0

package/src/flow/ReauthDialog.tsx

@@ -0,0 +1,47 @@
+import { uid } from '@weft-js/warp-core'
+import { derived, untrack, type State } from '@weft-js/core'
+import { Button } from '../Button'
+import { Input } from '../Field'
+import { Modal } from '../Modal'
+import { FormError, useStepForm, type FlowForm } from './kit'
+import { PasskeyButton } from './Sso'
+
+/** Props for ReauthDialog. */
+export interface ReauthProps extends Omit<FlowForm<{ password: string }>, 'form' | 'onSubmit'> {
+  open: State<boolean>
+  /** Why it asks: "Deleting a project needs your password." */
+  reason?: unknown
+  /** With the password; close `open` when it's accepted. */
+  onConfirm?: (password: string) => void
+  /** Shows "Use a passkey"; WebAuthn is the app's. */
+  onPasskey?: () => unknown
+}
+
+/** Re-auth (09 §2.1): a Dialog before a sensitive act, with the password or a passkey. The 5-minute grant is the server's. */
+export function ReauthDialog(p: ReauthProps) {
+  const id = uid('reauth')
+  const src = untrack(() => p)
+  const ctl = useStepForm<{ password: string }>({
+    get errors() { return src.errors }, get error() { return src.error }, get pending() { return src.pending },
+    get errorOptions() { return src.errorOptions }, get onRetry() { return src.onRetry },
+    onSubmit: v => src.onConfirm?.(v.password),
+  }, v => ({ password: v.password ? undefined : 'Enter your password.' }))
+  const foot = derived(() => ctl.pending.value)
+  return (
+    <Modal
+      open={p.open}
+      size="sm"
+      title="Confirm it's you"
+      description={<>{p.reason} You won't be asked again for 5 minutes.</>}
+      footer={<>
+        {p.onPasskey && <PasskeyButton full={false} onPasskey={p.onPasskey}>Use a passkey</PasskeyButton>}
+        <Button type="submit" form={id} loading={foot.value}>Confirm</Button>
+      </>}
+    >
+      <form ref={n => ctl.bind(n)} id={id} data-scope="stack" novalidate onSubmit={ctl.submit}>
+        <FormError ctl={ctl} />
+        <Input label="Password" name="password" type="password" autocomplete="current-password" hint="" autofocus error={ctl.errors.value.password} />
+      </form>
+    </Modal>
+  )
+}

package/src/flow/ShortcutsOverlay.tsx

@@ -0,0 +1,60 @@
+import { filterShortcuts, isApple, markParts, shortcutLabels, shortcuts as registry, type Shortcut, type Shortcuts } from '@weft-js/warp-core'
+import { derived, onCleanup, onMount, state, untrack, type State } from '@weft-js/core'
+import { Search } from '../Field'
+import { Kbd } from '../Kbd'
+import { Modal } from '../Modal'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/shortcuts.css'
+
+/**
+ * The keyboard shortcuts overlay (09 §7): `?` opens a Dialog (a bottom sheet on phones) of what's registered now,
+ * grouped, platform-aware, with a filter over names and keys. Never shown by itself. `shortcuts.singleKeys = false`
+ * turns the single-key ones off (WCAG 2.1.4); they never fire in a text input.
+ */
+export function ShortcutsOverlay({ open, shortcuts = registry }: { open?: State<boolean>; shortcuts?: Shortcuts }) {
+  const own = state(false)
+  const on = untrack(() => open) ?? own
+  const reg = untrack(() => shortcuts)
+  const apple = state(false)
+  const rev = state(0)
+  const query = state('')
+  onMount(() => {
+    apple.value = isApple(navigator)
+    const quiet = reg.subscribe(() => rev.value++)
+    const drop = reg.register({ keys: '?', label: 'Show shortcuts', group: 'Help', run: () => (on.value = true) })
+    const stop = reg.listen(document)
+    onCleanup(() => { drop(); stop(); quiet() })
+  })
+  const groups = derived(() => {
+    void rev.value
+    const by = new Map<string, Shortcut[]>()
+    for (const s of filterShortcuts(reg.list(), query.value, apple.value)) {
+      const g = s.group ?? 'General'
+      by.set(g, [...(by.get(g) ?? []), s])
+    }
+    return [...by].map(([name, rows]) => ({ name, rows }))
+  })
+  return (
+    <Modal open={on} size="lg" title="Keyboard shortcuts" description="Press ? anywhere outside a text field.">
+      <div data-scope="shortcuts">
+        <Search label="Filter shortcuts" autofocus onInput={e => (query.value = e.currentTarget.value)} />
+        <div data-part="groups" aria-live="polite">
+          {groups.value.map(g => (
+            <section key={g.name}>
+              <h4 aria-level="3">{g.name}</h4>
+              <dl>
+                {g.rows.map(s => (
+                  <div key={s.keys}>
+                    <dt>{markParts(s.label, query.value).map(p => (p.hit ? <mark key={p.at}>{p.text}</mark> : <span key={p.at}>{p.text}</span>))}</dt>
+                    <dd>{shortcutLabels(s.keys, apple.value).map((step, i) => <span key={step.join()}>{i > 0 && ' then '}{step.map(k => <Kbd key={k}>{k}</Kbd>)}</span>)}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          ))}
+          {groups.value.length === 0 && <p data-part="empty">No shortcut matches “{query.value}”.</p>}
+        </div>
+      </div>
+    </Modal>
+  )
+}

package/src/flow/SignGate.tsx

@@ -0,0 +1,98 @@
+import { CheckIcon, FileTextIcon } from '@weft-js/warp-icons'
+import { announce, uid } from '@weft-js/warp-core'
+import { derived, state, untrack, watch } from '@weft-js/core'
+import { Badge } from '../Badge'
+import { Button, type Tone } from '../Button'
+import { Drawer } from '../Drawer'
+import { Mark } from './kit'
+import '@weft-js/warp-core/styles/flows/gate.css'
+import '@weft-js/warp-core/styles/flows/gate-badge.css'
+import '@weft-js/warp-core/styles/flows/pay-frame.css'
+import '@weft-js/warp-core/styles/components/spinner.css'
+
+/** Where a signature request stands. */
+export type SignStatus = 'unsigned' | 'pending' | 'signed' | 'expired' | 'declined' | 'error'
+
+const TONES: Record<SignStatus, Tone> = { unsigned: 'caution', pending: 'caution', signed: 'positive', expired: 'critical', declined: 'critical', error: 'neutral' }
+const LABELS: Record<SignStatus, string> = { unsigned: 'Agreement not signed', pending: 'Signature pending', signed: 'Agreement signed', expired: 'Signing link expired', declined: 'Agreement declined', error: "Couldn't check the signature" }
+const COPY: Record<SignStatus, string> = {
+  unsigned: 'Your legal contact can sign it instead.',
+  pending: 'Waiting for the signer to finish. This updates by itself.',
+  signed: '',
+  expired: 'That link has expired. Send a new one to carry on.',
+  declined: 'The agreement was declined. Send it again to carry on.',
+  error: "We couldn't reach the signing service. Try again.",
+}
+
+/** The gate's status (09 §2.4): caution, positive, critical, neutral. */
+export function SignGateBadge({ status }: { status: SignStatus }) {
+  const s = derived(() => status)
+  return <Badge tone={TONES[s.value]} data-state={s.value}>{s.value === 'signed' ? <CheckIcon /> : <FileTextIcon />}{LABELS[s.value]}</Badge>
+}
+
+/** Props for SignGate. */
+export interface SignGateProps {
+  /** From the provider: `query.live`, a poll, or a signal. */
+  status: SignStatus
+  /** The provider's embedded signer. */
+  src?: string
+  title: unknown
+  /** Shown while unsigned. */
+  description?: unknown
+  /** The blocker heading's level in the page's outline (the spec's h4 keeps its style). */
+  level?: number
+  /** The signer frame's accessible name. */
+  signerTitle?: string
+  onResend?: () => void
+  onRetry?: (() => void) | undefined
+  /** Once, when status turns signed. */
+  onSigned?: () => void
+  /** The gated page: rendered, inert behind the blocker until signed. */
+  children?: unknown
+}
+
+/**
+ * A page behind a signature (09 §2.4). The blocker is a region with a heading, not a dialog: assistive tech reads it as
+ * the page, and the page itself is inert. The signer shows while unsigned or pending, inline at 560px on wide screens and
+ * in a tall Sheet on a phone (it's chosen when opened, so the server's HTML doesn't guess a width); terminal states
+ * have one action. WebAuthn-free: the frame is the provider's.
+ */
+export function SignGate({ status, src, title, description, signerTitle = 'Signer, provided by the e-signature service', level = 3, onResend, onRetry, onSigned, children }: SignGateProps) {
+  const id = uid('gate')
+  const s = derived(() => status)
+  const signing = state(false)
+  const sheet = state(false)
+  const inline = derived(() => signing.value && !sheet.value && (s.value === 'unsigned' || s.value === 'pending'))
+  const open = () => {
+    if (innerWidth < 600) sheet.value = true
+    else signing.value = true
+  }
+  watch(() => s.value, (now, was) => {
+    if (was === undefined || now === was) return
+    if (now === 'pending') announce(document, 'Signature pending. Checking with the provider.')
+    if (now === 'signed') { sheet.value = false; signing.value = false; announce(document, 'Agreement signed.'); onSigned?.() }
+    if (now === 'expired' || now === 'declined' || now === 'error') { sheet.value = false; signing.value = false; announce(document, COPY[now], true) }
+  })
+  return (
+    <div data-scope="gate" data-state={s.value}>
+      <div data-part="content" inert={s.value === 'signed' ? undefined : true}>{children}</div>
+      {s.value !== 'signed' && (
+        <section data-part="blocker" aria-labelledby={`${id}-t`}>
+          <div data-scope="stack" data-align="center">
+            <Mark tone={TONES[s.value] === 'critical' ? 'critical' : 'caution'}><FileTextIcon /></Mark>
+            <h4 id={`${id}-t`} aria-level={level}>{title}</h4>
+            <p>{s.value === 'unsigned' && description !== undefined ? description : COPY[s.value]}</p>
+            {inline.value ? <iframe data-scope="pay-frame" title={signerTitle} src={src} height="560" width="100%"></iframe>
+              : s.value === 'pending' ? <span data-scope="spinner" data-part="spinner" aria-hidden="true"></span>
+              : s.value === 'unsigned' ? <Button onClick={open}>Review and sign</Button>
+              : s.value === 'error' ? <Button onClick={onRetry}>Retry</Button>
+              : <Button onClick={onResend}>Resend</Button>}
+          </div>
+        </section>
+      )}
+      <Drawer open={sheet} side="bottom" title={untrack(() => title)}>
+        {sheet.value && <iframe data-scope="pay-frame" title={signerTitle} src={src} height="560" width="100%"></iframe>}
+      </Drawer>
+    </div>
+  )
+}

package/src/flow/SignIn.tsx

@@ -0,0 +1,80 @@
+import { emailError, uid } from '@weft-js/warp-core'
+import { derived, untrack } from '@weft-js/core'
+import { Input } from '../Field'
+import { Switch } from '../Choice'
+import { AuthLogo } from './AuthScreen'
+import { FormError, StepFrame, Submit, TextLink, Title, useStepForm, type FlowForm } from './kit'
+import { PasskeyButton, SsoButtons, type SsoProvider } from './Sso'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/auth.css'
+import '@weft-js/warp-core/styles/flows/sso.css'
+
+/** What the sign-in form submits. */
+export interface SignInValues { email: string; password: string; remember?: string }
+
+/** Props for SignIn. */
+export interface SignInProps extends FlowForm<SignInValues> {
+  title?: unknown
+  lede?: unknown
+  logo?: unknown
+  name?: unknown
+  submitLabel?: unknown
+  providers?: SsoProvider[]
+  onProvider?: ((id: string) => unknown) | undefined
+  /** Shows the passkey button; run WebAuthn here. */
+  onPasskey?: () => unknown
+  onForgot?: () => void
+  /** Called with the typed email; asks for one first. */
+  onMagicLink?: (email: string) => void
+  onSignUp?: () => void
+  onInvite?: () => void
+  /** The "Keep me signed in" switch (default on). */
+  remember?: boolean
+}
+
+/**
+ * Sign in (09 §2.1): passkey and SSO frames, the divider, email and password, remember and Forgot, the one solid.
+ * The email carries `username webauthn`, so conditional UI offers passkeys from first focus. A wrong password and an
+ * unknown email read the same (§2.3).
+ */
+export function SignIn(p: SignInProps) {
+  const id = uid('signin')
+  const ctl = useStepForm<SignInValues>(untrack(() => p), v => ({ email: v.email ? emailError(v.email) : 'Enter your work email.', password: v.password ? undefined : 'Enter your password.' }))
+  const hasSso = derived(() => !!(p.onPasskey || p.providers?.length))
+  const ask = (e: MouseEvent) => {
+    const scope = (e.currentTarget as HTMLElement).closest('form, [role="group"]')
+    const email = scope?.querySelector<HTMLInputElement>('input[name="email"]')?.value ?? ''
+    const bad = email ? emailError(email) : "Enter your email first; we'll send the link there."
+    ctl.flag('email', bad)
+    if (!bad) p.onMagicLink?.(email)
+  }
+  return (
+    <StepFrame ctl={ctl} embedded={!!p.form} labelledby={`${id}-t`}>
+      {(p.logo !== undefined || p.name !== undefined) && <div><AuthLogo logo={p.logo} name={p.name} /></div>}
+      <div><Title as={p.heading} id={`${id}-t`}>{p.title ?? 'Sign in'}</Title>{p.lede !== undefined && <p data-part="lede">{p.lede}</p>}</div>
+      {hasSso.value && (
+        <div data-scope="sso">
+          {p.onPasskey && <PasskeyButton onPasskey={p.onPasskey} />}
+          {p.providers?.length && <SsoButtons providers={p.providers} onProvider={p.onProvider} />}
+        </div>
+      )}
+      {hasSso.value && <div data-part="divider">or with email</div>}
+      <FormError ctl={ctl} actions={p.onForgot && <TextLink onClick={p.onForgot}>Reset your password</TextLink>} />
+      <Input label="Work email" name="email" type="email" autocomplete="username webauthn" inputmode="email" value={p.form?.value?.('email') as string | undefined} hint="" error={ctl.errors.value.email} onBlur={(e: FocusEvent) => ctl.flag('email', emailError((e.target as HTMLInputElement).value))} />
+      <Input label="Password" name="password" type="password" autocomplete="current-password" hint="" error={ctl.errors.value.password} />
+      <div data-part="row">
+        <Switch size="sm" name="remember" checked={p.remember ?? true}>Keep me signed in</Switch>
+        {p.onForgot && <TextLink onClick={p.onForgot}>Forgot password?</TextLink>}
+      </div>
+      <Submit ctl={ctl}>{p.submitLabel ?? 'Sign in'}</Submit>
+      {p.onMagicLink && <p data-part="fine"><TextLink onClick={ask}>Email me a sign-in link instead</TextLink></p>}
+      {(p.onSignUp || p.onInvite) && (
+        <p data-part="fine">
+          {p.onSignUp && <TextLink onClick={p.onSignUp}>Create an account</TextLink>}
+          {p.onSignUp && p.onInvite && ' · '}
+          {p.onInvite && <TextLink onClick={p.onInvite}>Have an invite?</TextLink>}
+        </p>
+      )}
+    </StepFrame>
+  )
+}

package/src/flow/SignUp.tsx

@@ -0,0 +1,71 @@
+import { emailError, passwordRules, passwordStrength, uid } from '@weft-js/warp-core'
+import { derived, state, untrack } from '@weft-js/core'
+import { Checkbox } from '../Choice'
+import { Input } from '../Field'
+import { FormError, StepFrame, Submit, TextLink, Title, useStepForm, type FlowForm } from './kit'
+import { SsoButtons, type SsoProvider } from './Sso'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/auth.css'
+import '@weft-js/warp-core/styles/components/meter.css'
+import '@weft-js/warp-core/styles/inputs/pickers.css' // the rules list
+
+/** Strength Meter (05) and the rules list (03) under a new password. Each rule says itself: the colour is never alone. */
+export function PasswordMeter({ value }: { value: string }) {
+  const s = derived(() => passwordStrength(value))
+  const rules = derived(() => passwordRules(value))
+  return (
+    <>
+      <div data-scope="meter" data-level={s.value.tone === 'critical' ? 'full' : s.value.tone === 'caution' ? 'high' : undefined} role="meter" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow={s.value.score} aria-valuetext={s.value.label} style={`--_v:${s.value.score / 4}`}>
+        <div data-part="label-row"><span>Password strength</span><span>{value ? s.value.label : ''}</span></div>
+        <div data-part="track"><div data-part="range"></div></div>
+      </div>
+      <ul data-scope="rules">
+        {rules.value.map(r => <li key={r.id} data-met={r.met ? '' : undefined}><svg viewBox="0 0 12 12" aria-hidden="true"><path pathLength="1" d="M2 6.5 5 9.5 10 3" /></svg>{r.label}<span data-part="sr-only">{r.met ? ', met' : ', not met'}</span></li>)}
+      </ul>
+    </>
+  )
+}
+
+/** What the sign-up form submits. */
+export interface SignUpValues { name: string; email: string; password: string; terms?: string }
+
+/** Props for SignUp. */
+export interface SignUpProps extends FlowForm<SignUpValues> {
+  title?: unknown
+  lede?: unknown
+  submitLabel?: unknown
+  /** The terms checkbox's text, links included. */
+  terms?: unknown
+  providers?: SsoProvider[]
+  onProvider?: ((id: string) => unknown) | undefined
+  onSignIn?: () => void
+}
+
+/** Sign up (09 §2.1): name, email, password with strength and rules, terms; Create account is the one solid. */
+export function SignUp(p: SignUpProps) {
+  const id = uid('signup')
+  const password = state('')
+  const ctl = useStepForm<SignUpValues>(untrack(() => p), v => ({
+    name: v.name ? undefined : 'Enter your name.',
+    email: v.email ? emailError(v.email) : 'Enter your work email.',
+    password: passwordRules(v.password!).every(r => r.met) ? undefined : 'Use at least 8 characters, with a letter and a number.',
+    terms: p.terms === undefined || v.terms ? undefined : 'Accept the terms to continue.',
+  }))
+  return (
+    <StepFrame ctl={ctl} embedded={!!p.form} labelledby={`${id}-t`}>
+      <div><Title as={p.heading} id={`${id}-t`}>{p.title ?? 'Create your account'}</Title>{p.lede !== undefined && <p data-part="lede">{p.lede}</p>}</div>
+      {p.providers?.length && <SsoButtons providers={p.providers} onProvider={p.onProvider} />}
+      {p.providers?.length && <div data-part="divider">or with email</div>}
+      <FormError ctl={ctl} />
+      <Input label="Your name" name="name" autocomplete="name" hint="" error={ctl.errors.value.name} />
+      <Input label="Work email" name="email" type="email" inputmode="email" autocomplete="email" hint="" error={ctl.errors.value.email} onBlur={(e: FocusEvent) => ctl.flag('email', emailError((e.target as HTMLInputElement).value))} />
+      <div>
+        <Input label="Password" name="password" type="password" autocomplete="new-password" hint="" error={ctl.errors.value.password} onInput={e => (password.value = e.currentTarget.value)} />
+        <PasswordMeter value={password.value} />
+      </div>
+      {p.terms !== undefined && <Checkbox name="terms" value="yes" hint={ctl.errors.value.terms ?? ''} error={ctl.errors.value.terms}>{p.terms}</Checkbox>}
+      <Submit ctl={ctl}>{p.submitLabel ?? 'Create account'}</Submit>
+      {p.onSignIn && <p data-part="fine"><TextLink onClick={p.onSignIn}>I already have an account</TextLink></p>}
+    </StepFrame>
+  )
+}

package/src/flow/Sso.tsx

@@ -0,0 +1,38 @@
+import { KeyIcon } from '@weft-js/warp-icons'
+import { isPasskeyCancel } from '@weft-js/warp-core'
+import { derived, state } from '@weft-js/core'
+import { Button } from '../Button'
+import { Glyph } from '../parts'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/sso.css'
+import '@weft-js/warp-core/styles/layout/grid.css'
+
+// a frame draws its content twice: a function child builds each copy (an element would move from one to the other)
+
+/** Sign in with a passkey (09 §2.1): a frame button. WebAuthn is the app's; a cancelled OS sheet shows nothing. */
+export function PasskeyButton({ onPasskey, onError, children, ...rest }: { onPasskey?: () => unknown; onError?: (e: unknown) => void; children?: unknown; [attr: string]: unknown }) {
+  const busy = state(false)
+  const press = async () => {
+    busy.value = true
+    try { await onPasskey?.() } catch (e) { if (!isPasskeyCancel(e)) onError?.(e) } finally { busy.value = false }
+  }
+  return <Button emphasis="frame" full loading={busy.value} onClick={press} {...rest}>{() => <><KeyIcon />{children ?? 'Continue with passkey'}</>}</Button>
+}
+
+/** One identity provider on offer. */
+export interface SsoProvider { id: string; label: string; /** One path on the 24 grid: monochrome, never the provider's colours. */ glyph?: string; /** More words for assistive tech, after a short label: the label stays part of the name. */ name?: string | undefined }
+
+/** Provider buttons (09 §2.1, §2.2): frame buttons in a row; each stays pending until the app redirects. */
+export function SsoButtons({ providers, onProvider }: { providers: SsoProvider[]; onProvider?: ((id: string) => unknown) | undefined }) {
+  const list = derived(() => providers)
+  const busy = state<string | undefined>(undefined)
+  const press = async (id: string) => {
+    busy.value = id
+    try { await onProvider?.(id) } finally { busy.value = undefined }
+  }
+  return (
+    <div data-scope="grid" data-min="xs" data-cols="3">
+      {list.value.map(p => <Button key={p.id} emphasis="frame" full loading={busy.value === p.id} onClick={() => press(p.id)}>{() => <>{p.glyph && <Glyph d={p.glyph} />}{p.label}{p.name && <span data-part="sr-only"> {p.name}</span>}</>}</Button>)}
+    </div>
+  )
+}

package/src/flow/SystemPage.tsx

@@ -0,0 +1,247 @@
+import { ClockIcon, CopyIcon, PlusIcon, RefreshIcon } from '@weft-js/warp-icons'
+import { announce, copyText, menu, uid } from '@weft-js/warp-core'
+import { derived, state, untrack, watch } from '@weft-js/core'
+import { Badge } from '../Badge'
+import { Button, type ButtonProps } from '../Button'
+import { Search, Textarea } from '../Field'
+import { Avatar } from '../parts'
+import { toast } from '../Toast'
+import { use } from '@weft-js/warp-core/weft'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/tokens.css'
+import '@weft-js/warp-core/styles/flows/base.css'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/system-page.css'
+import '@weft-js/warp-core/styles/flows/system-page.css'
+
+const X = [8, 27.5, 47, 66.5, 86, 105.5, 125].map(x => ({ x }))
+const Threads = ({ y2 = 84 }: { y2?: number }) => <>{X.map(t => <line key={t.x} x1={t.x} y1="0" x2={t.x} y2={y2} />)}</>
+
+/** 404 and 500: a weft thread broken in two. */
+const Broken = () => <svg data-part="weave" viewBox="0 0 132 84" preserveAspectRatio="none" aria-hidden="true"><Threads /><path pathLength="1" style="--i:0" d="M0 22H132" /><path pathLength="1" style="--i:1" d="M0 44H70" data-broken="" /><path pathLength="1" style="--i:2" d="M86 44H132" opacity=".35" /><path pathLength="1" style="--i:3" d="M0 64H132" /></svg>
+/** First run: whole threads. */
+const Whole = () => <svg data-part="weave" viewBox="0 0 132 84" preserveAspectRatio="none" aria-hidden="true"><Threads /><path pathLength="1" style="--i:0" d="M0 22H132" /><path pathLength="1" style="--i:1" d="M0 44H132" /><path pathLength="1" style="--i:2" d="M0 64H132" /></svg>
+/** 403: a thread stops at a padlock on the crossing, in ink: nothing broke (07 §6.5). */
+const Locked = () => (
+  <svg data-part="weave" viewBox="0 0 132 84" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+    {[16, 36, 56, 76, 96, 116].map(x => <line key={x} x1={x} y1="4" x2={x} y2="80" />)}
+    <path pathLength="1" style="--i:0" d="M4 22 C 30 18, 40 26, 66 22 S 102 18, 128 22" />
+    <path pathLength="1" style="--i:1" d="M4 62 C 30 58, 40 66, 66 62 S 102 58, 128 62" />
+    <path pathLength="1" style="--i:2" d="M4 42 C 20 40, 34 44, 52 42" />
+    <path data-part="shackle" d="M58 40 v-7 a8 8 0 0 1 16 0 v7" />
+    <rect data-part="lock" x="54" y="39" width="24" height="19" rx="4" />
+    <path data-part="keyhole" d="M66 46 v5" />
+  </svg>
+)
+
+const focusTitle = (el: HTMLElement) => {
+  el.focus({ preventScroll: true })
+  return { update() {}, destroy() {} }
+}
+
+/** The title and code: every result page's top. */
+function Head({ art, code, title, focus, as }: { art: unknown; code: unknown; title: unknown; focus?: boolean | undefined; as?: 'h2' | 'h3' | undefined }) {
+  const h3 = derived(() => as === 'h3')
+  let el: HTMLElement | undefined
+  if (untrack(() => focus)) use(focusTitle, () => el)
+  return <>
+    <span data-part="art">{art}</span>
+    <span data-part="code">{code}</span>
+    {h3.value ? <h3 ref={n => (el = n)} data-part="title" tabindex="-1">{title}</h3> : <h2 ref={n => (el = n)} data-part="title" tabindex="-1">{title}</h2>}
+  </>
+}
+
+function RequestId({ id }: { id: string }) {
+  return <span data-part="meta">Request ID <code>{id}</code><Button emphasis="ghost" tone="neutral" size="sm" data-icon-only="" label="Copy request ID" onClick={async () => { await copyText(document, id); announce(document, 'Copied') }}><CopyIcon /></Button></span>
+}
+
+/** An account to switch to from a no-access page. */
+export interface SwitchAccount { id: string; email: string; detail?: string; hasAccess?: boolean; current?: boolean | undefined }
+
+function AccountMenu({ accounts, onSwitch }: { accounts: SwitchAccount[]; onSwitch?: (id: string | undefined) => void }) {
+  const id = uid('accounts')
+  const open = state(false)
+  let list: HTMLElement | undefined
+  use(menu, () => list, () => ({ open: open.value, trigger: () => list?.parentElement?.querySelector<HTMLElement>('[data-switch]'), onClose: () => (open.value = false) }))
+  const pick = (a: string | undefined) => { open.value = false; list?.parentElement?.querySelector<HTMLElement>('[data-switch]')?.focus(); onSwitch?.(a) }
+  return { open, id, press: () => (open.value = !open.value), menu: () => (
+    <ul ref={n => (list = n)} data-part="accounts" role="menu" id={id} aria-label="Switch account" hidden={!open.value || undefined}>
+      {accounts.map(a => (
+        <li key={a.id} role="none">
+          <button type="button" role="menuitem" tabindex="-1" onClick={() => pick(a.id)}>
+            <Avatar name={a.email} size="sm" />
+            <span>{a.email}{a.detail && <small>{a.detail}</small>}</span>
+            {a.hasAccess ? <Badge tone="positive">Has access</Badge> : a.current ? <small>Current</small> : <span></span>}
+          </button>
+        </li>
+      ))}
+      <li role="none"><button type="button" role="menuitem" tabindex="-1" onClick={() => pick(undefined)}><PlusIcon /><span>Use another account</span><span></span></button></li>
+    </ul>
+  ) }
+}
+
+/** An access request, and how to send and withdraw it. */
+export interface AccessRequest {
+  /** The workspace takes access requests (default true). */
+  allowed?: boolean
+  /** A request is out: from the server, or set here after `onSend`. */
+  pending?: boolean | undefined
+  /** Who answers: "Kofi and Ana". */
+  approvers?: string
+  onSend?: ((note: string) => unknown) | undefined
+  onWithdraw?: () => unknown
+  /** "Copy link for the owner". */
+  link?: string
+}
+
+/** Props for SystemPage. */
+export interface SystemPageProps {
+  kind: '404' | '403' | '500' | 'maintenance' | 'empty'
+  title?: unknown
+  description?: unknown
+  /** The eyebrow, when the default won't do. */
+  code?: unknown
+  /** The primary action's label and press (or `href`). */
+  primary?: { label: unknown; onClick?: (() => void) | undefined; href?: string; loading?: boolean | undefined }
+  secondary?: { label: unknown; onClick?: (() => void) | undefined; href?: string }
+  /** 404: the search field. */
+  onSearch?: (q: string) => void
+  /** The 404 search field's label. Default "Search". */
+  searchLabel?: string
+  /** 500: `retry` from `<Boundary>`. */
+  onRetry?: (() => void) | undefined
+  /** The error, for the Boundary form; its message is never shown. */
+  error?: unknown
+  /** The support line. */
+  requestId?: string
+  /** Extra support text: a path, an incident. */
+  meta?: unknown
+  /** Maintenance: "Back at 14:00 UTC", and the local-time line in `description`. */
+  backAt?: unknown
+  /** 403: what was asked for and by whom. */
+  object?: { title: string; owner?: string }
+  /** 403: the signed-in account, as in "You're signed in as ana@weft.dev". */
+  account?: string
+  /** 403: the access request: who approves it, whether it is pending, and what sending or withdrawing does. */
+  request?: AccessRequest
+  /** 403: other signed-in accounts, offered in a Switch account menu. */
+  accounts?: SwitchAccount[]
+  /** Called with the account picked, or undefined to sign in as someone else. */
+  onSwitch?: (id: string | undefined) => void
+  /** 403: access came through: `children` is the object, loaded in place. */
+  granted?: boolean
+  as?: 'h2' | 'h3' | undefined
+  /** Focus the title on load, so the route change is heard (default: 403). */
+  autofocus?: boolean
+  children?: unknown
+}
+
+const TITLES = { 404: "We can't find that page", 403: "You don't have access", 500: 'Something went wrong on our side', maintenance: 'Back soon', empty: 'Nothing here yet' }
+const CODES = { 404: '404 · Not found', 403: '403 · No access', 500: '500 · Server error', maintenance: 'Scheduled maintenance', empty: 'First run' }
+const COPY = { 404: 'The link may be old, or the page has moved. Search for it, or head back to your dashboard.', 403: 'Ask an admin for access, or switch to an account that has it.', 500: "Your work is saved. We've been alerted and are looking at it now.", maintenance: "Nothing is lost, and nothing you saved is affected.", empty: undefined }
+
+function Act({ a, emphasis, tone }: { a: { label: unknown; onClick?: (() => void) | undefined; href?: string; loading?: boolean | undefined }; emphasis?: ButtonProps['emphasis'] | undefined; tone?: ButtonProps['tone'] }) {
+  const href = derived(() => a.href)
+  return <Button emphasis={emphasis} tone={tone} loading={a.loading} role={href.value ? 'link' : undefined} onClick={() => (href.value ? location.assign(href.value) : a.onClick?.())}>{a.label}</Button>
+}
+
+/** 403's four states (07 §6.5): can request (then a note), pending, can't request, granted in place. */
+function Denied(p: SystemPageProps) {
+  const compose = state(false)
+  const sent = state(false)
+  const note = state('')
+  const busy = state(false)
+  const name = untrack(() => p.object?.title)
+  const titleOf = name ? `You don't have access to ${name}` : TITLES[403]
+  const approvers = derived(() => p.request?.approvers ?? p.object?.owner ?? 'the owner')
+  const pending = derived(() => !!(p.request?.pending as unknown ?? sent.value))
+  const allowed = derived(() => p.request?.allowed !== false)
+  const view = derived(() => (p.granted ? 'granted' : pending.value ? 'pending' : !allowed.value ? 'closed' : compose.value ? 'compose' : 'request'))
+  let root: HTMLElement | undefined
+  const accounts = AccountMenu({ accounts: untrack(() => p.accounts ?? []), onSwitch: id => p.onSwitch?.(id) })
+  watch(() => view.value, (v, was) => {
+    if (was === undefined) return
+    queueMicrotask(() => root?.querySelector<HTMLElement>(v === 'compose' ? 'textarea' : '[data-part="title"]')?.focus({ preventScroll: true }))
+    if (v === 'granted') toast.show({ title: `${p.object?.owner ?? 'The owner'} gave you access`, description: `${name ?? 'It'} is open.`, tone: 'positive' })
+  })
+  const send = async () => {
+    busy.value = true
+    try {
+      await p.request?.onSend?.(note.value)
+      sent.value = true
+      compose.value = false
+      announce(document, `Request sent to ${approvers.value}. We'll email you when they answer.`)
+    } finally { busy.value = false }
+  }
+  const withdraw = async () => { await p.request?.onWithdraw?.(); sent.value = false; note.value = ''; announce(document, 'Request withdrawn') }
+  const copyLink = async () => { await copyText(document, p.request?.link ?? location.href); announce(document, `Link copied. Send it to ${approvers.value}.`) }
+  const Switch = () => (p.accounts?.length ? <Button emphasis="ghost" tone="neutral" data-switch="" aria-haspopup="menu" aria-expanded={accounts.open.value ? 'true' : 'false'} aria-controls={accounts.id} onClick={accounts.press}>Switch account</Button> : p.onSwitch ? <Button emphasis="ghost" tone="neutral" onClick={() => p.onSwitch!(undefined)}>Switch account</Button> : null)
+  return (
+    <>
+      {view.value === 'granted' ? p.children : (
+        <div ref={n => (root = n)} data-scope="system-page">
+          <div data-part="body">
+            <Head art={<Locked />} code={p.code ?? CODES[403]} as={p.as} focus={p.autofocus ?? true} title={view.value === 'pending' ? 'Request sent' : (p.title ?? titleOf)} />
+            {view.value === 'request' && <p>{p.description ?? <>{p.account ? `You're signed in as ${p.account}. ` : ''}Ask the owner for access, or switch to an account that has it.</>}</p>}
+            {view.value === 'compose' && <p>{approvers.value} can share it. Add a note if it helps them decide.</p>}
+            {view.value === 'closed' && <p>This workspace doesn't take access requests. Ask {approvers.value} to share it{p.account ? ` with ${p.account}` : ''}.</p>}
+            {view.value === 'pending' && <span data-part="pending" role="status"><ClockIcon /> Request sent to {approvers.value} · we'll email you when they answer</span>}
+            {view.value === 'compose'
+              ? (
+                <div data-part="request">
+                  <Textarea label="Note (optional)" hint="They'll see it with your request" counter={280} maxlength="280" value={note.value} onInput={e => (note.value = e.currentTarget.value)} />
+                  <div data-part="actions">
+                    <Button emphasis="ghost" tone="neutral" onClick={() => (compose.value = false)}>Cancel</Button>
+                    <Button loading={busy.value} onClick={send}>Send request</Button>
+                  </div>
+                </div>
+              )
+              : (
+                <div data-part="actions">
+                  {view.value === 'request' && <Button onClick={() => (compose.value = true)}>Request access</Button>}
+                  {view.value === 'pending' && <Button emphasis="outline" tone="neutral" onClick={withdraw}>Withdraw request</Button>}
+                  {view.value === 'closed' && <Button onClick={copyLink}>Copy link for the owner</Button>}
+                  <Switch />
+                </div>
+              )}
+            {accounts.menu()}
+            {p.requestId && <RequestId id={p.requestId} />}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+/**
+ * A result page (09 §5.1): art, code, title, one sentence, one primary, one secondary, the support line. It sits inside
+ * the app shell, so navigation still works. `<Boundary error={(e, retry) => <SystemPage kind="500" error={e} onRetry={retry} />}>`
+ * at the route level; 403 is the sharing state of 07 §6.5, and never shown to outsiders (they get the 404).
+ */
+export function SystemPage(p: SystemPageProps) {
+  const kind = untrack(() => p.kind)
+  if (kind === '403') return <Denied {...p} />
+  const text = derived(() => p.description ?? COPY[kind])
+  const home = derived(() => p.secondary)
+  return (
+    <div data-scope="system-page">
+      <div data-part="body">
+        <Head art={kind === 'empty' ? <Whole /> : <Broken />} code={p.code ?? CODES[kind]} as={p.as} focus={p.autofocus} title={p.title ?? (kind === 'maintenance' && p.backAt ? `Back at ${p.backAt as string}` : TITLES[kind])} />
+        {text.value !== undefined && <p>{text.value}</p>}
+        {kind === '404' && p.onSearch && (
+          <form data-part="search" novalidate onSubmit={(e: SubmitEvent) => { e.preventDefault(); p.onSearch!(new FormData(e.currentTarget as HTMLFormElement).get('q') as string) }}>
+            <Search label={p.searchLabel ?? 'Search'} name="q" />
+          </form>
+        )}
+        <div data-part="actions">
+          {kind === '500' && p.onRetry && <Button onClick={p.onRetry}><RefreshIcon />Try again</Button>}
+          {p.primary && <Act a={p.primary} />}
+          {home.value && <Act a={home.value} emphasis="frame" />}
+        </div>
+        {p.meta !== undefined && <span data-part="meta">{p.meta}</span>}
+        {p.requestId && <RequestId id={p.requestId} />}
+        {p.children}
+      </div>
+    </div>
+  )
+}