@volter/twin-clerk 0.1.0

package/dist/client/clerk-mirror.css

@@ -0,0 +1,72 @@
+:root {
+  --bg: #0b0b0f;
+  --panel: #15151c;
+  --panel-2: #1c1c26;
+  --border: #2a2a36;
+  --text: #e7e7ee;
+  --muted: #9a9aab;
+  --accent: #6c47ff; /* Clerk purple */
+  --ok: #2ecc71;
+  --warn: #f1c40f;
+  --bad: #e74c3c;
+  --neutral: #6b6b7b;
+}
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.app { display: flex; flex-direction: column; height: 100%; }
+.topbar {
+  display: flex; align-items: baseline; gap: 12px;
+  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
+}
+.brand { font-weight: 700; color: var(--accent); font-size: 16px; }
+.subtitle { color: var(--muted); font-size: 12px; }
+.body { display: grid; grid-template-columns: 200px 320px 1fr; flex: 1; min-height: 0; }
+.nav { border-right: 1px solid var(--border); background: var(--panel); padding: 8px; overflow: auto; }
+.nav-item {
+  display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 2px;
+  background: transparent; color: var(--text); border: 0; border-radius: 6px; cursor: pointer;
+}
+.nav-item:hover { background: var(--panel-2); }
+.nav-item.active { background: var(--accent); color: #fff; }
+.list { border-right: 1px solid var(--border); overflow: auto; background: var(--bg); }
+.list-head { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
+.row {
+  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0;
+  border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
+}
+.row:hover { background: var(--panel-2); }
+.row.selected { background: var(--panel-2); border-left: 3px solid var(--accent); }
+.row-title { font-weight: 600; }
+.row-sub { color: var(--muted); font-size: 12px; }
+.detail { overflow: auto; padding: 16px 18px; }
+.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.detail-lines { margin: 0; }
+.detail-line { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
+.detail-line dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+.detail-line dd { margin: 0; word-break: break-word; }
+.empty { padding: 16px; color: var(--muted); }
+.empty.error { color: var(--bad); }
+.pill {
+  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
+  text-transform: capitalize; border: 1px solid var(--border);
+}
+.pill.ok { color: var(--ok); border-color: var(--ok); }
+.pill.warn { color: var(--warn); border-color: var(--warn); }
+.pill.bad { color: var(--bad); border-color: var(--bad); }
+.pill.neutral { color: var(--neutral); }
+
+/* create-user action + impersonate action (dashboard actions, API↔UI parity) */
+.create-user { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.create-user-head { font-weight: 600; font-size: 12px; color: var(--muted); }
+.field { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: inherit; font-size: 13px; }
+.action-btn { padding: 6px 10px; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent); cursor: pointer; font-size: 13px; }
+.action-btn:disabled { opacity: 0.5; cursor: default; }
+.create-user-msg { font-size: 11px; color: var(--muted); }
+.impersonate { margin-bottom: 12px; }
+.impersonate-token { font-size: 11px; color: var(--muted); margin-top: 6px; }

package/dist/client/clerk-mirror.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type ClerkRow, type FlatLine } from '../src/clerk-mirror-ui.js';
+export type Section = {
+    key: string;
+    label: string;
+    title: (r: ClerkRow) => string;
+    subtitle: (r: ClerkRow) => string;
+};
+export declare const SECTIONS: Section[];
+export declare function StatusPill({ value }: {
+    value: any;
+}): React.JSX.Element;
+/** Render the flattened nested-field lines for the detail panel. */
+export declare function NestedLines({ lines }: {
+    lines: FlatLine[];
+}): React.JSX.Element;
+/**
+ * Create-a-user action (the dashboard's "+ Create user" form). Mirrors the Backend API:
+ * POST /v1/users {email_address:[...], first_name, last_name}. On success it calls back so
+ * the list refreshes — same endpoint an app uses (API↔UI parity).
+ */
+export declare function CreateUserForm({ onCreated }: {
+    onCreated: () => void;
+}): React.JSX.Element;
+/**
+ * Impersonate (sign-in-as) a user — the dashboard's "Impersonate user" action. Mirrors the
+ * Backend API impersonation flow: POST /v1/actor_tokens {user_id, actor:{sub}}, which mints
+ * a real signed token that signs in AS the target user. Shows the minted token id.
+ */
+export declare function ImpersonateButton({ user }: {
+    user: ClerkRow;
+}): React.JSX.Element;
+export declare function App(): React.JSX.Element;

package/dist/client/clerk-mirror.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Clerk UI mirror — React/TSX client (Bun-bundled). A Clerk-dashboard-style admin view
+// in the shared world UI-mirror design language: top bar + left nav + list/detail split.
+// Renders by consuming the twin's own REST API (/v1/<collection>).
+//
+// The pure format helpers live in ../src/clerk-mirror-ui.ts so they can be unit-tested
+// AND shared here (Bun tree-shakes the server-only exports out of this browser bundle).
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { formatUserName, primaryEmail, userStatus, statusTone, flattenClerkValue, orgMemberCount, } from "../src/clerk-mirror-ui.js";
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+export const SECTIONS = [
+    { key: 'users', label: 'Users', title: (r) => formatUserName(r), subtitle: (r) => `${primaryEmail(r) || r.id} · ${userStatus(r)}` },
+    { key: 'sessions', label: 'Sessions', title: (r) => r.id, subtitle: (r) => `${r.status ?? ''} · ${r.user_id ?? ''}` },
+    { key: 'organizations', label: 'Organizations', title: (r) => r.name || r.slug || r.id, subtitle: (r) => `${orgMemberCount(r)} members · ${r.slug ?? ''}` },
+    { key: 'invitations', label: 'Invitations', title: (r) => r.email_address || r.id, subtitle: (r) => `${r.status ?? ''} · ${r.id}` },
+    { key: 'allowlist_identifiers', label: 'Allowlist', title: (r) => r.identifier || r.id, subtitle: (r) => `${r.identifier_type ?? ''} · ${r.id}` },
+    { key: 'blocklist_identifiers', label: 'Blocklist', title: (r) => r.identifier || r.id, subtitle: (r) => `${r.identifier_type ?? ''} · ${r.id}` },
+    { key: 'jwt_templates', label: 'JWT Templates', title: (r) => r.name || r.id, subtitle: (r) => `lifetime ${r.lifetime ?? '?'}s · ${r.signing_algorithm ?? 'RS256'}` },
+];
+const SECTION_BY_KEY = Object.fromEntries(SECTIONS.map((s) => [s.key, s]));
+export function StatusPill({ value }) {
+    const v = String(value ?? '');
+    return _jsx("span", { className: `pill ${statusTone(v)}`, children: v.replace(/_/g, ' ') || '—' });
+}
+/** Render the flattened nested-field lines for the detail panel. */
+export function NestedLines({ lines }) {
+    return (_jsx("dl", { className: "detail-lines", children: lines.map((ln, i) => (_jsxs("div", { className: "detail-line", children: [_jsx("dt", { className: "mono", children: ln.key }), _jsx("dd", { className: "mono", children: ln.value })] }, `${ln.key}-${i}`))) }));
+}
+function useCollection(section, reloadKey = 0) {
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    useEffect(() => {
+        let live = true;
+        setLoading(true);
+        setError('');
+        fetch(`${WIRE_BASE}/v1/${section}`)
+            .then((r) => r.json())
+            .then((body) => {
+            if (!live)
+                return;
+            const data = Array.isArray(body) ? body : Array.isArray(body?.data) ? body.data : [];
+            setRows(data);
+            setLoading(false);
+        })
+            .catch((e) => { if (live) {
+            setError(String(e));
+            setLoading(false);
+        } });
+        return () => { live = false; };
+    }, [section, reloadKey]);
+    return { rows, loading, error };
+}
+/**
+ * Create-a-user action (the dashboard's "+ Create user" form). Mirrors the Backend API:
+ * POST /v1/users {email_address:[...], first_name, last_name}. On success it calls back so
+ * the list refreshes — same endpoint an app uses (API↔UI parity).
+ */
+export function CreateUserForm({ onCreated }) {
+    const [email, setEmail] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [msg, setMsg] = useState('');
+    async function submit(e) {
+        e.preventDefault();
+        setBusy(true);
+        setMsg('');
+        try {
+            const res = await fetch(`${WIRE_BASE}/v1/users`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email_address: email ? [email] : [], first_name: firstName || undefined }),
+            });
+            const body = await res.json();
+            if (res.ok) {
+                setMsg(`Created ${body.id}`);
+                setEmail('');
+                setFirstName('');
+                onCreated();
+            }
+            else
+                setMsg(body?.errors?.[0]?.message ?? 'Create failed');
+        }
+        catch (err) {
+            setMsg(String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { className: "create-user", onSubmit: submit, children: [_jsx("div", { className: "create-user-head", children: "Create user" }), _jsx("input", { className: "field", placeholder: "email address", value: email, onChange: (e) => setEmail(e.target.value) }), _jsx("input", { className: "field", placeholder: "first name", value: firstName, onChange: (e) => setFirstName(e.target.value) }), _jsx("button", { className: "action-btn", type: "submit", disabled: busy, children: busy ? 'Creating…' : 'Create user' }), msg && _jsx("div", { className: "create-user-msg mono", children: msg })] }));
+}
+/**
+ * Impersonate (sign-in-as) a user — the dashboard's "Impersonate user" action. Mirrors the
+ * Backend API impersonation flow: POST /v1/actor_tokens {user_id, actor:{sub}}, which mints
+ * a real signed token that signs in AS the target user. Shows the minted token id.
+ */
+export function ImpersonateButton({ user }) {
+    const [token, setToken] = useState('');
+    const [busy, setBusy] = useState(false);
+    async function impersonate() {
+        setBusy(true);
+        try {
+            const res = await fetch(`${WIRE_BASE}/v1/actor_tokens`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ user_id: user.id, actor: { sub: 'dashboard_admin' } }),
+            });
+            const body = await res.json();
+            setToken(res.ok ? (body.id ?? 'created') : (body?.errors?.[0]?.message ?? 'failed'));
+        }
+        catch (err) {
+            setToken(String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "impersonate", children: [_jsx("button", { className: "action-btn impersonate-btn", onClick: impersonate, disabled: busy, children: busy ? 'Signing in as…' : 'Impersonate user' }), token && _jsxs("div", { className: "impersonate-token mono", children: ["actor token: ", token] })] }));
+}
+export function App() {
+    const [section, setSection] = useState(SECTIONS[0].key);
+    const [selectedId, setSelectedId] = useState(null);
+    const [reloadKey, setReloadKey] = useState(0);
+    const { rows, loading, error } = useCollection(section, reloadKey);
+    const current = SECTION_BY_KEY[section];
+    const selected = useMemo(() => rows.find((r) => r.id === selectedId) ?? rows[0] ?? null, [rows, selectedId]);
+    const lines = useMemo(() => (selected ? flattenClerkValue(selected) : []), [selected]);
+    return (_jsxs("div", { className: "app", children: [_jsxs("header", { className: "topbar", children: [_jsx("span", { className: "brand", children: "Clerk twin" }), _jsx("span", { className: "subtitle", children: "local Backend API mirror \u2014 users \u00B7 sessions \u00B7 orgs \u00B7 JWT/JWKS" })] }), _jsxs("div", { className: "body", children: [_jsx("nav", { className: "nav", children: SECTIONS.map((s) => (_jsx("button", { className: `nav-item ${s.key === section ? 'active' : ''}`, onClick: () => { setSection(s.key); setSelectedId(null); }, children: s.label }, s.key))) }), _jsxs("section", { className: "list", children: [_jsxs("div", { className: "list-head", children: [current.label, !loading ? ` (${rows.length})` : ''] }), section === 'users' && _jsx(CreateUserForm, { onCreated: () => setReloadKey((k) => k + 1) }), loading && _jsx("div", { className: "empty", children: "Loading\u2026" }), error && _jsx("div", { className: "empty error", children: error }), !loading && !error && rows.length === 0 && _jsxs("div", { className: "empty", children: ["No ", current.label.toLowerCase(), " yet."] }), rows.map((r) => (_jsxs("button", { className: `row ${selected?.id === r.id ? 'selected' : ''}`, onClick: () => setSelectedId(r.id), children: [_jsx("div", { className: "row-title", children: current.title(r) }), _jsx("div", { className: "row-sub mono", children: current.subtitle(r) })] }, r.id)))] }), _jsx("aside", { className: "detail", children: selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "detail-head", children: [_jsx("span", { className: "mono", children: selected.id }), selected.status && _jsx(StatusPill, { value: selected.status })] }), section === 'users' && _jsx(ImpersonateButton, { user: selected }), _jsx(NestedLines, { lines: lines })] })) : (_jsx("div", { className: "empty", children: "Select a record." })) })] })] }));
+}
+// Browser-only mount. Guarded so the presentational components above (SECTIONS, StatusPill,
+// NestedLines, CreateUserForm, ImpersonateButton, …) can be imported and renderToStaticMarkup'd
+// in a DOM-less test/SSR environment (TWIN-14 verify()s) without this top-level `document`
+// access throwing. The browser bundle still mounts exactly as before.
+if (typeof document !== 'undefined') {
+    const rootEl = document.getElementById('root');
+    if (rootEl)
+        createRoot(rootEl).render(_jsx(App, {}));
+}

package/dist/client/clerk-mirror.tsx

@@ -0,0 +1,204 @@
+// Clerk UI mirror — React/TSX client (Bun-bundled). A Clerk-dashboard-style admin view
+// in the shared world UI-mirror design language: top bar + left nav + list/detail split.
+// Renders by consuming the twin's own REST API (/v1/<collection>).
+//
+// The pure format helpers live in ../src/clerk-mirror-ui.ts so they can be unit-tested
+// AND shared here (Bun tree-shakes the server-only exports out of this browser bundle).
+import React, { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  formatUserName, primaryEmail, userStatus, formatClerkDate, statusTone,
+  flattenClerkValue, orgMemberCount, type ClerkRow, type FlatLine,
+} from '../src/clerk-mirror-ui.ts';
+
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+
+export type Section = { key: string; label: string; title: (r: ClerkRow) => string; subtitle: (r: ClerkRow) => string };
+
+export const SECTIONS: Section[] = [
+  { key: 'users', label: 'Users', title: (r) => formatUserName(r), subtitle: (r) => `${primaryEmail(r) || r.id} · ${userStatus(r)}` },
+  { key: 'sessions', label: 'Sessions', title: (r) => r.id, subtitle: (r) => `${r.status ?? ''} · ${r.user_id ?? ''}` },
+  { key: 'organizations', label: 'Organizations', title: (r) => r.name || r.slug || r.id, subtitle: (r) => `${orgMemberCount(r)} members · ${r.slug ?? ''}` },
+  { key: 'invitations', label: 'Invitations', title: (r) => r.email_address || r.id, subtitle: (r) => `${r.status ?? ''} · ${r.id}` },
+  { key: 'allowlist_identifiers', label: 'Allowlist', title: (r) => r.identifier || r.id, subtitle: (r) => `${r.identifier_type ?? ''} · ${r.id}` },
+  { key: 'blocklist_identifiers', label: 'Blocklist', title: (r) => r.identifier || r.id, subtitle: (r) => `${r.identifier_type ?? ''} · ${r.id}` },
+  { key: 'jwt_templates', label: 'JWT Templates', title: (r) => r.name || r.id, subtitle: (r) => `lifetime ${r.lifetime ?? '?'}s · ${r.signing_algorithm ?? 'RS256'}` },
+];
+
+const SECTION_BY_KEY: Record<string, Section> = Object.fromEntries(SECTIONS.map((s) => [s.key, s]));
+
+export function StatusPill({ value }: { value: any }) {
+  const v = String(value ?? '');
+  return <span className={`pill ${statusTone(v)}`}>{v.replace(/_/g, ' ') || '—'}</span>;
+}
+
+/** Render the flattened nested-field lines for the detail panel. */
+export function NestedLines({ lines }: { lines: FlatLine[] }) {
+  return (
+    <dl className="detail-lines">
+      {lines.map((ln, i) => (
+        <div className="detail-line" key={`${ln.key}-${i}`}>
+          <dt className="mono">{ln.key}</dt>
+          <dd className="mono">{ln.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function useCollection(section: string, reloadKey = 0): { rows: ClerkRow[]; loading: boolean; error: string } {
+  const [rows, setRows] = useState<ClerkRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let live = true;
+    setLoading(true);
+    setError('');
+    fetch(`${WIRE_BASE}/v1/${section}`)
+      .then((r) => r.json())
+      .then((body) => {
+        if (!live) return;
+        const data = Array.isArray(body) ? body : Array.isArray(body?.data) ? body.data : [];
+        setRows(data);
+        setLoading(false);
+      })
+      .catch((e) => { if (live) { setError(String(e)); setLoading(false); } });
+    return () => { live = false; };
+  }, [section, reloadKey]);
+  return { rows, loading, error };
+}
+
+/**
+ * Create-a-user action (the dashboard's "+ Create user" form). Mirrors the Backend API:
+ * POST /v1/users {email_address:[...], first_name, last_name}. On success it calls back so
+ * the list refreshes — same endpoint an app uses (API↔UI parity).
+ */
+export function CreateUserForm({ onCreated }: { onCreated: () => void }) {
+  const [email, setEmail] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState('');
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setMsg('');
+    try {
+      const res = await fetch(`${WIRE_BASE}/v1/users`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email_address: email ? [email] : [], first_name: firstName || undefined }),
+      });
+      const body = await res.json();
+      if (res.ok) { setMsg(`Created ${body.id}`); setEmail(''); setFirstName(''); onCreated(); }
+      else setMsg(body?.errors?.[0]?.message ?? 'Create failed');
+    } catch (err) { setMsg(String(err)); }
+    finally { setBusy(false); }
+  }
+  return (
+    <form className="create-user" onSubmit={submit}>
+      <div className="create-user-head">Create user</div>
+      <input className="field" placeholder="email address" value={email} onChange={(e) => setEmail(e.target.value)} />
+      <input className="field" placeholder="first name" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+      <button className="action-btn" type="submit" disabled={busy}>{busy ? 'Creating…' : 'Create user'}</button>
+      {msg && <div className="create-user-msg mono">{msg}</div>}
+    </form>
+  );
+}
+
+/**
+ * Impersonate (sign-in-as) a user — the dashboard's "Impersonate user" action. Mirrors the
+ * Backend API impersonation flow: POST /v1/actor_tokens {user_id, actor:{sub}}, which mints
+ * a real signed token that signs in AS the target user. Shows the minted token id.
+ */
+export function ImpersonateButton({ user }: { user: ClerkRow }) {
+  const [token, setToken] = useState<string>('');
+  const [busy, setBusy] = useState(false);
+  async function impersonate() {
+    setBusy(true);
+    try {
+      const res = await fetch(`${WIRE_BASE}/v1/actor_tokens`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ user_id: user.id, actor: { sub: 'dashboard_admin' } }),
+      });
+      const body = await res.json();
+      setToken(res.ok ? (body.id ?? 'created') : (body?.errors?.[0]?.message ?? 'failed'));
+    } catch (err) { setToken(String(err)); }
+    finally { setBusy(false); }
+  }
+  return (
+    <div className="impersonate">
+      <button className="action-btn impersonate-btn" onClick={impersonate} disabled={busy}>
+        {busy ? 'Signing in as…' : 'Impersonate user'}
+      </button>
+      {token && <div className="impersonate-token mono">actor token: {token}</div>}
+    </div>
+  );
+}
+
+export function App() {
+  const [section, setSection] = useState<string>(SECTIONS[0]!.key);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  const { rows, loading, error } = useCollection(section, reloadKey);
+  const current = SECTION_BY_KEY[section]!;
+  const selected = useMemo(() => rows.find((r) => r.id === selectedId) ?? rows[0] ?? null, [rows, selectedId]);
+  const lines = useMemo(() => (selected ? flattenClerkValue(selected) : []), [selected]);
+
+  return (
+    <div className="app">
+      <header className="topbar">
+        <span className="brand">Clerk twin</span>
+        <span className="subtitle">local Backend API mirror — users · sessions · orgs · JWT/JWKS</span>
+      </header>
+      <div className="body">
+        <nav className="nav">
+          {SECTIONS.map((s) => (
+            <button key={s.key} className={`nav-item ${s.key === section ? 'active' : ''}`} onClick={() => { setSection(s.key); setSelectedId(null); }}>
+              {s.label}
+            </button>
+          ))}
+        </nav>
+        <section className="list">
+          <div className="list-head">{current.label}{!loading ? ` (${rows.length})` : ''}</div>
+          {section === 'users' && <CreateUserForm onCreated={() => setReloadKey((k) => k + 1)} />}
+          {loading && <div className="empty">Loading…</div>}
+          {error && <div className="empty error">{error}</div>}
+          {!loading && !error && rows.length === 0 && <div className="empty">No {current.label.toLowerCase()} yet.</div>}
+          {rows.map((r) => (
+            <button key={r.id} className={`row ${selected?.id === r.id ? 'selected' : ''}`} onClick={() => setSelectedId(r.id)}>
+              <div className="row-title">{current.title(r)}</div>
+              <div className="row-sub mono">{current.subtitle(r)}</div>
+            </button>
+          ))}
+        </section>
+        <aside className="detail">
+          {selected ? (
+            <>
+              <div className="detail-head">
+                <span className="mono">{selected.id}</span>
+                {selected.status && <StatusPill value={selected.status} />}
+              </div>
+              {section === 'users' && <ImpersonateButton user={selected} />}
+              <NestedLines lines={lines} />
+            </>
+          ) : (
+            <div className="empty">Select a record.</div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+// Browser-only mount. Guarded so the presentational components above (SECTIONS, StatusPill,
+// NestedLines, CreateUserForm, ImpersonateButton, …) can be imported and renderToStaticMarkup'd
+// in a DOM-less test/SSR environment (TWIN-14 verify()s) without this top-level `document`
+// access throwing. The browser bundle still mounts exactly as before.
+if (typeof document !== 'undefined') {
+  const rootEl = document.getElementById('root');
+  if (rootEl) createRoot(rootEl).render(<App />);
+}