@weft-js/warp 0.0.0-stage → 0.1.0

package/src/admin/Members.tsx

@@ -0,0 +1,186 @@
+import { CheckIcon, TrashIcon, UsersIcon } from '@weft-js/warp-icons'
+import { isLastOwner, plural, uid } from '@weft-js/warp-core'
+import { derived, state, type State } from '@weft-js/core'
+import { Badge } from '../Badge'
+import { Button } from '../Button'
+import { Checkbox } from '../Choice'
+import { Avatar } from '../parts'
+import { Table, type Column } from '../Table'
+import { toast } from '../Toast'
+import { ConfirmDialog } from './Danger'
+import { InviteDialog } from './InviteDialog'
+import { PlainTable } from './PlainTable'
+import { InlineSelect, 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/meter.css'
+import '@weft-js/warp-core/styles/flows/roles-matrix.css'
+
+/** A role a member can hold. */
+export type Role = { value: string; label: string; /** Can reach this page; demoting yourself below it warns. */ manages?: boolean }
+/** One member of the team. */
+export type Member = { id: string; name: string; email: string; role: string; lastActive?: string | undefined }
+/** An invite still waiting for an answer. */
+export type Invite = { id: string; email: string; role: string; sent: string }
+
+/** "7 of 10 seats used" over a rail that fills with the count; pending invites count (09 §4.2). */
+export function SeatsMeter({ used, total }: { used: number; total: number }) {
+  const left = derived(() => Math.min(100, (used / total) * 100))
+  return (
+    <div data-scope="meter" data-tone={used >= total ? 'caution' : undefined}>
+      <span data-part="note">{used} of {total} seats used</span>
+      <span data-part="rail" data-on="" aria-hidden="true" style={`--v:${left.value}%`}><span data-part="rail-fill"></span></span>
+    </div>
+  )
+}
+
+/** Props for MembersTable. */
+export interface MembersTableProps {
+  /** Everyone in the workspace, one row each. */
+  members: readonly Member[] | State<readonly Member[]>
+  /** Pending invitations, listed under the members. */
+  invites?: readonly Invite[] | State<readonly Invite[]>
+  /** The signed-in member's id. */
+  me: string
+  roles: Role[]
+  owner?: string
+  seats: number
+  /** Called with the member and the role picked for them. */
+  onRoleChange: (member: Member, role: string) => void
+  onRemove: (members: Member[]) => Promise<void> | void
+  /** Undo for a removal. */
+  onRestore?: (members: Member[]) => void
+  onInvite: (emails: string[], role: string) => Promise<void> | void
+  /** Called with the invite when Resend is pressed. */
+  onResend?: (invite: Invite) => void
+  onRevoke?: (invite: Invite) => void
+}
+
+/**
+ * Members (09 §4.2): DataTable with an inline role select, a bulk bar, and pending invites below. Role changes apply at
+ * once with Undo; removals ask, with one Undo for the batch. The last owner can't be demoted or removed, and the
+ * select says why; demoting yourself warns first.
+ */
+export function MembersTable({ members, invites, me, roles, owner = 'owner', seats, onRoleChange, onRemove, onRestore, onInvite, onResend, onRevoke }: MembersTableProps) {
+  const inviting = state(false)
+  const confirming = state(false)
+  const demoting = state(false)
+  const leaving = state<Member[]>([])
+  const selected = state<Record<string, boolean>>({})
+  let demote: { m: Member; role: string } | undefined
+  const people = derived(() => read(members))
+  const pending = derived(() => read(invites ?? []))
+  const used = derived(() => people.value.length + pending.value.length)
+  const label = (v: string) => roles.find(r => r.value === v)?.label ?? v
+  const locked = (m: Member) => isLastOwner(people.value as Member[], m, owner)
+  const assign = (m: Member, role: string) => {
+    const prev = m.role
+    onRoleChange(m, role)
+    toast.show({ title: `${m.name} is now ${label(role)}`, action: { label: 'Undo', onClick: () => onRoleChange({ ...m, role }, prev) } })
+  }
+  const change = (m: Member, role: string) => {
+    if (locked(m)) {
+      return void toast.show({ title: m.id === me ? 'You’re the only owner' : `${m.name} is the only owner`, description: 'Make someone else owner first, then change this role.', tone: 'critical' })
+    }
+    if (m.id === me && roles.find(r => r.value === m.role)?.manages && !roles.find(r => r.value === role)?.manages) {
+      demote = { m, role }
+      demoting.value = true
+      return
+    }
+    assign(m, role)
+  }
+  const ask = (list: Member[]) => { leaving.value = list; confirming.value = true }
+  const remove = async () => {
+    const gone = leaving.value
+    await onRemove(gone)
+    selected.value = {}
+    toast.show({ title: gone.length > 1 ? `${gone.length} members removed` : `${gone[0]!.name} removed`, action: onRestore && { label: 'Undo', onClick: () => onRestore(gone) } })
+  }
+  const removable = (keys: string[]) => people.value.filter(m => keys.includes(m.id) && m.id !== me && !locked(m))
+  const count = derived(() => leaving.value.length)
+  const columns: Column<Member>[] = [
+    {
+      id: 'name', header: 'Name', rowHeader: true, card: 'title', sort: true,
+      cell: m => <span data-scope="row" data-wrap="none"><Avatar name={m.name} size="sm" /><span><b>{m.name}</b>{m.id === me && <>{' '}<Badge>You</Badge></>}<br /><span class="muted">{m.email}</span></span></span>,
+    },
+    { id: 'role', header: 'Role', cell: m => { const held = derived(() => locked(m)); return <RoleCell member={m} label={`Role for ${m.name}`} roles={roles} locked={held.value} onChange={r => change(m, r)} /> } },
+    { id: 'lastActive', header: 'Last active', card: 'hide' },
+    {
+      id: 'menu', header: 'Actions', value: () => '',
+      cell: m => (m.id === me || locked(m) ? '' : <Button emphasis="ghost" tone="critical" size="sm" data-icon-only="" label={`Remove ${m.name}`} onClick={() => ask([m])}><TrashIcon /></Button>),
+    },
+  ]
+  const inviteColumns: Column<Invite>[] = [
+    { id: 'email', header: 'Email', rowHeader: true, card: 'title', cell: v => <span data-scope="row" data-wrap="none"><Avatar name={v.email} size="sm" /><span><b>{v.email}</b><br /><span class="muted">Invite pending, sent {v.sent}</span></span></span> },
+    { id: 'role', header: 'Role', cell: v => <Badge>{label(v.role)}</Badge> },
+    {
+      id: 'actions', header: 'Actions', value: () => '',
+      cell: v => <span data-scope="row"><Button emphasis="link" aria-label={`Resend invite to ${v.email}`} onClick={() => { onResend?.(v); toast.show({ title: `Invite resent to ${v.email}`, tone: 'positive' }) }}>Resend</Button><Button emphasis="link" tone="critical" aria-label={`Revoke invite to ${v.email}`} onClick={() => onRevoke?.(v)}>Revoke</Button></span>,
+    },
+  ]
+  return (
+    <div data-scope="stack">
+      <div data-scope="row" data-justify="between">
+        <SeatsMeter used={used.value} total={seats} />
+        <Button onClick={() => (inviting.value = true)}>Invite people</Button>
+      </div>
+      <Table
+        caption="Workspace members"
+        captionHidden
+        rows={people}
+        columns={columns}
+        picker={false}
+        heading={3}
+        selection={selected}
+        bulk={keys => {
+          const list = removable(keys)
+          return <Button emphasis="soft" tone="critical" size="sm" disabled={!list.length} onClick={() => ask(list)}>{list.length ? `Remove ${plural(list.length, 'member')}` : 'Can’t remove these'}</Button>
+        }}
+      />
+      {pending.value.length > 0 && <Table caption="Pending invites" rows={pending} columns={inviteColumns} picker={false} heading={3} />}
+      <InviteDialog open={inviting} roles={roles.filter(r => r.value !== owner)} seatsLeft={seats - used.value} onSend={onInvite} defaultRole="member" />
+      <ConfirmDialog open={confirming} glyph={UsersIcon} tone="critical" title={count.value > 1 ? `Remove ${count.value} members?` : `Remove ${leaving.value[0]?.name}?`} description={`${leaving.value.map(m => m.name).join(', ')} ${count.value > 1 ? 'lose' : 'loses'} access right away. Their work stays.`} action={count.value > 1 ? `Remove ${count.value} members` : 'Remove member'} onConfirm={remove} />
+      <ConfirmDialog open={demoting} tone="critical" title="Change your own role?" description="You’ll lose access to this page, and someone else will have to give it back." action="Change my role" onConfirm={() => { const d = demote!; assign(d.m, d.role) }} />
+    </div>
+  )
+}
+
+function RoleCell({ member, label, roles, locked, onChange }: { member: Member; label: string; roles: Role[]; locked: boolean; onChange: (role: string) => void }) {
+  const id = uid('role')
+  return (
+    <>
+      <InlineSelect label={label} value={member.role} options={roles} describedby={locked ? `${id}-why` : undefined} onValueChange={onChange} />
+      {locked && <span data-part="sr-only" id={`${id}-why`}>This is the only owner. Make someone else owner first.</span>}
+    </>
+  )
+}
+
+/** One row of the permissions matrix, with the roles that have it. */
+export type Permission = { id: string; label: string; roles: string[] }
+
+/** What each role can do (09 §4.2): rows are permissions, columns are roles. Read-only unless `onToggle` is given. */
+export function RolesMatrix({ roles, permissions, onToggle }: { roles: Role[]; permissions: Permission[]; onToggle?: (permission: Permission, role: string, on: boolean) => void }) {
+  return (
+    <PlainTable label="Roles matrix" scope="roles-matrix" caption="Permissions by role" head={<tr><th scope="col">Permission</th>{roles.map(r => <th key={r.value} scope="col">{r.label}</th>)}</tr>}>
+      {permissions.map(p => (
+        <tr key={p.id}>
+          <th scope="row">{p.label}</th>
+          {roles.map(r => (
+            <td key={r.value}>
+              {onToggle
+                ? <Checkbox checked={p.roles.includes(r.value)} aria-label={`${r.label}: ${p.label}`} onChange={(e: Event) => onToggle(p, r.value, (e.currentTarget as HTMLInputElement).checked)} />
+                : p.roles.includes(r.value)
+                  ? <span data-part="yes"><CheckIcon /><span data-part="sr-only">Yes</span></span>
+                  : <><span data-part="no" aria-hidden="true">–</span><span data-part="sr-only">No</span></>}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </PlainTable>
+  )
+}

package/src/admin/Order.tsx

@@ -0,0 +1,63 @@
+import { announce } from '@weft-js/warp-core'
+import { derived, onMount } from '@weft-js/core'
+import { Button } from '../Button'
+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'
+import '@weft-js/warp-core/styles/flows/confirmation.css'
+import '@weft-js/warp-core/styles/flows/tracker.css'
+
+/** How far an order has got. */
+export type OrderStage = 'placed' | 'packed' | 'shipped' | 'delivered'
+const STAGES: { id: OrderStage; title: string }[] = [{ id: 'placed', title: 'Placed' }, { id: 'packed', title: 'Packed' }, { id: 'shipped', title: 'Shipped' }, { id: 'delivered', title: 'Delivered' }]
+
+/** The order tracker (09 §6.3): ordered → packed → shipped → delivered, the current stop filled. */
+export function OrderTracker({ stage = 'placed' }: { stage?: OrderStage | undefined }) {
+  const at = derived(() => STAGES.findIndex(s => s.id === stage))
+  return (
+    <ol data-scope="tracker" aria-label="Order status">
+      {STAGES.flatMap((s, i) => [
+        ...(i ? [<li key={`r-${s.id}`} aria-hidden="true"><span data-part="rail" data-on={i <= at.value ? '' : undefined} style={`--v:100%;--dl:${i * 300}ms`}><span data-part="rail-fill"></span></span></li>] : []),
+        <li key={s.id}><span data-part="stop" data-on={i <= at.value ? '' : undefined} aria-current={i === at.value ? 'step' : undefined} style={`--dl:${i * 300}ms`}><i></i>{s.title}</span></li>,
+      ])}
+    </ol>
+  )
+}
+
+/** Props for OrderConfirmation. */
+export interface OrderConfirmationProps {
+  orderId: string
+  email?: string
+  note?: string
+  stage?: OrderStage | undefined
+  summary?: unknown
+  titleId?: string
+  onTrack?: () => void
+  onContinue?: (() => void) | undefined
+}
+
+/** The confirmation (09 §6.3): the mark strokes in, the order number, where the receipt went, the tracker. Announced politely. */
+export function OrderConfirmation({ orderId, email, note, stage, summary, titleId, onTrack, onContinue }: OrderConfirmationProps) {
+  let root: HTMLElement | undefined
+  onMount(() => { queueMicrotask(() => { if (root) announce(root.ownerDocument, `Order ${orderId} confirmed`) }) })
+  return (
+    <div ref={n => (root = n)} data-scope="confirmation">
+      <span data-part="mark" data-tone="positive"><svg viewBox="0 0 24 24" aria-hidden="true"><path pathLength="1" data-draw="" d="m5 12.5 4.5 4.5L19 7.5" /></svg></span>
+      <div>
+        <h2 data-part="step-title" id={titleId} tabindex="-1">Order #{orderId} confirmed</h2>
+        <span class="muted">{email ? `A receipt is on its way to ${email}.` : 'A receipt is on its way.'} {note}</span>
+      </div>
+      <OrderTracker stage={stage} />
+      {summary}
+      <div data-scope="row">
+        {onTrack && <Button onClick={onTrack}>Track order</Button>}
+        {onContinue && <Button emphasis="frame" onClick={onContinue}>Continue shopping</Button>}
+      </div>
+    </div>
+  )
+}

package/src/admin/PlainTable.tsx

@@ -0,0 +1,22 @@
+import '../styles'
+import '@weft-js/warp-core/styles/data/tokens.css'
+import '@weft-js/warp-core/styles/data/base.css'
+import '@weft-js/warp-core/styles/data/table.css'
+
+/**
+ * The look of 06's table for a fixed matrix that isn't a DataTable (a roles matrix, CSV mapping and preview): no sort,
+ * no cards. It scrolls inline on a phone (09 §8), and the viewport takes focus so a keyboard can scroll it.
+ */
+export function PlainTable({ label, scope, caption, head, children }: { label: string; scope: string; caption: string; head: unknown; children: unknown }) {
+  return (
+    <div data-scope="table" data-phone="columns" data-state="ready">
+      <div data-part="viewport" role="region" aria-label={label} tabindex="0">
+        <table data-scope={scope}>
+          <caption data-part="sr-only">{caption}</caption>
+          <thead>{head}</thead>
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/admin/Plans.tsx

@@ -0,0 +1,167 @@
+import { meterParts, money, planPrice, prorate, uid, type BillingInterval, type Proration } from '@weft-js/warp-core'
+import { derived, state, type State, untrack } from '@weft-js/core'
+import { Alert } from '../Alert'
+import { Badge } from '../Badge'
+import { Button } from '../Button'
+import { Modal } from '../Modal'
+import { Segmented } from '../Choice'
+import { toast } from '../Toast'
+import { Sweep, latch } 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/plans.css'
+import '@weft-js/warp-core/styles/flows/plan-card.css'
+import '@weft-js/warp-core/styles/flows/lines.css'
+import '@weft-js/warp-core/styles/flows/usage.css'
+import '@weft-js/warp-core/styles/flows/meter.css'
+import '@weft-js/warp-core/styles/flows/confirm.css'
+
+/** A plan on offer. */
+export type BillingPlan = { id: string; name: string; /** Per seat, per month. */ price: number; description?: string | undefined; features: string[]; limits?: Record<string, number> }
+
+/** Props for PlanPicker. */
+export interface PlanPickerProps {
+  /** The plans to compare, one card each. */
+  plans: BillingPlan[]
+  current: string
+  /** The checked card; a usage meter can preselect the next tier through it. */
+  selected?: State<string>
+  interval?: State<BillingInterval>
+  seats: number
+  daysLeft: number
+  periodDays?: number
+  /** The ISO 4217 code prices are shown in, such as `EUR`. */
+  currency?: string
+  locale?: string
+  /** The server's proration. Default: `prorate` from the numbers above. */
+  preview?: (plan: BillingPlan, interval: BillingInterval) => Promise<Proration> | Proration
+  /** What stops working on a downgrade, listed in the dialog. */
+  losses?: (plan: BillingPlan) => string[]
+  /** Resolve with a message (card declined, seat limit) to keep the dialog with an Alert. */
+  onChange: (plan: BillingPlan, interval: BillingInterval) => Promise<string | void> | string | void
+}
+
+/**
+ * The plan picker (09 §4.3): radio cards in a radiogroup, the checked card's sweep pinned, Monthly/Annual above. Arrow
+ * keys only compare; the primary opens the proration dialog: line items, the new total, when it applies, Confirm.
+ */
+export function PlanPicker({ plans, current, selected, interval, seats, daysLeft, periodDays = 30, currency, locale, preview, losses, onChange }: PlanPickerProps) {
+  const group = uid('plan')
+  const picked = untrack(() => selected) ?? state(untrack(() => current))
+  const cycle = untrack(() => interval) ?? state<BillingInterval>('month')
+  const open = state(false)
+  const armed = latch(open)
+  const quote = state<Proration | undefined>(undefined)
+  const busy = state(false)
+  const problem = state('')
+  const find = (id: string) => plans.find(p => p.id === id)!
+  const cost = (n: number) => money(n, currency, locale)
+  const now = derived(() => find(current))
+  const next = derived(() => find(picked.value))
+  const up = derived(() => next.value.price > now.value.price)
+  const same = derived(() => picked.value === current)
+  const per = (p: BillingPlan) => (!p.price ? 'free forever' : cycle.value === 'year' ? 'per seat / month, billed yearly' : 'per seat / month')
+  const pitch = derived(() => {
+    if (same.value) return `You’re on ${now.value.name}. Pick a plan to compare.`
+    return up.value ? `${next.value.name} adds more. You pay the difference for the rest of this period.` : `${next.value.name} starts at the end of this period.`
+  })
+  const review = async () => {
+    const p = next.value
+    const c = cycle.value
+    problem.value = ''
+    quote.value = preview ? await preview(p, c) : prorate({ from: { name: now.value.name, price: planPrice(now.value.price, c) }, to: { name: p.name, price: planPrice(p.price, c) }, seats, daysLeft, periodDays })
+    open.value = true
+  }
+  const confirm = async () => {
+    if (busy.value) return
+    busy.value = true
+    try {
+      const msg = await onChange(next.value, cycle.value)
+      if (msg) problem.value = msg
+      else {
+        open.value = false
+        toast.show({ title: `You’re on ${next.value.name}`, description: up.value ? 'New limits are live. A receipt is on its way.' : 'The change applies at the end of this period.', tone: 'positive' })
+      }
+    } catch {
+      toast.show({ title: 'The plan didn’t change', description: 'Try again in a moment.', tone: 'critical', action: { label: 'Retry', onClick: confirm } })
+    } finally { busy.value = false }
+  }
+  const lost = derived(() => (up.value || same.value ? [] : losses?.(next.value) ?? []))
+  return (
+    <div data-scope="stack">
+      <div data-scope="row"><Segmented label="Billing period" value={cycle.value} onChange={v => (cycle.value = v)} size="sm" options={[{ value: 'month', label: 'Monthly' }, { value: 'year', label: 'Annual · save 20%' }]} /></div>
+      <div data-scope="plans">
+        <div data-part="grid" role="radiogroup" aria-label="Plan">
+          {plans.map(p => (
+            <label key={p.id} data-scope="plan-card" data-sweep="">
+              <Sweep />
+              <input type="radio" name={group} value={p.id} checked={p.id === picked.value} onChange={() => (picked.value = p.id)} />
+              <span data-part="name"><span class="row"><span data-part="radio" aria-hidden="true"></span>{p.name}</span>{p.id === current && <Badge tone="neutral">Current</Badge>}</span>
+              <span data-part="price"><b>{cost(planPrice(p.price, cycle.value))}</b><span>{per(p)}</span></span>
+              {p.description && <span class="muted">{p.description}</span>}
+              <ul>{p.features.map(f => <li key={f}>{f}</li>)}</ul>
+            </label>
+          ))}
+        </div>
+        <div data-scope="row" data-justify="between">
+          <span class="muted" role="status">{pitch.value}</span>
+          {same.value && <Button emphasis="soft" tone="neutral" disabled>Current plan</Button>}
+          {!same.value && up.value && <Button onClick={review}>Upgrade to {next.value.name}</Button>}
+          {!same.value && !up.value && <Button emphasis="frame" onClick={review}>Switch to {next.value.name}</Button>}
+        </div>
+      </div>
+      {armed.value && (
+        <Modal open={open} size="sm" title={`${up.value ? 'Upgrade' : 'Switch'} to ${next.value.name}`} description={up.value ? 'Your new limits apply as soon as you confirm.' : 'This applies at the end of this period.'} footer={<><Button emphasis="frame" data-close="">Cancel</Button><Button autofocus loading={busy.value} onClick={confirm}>{up.value ? 'Confirm upgrade' : 'Confirm switch'}</Button></>}>
+          <div data-scope="stack">
+            {problem.value && <Alert tone="critical" live title="The plan didn’t change">{problem.value}</Alert>}
+            <dl data-scope="lines">
+              {(quote.value?.lines ?? []).map(l => <div key={l.label}><dt>{l.label}</dt><dd>{l.amount < 0 ? `−${cost(-l.amount)}` : cost(l.amount)}</dd></div>)}
+              <div data-part="total"><dt>{quote.value?.due === 'today' ? 'Due today' : 'Due next period'}</dt><dd>{cost(quote.value?.total ?? 0)}</dd></div>
+            </dl>
+            {lost.value.length > 0 && <div data-scope="confirm"><span class="muted">These stop working:</span><ul>{lost.value.map(t => <li key={t}>{t}</li>)}</ul></div>}
+            <span class="muted">Charged to the default card.</span>
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+/** Props for UsageMeter. */
+export interface UsageMeterProps {
+  label: string
+  value: number
+  limit: number
+  format?: ((n: number) => string) | undefined
+  /** Past the limit: "+ $12.40 overage". */
+  overage?: string
+  note?: string
+  /** A link to the plan picker preselected on the next tier. */
+  action?: unknown
+}
+
+/** A usage meter (09 §4.3): the warning tick at 80%, caution from 80%, critical at 100%, stripes past the limit. */
+export function UsageMeter({ label, value, limit, format = String, overage, note, action }: UsageMeterProps) {
+  const m = derived(() => meterParts(value, limit))
+  const said = derived(() => (m.value.over ? overage ?? `${m.value.percent}% used.` : `${m.value.percent}% used.${m.value.tone && note ? ` ${note}` : ''}`))
+  return (
+    <div data-scope="meter" data-tone={m.value.tone}>
+      <div data-part="head"><b>{label}</b><span>{format(value)} / {format(limit)}</span></div>
+      <span data-part="rail" data-on="" role="meter" aria-label={label} aria-valuemin="0" aria-valuemax={limit} aria-valuenow={Math.min(value, limit)} aria-valuetext={`${format(value)} of ${format(limit)}`} style={`--v:${m.value.fill}%;--over:${m.value.over}%;--warn:${m.value.warn}%`}>
+        <span data-part="rail-fill"></span>
+        {m.value.over > 0 && <span data-part="over"></span>}
+        <span data-part="tick" aria-hidden="true"></span>
+      </span>
+      <p data-part="note">{said.value}</p>
+      {action}
+    </div>
+  )
+}
+
+/** The group of usage meters. */
+export const UsageMeters = ({ children }: { children: unknown }) => <div data-scope="usage">{children}</div>

package/src/admin/SaveBar.tsx

@@ -0,0 +1,112 @@
+import { dirtyKeys, leaveGuard, plural } from '@weft-js/warp-core'
+import { derived, onCleanup, state, type State, untrack } from '@weft-js/core'
+import { Button } from '../Button'
+import { toast } from '../Toast'
+import { use } from '@weft-js/warp-core/weft'
+import { ConfirmDialog } from './Danger'
+import { 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/flows/save-bar.css'
+
+const SAVED_MS = 1500
+
+/** Messages by field name. */
+export type FieldErrors = Record<string, string>
+/** Props for SaveBar. */
+export interface SaveBarProps<T extends Record<string, unknown>> {
+  /** The live form values. The bar snapshots them at mount and after each save. */
+  values: State<T>
+  /** Field errors, written here for the fields to read. */
+  errors?: State<FieldErrors> | undefined
+  /** Client checks; anything returned stops the save. */
+  validate?: ((values: T) => FieldErrors) | undefined
+  /** Resolve with field errors to keep the bar; throw on a transport failure. */
+  onSave: (values: T) => Promise<FieldErrors | void> | FieldErrors | void
+  /** Called after Discard has put the snapshot back. */
+  onDiscard?: () => void
+  /** Where a confirmed leave goes. Default: the browser navigates. */
+  onLeave?: (href: string) => void
+}
+
+/**
+ * The save bar (09 §4.1): a dock that rises when the values differ from their snapshot. Save keeps it up with a
+ * pending button, then says Saved for 1.5 s; field errors keep it and focus the first invalid field. Leaving while
+ * dirty asks. Enter in the enclosing form saves.
+ */
+export function SaveBar<T extends Record<string, unknown>>({ values, errors, validate, onSave, onDiscard, onLeave }: SaveBarProps<T>) {
+  const box = untrack(() => values)
+  const base = state<T>(untrack(() => box.value))
+  const phase = state<'idle' | 'pending' | 'saved'>('idle')
+  const fixes = state(0)
+  const leaving = state(false)
+  let target = ''
+  let el: HTMLDivElement | undefined
+  let timer: ReturnType<typeof setTimeout> | undefined
+  onCleanup(() => clearTimeout(timer))
+
+  const changed = derived(() => dirtyKeys(base.value, box.value))
+  const dirty = derived(() => changed.value.length > 0)
+  const message = derived(() => (phase.value === 'saved' ? 'Saved' : fixes.value ? `Fix ${plural(fixes.value, 'field')} to save` : 'You have unsaved changes'))
+  const fail = (found: FieldErrors) => {
+    if (errors) errors.value = found
+    fixes.value = Object.keys(found).length
+    afterFlush(() => el?.closest('form')?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus())
+  }
+  const save = async () => {
+    if (phase.value === 'pending' || !dirty.value) return
+    const now = box.value
+    const found = validate?.(now)
+    if (found && Object.keys(found).length) return fail(found)
+    phase.value = 'pending'
+    try {
+      const back = await onSave(now)
+      if (back && Object.keys(back).length) { phase.value = 'idle'; return fail(back) }
+    } catch {
+      phase.value = 'idle'
+      toast.show({ title: 'That didn’t save', description: 'Your changes are still here.', tone: 'critical', action: { label: 'Retry', onClick: save } })
+      return
+    }
+    if (errors) errors.value = {}
+    fixes.value = 0
+    base.value = now
+    phase.value = 'saved'
+    timer = setTimeout(() => (phase.value = 'idle'), SAVED_MS)
+  }
+  const discard = () => {
+    box.value = base.value
+    if (errors) errors.value = {}
+    fixes.value = 0
+    onDiscard?.()
+  }
+  const leave = () => {
+    leaving.value = false
+    discard()
+    if (onLeave) onLeave(target)
+    else el?.ownerDocument.defaultView?.location.assign(target)
+  }
+  use(leaveGuard, () => el, () => ({ dirty: dirty.value, onAttempt: (href: string) => { target = href; leaving.value = true } }))
+  use((node: HTMLDivElement) => {
+    const form = node.closest('form')
+    const submit = (e: Event) => { e.preventDefault(); void save() }
+    form?.addEventListener('submit', submit)
+    return { update() {}, destroy: () => form?.removeEventListener('submit', submit) }
+  }, () => el)
+  return (
+    <>
+      <div ref={n => (el = n)} data-scope="save-bar" data-open={dirty.value || phase.value !== 'idle' ? '' : undefined} role="region" aria-label="Unsaved changes">
+        <p data-part="msg" role="status">{message.value}</p>
+        <div data-part="actions">
+          <Button emphasis="ghost" tone="neutral" size="sm" style="--_ink:var(--warp-color-on-inverse)" disabled={phase.value === 'pending'} onClick={discard}>Discard</Button>
+          <Button size="sm" loading={phase.value === 'pending'} onClick={save}>Save changes</Button>
+        </div>
+      </div>
+      <ConfirmDialog open={leaving} title="Leave without saving?" description="Your changes on this page will be lost." action="Discard and leave" cancel="Stay" tone="critical" onConfirm={leave} />
+    </>
+  )
+}

package/src/admin/Secret.tsx

@@ -0,0 +1,37 @@
+import { state, type State, watch } from '@weft-js/core'
+import { Button } from '../Button'
+import { Checkbox } from '../Choice'
+import { Input } from '../Field'
+import { toast } from '../Toast'
+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'
+
+/**
+ * A secret shown once (09 §4.2, §4.6): a read-only field with Copy, and a checkbox the Done button waits on. Shared by
+ * API keys and webhook signing secrets. `done` goes true when it's been acknowledged.
+ */
+export function SecretReveal({ label, secret, done, ack }: { label: string; secret: string; done: State<boolean>; ack: string }) {
+  const copy = () => {
+    navigator.clipboard?.writeText(secret).catch(() => {})
+    toast.show({ title: 'Copied', description: 'It’s on your clipboard. Paste it once, then clear it.' })
+  }
+  return (
+    <div data-scope="stack" style="padding-block-start:var(--warp-space-related)">
+      <Input label={label} readonly value={secret} autofocus spellcheck="false" onFocus={(e: Event) => (e.currentTarget as HTMLInputElement).select()} />
+      <div><Button emphasis="frame" onClick={copy}>Copy</Button></div>
+      <Checkbox checked={done.value} onChange={(e: Event) => (done.value = (e.currentTarget as HTMLInputElement).checked)}>{ack}</Checkbox>
+    </div>
+  )
+}
+
+export const useReveal = (open: State<boolean>) => {
+  const secret = state('')
+  const seen = state(false)
+  watch(() => open.value, on => { if (!on) { secret.value = ''; seen.value = false } })
+  return { secret, seen }
+}