@weft-js/warp 0.0.0-stage → 0.1.0

package/src/admin/CsvImport.tsx

@@ -0,0 +1,174 @@
+import { AlertCircleIcon, UploadIcon } from '@weft-js/warp-icons'
+import { announce, autoMap, badRows, checkImport, importRecords, isCsvFile, missingTargets, parseCsv, plural, SKIP_COLUMN, uid, type CsvTable, type ImportIssue, type ImportTarget } from '@weft-js/warp-core'
+import { derived, state } from '@weft-js/core'
+import { Alert } from '../Alert'
+import { Button } from '../Button'
+import { Progress } from '../Progress'
+import { toast } from '../Toast'
+import { PlainTable } from './PlainTable'
+import { StepBar } from './StepBar'
+import { InlineSelect, Sweep, afterFlush } from './atoms'
+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/rich/helpers.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/row.css'
+import '@weft-js/warp-core/styles/layout/stack.css'
+import '@weft-js/warp-core/styles/inputs/field.css'
+import '@weft-js/warp-core/styles/inputs/file.css'
+import '@weft-js/warp-core/styles/flows/import-map.css'
+import '@weft-js/warp-core/styles/flows/import-preview.css'
+
+/** Props for CsvImport. */
+export interface CsvImportProps {
+  targets: ImportTarget[]
+  noun?: [one: string, many: string]
+  rowLimit?: number
+  /** "Use the sample": a name and its text. */
+  sample?: { name: string; text: string }
+  /** Runs the import; report progress from 0 to 100. The job is the server's: leaving the page is fine. */
+  onImport: (records: Record<string, string>[], progress: (percent: number) => void) => Promise<void>
+}
+
+type Stage = 'upload' | 'map' | 'review' | 'done'
+const STEPS = [{ id: 'upload', title: 'Upload' }, { id: 'map', title: 'Map' }, { id: 'review', title: 'Review' }, { id: 'done', title: 'Import' }]
+const SAY: Record<Stage, string> = { upload: 'upload', map: 'map columns', review: 'review', done: 'importing' }
+const ORDER: Stage[] = ['upload', 'map', 'review', 'done']
+const PREVIEW_ROWS = 50
+
+/**
+ * The CSV import wizard (09 §4.7), Upload → Map → Review → Import: parsing, mapping and validation are warp-core's. Each
+ * step's heading takes focus. Bad cells say why inline; a required target with no column is reported once.
+ */
+export function CsvImport({ targets, noun = ['person', 'people'], rowLimit = 5000, sample, onImport }: CsvImportProps) {
+  const id = uid('csv')
+  const stage = state<Stage>('upload')
+  const file = state('')
+  const table = state<CsvTable>({ headers: [], rows: [] })
+  const map = state<string[]>([])
+  const percent = state(0)
+  const finished = state(false)
+  const dragging = state(false)
+  const issue = state('')
+  let heading: HTMLElement | undefined
+
+  const at = derived(() => ORDER.indexOf(stage.value))
+  const options = derived(() => [...targets.map(t => ({ value: t.id, label: t.label })), { value: SKIP_COLUMN, label: 'Don’t import' }])
+  const missing = derived(() => missingTargets(map.value, targets))
+  const issues = derived<ImportIssue[]>(() => checkImport(table.value.rows, map.value, targets))
+  const bad = derived(() => badRows(issues.value))
+  const good = derived(() => (missing.value.length ? 0 : table.value.rows.length - bad.value))
+  const count = (n: number) => plural(n, noun[0], noun[1])
+  const go = (next: Stage) => {
+    stage.value = next
+    announceStep(next)
+    afterFlush(() => heading?.focus())
+  }
+  const announceStep = (s: Stage) => { if (heading) announce(heading.ownerDocument, `Import, step ${ORDER.indexOf(s) + 1} of 4, ${SAY[s]}`) }
+  const load = (name: string, text: string) => {
+    const t = parseCsv(text)
+    if (t.problem) { issue.value = t.problem; return }
+    if (t.rows.length > rowLimit) { issue.value = `This file has ${t.rows.length.toLocaleString('en-US')} rows. The limit is ${rowLimit.toLocaleString('en-US')}.`; return }
+    issue.value = ''
+    file.value = name
+    table.value = t
+    map.value = autoMap(t.headers, targets)
+    go('map')
+  }
+  const take = async (f?: File | null) => {
+    if (!f) return
+    if (!isCsvFile(f.name, f.type)) return void toast.show({ title: 'That isn’t a CSV file', description: `${f.name} wasn’t uploaded. Export it as .csv and try again.`, tone: 'critical' })
+    load(f.name, await f.text())
+  }
+  const run = async () => {
+    const records = importRecords(table.value.rows, map.value, issues.value)
+    go('done')
+    percent.value = 0
+    finished.value = false
+    try {
+      await onImport(records, p => (percent.value = p))
+      percent.value = 100
+      finished.value = true
+      toast.show({ title: `${count(records.length)} imported`, description: 'They’ll get an invite email.', tone: 'positive' })
+    } catch {
+      toast.show({ title: 'The import stopped', description: 'Nothing was lost. Try again.', tone: 'critical', action: { label: 'Retry', onClick: run } })
+    }
+  }
+  const again = () => { table.value = { headers: [], rows: [] }; map.value = []; file.value = ''; go('upload') }
+  const cellIssue = (row: number, target: string) => issues.value.find(x => x.row === row && x.path === target)
+  const preview = derived(() => table.value.rows.slice(0, PREVIEW_ROWS).map((cells, row) => ({ row, cells })))
+  const columns = derived(() => table.value.headers.map((h, col) => ({ h, col, target: map.value[col] })))
+  const kept = derived(() => columns.value.filter(c => c.target !== SKIP_COLUMN))
+  const titleOf = (target: string) => targets.find(t => t.id === target)?.label ?? target
+
+  return (
+    <div data-scope="stack">
+      <StepBar label="Import progress" steps={STEPS} current={at.value} />
+      <h3 ref={n => (heading = n)} data-part="step-title" tabindex="-1">{STEPS[at.value]!.title} {noun[1]}</h3>
+      {stage.value === 'upload' && (
+        <>
+          <div data-scope="dropzone" data-sweep="" data-pin={dragging.value ? '' : undefined} onDragOver={(e: DragEvent) => { e.preventDefault(); dragging.value = true }} onDragLeave={() => (dragging.value = false)} onDrop={(e: DragEvent) => { e.preventDefault(); dragging.value = false; void take(e.dataTransfer?.files[0]) }}>
+            <Sweep />
+            <input type="file" accept=".csv,text/csv" aria-labelledby={`${id}-t`} aria-describedby={`${id}-h`} onChange={(e: Event) => { void take((e.currentTarget as HTMLInputElement).files?.[0]); (e.currentTarget as HTMLInputElement).value = '' }} />
+            <span data-part="icon" aria-hidden="true"><UploadIcon /></span>
+            <span data-part="drop-copy"><span data-part="title" id={`${id}-t`}>Drop a CSV here or <u>browse</u></span></span>
+            <span data-part="hint" id={`${id}-h`}>Up to {rowLimit.toLocaleString('en-US')} rows · first row is the header</span>
+          </div>
+          {issue.value && <Alert tone="critical" live title="That file can’t be read">{issue.value}</Alert>}
+          {sample && <div><Button emphasis="link" onClick={() => load(sample.name, sample.text)}>Use the sample</Button></div>}
+        </>
+      )}
+      {stage.value === 'map' && (
+        <>
+          <span class="muted"><b>{file.value}</b> · {plural(table.value.rows.length, 'row')} · {plural(table.value.headers.length, 'column')}</span>
+          <PlainTable label="Column mapping" scope="import-map" caption="Map each CSV column to a field" head={<tr><th scope="col">CSV column</th><th scope="col">Sample</th><th scope="col">Imports as</th></tr>}>
+            {columns.value.map(c => (
+              <tr key={c.h}>
+                <th scope="row"><code>{c.h}</code></th>
+                <td class="muted">{table.value.rows[0]?.[c.col]}</td>
+                <td><InlineSelect label={`${c.h} imports as`} value={c.target!} options={options.value} onValueChange={v => { const next = [...map.value]; next[c.col] = v; map.value = next }} /></td>
+              </tr>
+            ))}
+          </PlainTable>
+        </>
+      )}
+      {stage.value === 'review' && (
+        <>
+          {missing.value.length > 0
+            ? <Alert tone="critical" title={`No column is mapped to ${missing.value.map(t => t.label).join(', ')}`}>Go back and map one to continue.</Alert>
+            : bad.value > 0
+              ? <Alert tone="caution" title={`${bad.value} of ${plural(table.value.rows.length, 'row')} need a fix`}>Fix them in the file and upload again, or import the {good.value} good rows now and skip the rest.</Alert>
+              : <Alert tone="positive" title={`All ${plural(table.value.rows.length, 'row')} look good`} />}
+          <PlainTable label="Import preview" scope="import-preview" caption="Preview of the first rows" head={<tr>{kept.value.map(c => <th key={c.h} scope="col">{titleOf(c.target!)}</th>)}</tr>}>
+            {preview.value.map(r => (
+              <tr key={r.row} data-invalid={issues.value.some(x => x.row === r.row) ? '' : undefined}>
+                {kept.value.map(c => <Cell key={c.h} value={r.cells[c.col]!} issue={cellIssue(r.row, c.target!)} />)}
+              </tr>
+            ))}
+          </PlainTable>
+        </>
+      )}
+      {stage.value === 'done' && (
+        <>
+          <Progress label={finished.value ? 'Imported' : 'Importing'} value={percent.value} />
+          {finished.value
+            ? <div data-scope="row"><span>{count(good.value)} imported.</span><Button emphasis="link" onClick={again}>Import another file</Button></div>
+            : <span class="muted">You can leave this page; we’ll email you when it finishes.</span>}
+        </>
+      )}
+      {(stage.value === 'map' || stage.value === 'review') && (
+        <div data-scope="row" data-justify="between">
+          <Button emphasis="ghost" tone="neutral" onClick={() => go(stage.value === 'map' ? 'upload' : 'map')}>Back</Button>
+          {stage.value === 'map'
+            ? <Button onClick={() => go('review')}>Preview</Button>
+            : <Button disabled={good.value === 0} onClick={run}>{`Import ${plural(good.value, 'row')}`}</Button>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function Cell({ value, issue }: { value: string; issue?: ImportIssue | undefined }) {
+  return <td data-invalid={issue ? '' : undefined}>{value}{issue && <span data-part="error"><AlertCircleIcon />{issue.message}</span>}</td>
+}

package/src/admin/Danger.tsx

@@ -0,0 +1,110 @@
+import { TrashIcon, type IconComponent } from '@weft-js/warp-icons'
+import { confirmMatches } from '@weft-js/warp-core'
+import { derived, state, type State, untrack, watch } from '@weft-js/core'
+import { Button, type Tone } from '../Button'
+import { Input } from '../Field'
+import { Modal } from '../Modal'
+import { Glyph } from '../parts'
+import { toast } from '../Toast'
+import { latch } from './atoms'
+import { SettingsSection } from './Settings'
+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/rich/helpers.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/row.css'
+import '@weft-js/warp-core/styles/layout/stack.css'
+import '@weft-js/warp-core/styles/flows/meter.css' // the result mark
+import '@weft-js/warp-core/styles/flows/confirm.css'
+
+/** The danger zone (09 §4.4): the one critical-bordered section. Rows are SettingRows. */
+export function DangerZone({ id = 'danger', title = 'Danger zone', description, children }: { id?: string; title?: unknown; description?: unknown; children: unknown }) {
+  return <SettingsSection id={id} title={title} description={description} tone="critical">{children}</SettingsSection>
+}
+
+/** Props for ConfirmDialog. */
+export interface ConfirmDialogProps {
+  open: State<boolean>
+  title: unknown
+  description?: unknown
+  /** The confirm button: says what it does, with the count on a batch ("Remove 2 members"). */
+  action: unknown
+  cancel?: string
+  tone?: Tone | undefined
+  /** Drawn at the top of the body, in the result mark. */
+  glyph?: string | IconComponent
+  children?: unknown
+  onConfirm: () => Promise<void> | void
+  onCancel?: () => void
+}
+
+const failed = (retry: () => unknown) => toast.show({ title: 'That didn’t go through', description: 'Nothing changed. Try again.', tone: 'critical', action: { label: 'Retry', onClick: retry } })
+
+/** A plain AlertDialog (05 §3): focus on Cancel. Pending on the confirm button; the dialog closes when it's done. */
+export function ConfirmDialog({ open, title, description, action, cancel = 'Cancel', tone, glyph, children, onConfirm, onCancel }: ConfirmDialogProps) {
+  const armed = latch(untrack(() => open))
+  const busy = state(false)
+  const go = async () => {
+    if (busy.value) return
+    busy.value = true
+    try { await onConfirm(); open.value = false }
+    catch { failed(go) }
+    finally { busy.value = false }
+  }
+  return (
+    <>
+      {armed.value && (
+        <Modal open={open} alert size="sm" title={title} description={description} mark={glyph ? <span data-part="mark" data-tone={tone === 'critical' ? 'critical' : undefined}>{typeof glyph === 'string' ? <Glyph d={glyph} /> : glyph({})}</span> : undefined} footer={<><Button emphasis="frame" autofocus data-close="" onClick={() => onCancel?.()}>{cancel}</Button><Button tone={tone} loading={busy.value} onClick={go}>{action}</Button></>}>
+          {children}
+        </Modal>
+      )}
+    </>
+  )
+}
+
+/** Props for TypeToConfirm. */
+export interface TypeToConfirmProps {
+  open: State<boolean>
+  title: unknown
+  description?: unknown
+  /** The exact text to type: the project's or key's name. */
+  confirmText: string
+  /** What goes, listed. */
+  items?: string[]
+  action: unknown
+  glyph?: string | IconComponent
+  onConfirm: () => Promise<void> | void
+}
+
+/**
+ * Type-to-confirm (09 §4.4): an AlertDialog whose field sweeps critical. Deviation from 05: focus goes to the field,
+ * not Cancel. The confirm stays disabled until the text matches exactly, and Enter submits only then.
+ */
+export function TypeToConfirm({ open, title, description, confirmText, items, action, glyph = TrashIcon, onConfirm }: TypeToConfirmProps) {
+  const armed = latch(untrack(() => open))
+  const typed = state('')
+  const busy = state(false)
+  const ok = derived(() => confirmMatches(typed.value, confirmText))
+  watch(() => open.value, on => { if (on) typed.value = '' })
+  const go = async () => {
+    if (!ok.value || busy.value) return
+    busy.value = true
+    try { await onConfirm(); open.value = false }
+    catch { failed(go) }
+    finally { busy.value = false }
+  }
+  const submit = (e: Event) => { e.preventDefault(); void go() }
+  return (
+    <>
+      {armed.value && (
+        <Modal open={open} alert size="sm" tone="critical" title={title} description={description} mark={<span data-part="mark" data-tone="critical">{typeof glyph === 'string' ? <Glyph d={glyph} /> : glyph({})}</span>} footer={<><Button emphasis="frame" data-close="">Cancel</Button><Button tone="critical" disabled={!ok.value} loading={busy.value} onClick={go}>{action}</Button></>}>
+          <form data-scope="confirm" novalidate onSubmit={submit}>
+            {items && <ul>{items.map(t => <li key={t}>{t}</li>)}</ul>}
+            <Input label={`Type ${confirmText} to confirm`} autofocus autocomplete="off" spellcheck="false" value={typed.value} onInput={e => (typed.value = e.currentTarget.value)} />
+          </form>
+        </Modal>
+      )}
+    </>
+  )
+}

package/src/admin/Integrations.tsx

@@ -0,0 +1,200 @@
+import { ArrowUpRightIcon } from '@weft-js/warp-icons'
+import { httpsEndpoint, uid } from '@weft-js/warp-core'
+import { derived, state, type State, untrack, watch } from '@weft-js/core'
+import { Alert } from '../Alert'
+import { Badge } from '../Badge'
+import { Button, type Tone } from '../Button'
+import { Checkbox } from '../Choice'
+import { Drawer } from '../Drawer'
+import { Input } from '../Field'
+import { Modal } from '../Modal'
+import { Table, type Column } from '../Table'
+import { toast } from '../Toast'
+import { SecretReveal, useReveal } from './Secret'
+import { afterFlush, guarded, latch, read } from './atoms'
+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/rich/helpers.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/row.css'
+import '@weft-js/warp-core/styles/layout/stack.css'
+import '@weft-js/warp-core/styles/flows/integrations.css'
+import '@weft-js/warp-core/styles/flows/integration.css'
+import '@weft-js/warp-core/styles/flows/choice.css'
+
+/** Where an integration stands. */
+export type IntegrationState = 'connected' | 'error' | 'off' | 'pending'
+/** One card of the integrations grid. */
+export type Integration = { id: string; name: string; summary: string; state: IntegrationState; detail?: string | undefined; failure?: string | undefined; can?: string[] | undefined }
+const BADGE: Record<IntegrationState, [string, Tone | undefined, boolean]> = { connected: ['Connected', 'positive', true], error: ['Needs attention', 'critical', true], off: ['Not connected', undefined, false], pending: ['Connecting…', 'caution', true] }
+
+/** Props for IntegrationsGrid. */
+export interface IntegrationsGridProps {
+  items: readonly Integration[] | State<readonly Integration[]>
+  /** Open the provider's consent page; the card's `state` then comes back through `items`. */
+  onConnect: (item: Integration) => void
+  /** The Configure sheet's fields. */
+  settings?: ((item: Integration) => unknown) | undefined
+  onSave?: (item: Integration) => void
+  onDisconnect: (item: Integration) => void
+  onRestore?: (item: Integration) => void
+}
+
+function Card({ item, onConnect, onConfigure }: { item: Integration; onConnect: () => void; onConfigure: () => void }) {
+  let configure: HTMLElement | undefined
+  const id = uid('ig')
+  const badge = derived(() => BADGE[item.state])
+  watch(() => item.state, (now, was) => {
+    if (was !== 'pending' || now !== 'connected') return
+    toast.show({ title: `${untrack(() => item.name)} connected`, tone: 'positive' })
+    afterFlush(() => configure?.focus())
+  })
+  return (
+    <li data-scope="integration" data-state={item.state}>
+      <span data-part="logo" aria-hidden="true">{item.name[0]}</span>
+      <span data-part="info">
+        <b id={id}>{item.name}</b>
+        <Badge tone={badge.value[1]} dot={badge.value[2]}>{badge.value[0]}</Badge>
+        <span class="muted">{item.state === 'off' ? item.summary : item.detail}</span>
+      </span>
+      {item.failure && <span data-part="actions"><Alert tone="critical" live>{item.failure}</Alert></span>}
+      <span data-part="actions">
+        {item.state === 'off' && <Button emphasis="frame" size="sm" aria-describedby={id} onClick={onConnect}>Connect</Button>}
+        {item.state === 'error' && <Button size="sm" tone="critical" aria-describedby={id} onClick={onConnect}>Reconnect</Button>}
+        {item.state === 'connected' && <Button ref={n => (configure = n)} emphasis="ghost" tone="neutral" size="sm" aria-describedby={id} onClick={onConfigure}>Configure</Button>}
+      </span>
+    </li>
+  )
+}
+
+/**
+ * The integrations grid (09 §4.6): a status badge with a dot, one line, one action; a failing card takes a critical
+ * border and the page's only critical solid. Connect lists what the provider can do, then leaves for its consent page.
+ */
+export function IntegrationsGrid({ items, onConnect, settings, onSave, onDisconnect, onRestore }: IntegrationsGridProps) {
+  const list = derived(() => read(items))
+  const connecting = state(false)
+  const configuring = state(false)
+  const armedC = latch(connecting)
+  const armedS = latch(configuring)
+  const pick = state<Integration | undefined>(undefined)
+  const go = () => { connecting.value = false; onConnect(pick.value!) }
+  const name = derived(() => pick.value?.name ?? '')
+  const disconnect = () => {
+    const x = pick.value!
+    configuring.value = false
+    onDisconnect(x)
+    toast.show({ title: `${x.name} disconnected`, action: onRestore && { label: 'Undo', onClick: () => onRestore(x) } })
+  }
+  return (
+    <>
+      <ul data-scope="integrations">
+        {list.value.map(x => <Card key={x.id} item={x} onConnect={() => { pick.value = x; connecting.value = true }} onConfigure={() => { pick.value = x; configuring.value = true }} />)}
+      </ul>
+      {armedC.value && (
+        <Modal open={connecting} size="sm" title={`Connect ${name.value}`} description="You can disconnect any time." footer={<><Button emphasis="frame" data-close="">Cancel</Button><Button autofocus onClick={go}>Continue to {name.value}<ArrowUpRightIcon /></Button></>}>
+          <div data-scope="stack">
+            <ul>{(pick.value?.can ?? []).map(t => <li key={t}>{t}</li>)}</ul>
+            <span class="muted">Next, {name.value} asks you to approve this in a new window.</span>
+          </div>
+        </Modal>
+      )}
+      {armedS.value && (
+        <Drawer open={configuring} title={name.value} description={pick.value?.detail} footer={<><Button emphasis="soft" tone="critical" onClick={disconnect}>Disconnect {name.value}</Button><Button data-close="" onClick={() => onSave?.(pick.value!)}>Save</Button></>}>
+          {pick.value && settings?.(pick.value)}
+        </Drawer>
+      )}
+    </>
+  )
+}
+
+/** One webhook endpoint. */
+export type Webhook = { id: string; url: string; events: string[]; lastDelivery?: string; healthy: boolean }
+
+/** Props for Webhooks. */
+export interface WebhooksProps {
+  hooks: readonly Webhook[] | State<readonly Webhook[]>
+  events: string[]
+  /** Returns the signing secret, shown once. */
+  onAdd: (url: string, events: string[]) => Promise<string>
+  /** Posts a sample event. */
+  onTest: (hook: Webhook) => Promise<{ status: number; ms: number }>
+}
+
+/**
+ * A URL that breaks where a reader would: after a slash or a query's `&` and `=`, before a dot, `?` or `#`, never inside a
+ * word, nor after a hyphen in a host name. Each piece is an inline block, so lines break only between pieces (`<wbr>`
+ * says so to anything reading the markup), and a piece longer than the line still breaks inside as a last resort.
+ */
+export const urlBreaks = (url: string): string[] => url.split(/(?<=[/&=])(?!\/)|(?=[.?#])/).filter(Boolean)
+const Url = ({ href }: { href: string }) => (
+  <code data-part="url" style="white-space:normal;word-break:normal;overflow-wrap:break-word">
+    {urlBreaks(href).map((part, i) => [i ? <wbr /> : null, <span style="display:inline-block;max-inline-size:100%">{part}</span>])}
+  </code>
+)
+
+/** Webhooks (09 §4.6): a DataTable of endpoints. Send test reports the code and time; a new signing secret is shown once. */
+export function Webhooks({ hooks, events, onAdd, onTest }: WebhooksProps) {
+  const adding = state(false)
+  const armed = latch(adding)
+  const { secret, seen } = useReveal(adding)
+  const dialog = guarded(adding, () => !secret.value || seen.value)
+  const url = state('')
+  const picked = state<string[]>([])
+  const urlError = state('')
+  const eventError = state('')
+  const tried = state(false)
+  const busy = state(false)
+  const list = derived(() => read(hooks))
+  const check = () => { urlError.value = !url.value.trim() ? 'Enter the URL we should call.' : httpsEndpoint(url.value) ? '' : 'Use a full https:// URL.' }
+  const test = async (h: Webhook) => {
+    try {
+      const r = await onTest(h)
+      toast.show({ title: `Test delivered: ${r.status}`, description: `${h.url} answered in ${r.ms} ms.`, tone: r.status < 300 ? 'positive' : 'critical' })
+    } catch { toast.show({ title: 'The test didn’t send', tone: 'critical', action: { label: 'Retry', onClick: () => test(h) } }) }
+  }
+  const save = async () => {
+    if (busy.value) return
+    tried.value = true
+    check()
+    eventError.value = picked.value.length ? '' : 'Pick at least one event.'
+    if (urlError.value || eventError.value) return
+    busy.value = true
+    try { secret.value = await onAdd(url.value.trim(), picked.value) }
+    catch { toast.show({ title: 'The endpoint wasn’t added', tone: 'critical', action: { label: 'Retry', onClick: save } }) }
+    finally { busy.value = false }
+  }
+  const open = () => { url.value = ''; picked.value = events.slice(0, 2); urlError.value = ''; eventError.value = ''; tried.value = false; adding.value = true }
+  const columns: Column<Webhook>[] = [
+    { id: 'url', header: 'Endpoint', rowHeader: true, card: 'title', cell: h => <Url href={h.url} /> },
+    { id: 'events', header: 'Events', value: h => h.events.join(', ') },
+    { id: 'lastDelivery', header: 'Last delivery', value: h => h.lastDelivery ?? 'None yet' },
+    { id: 'healthy', header: 'Health', card: 'badge', value: h => (h.healthy ? 'Healthy' : 'Failing'), cell: h => <Badge tone={h.healthy ? 'positive' : 'critical'} dot>{h.healthy ? 'Healthy' : 'Failing'}</Badge> },
+    { id: 'test', header: 'Actions', value: () => '', cell: h => <Button emphasis="link" aria-label={`Send test to ${h.url}`} onClick={() => test(h)}>Send test</Button> },
+  ]
+  const tools = derived(() => <Button emphasis="frame" onClick={open}>Add endpoint</Button>) // one build: Table reads the prop twice
+  const footer = derived(() => (secret.value
+    ? <Button disabled={!seen.value} onClick={() => (dialog.value = false)}>Done</Button>
+    : <><Button emphasis="frame" data-close="">Cancel</Button><Button loading={busy.value} onClick={save}>Add endpoint</Button></>))
+  return (
+    <div data-scope="stack">
+      <Table caption="Webhook endpoints" captionHidden rows={list} columns={columns} picker={false} heading={3} actions={tools.value} empty={{ title: 'No webhooks yet', text: 'Add an endpoint to get events.' }} />
+      {armed.value && (
+        <Modal open={dialog} alert={!!secret.value} size="sm" title={secret.value ? 'Copy your signing secret' : 'Add a webhook endpoint'} description={secret.value ? 'You won’t see it again. Use it to verify our signature.' : 'We POST JSON to this URL for each event you pick.'} footer={<>{footer.value}</>}>
+          {secret.value
+            ? <SecretReveal label="Signing secret" secret={secret.value} done={seen} ack="I’ve saved this secret somewhere safe" />
+            : (
+              <form data-scope="stack" style="padding-block-start:var(--warp-space-related)" novalidate onSubmit={(e: Event) => { e.preventDefault(); void save() }}>
+                <Input label="Endpoint URL" type="url" inputmode="url" placeholder="https://" autofocus hint="Must be https." value={url.value} error={urlError.value} onInput={e => { url.value = e.currentTarget.value; if (tried.value) check() }} />
+                <fieldset data-scope="choice">
+                  <legend>Events</legend>
+                  {events.map(v => <Checkbox key={v} checked={picked.value.includes(v)} error={v === events[0] && eventError.value ? eventError.value : undefined} onChange={(e: Event) => { picked.value = (e.currentTarget as HTMLInputElement).checked ? [...picked.value, v] : picked.value.filter(x => x !== v); eventError.value = '' }}><code>{v}</code></Checkbox>)}
+                </fieldset>
+              </form>
+            )}
+        </Modal>
+      )}
+    </div>
+  )
+}

package/src/admin/InviteDialog.tsx

@@ -0,0 +1,64 @@
+import { adminEmail, inviteProblem } from '@weft-js/warp-core'
+import { state, type State, untrack, watch } from '@weft-js/core'
+import { Button } from '../Button'
+import { Modal } from '../Modal'
+import { Select } from '../Select'
+import { toast } from '../Toast'
+import { afterFlush, latch } from './atoms'
+import { TagsInput } from './TagsInput'
+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/rich/helpers.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/row.css'
+import '@weft-js/warp-core/styles/layout/stack.css'
+
+/** Props for InviteDialog. */
+export interface InviteDialogProps {
+  open: State<boolean>
+  roles: { value: string; label: string }[]
+  defaultRole?: string
+  /** Pending invites use a seat; the check runs before anything is sent. */
+  seatsLeft: number
+  /** Send them; a thrown error keeps the dialog and its tags. */
+  onSend: (emails: string[], role: string) => Promise<void> | void
+}
+
+/** Invite (09 §4.2): a multi-email tags field and a role, checked against the seats left before sending. */
+export function InviteDialog({ open, roles, defaultRole, seatsLeft, onSend }: InviteDialogProps) {
+  const armed = latch(untrack(() => open))
+  const emails = state<string[]>([])
+  const role = state(untrack(() => defaultRole ?? roles[0]?.value ?? ''))
+  const error = state('')
+  const busy = state(false)
+  let root: HTMLElement | undefined
+  watch(() => open.value, on => { if (on) { emails.value = []; error.value = '' } })
+  const send = async () => {
+    if (busy.value) return
+    const typed = root?.querySelector<HTMLInputElement>('input[data-part="input"]')
+    typed?.blur()
+    const problem = inviteProblem(emails.value, seatsLeft)
+    if (problem) { error.value = problem; afterFlush(() => typed?.focus()); return }
+    busy.value = true
+    try {
+      await onSend(emails.value, role.value)
+      open.value = false
+      toast.show({ title: emails.value.length === 1 ? 'Invite sent' : `${emails.value.length} invites sent`, description: emails.value.join(', '), tone: 'positive' })
+    } catch {
+      toast.show({ title: 'The invites didn’t send', description: 'Your list is still here.', tone: 'critical', action: { label: 'Retry', onClick: send } })
+    } finally { busy.value = false }
+  }
+  return (
+    <>
+      {armed.value && (
+        <Modal open={open} title="Invite people" description="They get an email with a link that works for 7 days." footer={<><Button emphasis="frame" data-close="">Cancel</Button><Button loading={busy.value} onClick={send}>Send invites</Button></>}>
+          <form ref={n => (root = n)} data-scope="stack" style="padding-block-start:var(--warp-space-related)" novalidate onSubmit={(e: Event) => e.preventDefault()}>
+            <TagsInput label="Email addresses" autofocus hint="Enter or comma adds one. Paste a list to add many." error={error.value} value={emails} valid={adminEmail} onEdit={() => (error.value = '')} onSubmit={() => void send()} />
+            <Select label="Role" options={roles} value={role.value} onChange={(e: Event) => (role.value = (e.currentTarget as HTMLInputElement).value)} />
+          </form>
+        </Modal>
+      )}
+    </>
+  )
+}