@volter/world-console 2.0.1 → 2.0.2

package/client/kit/kit.css

@@ -0,0 +1,279 @@
+/* THE KIT's design system (docs/contributing/architecture.md, "The hosted product"): the dashboard, the platform's
+   pages and the site read these roles. Punchlist 3.1–3.2 — the comparable is a plain modern developer
+   console: a ground, cards with one hairline, one action colour, danger only for danger, the brand's
+   type, monospace for addresses. Every colour and face is a role of the Volter brand (company
+   decision 0018): the shell links the brand's tokens (`base/brand/tokens.css`, fetched at build) before
+   this sheet, and the names below are this sheet's aliases for those roles; the pre-commit hook
+   refuses a literal colour here. The roles carry both themes (light-dark()); `color-scheme` picks one.
+   The site reads the same roles (apps/www/src/site.css). */
+:root {
+  color-scheme: light dark;
+  --ground: var(--volter-surface-page); --surface: var(--volter-surface-raised); --surface-2: var(--volter-surface-subtle);
+  --line: var(--volter-border-default); --line-strong: var(--volter-border-strong);
+  --ink: var(--volter-text-primary); --muted: var(--volter-text-muted); --faint: var(--volter-text-faint);
+  --accent: var(--volter-action-default); --accent-ink: var(--volter-text-on-strong); --accent-soft: var(--volter-action-soft);
+  --danger: var(--volter-status-danger-base); --danger-text: var(--volter-status-danger-text); --danger-soft: var(--volter-status-danger-soft);
+  --warn: var(--volter-status-attention-text); --warn-soft: var(--volter-status-attention-soft); --ok: var(--volter-status-healthy-text);
+  --mono: var(--volter-font-data);
+  --sans: var(--volter-font-ui);
+  --radius: 8px; --shadow: var(--volter-shadow-resting);
+}
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
+
+* { box-sizing: border-box; }
+html { background: var(--ground); }
+body { margin: 0; font: 14px/1.5 var(--sans); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
+main { max-width: 1120px; margin: 0 auto; padding: 20px 24px 72px; }
+/* a link is the action colour, which is the text colour in the brand: its underline, in the strong
+   rule, is what tells it from text (the brand's own pages mark links the same way) */
+a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
+a:hover { text-decoration-color: currentColor; }
+header a { text-decoration: none; }
+header a:hover { text-decoration: underline; }
+code { font: 12.5px/1.5 var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
+pre { margin: 0; font: 12px/1.45 var(--mono); white-space: pre-wrap; max-width: 640px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
+h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
+h1 { font-size: 17px; }
+h2 { font-size: 18px; margin: 28px 0 10px; }
+h3 { font-size: 15px; margin: 22px 0 8px; }
+h4 { font-size: 13px; margin: 18px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
+h5 { font-size: 13px; margin: 10px 0 4px; color: var(--danger-text); }
+p { margin: 6px 0; }
+ul, ol { margin: 6px 0; padding-left: 20px; }
+li { margin: 3px 0; }
+
+/* the top bar */
+header { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 16px; margin-bottom: 22px; }
+header h1 a { color: var(--ink); }
+header nav a { color: var(--muted); }
+header .mode { margin-left: auto; color: var(--muted); font-size: 12.5px; }
+header > a { color: var(--muted); font-size: 13px; }
+header button { padding: 5px 12px; }
+
+/* cards: every section that holds a thing */
+/* tables */
+table { border-collapse: collapse; width: 100%; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
+th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
+th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
+tr:last-child td { border-bottom: 0; }
+td code { font-size: 12px; }
+/* controls */
+button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
+button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+button:disabled { opacity: 0.45; cursor: default; }
+input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
+button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button[type="submit"]:hover:not(:disabled) { color: var(--accent-ink); filter: brightness(1.06); }
+button[role="tab"] { border-color: transparent; background: transparent; color: var(--muted); }
+button[role="tab"][aria-selected="true"] { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
+button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+form { display: grid; gap: 10px; max-width: 560px; margin-top: 8px; }
+form button[type="submit"] { justify-self: start; }
+label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
+label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
+input, select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
+input::placeholder { color: var(--faint); }
+select { padding-right: 28px; }
+[role="alert"] { color: var(--danger-text); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 6px; padding: 8px 10px; }
+[role="status"] { color: var(--muted); }
+.mode { color: var(--muted); font-size: 12.5px; }
+
+/* a page that is one card: signing in, the command's approval, a refusal */
+body.portal { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
+body.portal .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 28px 30px; width: min(440px, 100%); text-align: center; }
+body.portal .card h1 { font-size: 22px; margin-bottom: 4px; }
+body.portal .card p { color: var(--muted); margin: 0 0 18px; }
+body.account main { max-width: 900px; }
+body.account #profile { margin-top: 12px; }
+@media (max-width: 720px) { main { padding: 14px 14px 60px; } header { flex-wrap: wrap; } header .mode { margin-left: 0; } }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface-2); }
+a.button { display: inline-block; font-size: 13px; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
+a.button:hover { filter: brightness(1.06); }
+form.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; max-width: none; margin: 6px 0 0; }
+form.inline label { display: grid; }
+/* THE APP SHELL (the dashboard's World and the platform's org alike): a full-width shell, as a project dashboard is (Vercel, Neon): a top bar, a sidebar of the World's
+   pages with its vendors under Vendors, a page head with its title and actions, dense content under it. */
+main.app { max-width: none; padding: 0; font-size: 13.5px; }
+main.app > header { margin: 0; border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 8px 18px; position: sticky; top: 0; z-index: 10; }
+main.app > header h1 { font-size: 15px; }
+.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 47px); }
+.side { border-right: 1px solid var(--line); background: var(--surface); padding: 14px 10px; position: sticky; top: 47px; align-self: start; height: calc(100vh - 47px); overflow-y: auto; }
+/* the sidebar scrolls, which clips sideways too: while one of its popovers is open (Connect is wider than it) it lets it out */
+.side:has(details[open] > .popover) { overflow: visible; z-index: 5; }
+.side-world { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
+.side-world > span:last-child { display: grid; line-height: 1.25; }
+.side-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 500; }
+.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
+.side-nav a.on { background: var(--surface-2); color: var(--ink); }
+.side-vendors { list-style: none; margin: 2px 0 6px 10px; padding: 0 0 0 8px; border-left: 1px solid var(--line); }
+.side-vendors li { margin: 0; }
+.side-vendors a { font-weight: 400; padding: 4px 8px; }
+.side-vendors .count { margin-left: auto; color: var(--faint); font: 11.5px var(--mono); }
+.mark { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: 600 11px/1 var(--sans); }
+.world-mark { width: 30px; height: 30px; border-radius: 7px; font-size: 14px; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
+.content { padding: 18px 28px 48px; min-width: 0; }
+.content-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
+.content-head h2 { margin: 0; font-size: 20px; }
+.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.head-actions .clock { flex: none; padding: 4px 10px; background: var(--surface); }
+.head-actions .clock-now { font-size: 12.5px; }
+.head-actions .clock { position: relative; display: flex; align-items: center; gap: 10px; }
+.head-actions .clock-more { margin: 0; }
+details.menu, .clock-more, .as-of { position: relative; }
+details.menu > summary { list-style: none; cursor: pointer; }
+details.menu > summary::-webkit-details-marker { display: none; }
+.popover, .as-of > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(440px, 80vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 8px; max-width: none; }
+.popover pre { max-width: none; }
+a.button, summary.button { display: inline-block; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; }
+.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
+.block-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.block-head h3 { margin: 0; font-size: 13.5px; }
+.block-head a { font-size: 12.5px; }
+table.dense { width: 100%; border-collapse: collapse; margin: 0; }
+table.dense td { padding: 8px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
+table.dense tr:first-child td { border-top: 0; }
+.vendor-cell { display: flex; align-items: center; gap: 8px; font-weight: 500; }
+.vendor-cell a { color: var(--ink); text-decoration: none; }
+.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; } .overview-grid { grid-template-columns: 1fr; } .content { padding: 14px; } }
+/* a vendor's mark keeps its own colours on a light tile in either theme, as an app icon does (a dark brand colour
+   disappears on the dark theme's surface; a mark drawn in the text's colour stays dark on the tile) */
+.mark.logo { background: var(--volter-color-surface); color: var(--volter-color-ink); }
+.mark.logo svg { width: 13px; height: 13px; display: block; }
+.side-vendors .mark, .mini-feed .mark, .vendor-cell .mark { width: 22px; height: 22px; }
+header .crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); }
+header .crumbs .crumb-world { color: var(--ink); font-weight: 600; }
+.crumb-sep { color: var(--faint); }
+#head-slot { display: contents; }
+summary.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+.side-group { margin: 14px 10px 4px; color: var(--faint); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
+.side-nav > .side-group:first-child { margin-top: 2px; }
+.side-nav .side-vendors { margin: 2px 0 0; padding: 0; border-left: 0; }
+.side-nav .side-vendors a { padding: 5px 10px; }
+.all-screens .mark { font-size: 12px; }
+.branch-picker { margin: 12px 0 0; }
+.branch-picker > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); list-style: none; cursor: pointer; }
+.branch-picker > summary::-webkit-details-marker { display: none; }
+.branch-picker > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 11px; }
+.branch-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.branch-glyph { color: var(--muted); flex: none; }
+.branch-picker .popover { left: 0; right: 0; width: auto; }
+.branch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.branch-list a, .branch-list > li > span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 5px; color: var(--ink); text-decoration: none; }
+.branch-list a:hover, .branch-list a[aria-current="page"] { background: var(--surface-2); }
+.content-head h2 .vendor-cell { display: inline-flex; font-weight: 600; }
+.top-picker { margin: 0 0 6px; }
+.top-picker > summary .mark { width: 22px; height: 22px; font-size: 11px; }
+.mark.world-mark.small { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; }
+a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+body.portal .card { text-align: left; padding: 30px 30px 26px; }
+body.portal .card h2 { margin: 0 0 4px; font-size: 20px; }
+body.portal .card .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 18px; color: var(--ink); }
+body.portal .card a.button.wide { display: block; text-align: center; padding: 10px 14px; margin: 18px 0 12px; }
+body.portal .card .small { font-size: 12.5px; }
+body.portal .card .links { display: flex; gap: 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
+.services th, .content table.dense th { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
+/* cards: every section that holds a thing; the danger zone */
+section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 14px 0; }
+section > h2:first-child, section > h3:first-child { margin-top: 0; }
+.danger { margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); border-radius: var(--radius); }
+.danger button { border-color: var(--danger); color: var(--danger-text); }
+.danger button:hover:not(:disabled) { background: var(--danger); color: var(--volter-text-on-strong); }
+
+/* ── the shared conventions: dialogs, confirmations, toasts, skeletons, menus, meters, tabs, the phone's drawer ── */
+dialog.dialog { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--volter-shadow-dialog); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
+dialog.dialog.wide { width: min(720px, calc(100vw - 32px)); }
+dialog.dialog::backdrop { background: var(--volter-overlay-scrim); }
+dialog.dialog[open] { animation: dialog-in var(--volter-motion-fast, 140ms) ease-out; }
+@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
+.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
+.dialog-head h2 { margin: 0; font-size: 16px; }
+.dialog-body { padding: 12px 20px 18px; display: grid; gap: 12px; }
+.dialog-body form { margin: 0; max-width: none; }
+.dialog-body p { margin: 0; }
+.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 12px 12px; }
+.confirm-body { color: var(--muted); }
+.typed-confirm { display: grid; gap: 6px; }
+.typed-confirm p { margin: 0; color: var(--muted); }
+.confirm-body strong, .confirm-body code { color: var(--ink); }
+button.icon-button, summary.icon-button { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
+button.icon-button:hover, summary.icon-button:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
+button.danger-button { background: var(--danger); border-color: var(--danger); color: var(--volter-text-on-strong); }
+button.danger-button:hover:not(:disabled) { color: var(--volter-text-on-strong); filter: brightness(1.06); }
+button.danger-outline { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); color: var(--danger-text); background: var(--surface); }
+button.danger-outline:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: var(--volter-text-on-strong); }
+
+.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
+.toast { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--volter-shadow-floating); font-size: 13px; animation: dialog-in var(--volter-motion-fast, 140ms) ease-out; }
+.toast.ok { border-left: 3px solid var(--volter-status-healthy-base); }
+.toast.error { border-left: 3px solid var(--danger); color: var(--ink); background: var(--surface); }
+.toast .icon-button { min-width: 24px; height: 24px; }
+.toast[role="alert"] { padding: 10px 10px 10px 14px; }
+
+.skeleton { display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.skeleton span { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--volter-surface-inset) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+@media (prefers-reduced-motion: reduce) { .skeleton span, dialog.dialog[open], .toast { animation: none; } }
+.error-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+details.row-menu { display: inline-block; }
+details.row-menu > summary { list-style: none; }
+details.row-menu > summary::-webkit-details-marker { display: none; }
+/* a table's block clips what leaves it (its corners, its sideways scroll); an open row menu is let out of it */
+:is(.block, .card):has(details.row-menu[open]) { overflow: visible; }
+.menu-list { width: max-content; min-width: 180px; padding: 4px; gap: 0; }
+.menu-list a, .menu-list button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 13px; text-decoration: none; }
+.menu-list a:hover, .menu-list button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+.menu-list .danger-item { color: var(--danger-text); }
+.menu-list .danger-item:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-text); }
+
+.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
+.empty-title { font-weight: 600; font-size: 14.5px; margin: 0; }
+.empty-body { color: var(--muted); max-width: 460px; }
+.empty-action { margin-top: 8px; }
+
+.copy-field { display: grid; gap: 4px; }
+.copy-label { color: var(--muted); font-size: 12.5px; }
+.copy-row { display: flex; gap: 6px; }
+.copy-row input { flex: 1; min-width: 0; font: 12.5px/1.4 var(--mono); background: var(--surface-2); }
+.copy-field + .copy-field { margin-top: 12px; }
+
+.meter { display: grid; gap: 6px; }
+.meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
+.meter-num { font-variant-numeric: tabular-nums; font-weight: 600; }
+.meter-track { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
+.meter-track span { display: block; height: 100%; border-radius: 999px; background: var(--volter-data-base); }
+.meter.near .meter-track span { background: var(--volter-status-attention-base); }
+.meter.full .meter-track span { background: var(--danger); }
+.meter-note { font-size: 12px; }
+
+.subnav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
+.subnav a { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 500; }
+.subnav a:hover { color: var(--ink); }
+.subnav a.on { color: var(--ink); border-bottom-color: var(--ink); }
+
+button.drawer-button { display: none; }
+@media (max-width: 900px) {
+  button.drawer-button { display: inline-grid; }
+  main.app > header { min-width: 0; }
+  main.app > header h1 { flex: none; }
+  main.app .side { display: none; }
+  main.app[data-drawer] .side { display: block; position: fixed; inset: 47px 0 0 0; width: min(300px, 86vw); height: auto; align-self: stretch; z-index: 30; box-shadow: var(--volter-shadow-floating); }
+  main.app[data-drawer]::after { content: ""; position: fixed; inset: 47px 0 0 0; background: var(--volter-overlay-scrim); z-index: 29; }
+}
+/* the one primary action of a page or a dialog */
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button.primary:hover:not(:disabled) { color: var(--accent-ink); filter: brightness(1.06); }
+/* a phone: the top bar keeps the brand's mark without its name, so where you are fits beside it */
+@media (max-width: 720px) { main.app > header .brand-name { display: none; } main.app > header { flex-wrap: nowrap; } main.app > header .crumbs { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }
+
+/* the theme choice: System, Light, Dark as one segmented control */
+.theme-choice { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
+.theme-choice button { border: 0; background: transparent; padding: 4px 10px; font-size: 12.5px; color: var(--muted); border-radius: 6px; }
+.theme-choice button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
+.theme-choice button:hover:not([aria-checked="true"]) { color: var(--ink); border: 0; }
+.menu-list .menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
+.menu-list .theme-choice button { display: inline-block; width: auto; padding: 3px 8px; }
+.side-foot { margin: 18px 10px 4px; }

package/client/kit/kit.tsx

@@ -0,0 +1,259 @@
+// THE KIT (docs/contributing/architecture.md, "The hosted product"): the pieces every Volter World page shares — the
+// brand's mark, a door read's loading and error faces, instants, counts and vendors' marks — so the dashboard and the
+// platform's pages read as one product. Nothing here knows an org, a member, a plan or a price: the dashboard imports
+// it, and a laptop's World must never carry the platform's words.
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { VENDOR_LOGOS } from '../vendor-logos.ts';
+
+/** Volter World's mark, served by the brand (brand.volter.ai). */
+export const WORLD_LOGO = 'https://brand.volter.ai/logo/twin-world/svg?size=64&variant=mono';
+
+/** The product's name beside its mark: the top bar's first thing, a link home. */
+export function Brand({ href, onClick }: { href: string; onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void }): React.JSX.Element {
+  return <h1><a href={href} onClick={onClick}><img src={WORLD_LOGO} alt="" width={24} height={24} style={{ verticalAlign: 'middle' }} /><span className="brand-name"> Volter World</span></a></h1>;
+}
+
+/** A door's own error text, or its status when it said nothing. */
+export async function failure(r: Response): Promise<string> { const b = (await r.json().catch(() => ({}))) as { error?: string }; return b.error ?? `answered ${r.status}`; }
+
+export type Load<T> = { state: 'loading' } | { state: 'ok'; data: T } | { state: 'error'; status: number; error: string };
+/** One door read through `read`: loading → its answer or its error. A new `version` re-reads and keeps the last answer on
+ *  screen meanwhile; a new `key` (the credential) or path starts from loading. */
+export function useDoor<T>(read: (path: string) => Promise<Response>, path: string | null, version = 0, key = ''): Load<T> {
+  const [load, setLoad] = useState<Load<T>>({ state: 'loading' });
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new door (credential or path) starts from loading
+  useEffect(() => { setLoad({ state: 'loading' }); }, [key, path]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `version` is the re-read trigger; `read` is new each render, `key` stands for it
+  useEffect(() => {
+    if (!path) return;
+    let live = true;
+    void (async () => {
+      try {
+        const r = await read(path);
+        const next: Load<T> = r.ok ? { state: 'ok', data: (await r.json()) as T } : { state: 'error', status: r.status, error: await failure(r) };
+        if (live) setLoad(next);
+      } catch (e) { if (live) setLoad({ state: 'error', status: 0, error: String(e) }); }
+    })();
+    return () => { live = false; };
+  }, [key, path, version]);
+  return load;
+}
+/** The loading and error faces every page shares: a skeleton while it loads (its words for a screen reader), the door's
+ *  own words when it refused, and a way to ask again when the page has one. */
+export function Pending({ load, what, retry, lines = 3 }: { load: Load<unknown>; what: string; retry?: () => void; lines?: number }): React.JSX.Element | null {
+  if (load.state === 'loading') return <Skeleton lines={lines} label={`Loading ${what}…`} />;
+  if (load.state === 'error') return <div role="alert" className="error-state"><span>Could not read {what}: {load.error}</span>{retry ? <button type="button" onClick={retry}>Try again</button> : null}</div>;
+  return null;
+}
+/** Grey lines where content is coming: the shape of a list, not the word "Loading". */
+export function Skeleton({ lines = 3, label = 'Loading…' }: { lines?: number; label?: string }): React.JSX.Element {
+  return <div className="skeleton" role="status" aria-label={label}>{Array.from({ length: lines }, (_, i) => <span key={i} style={{ width: `${[92, 76, 84, 64, 88][i % 5]}%` }} />)}</div>;
+}
+
+/** A moment in the viewer's own locale, the ISO instant in its title. */
+export function At({ iso, time }: { iso?: string | null; time?: boolean }): React.JSX.Element {
+  if (!iso) return <span>—</span>;
+  const d = new Date(iso);
+  return <time dateTime={iso} title={iso}>{Number.isNaN(d.getTime()) ? iso : time ? d.toLocaleTimeString() : d.toLocaleString()}</time>;
+}
+/** An instant as the viewer's locale writes it, or a dash. */
+export const when = (iso?: string | null): string => (iso ? new Date(iso).toLocaleString() : '—');
+/** A date in the person's own calendar — a UTC slice reads a day ahead in the Americas. */
+export const day = (iso: string): string => { const t = Date.parse(iso); return Number.isNaN(t) ? iso : new Date(t).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); };
+/** "4m ago", "2h ago", "3d ago": how long since an instant, as a dashboard says it. */
+export function ago(iso?: string | null): string {
+  const t = iso ? Date.parse(iso) : Number.NaN; if (Number.isNaN(t)) return '—';
+  const s = Math.max(0, Math.round((Date.now() - t) / 1000));
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.round(s / 60)}m ago` : s < 86_400 ? `${Math.round(s / 3600)}h ago` : `${Math.round(s / 86_400)}d ago`;
+}
+/** "3 issues", "1 repository": a count of a thing in plain words. */
+export function counted(n: number, type: string): string {
+  const w = type.replace(/[_-]+/g, ' ');
+  const many = w.endsWith('s') ? w : /[^aeiou]y$/.test(w) ? `${w.slice(0, -1)}ies` : /(ch|sh|x)$/.test(w) ? `${w}es` : `${w}s`;
+  return `${n} ${n === 1 ? w : many}`;
+}
+/** "a, b and c". */
+export const listed = (names: string[]): string => (names.length <= 1 ? names.join('') : `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`);
+
+/** A vendor's name as its own people write it. */
+export const VENDOR_NAMES: Record<string, string> = { github: 'GitHub', openai: 'OpenAI', aws: 'AWS', hubspot: 'HubSpot', paypal: 'PayPal', youtube: 'YouTube', tiktok: 'TikTok', linkedin: 'LinkedIn', xai: 'xAI', sendgrid: 'SendGrid', elevenlabs: 'ElevenLabs', assemblyai: 'AssemblyAI', planetscale: 'PlanetScale', googleoauth: 'Google sign-in', npm: 'npm', 'npm-registry': 'npm registry', posthog: 'PostHog', mongodb: 'MongoDB', pagerduty: 'PagerDuty', mailgun: 'Mailgun', turbopuffer: 'turbopuffer' };
+export const vendorName = (v: string): string => VENDOR_NAMES[v] ?? v.charAt(0).toUpperCase() + v.slice(1);
+/** A vendor's mark: its logo (vendor-logos.ts, Simple Icons), else its initial. */
+export function Mark({ vendor }: { vendor: string }): React.JSX.Element {
+  const logo = VENDOR_LOGOS[vendor];
+  return <span className={logo ? 'mark logo' : 'mark'} aria-hidden="true">{logo ? <svg viewBox="0 0 24 24"><path d={logo.d} fill={logo.fill} /></svg> : vendorName(vendor).charAt(0)}</span>;
+}
+/** A thing's initial on the accent square (a World, an org): the sidebar's and a table's first column. */
+export function Initial({ of, small }: { of: string; small?: boolean }): React.JSX.Element {
+  return <span className={small ? 'mark world-mark small' : 'mark world-mark'} aria-hidden="true">{(of || '+').charAt(0).toUpperCase()}</span>;
+}
+/** Close the menu (`<details>`) a click came from: a picked item leaves its popover. */
+export const closeMenu = (e: React.MouseEvent<HTMLElement>): void => { (e.currentTarget.closest('details') as HTMLDetailsElement | null)?.removeAttribute('open'); };
+// ── the theme: the system's, or one the person picked (kept per origin; every colour is a light-dark() role) ─────────
+export type Theme = 'system' | 'light' | 'dark';
+const THEME_KEY = 'volter.theme';
+export const storedTheme = (): Theme => { try { const t = localStorage.getItem(THEME_KEY); return t === 'light' || t === 'dark' ? t : 'system'; } catch { return 'system'; } };
+/** Put a theme on the page (the stored one by default): called once as an app starts, before it renders. */
+export function applyTheme(t: Theme = storedTheme()): void { const r = document.documentElement; if (t === 'system') r.removeAttribute('data-theme'); else r.setAttribute('data-theme', t); }
+/** System, Light or Dark, as a segmented choice. */
+export function ThemeChoice(): React.JSX.Element {
+  const [theme, setTheme] = useState<Theme>(storedTheme);
+  const pick = (t: Theme): void => { try { if (t === 'system') localStorage.removeItem(THEME_KEY); else localStorage.setItem(THEME_KEY, t); } catch { /* a private window keeps it for this page */ } applyTheme(t); setTheme(t); };
+  return (
+    <div className="theme-choice" role="radiogroup" aria-label="Theme">
+      {(['system', 'light', 'dark'] as const).map((t) => <button key={t} type="button" role="radio" aria-checked={theme === t} onClick={() => pick(t)}>{t === 'system' ? 'System' : t === 'light' ? 'Light' : 'Dark'}</button>)}
+    </div>
+  );
+}
+
+/** Menus close as menus do: Esc closes the open one and puts focus back on its button; a click outside closes every
+ *  open one. Rendered once at an app's root. */
+export function MenuDismiss(): null {
+  useEffect(() => {
+    const open = (): HTMLDetailsElement[] => [...document.querySelectorAll<HTMLDetailsElement>('details.menu[open], details.clock-more[open]')];
+    const esc = (e: KeyboardEvent): void => {
+      if (e.key !== 'Escape' || document.querySelector('dialog[open]')) return;
+      const menus = open(); if (!menus.length) return;
+      for (const d of menus) d.removeAttribute('open');
+      (menus[menus.length - 1]!.querySelector('summary') as HTMLElement | null)?.focus();
+    };
+    const outside = (e: MouseEvent): void => { const t = e.target as Element | null; for (const d of open()) if (!t || !d.contains(t)) d.removeAttribute('open'); };
+    document.addEventListener('keydown', esc); document.addEventListener('click', outside);
+    return () => { document.removeEventListener('keydown', esc); document.removeEventListener('click', outside); };
+  }, []);
+  return null;
+}
+
+// ── dialogs, confirmations and toasts: the conventions every page shares ─────────────────────────────────────────────
+/** A modal dialog: the browser's own (`<dialog>` shown modal), so focus stays in it, Esc closes it and the page behind is
+ *  inert; labelled by its title. A press on the backdrop closes it too. */
+export function Dialog({ open, onClose, title, children, footer, wide }: { open: boolean; onClose: () => void; title: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; wide?: boolean }): React.JSX.Element {
+  const ref = useRef<HTMLDialogElement>(null); const id = useId();
+  // opening moves focus to the dialog's first control (its Close); the first field of its body is where a person types
+  useEffect(() => {
+    const d = ref.current; if (!d) return;
+    if (open && !d.open) {
+      d.showModal();
+      const field = d.querySelector<HTMLElement>('.dialog-body :is(input:not([type=hidden]):not([disabled]), select, textarea)');
+      field?.focus();
+      // a suggested value (a token's default name) is selected, so typing replaces it
+      if (field instanceof HTMLInputElement && field.value && /^(text|search|email|url)$/.test(field.type)) field.select();
+    }
+    if (!open && d.open) d.close();
+  }, [open]);
+  return (
+    <dialog ref={ref} className={wide ? 'dialog wide' : 'dialog'} aria-labelledby={id} onClose={onClose} onCancel={(e) => { e.preventDefault(); onClose(); }} onMouseDown={(e) => { if (e.target === ref.current) onClose(); }}>
+      {open ? <>
+        <div className="dialog-head"><h2 id={id}>{title}</h2><button type="button" className="icon-button" aria-label="Close" onClick={onClose}>✕</button></div>
+        <div className="dialog-body">{children}</div>
+        {footer ? <div className="dialog-foot">{footer}</div> : null}
+      </> : null}
+    </dialog>
+  );
+}
+
+type ConfirmAsk = { title: string; body?: React.ReactNode; action: string; danger?: boolean; typed?: string };
+const CONFIRM_EVENT = 'volter:confirm';
+/** Ask before an act that cannot be taken back: a dialog whose button names the act, and for the worst of them the thing's
+ *  name typed first (GitHub's and Vercel's way). Resolves true when confirmed; `<ConfirmHost/>`, mounted once, shows it. */
+export function confirmAct(ask: ConfirmAsk): Promise<boolean> {
+  return new Promise((resolve) => { window.dispatchEvent(new CustomEvent(CONFIRM_EVENT, { detail: { ask, resolve } })); });
+}
+export function ConfirmHost(): React.JSX.Element {
+  const [pending, setPending] = useState<{ ask: ConfirmAsk; resolve: (ok: boolean) => void } | null>(null);
+  const [typed, setTyped] = useState('');
+  useEffect(() => { const on = (e: Event): void => { setTyped(''); setPending((e as CustomEvent).detail); }; window.addEventListener(CONFIRM_EVENT, on); return () => window.removeEventListener(CONFIRM_EVENT, on); }, []);
+  const done = (ok: boolean): void => { pending?.resolve(ok); setPending(null); };
+  const ask = pending?.ask; const ready = !ask?.typed || typed === ask.typed;
+  return (
+    <Dialog open={Boolean(pending)} onClose={() => done(false)} title={ask?.title ?? ''} footer={<><button type="button" onClick={() => done(false)}>Cancel</button><button type="button" className={ask?.danger ? 'danger-button' : 'primary'} disabled={!ready} onClick={() => done(true)}>{ask?.action}</button></>}>
+      {ask?.body ? <div className="confirm-body">{ask.body}</div> : null}
+      {ask?.typed ? <div className="typed-confirm"><p>Type <code>{ask.typed}</code> to confirm.</p><input autoFocus aria-label={`Type ${ask.typed} to confirm`} value={typed} onChange={(e) => setTyped(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && ready) done(true); }} autoComplete="off" spellCheck={false} /></div> : null}
+    </Dialog>
+  );
+}
+
+type Toast = { id: number; text: string; kind: 'ok' | 'error' | 'info' };
+const TOAST_EVENT = 'volter:toast';
+/** Say what just happened, briefly, in the corner: a result, not a line left on the page. Errors stay until dismissed. */
+export function toast(text: string, kind: Toast['kind'] = 'ok'): void { window.dispatchEvent(new CustomEvent(TOAST_EVENT, { detail: { text, kind } })); }
+export function Toaster(): React.JSX.Element {
+  const [list, setList] = useState<Toast[]>([]);
+  useEffect(() => {
+    let n = 0;
+    const on = (e: Event): void => {
+      const { text, kind } = (e as CustomEvent<{ text: string; kind: Toast['kind'] }>).detail; const id = ++n;
+      setList((l) => [...l.slice(-3), { id, text, kind }]);
+      if (kind !== 'error') setTimeout(() => setList((l) => l.filter((t) => t.id !== id)), 4500);
+    };
+    window.addEventListener(TOAST_EVENT, on); return () => window.removeEventListener(TOAST_EVENT, on);
+  }, []);
+  return (
+    <div className="toasts" role="region" aria-label="Notifications">
+      {list.map((t) => <div key={t.id} className={`toast ${t.kind}`} role={t.kind === 'error' ? 'alert' : 'status'}><span>{t.text}</span><button type="button" className="icon-button" aria-label="Dismiss" onClick={() => setList((l) => l.filter((x) => x.id !== t.id))}>✕</button></div>)}
+    </div>
+  );
+}
+
+/** A value to copy (an address, a command, a secret shown once): the value in a monospace field and a Copy button. */
+export function CopyField({ value, label, secret }: { value: string; label?: string; secret?: boolean }): React.JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const copy = (): void => { void navigator.clipboard?.writeText(value).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); toast(secret ? 'Copied. Keep it somewhere safe' : 'Copied'); }).catch(() => toast('Your browser would not copy it: select it and copy', 'error')); };
+  return (
+    <div className="copy-field">
+      {label ? <span className="copy-label">{label}</span> : null}
+      <div className="copy-row"><input readOnly value={value} aria-label={label ?? 'Value'} onFocus={(e) => e.currentTarget.select()} spellCheck={false} /><button type="button" onClick={copy}>{copied ? 'Copied' : 'Copy'}</button></div>
+    </div>
+  );
+}
+
+/** A "⋯" menu of a row's acts: each item closes the menu when picked. */
+export function Menu({ label, items }: { label: string; items: Array<{ label: string; onSelect?: () => void; href?: string; danger?: boolean; disabled?: boolean } | null | false> }): React.JSX.Element {
+  return (
+    <details className="menu row-menu">
+      <summary className="icon-button" role="button" aria-haspopup="menu" aria-label={label} title={label}>⋯</summary>
+      <div className="popover menu-list" role="menu">
+        {items.filter((x): x is Exclude<typeof x, null | false> => Boolean(x)).map((i) => (i.href
+          ? <a key={i.label} role="menuitem" href={i.href} className={i.danger ? 'danger-item' : undefined} onClick={closeMenu}>{i.label}</a>
+          : <button key={i.label} type="button" role="menuitem" disabled={i.disabled} className={i.danger ? 'danger-item' : undefined} onClick={(e) => { closeMenu(e); i.onSelect?.(); }}>{i.label}</button>))}
+      </div>
+    </details>
+  );
+}
+
+/** Nothing here yet: what the page is for, and its one next step. */
+export function Empty({ title, children, action }: { title: string; children?: React.ReactNode; action?: React.ReactNode }): React.JSX.Element {
+  return <div className="empty-state"><p className="empty-title">{title}</p>{children ? <div className="empty-body">{children}</div> : null}{action ? <div className="empty-action">{action}</div> : null}</div>;
+}
+
+/** A measure against its limit, as a bar: calm under 80%, attention from there, danger at the limit. Unlimited shows the count. */
+export function Meter({ label, value, limit, unit = '', note }: { label: string; value: number; limit: number | null; unit?: string; note?: React.ReactNode }): React.JSX.Element {
+  // at the limit is attention (nothing more fits); past it is danger
+  const share = limit ? Math.min(1, value / limit) : 0; const level = !limit ? 'calm' : value > limit ? 'full' : share >= 0.8 ? 'near' : 'calm';
+  return (
+    <div className={`meter ${level}`}>
+      <div className="meter-head"><span>{label}</span><span className="meter-num">{value.toLocaleString()}{unit}{limit !== null ? <span className="mode"> of {limit.toLocaleString()}{unit}</span> : <span className="mode"> · no limit</span>}</span></div>
+      {limit !== null ? <div className="meter-track" role="meter" aria-label={label} aria-valuemin={0} aria-valuemax={limit} aria-valuenow={value}><span style={{ width: `${Math.max(share > 0 ? 2 : 0, Math.round(share * 100))}%` }} /></div> : null}
+      {note ? <div className="meter-note mode">{note}</div> : null}
+    </div>
+  );
+}
+
+/** Tabs that are addresses: a page's sub-pages (Settings › Security), each a link. */
+export function SubNav({ label, items }: { label: string; items: Array<{ label: string; href: string; on: boolean; onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void }> }): React.JSX.Element {
+  return <nav className="subnav" aria-label={label}>{items.map((i) => <a key={i.href} href={i.href} aria-current={i.on ? 'page' : undefined} className={i.on ? 'on' : undefined} onClick={i.onClick}>{i.label}</a>)}</nav>;
+}
+
+/** On a phone the sidebar is a drawer: this button in the top bar opens it (the shell carries `data-drawer`). */
+export function DrawerButton(): React.JSX.Element {
+  // a tap outside the open drawer, or Esc, closes it, as a drawer does
+  useEffect(() => {
+    const outside = (e: MouseEvent): void => { const main = document.querySelector('main.app'); const t = e.target as Element | null; if (main?.hasAttribute('data-drawer') && t && !t.closest('.side') && !t.closest('.drawer-button')) main.removeAttribute('data-drawer'); };
+    const esc = (e: KeyboardEvent): void => { if (e.key === 'Escape') closeDrawer(); };
+    document.addEventListener('click', outside); document.addEventListener('keydown', esc);
+    return () => { document.removeEventListener('click', outside); document.removeEventListener('keydown', esc); };
+  }, []);
+  return <button type="button" className="icon-button drawer-button" aria-label="Menu" onClick={() => { document.querySelector('main.app')?.toggleAttribute('data-drawer'); }}>☰</button>;
+}
+/** Close the drawer after a pick in it (nothing on a wide screen). */
+export const closeDrawer = (): void => { document.querySelector('main.app')?.removeAttribute('data-drawer'); };