@validation-os/dashboard 0.2.0 → 0.4.0

package/dist/index.js

@@ -10,6 +10,15 @@ var REGISTER_LABEL = {
   glossary: "Glossary",
   people: "People"
 };
+var REGISTER_SINGULAR = {
+  assumptions: "Assumption",
+  experiments: "Experiment",
+  readings: "Reading",
+  goals: "Goal",
+  decisions: "Decision",
+  glossary: "Glossary term",
+  people: "Person"
+};
 var REGISTER_ORDER = [
   "assumptions",
   "experiments",
@@ -234,30 +243,29 @@ function RegisterTable({
 }
 
 // src/record-drawer.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
+
+// src/drawer-shell.tsx
 import { useEffect, useRef } from "react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var META_FIELDS = /* @__PURE__ */ new Set(["id", "version", "createdAt", "updatedAt", "derived"]);
-function RecordDrawer({
-  register,
-  record,
-  loading,
-  error,
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DrawerShell({
   open,
-  onClose
+  onClose,
+  ariaLabel,
+  scroll = true,
+  children
 }) {
-  const closeButtonRef = useRef(null);
+  const panelRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", onKey);
-    closeButtonRef.current?.focus();
+    panelRef.current?.focus();
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   if (!open) return null;
-  const derived = record && record.derived && typeof record.derived === "object" ? record.derived : null;
-  const fields = record ? Object.keys(record).filter((k) => !META_FIELDS.has(k)) : [];
   return /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50 flex justify-end", children: [
     /* @__PURE__ */ jsx3(
       "button",
@@ -268,66 +276,134 @@ function RecordDrawer({
         className: "absolute inset-0 bg-neutral-950/30 backdrop-blur-sm"
       }
     ),
-    /* @__PURE__ */ jsxs3(
-      "aside",
+    /* @__PURE__ */ jsx3(
+      "div",
       {
+        ref: panelRef,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": `${REGISTER_LABEL[register]} record`,
-        className: "relative flex h-full w-full max-w-md flex-col overflow-y-auto border-l border-neutral-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-950",
-        children: [
-          /* @__PURE__ */ jsxs3("header", { className: "flex items-start justify-between gap-4 border-b border-neutral-200 p-5 dark:border-neutral-800", children: [
-            /* @__PURE__ */ jsxs3("div", { children: [
-              /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium uppercase tracking-wide text-neutral-400", children: REGISTER_LABEL[register] }),
-              /* @__PURE__ */ jsx3("h2", { className: "mt-1 text-lg font-semibold text-neutral-900 dark:text-neutral-50", children: record ? primaryLabel(record) : loading ? "Loading\u2026" : "\u2014" })
-            ] }),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                ref: closeButtonRef,
-                type: "button",
-                onClick: onClose,
-                className: "rounded-md px-2 py-1 text-sm text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-900",
-                children: "Close"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3("div", { className: "flex-1 p-5", children: loading ? /* @__PURE__ */ jsx3("p", { className: "text-sm text-neutral-500", children: "Loading record\u2026" }) : error ? /* @__PURE__ */ jsx3("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : !record ? /* @__PURE__ */ jsx3("p", { className: "text-sm text-neutral-500", children: "No record." }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-            derived ? /* @__PURE__ */ jsxs3("section", { className: "mb-6", children: [
-              /* @__PURE__ */ jsx3("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-neutral-400", children: "Computed \xB7 not editable" }),
-              /* @__PURE__ */ jsx3("dl", { className: "grid grid-cols-3 gap-3", children: Object.entries(derived).map(([key, value]) => /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  className: "rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-800 dark:bg-neutral-900",
-                  children: [
-                    /* @__PURE__ */ jsx3("dt", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: derivedLabel(key) }),
-                    /* @__PURE__ */ jsx3("dd", { className: "mt-1 text-xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-50", children: formatValue(value) })
-                  ]
-                },
-                key
-              )) })
-            ] }) : null,
-            /* @__PURE__ */ jsx3("dl", { className: "divide-y divide-neutral-100 dark:divide-neutral-900", children: fields.map((key) => /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 gap-3 py-2.5", children: [
-              /* @__PURE__ */ jsx3("dt", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: fieldLabel(key) }),
-              /* @__PURE__ */ jsx3("dd", { className: "col-span-2 text-sm text-neutral-800 dark:text-neutral-200", children: formatValue(record[key]) })
-            ] }, key)) })
-          ] }) }),
-          record ? /* @__PURE__ */ jsxs3("footer", { className: "border-t border-neutral-200 p-5 text-xs text-neutral-400 dark:border-neutral-800", children: [
-            record.id,
-            " \xB7 version ",
-            String(record.version),
-            " \xB7 updated",
-            " ",
-            formatValue(record.updatedAt)
-          ] }) : null
-        ]
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        className: `relative flex h-full w-full max-w-md flex-col border-l border-neutral-200 bg-white shadow-xl outline-none dark:border-neutral-800 dark:bg-neutral-950 ${scroll ? "overflow-y-auto" : "overflow-hidden"}`,
+        children
       }
     )
   ] });
 }
 
-// src/register-browser.tsx
-import { useState as useState2 } from "react";
+// src/edit.ts
+var CONFLICT_MESSAGE = "Someone edited this while you had it open \u2014 your changes are safe, take a look before saving again.";
+var t = (key, label) => ({ key, label, kind: "text" });
+var area = (key, label) => ({
+  key,
+  label,
+  kind: "textarea"
+});
+var num = (key, label) => ({
+  key,
+  label,
+  kind: "number",
+  nullable: true
+});
+var sel = (key, label, options, nullable = false) => ({ key, label, kind: "select", options, nullable });
+var READING_RUNGS = [
+  "Opinion",
+  "Pitch-deck reaction",
+  "Anecdotal",
+  "Desk research",
+  "Survey at scale",
+  "Prototype usage",
+  "Signed intent",
+  "Paying users"
+];
+var SOURCE_QUALITY = ["1", "0.7", "0.5"];
+var EDITORS = {
+  assumptions: [
+    t("Title", "Assumption"),
+    area("Description", "Description"),
+    num("Impact", "Impact"),
+    sel("Status", "Status", ["Draft", "Live", "Invalidated"]),
+    t("Lens", "Lens"),
+    area("5 Whys", "5 Whys"),
+    area("Metric for truth", "Metric for truth"),
+    area("Scoring justification", "Scoring justification")
+    // `moot` is deliberately not editable here — mooting an assumption is a
+    // gated business action (see core `relations.ts`), not a free-form toggle.
+  ],
+  experiments: [
+    t("Title", "Experiment"),
+    t("Instrument", "Instrument"),
+    sel("Feasibility", "Feasibility", ["High", "Medium", "Low"], true),
+    sel("Status", "Status", ["Running", "Closed"]),
+    sel(
+      "closureReason",
+      "Closure reason",
+      ["Completed", "Early-stop", "Kill"],
+      true
+    ),
+    t("Date", "Date")
+  ],
+  readings: [
+    t("Title", "Reading"),
+    t("Source", "Source"),
+    sel("Rung", "Rung", READING_RUNGS),
+    sel("Result", "Result", ["Validated", "Invalidated", "Inconclusive"]),
+    sel("Representativeness", "Representativeness", SOURCE_QUALITY),
+    sel("Credibility", "Credibility", SOURCE_QUALITY),
+    sel("magnitudeBand", "Magnitude band", ["Low", "Typical", "High"], true),
+    t("Date", "Date")
+  ],
+  goals: [
+    t("Title", "Goal"),
+    sel("Status", "Status", ["Draft", "Active", "Closed"]),
+    sel("Outcome", "Outcome", ["Achieved", "Missed", "Dropped"], true),
+    t("Date", "Date")
+  ],
+  decisions: [
+    t("Title", "Decision"),
+    sel("Status", "Status", ["Active", "Provisional", "Superseded", "Reversed"])
+  ],
+  glossary: [
+    t("Title", "Term"),
+    sel("Status", "Status", ["Active", "Provisional", "Superseded"])
+  ],
+  people: [t("Name", "Name"), t("Role", "Role"), t("Segment", "Segment")]
+};
+function editableFields(register) {
+  return EDITORS[register];
+}
+function draftFrom(register, record) {
+  const draft = {};
+  for (const f of editableFields(register)) {
+    const value = record[f.key];
+    draft[f.key] = value === null || value === void 0 ? "" : String(value);
+  }
+  return draft;
+}
+function coerce(field, raw) {
+  const str2 = String(raw);
+  if (field.kind === "number") {
+    if (str2.trim() === "") return null;
+    const n = Number(str2);
+    return Number.isNaN(n) ? null : n;
+  }
+  if (str2 === "" && (field.kind === "select" || field.nullable)) return null;
+  return str2;
+}
+function norm(value) {
+  return value === void 0 || value === "" ? null : value;
+}
+function buildPatch(register, original, draft) {
+  const patch = { version: original.version };
+  for (const field of editableFields(register)) {
+    const next = coerce(field, draft[field.key] ?? "");
+    if (norm(next) !== norm(original[field.key])) patch[field.key] = next;
+  }
+  return patch;
+}
+function hasEdits(register, original, draft) {
+  return Object.keys(buildPatch(register, original, draft)).length > 1;
+}
 
 // src/use-records.ts
 import { useCallback, useEffect as useEffect2, useState } from "react";
@@ -362,7 +438,7 @@ function useJsonResource(url) {
       live = false;
     };
   }, [url, tick]);
-  const refresh = useCallback(() => setTick((t) => t + 1), []);
+  const refresh = useCallback(() => setTick((t2) => t2 + 1), []);
   return { ...state, refresh };
 }
 function useList(register, basePath = "/api") {
@@ -373,26 +449,1020 @@ function useList(register, basePath = "/api") {
 }
 function useRecord(register, id, basePath = "/api") {
   const url = id ? `${basePath}/${register}/${encodeURIComponent(id)}` : null;
-  const { data, loading, error } = useJsonResource(url);
-  return { record: data, loading, error };
+  const { data, loading, error, refresh } = useJsonResource(url);
+  return { record: data, loading, error, refresh };
+}
+var SAVE_FAILED = "Couldn't save your changes \u2014 please try again.";
+function interpretSave(status, body) {
+  if (status >= 200 && status < 300) {
+    return { ok: true, record: pickData(body) };
+  }
+  const message = body?.message;
+  const text = typeof message === "string" ? message : null;
+  if (status === 409) {
+    return { ok: false, conflict: true, message: text ?? CONFLICT_MESSAGE };
+  }
+  return { ok: false, conflict: false, message: text ?? SAVE_FAILED };
+}
+function useUpdate(register, basePath = "/api") {
+  const [saving, setSaving] = useState(false);
+  const [conflict, setConflict] = useState(null);
+  const [error, setError] = useState(null);
+  const save = useCallback(
+    async (id, patch) => {
+      setSaving(true);
+      setConflict(null);
+      setError(null);
+      try {
+        const res = await fetch(
+          `${basePath}/${register}/${encodeURIComponent(id)}`,
+          {
+            method: "PATCH",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(patch)
+          }
+        );
+        const body = await res.json().catch(() => null);
+        const result = interpretSave(res.status, body);
+        if (!result.ok && result.conflict) setConflict(result.message);
+        else if (!result.ok) setError(result.message);
+        return result;
+      } catch (e) {
+        const message = e instanceof Error ? e.message : "Couldn't save your changes.";
+        setError(message);
+        return { ok: false, conflict: false, message };
+      } finally {
+        setSaving(false);
+      }
+    },
+    [register, basePath]
+  );
+  const reset = useCallback(() => {
+    setConflict(null);
+    setError(null);
+  }, []);
+  return { save, saving, conflict, error, reset };
+}
+
+// src/understanding.ts
+import {
+  toReadingInput
+} from "@validation-os/core";
+import {
+  confidenceAttribution,
+  confidenceTrajectory,
+  experimentProgress,
+  isConcluded
+} from "@validation-os/core/derivation";
+function str(v) {
+  return typeof v === "string" && v !== "" ? v : null;
+}
+function testsAssumption(exp, assumptionId) {
+  const bars = exp.barLines;
+  if (bars?.some((b) => b.assumptionId === assumptionId)) return true;
+  const ids = exp.barLineAssumptionIds;
+  return ids?.includes(assumptionId) ?? false;
+}
+function buildUnderstanding(assumption, readings, experiments) {
+  const mine = readings.filter((r) => r.assumptionId === assumption.id);
+  const inputs = mine.map(toReadingInput);
+  const { confidence, movers } = confidenceAttribution(inputs);
+  const experimentsById = new Map(experiments.map((e) => [e.id, e]));
+  const moverByExperiment = new Map(
+    movers.filter((m) => m.kind === "experiment").map((m) => [m.experimentId, m])
+  );
+  const experimentIds = /* @__PURE__ */ new Set([
+    ...experiments.filter((e) => testsAssumption(e, assumption.id)).map((e) => e.id),
+    ...moverByExperiment.keys()
+  ]);
+  const experimentViews = [...experimentIds].map((id) => {
+    const exp = experimentsById.get(id);
+    const mover = moverByExperiment.get(id);
+    const bars = exp?.barLines ?? [];
+    const progress = bars.length ? experimentProgress(bars) : null;
+    const status = exp ? str(exp.Status) : null;
+    return {
+      experimentId: id,
+      title: exp ? str(exp.Title) : null,
+      status,
+      contribution: mover?.contribution ?? 0,
+      magnitude: mover?.magnitude ?? 0,
+      readingCount: mover?.readingCount ?? 0,
+      progress,
+      done: status === "Closed" || progress?.concluded === true
+    };
+  });
+  experimentViews.sort(
+    (a, b) => b.magnitude - a.magnitude || Number(a.done) - Number(b.done) || a.experimentId.localeCompare(b.experimentId)
+  );
+  const otherMovers = movers.filter((m) => m.kind !== "experiment").map((m) => ({
+    key: m.key,
+    kind: m.kind,
+    goalId: m.goalId,
+    contribution: m.contribution,
+    magnitude: m.magnitude,
+    readingCount: m.readingCount
+  }));
+  return {
+    confidence,
+    experiments: experimentViews,
+    otherMovers,
+    trajectory: confidenceTrajectory(inputs),
+    readingCount: inputs.filter((r) => isConcluded(r.result)).length
+  };
+}
+
+// src/understanding-panel.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function UnderstandingPanel({
+  assumption,
+  basePath
+}) {
+  const readings = useList("readings", basePath);
+  const experiments = useList("experiments", basePath);
+  if (readings.loading || experiments.loading) {
+    return /* @__PURE__ */ jsx4(Muted, { children: "Working out what moved the number\u2026" });
+  }
+  if (readings.error || experiments.error) {
+    return /* @__PURE__ */ jsx4(Muted, { children: "Couldn't load the evidence behind this number." });
+  }
+  const u = buildUnderstanding(
+    assumption,
+    readings.records ?? [],
+    experiments.records ?? []
+  );
+  if (u.experiments.length === 0 && u.otherMovers.length === 0) {
+    return /* @__PURE__ */ jsx4(Muted, { children: "No experiments or concluded readings yet \u2014 Confidence rests on the neutral prior alone." });
+  }
+  const maxMagnitude = Math.max(
+    ...u.experiments.map((e) => e.magnitude),
+    ...u.otherMovers.map((m) => m.magnitude),
+    0.01
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "mt-2 space-y-4 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-900", children: [
+    u.experiments.length ? /* @__PURE__ */ jsxs4("section", { children: [
+      /* @__PURE__ */ jsx4(Heading, { children: "What's moving Confidence" }),
+      /* @__PURE__ */ jsx4("ul", { className: "space-y-2.5", children: u.experiments.map((e) => /* @__PURE__ */ jsxs4("li", { children: [
+        /* @__PURE__ */ jsx4(
+          PushRow,
+          {
+            label: e.title ?? `Experiment ${e.experimentId}`,
+            contribution: e.contribution,
+            magnitude: e.magnitude,
+            max: maxMagnitude
+          }
+        ),
+        /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-neutral-500 dark:text-neutral-400", children: experimentDetail(e) })
+      ] }, e.experimentId)) })
+    ] }) : null,
+    u.otherMovers.length ? /* @__PURE__ */ jsxs4("section", { children: [
+      /* @__PURE__ */ jsx4(Heading, { children: "Other evidence" }),
+      /* @__PURE__ */ jsx4("ul", { className: "space-y-2.5", children: u.otherMovers.map((m) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+        PushRow,
+        {
+          label: otherMoverLabel(m),
+          contribution: m.contribution,
+          magnitude: m.magnitude,
+          max: maxMagnitude
+        }
+      ) }, m.key)) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs4("section", { children: [
+      /* @__PURE__ */ jsx4(Heading, { children: "Confidence over time" }),
+      /* @__PURE__ */ jsx4(Trajectory, { points: u.trajectory })
+    ] })
+  ] });
+}
+function PushRow({
+  label,
+  contribution,
+  magnitude,
+  max
+}) {
+  const up = contribution >= 0;
+  const moving = magnitude > 0;
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx4("span", { className: "truncate text-sm text-neutral-800 dark:text-neutral-200", children: label }),
+      moving ? /* @__PURE__ */ jsxs4(
+        "span",
+        {
+          className: `shrink-0 text-sm font-semibold tabular-nums ${up ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400"}`,
+          children: [
+            up ? "+" : "",
+            contribution
+          ]
+        }
+      ) : /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs text-neutral-400", children: "no readings yet" })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "mt-1 h-1.5 rounded-full bg-neutral-200 dark:bg-neutral-800", children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `h-full rounded-full ${up ? "bg-emerald-500" : "bg-rose-500"}`,
+        style: { width: `${magnitude / max * 100}%` }
+      }
+    ) })
+  ] });
+}
+function Trajectory({ points }) {
+  if (points.length < 2) {
+    return /* @__PURE__ */ jsx4("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: points.length === 1 ? `One dated reading so far \u2014 Confidence ${points[0].confidence} on ${points[0].date}.` : "No dated readings yet to chart a trajectory." });
+  }
+  return /* @__PURE__ */ jsx4(Sparkline, { points });
+}
+var SPARK_W = 260;
+var SPARK_H = 44;
+function Sparkline({ points }) {
+  const n = points.length;
+  const x = (i) => i / (n - 1) * SPARK_W;
+  const y = (c) => (100 - c) / 200 * SPARK_H;
+  const path = points.map((p, i) => `${x(i)},${y(p.confidence)}`).join(" ");
+  const first = points[0];
+  const last = points[n - 1];
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4(
+      "svg",
+      {
+        viewBox: `0 0 ${SPARK_W} ${SPARK_H}`,
+        className: "w-full",
+        role: "img",
+        "aria-label": `Confidence moved from ${first.confidence} to ${last.confidence}`,
+        children: [
+          /* @__PURE__ */ jsx4(
+            "line",
+            {
+              x1: 0,
+              x2: SPARK_W,
+              y1: y(0),
+              y2: y(0),
+              className: "stroke-neutral-300 dark:stroke-neutral-700",
+              strokeWidth: 1,
+              strokeDasharray: "3 3"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "polyline",
+            {
+              points: path,
+              fill: "none",
+              className: "stroke-neutral-700 dark:stroke-neutral-200",
+              strokeWidth: 1.5,
+              strokeLinejoin: "round",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "circle",
+            {
+              cx: x(n - 1),
+              cy: y(last.confidence),
+              r: 2.5,
+              className: "fill-neutral-900 dark:fill-neutral-50"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "mt-1 flex justify-between text-[11px] text-neutral-400", children: [
+      /* @__PURE__ */ jsx4("span", { children: first.date }),
+      /* @__PURE__ */ jsxs4("span", { className: "tabular-nums text-neutral-600 dark:text-neutral-300", children: [
+        "now ",
+        last.confidence
+      ] })
+    ] })
+  ] });
+}
+function experimentDetail(e) {
+  const evidence = e.readingCount === 0 ? "No readings yet" : `${e.readingCount} reading${e.readingCount === 1 ? "" : "s"}`;
+  const p = e.progress;
+  if (e.done) {
+    return p ? `Concluded \xB7 ${p.total} of ${p.total} bars settled` : `Concluded \xB7 ${evidence}`;
+  }
+  if (!p || p.total === 0) return `${evidence} \xB7 no pre-registered bars`;
+  return `${evidence} \xB7 ${p.settled} of ${p.total} bars settled \xB7 ${p.toGo} to go`;
+}
+function otherMoverLabel(m) {
+  if (m.kind === "goal") return `Goal ${m.goalId ?? ""}`.trim();
+  return m.readingCount === 1 ? "A direct reading" : "Direct readings";
+}
+function Heading({ children }) {
+  return /* @__PURE__ */ jsx4("h4", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-neutral-400", children });
+}
+function Muted({ children }) {
+  return /* @__PURE__ */ jsx4("p", { className: "mt-2 rounded-lg bg-neutral-50 p-3 text-xs leading-relaxed text-neutral-600 dark:bg-neutral-900 dark:text-neutral-300", children });
+}
+
+// src/record-drawer.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var META_FIELDS = /* @__PURE__ */ new Set(["id", "version", "createdAt", "updatedAt", "derived"]);
+function RecordDrawer({
+  register,
+  record,
+  loading,
+  error,
+  open,
+  onClose,
+  basePath,
+  onChanged,
+  children
+}) {
+  const [editing, setEditing] = useState2(false);
+  const [draft, setDraft] = useState2({});
+  const [baseline, setBaseline] = useState2(null);
+  const [why, setWhy] = useState2(false);
+  const { save, saving, conflict, error: saveError, reset } = useUpdate(
+    register,
+    basePath
+  );
+  const recordId = record?.id ?? null;
+  useEffect3(() => {
+    setEditing(false);
+    setBaseline(null);
+    setWhy(false);
+    reset();
+  }, [recordId, reset]);
+  const derived = record && record.derived && typeof record.derived === "object" ? record.derived : null;
+  const fields = record ? Object.keys(record).filter((k) => !META_FIELDS.has(k)) : [];
+  function startEditing() {
+    if (!record) return;
+    setBaseline(record);
+    setDraft(draftFrom(register, record));
+    reset();
+    setEditing(true);
+  }
+  function cancelEditing() {
+    setEditing(false);
+    reset();
+  }
+  async function onSave() {
+    if (!record || !baseline) return;
+    const patch = buildPatch(register, baseline, draft);
+    patch.version = record.version;
+    if (Object.keys(patch).length <= 1) {
+      setEditing(false);
+      return;
+    }
+    const result = await save(record.id, patch);
+    if (result.ok) {
+      setEditing(false);
+      onChanged?.();
+    }
+  }
+  function reloadLatest() {
+    reset();
+    onChanged?.();
+  }
+  const setField = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
+  return /* @__PURE__ */ jsxs5(
+    DrawerShell,
+    {
+      open,
+      onClose,
+      ariaLabel: `${REGISTER_LABEL[register]} record`,
+      children: [
+        /* @__PURE__ */ jsxs5("header", { className: "flex items-start justify-between gap-4 border-b border-neutral-200 p-5 dark:border-neutral-800", children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium uppercase tracking-wide text-neutral-400", children: REGISTER_LABEL[register] }),
+            /* @__PURE__ */ jsx5("h2", { className: "mt-1 text-lg font-semibold text-neutral-900 dark:text-neutral-50", children: record ? primaryLabel(record) : loading ? "Loading\u2026" : "\u2014" })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            record && !editing ? /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: startEditing,
+                className: "rounded-md border border-neutral-300 px-2.5 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-900",
+                children: "Edit"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "rounded-md px-2 py-1 text-sm text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-900",
+                children: "Close"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "flex-1 p-5", children: loading ? /* @__PURE__ */ jsx5("p", { className: "text-sm text-neutral-500", children: "Loading record\u2026" }) : error ? /* @__PURE__ */ jsx5("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : !record ? /* @__PURE__ */ jsx5("p", { className: "text-sm text-neutral-500", children: "No record." }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          derived ? /* @__PURE__ */ jsxs5("section", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx5("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-neutral-400", children: "Computed \xB7 not editable" }),
+            /* @__PURE__ */ jsx5("dl", { className: "grid grid-cols-3 gap-3", children: Object.entries(derived).map(([key, value]) => /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-800 dark:bg-neutral-900",
+                children: [
+                  /* @__PURE__ */ jsx5("dt", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: derivedLabel(key) }),
+                  /* @__PURE__ */ jsx5("dd", { className: "mt-1 text-xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-50", children: formatValue(value) })
+                ]
+              },
+              key
+            )) }),
+            "confidence" in derived ? /* @__PURE__ */ jsx5(
+              WhyReveal,
+              {
+                open: why,
+                onToggle: () => setWhy((w) => !w),
+                assumption: record,
+                basePath
+              }
+            ) : null
+          ] }) : null,
+          conflict ? /* @__PURE__ */ jsx5(ConflictBanner, { message: conflict, onReload: reloadLatest }) : null,
+          saveError ? /* @__PURE__ */ jsx5(
+            "p",
+            {
+              role: "alert",
+              className: "mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300",
+              children: saveError
+            }
+          ) : null,
+          editing ? /* @__PURE__ */ jsx5(
+            EditFields,
+            {
+              register,
+              draft,
+              onField: setField
+            }
+          ) : /* @__PURE__ */ jsx5("dl", { className: "divide-y divide-neutral-100 dark:divide-neutral-900", children: fields.map((key) => /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-3 gap-3 py-2.5", children: [
+            /* @__PURE__ */ jsx5("dt", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: fieldLabel(key) }),
+            /* @__PURE__ */ jsx5("dd", { className: "col-span-2 text-sm text-neutral-800 dark:text-neutral-200", children: formatValue(record[key]) })
+          ] }, key)) })
+        ] }) }),
+        record && !loading && !error && !editing ? children : null,
+        record && editing ? /* @__PURE__ */ jsxs5("footer", { className: "flex items-center justify-end gap-2 border-t border-neutral-200 p-5 dark:border-neutral-800", children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: cancelEditing,
+              disabled: saving,
+              className: "rounded-md px-3 py-1.5 text-sm text-neutral-600 hover:bg-neutral-100 disabled:opacity-50 dark:text-neutral-300 dark:hover:bg-neutral-900",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: onSave,
+              disabled: saving,
+              className: "rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-700 disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-300",
+              children: saving ? "Saving\u2026" : "Save"
+            }
+          )
+        ] }) : record ? /* @__PURE__ */ jsxs5("footer", { className: "border-t border-neutral-200 p-5 text-xs text-neutral-400 dark:border-neutral-800", children: [
+          record.id,
+          " \xB7 updated ",
+          formatValue(record.updatedAt)
+        ] }) : null
+      ]
+    }
+  );
+}
+function WhyReveal({
+  open,
+  onToggle,
+  assumption,
+  basePath
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "mt-3", children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: "text-xs font-medium text-neutral-500 underline underline-offset-2 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-100",
+        children: "Why?"
+      }
+    ),
+    open ? /* @__PURE__ */ jsx5(UnderstandingPanel, { assumption, basePath }) : null
+  ] });
+}
+function ConflictBanner({
+  message,
+  onReload
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "alert",
+      className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/40",
+      children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-sm text-amber-800 dark:text-amber-200", children: message }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: onReload,
+            className: "mt-2 rounded-md border border-amber-300 px-2.5 py-1 text-xs font-medium text-amber-900 hover:bg-amber-100 dark:border-amber-800 dark:text-amber-100 dark:hover:bg-amber-900/40",
+            children: "Reload the latest"
+          }
+        )
+      ]
+    }
+  );
+}
+function EditFields({
+  register,
+  draft,
+  onField
+}) {
+  return /* @__PURE__ */ jsx5("div", { className: "space-y-4", children: editableFields(register).map((field) => /* @__PURE__ */ jsx5(
+    FieldInput,
+    {
+      field,
+      value: draft[field.key],
+      onChange: (v) => onField(field.key, v)
+    },
+    field.key
+  )) });
+}
+var INPUT_CLASS = "w-full rounded-md border border-neutral-300 bg-white px-2.5 py-1.5 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50";
+function FieldInput({
+  field,
+  value,
+  onChange
+}) {
+  const id = `field-${field.key.replace(/\s+/g, "-")}`;
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx5(
+      "label",
+      {
+        htmlFor: id,
+        className: "mb-1 block text-xs font-medium text-neutral-500 dark:text-neutral-400",
+        children: field.label
+      }
+    ),
+    field.kind === "textarea" ? /* @__PURE__ */ jsx5(
+      "textarea",
+      {
+        id,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        rows: 3,
+        className: INPUT_CLASS
+      }
+    ) : field.kind === "select" ? /* @__PURE__ */ jsxs5(
+      "select",
+      {
+        id,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        className: INPUT_CLASS,
+        children: [
+          field.nullable ? /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }) : null,
+          field.options?.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx5(
+      "input",
+      {
+        id,
+        type: field.kind === "number" ? "number" : "text",
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        className: INPUT_CLASS
+      }
+    )
+  ] });
+}
+
+// src/record-form.tsx
+import { useMemo, useState as useState4 } from "react";
+
+// src/form-fields.ts
+import {
+  GOAL_RUNG_VALUES,
+  TESTING_RUNGS
+} from "@validation-os/core";
+var ASSUMPTION_STATUS = ["Draft", "Live", "Invalidated"];
+var EXPERIMENT_STATUS = ["Running", "Closed"];
+var CLOSURE_REASON = ["Completed", "Early-stop", "Kill"];
+var GOAL_STATUS = ["Draft", "Active", "Closed"];
+var GOAL_OUTCOME = ["Achieved", "Missed", "Dropped"];
+var DECISION_STATUS = ["Active", "Provisional", "Superseded", "Reversed"];
+var GLOSSARY_STATUS = ["Active", "Provisional", "Superseded"];
+var RESULT = ["Validated", "Invalidated", "Inconclusive"];
+var MAGNITUDE = ["Low", "Typical", "High"];
+var FEASIBILITY = ["High", "Medium", "Low"];
+var RUNGS = [...TESTING_RUNGS, ...GOAL_RUNG_VALUES];
+var QUALITY = ["1", "0.7", "0.5"];
+var FIELDS = {
+  assumptions: [
+    { key: "Title", label: "Assumption", kind: "text", required: true },
+    { key: "Description", label: "Description", kind: "textarea" },
+    { key: "Lens", label: "Lens", kind: "text" },
+    { key: "Impact", label: "Impact (0\u2013100)", kind: "number" },
+    { key: "Status", label: "Status", kind: "select", options: ASSUMPTION_STATUS },
+    { key: "5 Whys", label: "5 Whys", kind: "textarea" },
+    { key: "Metric for truth", label: "Metric for truth", kind: "textarea" },
+    {
+      key: "Scoring justification",
+      label: "Scoring justification",
+      kind: "textarea"
+    }
+  ],
+  experiments: [
+    { key: "Title", label: "Experiment", kind: "text", required: true },
+    { key: "Instrument", label: "Instrument", kind: "text" },
+    { key: "Feasibility", label: "Feasibility", kind: "select", options: FEASIBILITY },
+    { key: "Status", label: "Status", kind: "select", options: EXPERIMENT_STATUS },
+    {
+      key: "closureReason",
+      label: "Closure reason",
+      kind: "select",
+      options: CLOSURE_REASON
+    },
+    { key: "Date", label: "Date", kind: "text", placeholder: "YYYY-MM-DD" }
+  ],
+  readings: [
+    { key: "Title", label: "Reading", kind: "text", required: true },
+    { key: "Source", label: "Source", kind: "text" },
+    { key: "Rung", label: "Rung", kind: "select", options: RUNGS, required: true },
+    { key: "Result", label: "Result", kind: "select", options: RESULT, required: true },
+    {
+      key: "Representativeness",
+      label: "Representativeness",
+      kind: "select",
+      options: QUALITY,
+      coerce: "number"
+    },
+    {
+      key: "Credibility",
+      label: "Credibility",
+      kind: "select",
+      options: QUALITY,
+      coerce: "number"
+    },
+    {
+      key: "magnitudeBand",
+      label: "Magnitude band",
+      kind: "select",
+      options: MAGNITUDE
+    },
+    { key: "Date", label: "Date", kind: "text", placeholder: "YYYY-MM-DD" }
+  ],
+  goals: [
+    { key: "Title", label: "Goal", kind: "text", required: true },
+    { key: "Status", label: "Status", kind: "select", options: GOAL_STATUS },
+    { key: "Outcome", label: "Outcome", kind: "select", options: GOAL_OUTCOME },
+    { key: "Date", label: "Date", kind: "text", placeholder: "YYYY-MM-DD" }
+  ],
+  decisions: [
+    { key: "Title", label: "Decision", kind: "text", required: true },
+    { key: "Status", label: "Status", kind: "select", options: DECISION_STATUS }
+  ],
+  glossary: [
+    { key: "Title", label: "Term", kind: "text", required: true },
+    { key: "Status", label: "Status", kind: "select", options: GLOSSARY_STATUS }
+  ],
+  people: [
+    { key: "Name", label: "Name", kind: "text", required: true },
+    { key: "Role", label: "Role", kind: "text" },
+    { key: "Segment", label: "Segment", kind: "text" }
+  ]
+};
+function formFieldsFor(register) {
+  return FIELDS[register];
+}
+function emptyDraft(register) {
+  const draft = {};
+  for (const f of formFieldsFor(register)) draft[f.key] = "";
+  return draft;
+}
+function missingRequired(register, draft) {
+  return formFieldsFor(register).filter((f) => f.required && !String(draft[f.key] ?? "").trim()).map((f) => f.label);
+}
+function toCreatePayload(register, draft) {
+  const out = {};
+  for (const f of formFieldsFor(register)) {
+    const raw = String(draft[f.key] ?? "").trim();
+    if (raw === "") continue;
+    if (f.kind === "number" || f.coerce === "number") {
+      const n = Number(raw);
+      if (!Number.isNaN(n)) out[f.key] = n;
+    } else {
+      out[f.key] = raw;
+    }
+  }
+  return out;
+}
+
+// src/field-styles.ts
+var FIELD_LABEL_CLASS = "block text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400";
+var FIELD_CONTROL_CLASS = "mt-1 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100";
+
+// src/use-mutations.ts
+import { useCallback as useCallback2, useState as useState3 } from "react";
+async function postJson(url, body) {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  const payload = await res.json().catch(() => null);
+  if (!res.ok) {
+    const message = payload?.message ?? payload?.error ?? `Request failed (${res.status})`;
+    throw new Error(message);
+  }
+  return payload.data;
+}
+function useCreate(register, basePath = "/api") {
+  const [saving, setSaving] = useState3(false);
+  const [error, setError] = useState3(null);
+  const create = useCallback2(
+    async (data) => {
+      setSaving(true);
+      setError(null);
+      try {
+        return await postJson(`${basePath}/${register}`, data);
+      } catch (e) {
+        const message = e instanceof Error ? e.message : "Failed to create";
+        setError(message);
+        throw e;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [register, basePath]
+  );
+  return { create, saving, error };
+}
+function useLink(basePath = "/api") {
+  const [linking, setLinking] = useState3(false);
+  const [error, setError] = useState3(null);
+  const link = useCallback2(
+    async (args) => {
+      setLinking(true);
+      setError(null);
+      try {
+        await postJson(`${basePath}/link`, args);
+      } catch (e) {
+        const message = e instanceof Error ? e.message : "Failed to link";
+        setError(message);
+        throw e;
+      } finally {
+        setLinking(false);
+      }
+    },
+    [basePath]
+  );
+  return { link, linking, error };
+}
+
+// src/record-form.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RecordForm({
+  register,
+  basePath,
+  onCreated,
+  onCancel
+}) {
+  const fields = useMemo(() => formFieldsFor(register), [register]);
+  const [draft, setDraft] = useState4(
+    () => emptyDraft(register)
+  );
+  const { create, saving, error } = useCreate(register, basePath);
+  const missing = missingRequired(register, draft);
+  const set = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    if (missing.length > 0 || saving) return;
+    try {
+      const created = await create(toCreatePayload(register, draft));
+      onCreated(created.id);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs6("form", { onSubmit, className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex-1 space-y-4 overflow-y-auto p-5", children: [
+      fields.map((field) => /* @__PURE__ */ jsx6(
+        Field,
+        {
+          field,
+          value: draft[field.key] ?? "",
+          onChange: (v) => set(field.key, v)
+        },
+        field.key
+      )),
+      error ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : null
+    ] }),
+    /* @__PURE__ */ jsxs6("footer", { className: "flex items-center justify-end gap-2 border-t border-neutral-200 p-5 dark:border-neutral-800", children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-md px-3 py-2 text-sm text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "submit",
+          disabled: missing.length > 0 || saving,
+          title: missing.length > 0 ? `Fill in: ${missing.join(", ")}` : void 0,
+          className: "rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
+          children: saving ? "Creating\u2026" : `Create ${REGISTER_LABEL[register]}`
+        }
+      )
+    ] })
+  ] });
+}
+function Field({
+  field,
+  value,
+  onChange
+}) {
+  const id = `field-${field.key}`;
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsxs6("label", { htmlFor: id, className: FIELD_LABEL_CLASS, children: [
+      field.label,
+      field.required ? /* @__PURE__ */ jsx6("span", { className: "text-red-500", children: " *" }) : null
+    ] }),
+    field.kind === "textarea" ? /* @__PURE__ */ jsx6(
+      "textarea",
+      {
+        id,
+        value,
+        rows: 3,
+        placeholder: field.placeholder,
+        onChange: (e) => onChange(e.target.value),
+        className: FIELD_CONTROL_CLASS
+      }
+    ) : field.kind === "select" ? /* @__PURE__ */ jsxs6(
+      "select",
+      {
+        id,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: FIELD_CONTROL_CLASS,
+        children: [
+          /* @__PURE__ */ jsx6("option", { value: "", children: "\u2014" }),
+          field.options?.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx6(
+      "input",
+      {
+        id,
+        type: field.kind === "number" ? "number" : "text",
+        value,
+        placeholder: field.placeholder,
+        onChange: (e) => onChange(e.target.value),
+        className: FIELD_CONTROL_CLASS
+      }
+    )
+  ] });
+}
+
+// src/relation-editor.tsx
+import { useMemo as useMemo2, useState as useState5 } from "react";
+
+// src/link-choices.ts
+import { RELATIONS } from "@validation-os/core";
+var RELATION_LABEL = {
+  "assumption-reading": "Add reading",
+  "assumption-depends-on": "Depends on",
+  "assumption-contradicts": "Contradicts",
+  "reading-experiment": "From experiment",
+  "reading-goal": "From goal",
+  "decision-based-on": "Based on assumption",
+  "decision-resolves": "Resolves assumption",
+  "goal-based-on": "Based on assumption"
+};
+function linkChoicesFrom(register) {
+  return Object.keys(RELATIONS).filter((r) => RELATIONS[r].from.register === register).map((relation) => ({
+    relation,
+    label: RELATION_LABEL[relation],
+    targetRegister: RELATIONS[relation].targetRegister
+  }));
+}
+
+// src/relation-editor.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function RelationEditor({
+  register,
+  recordId,
+  basePath,
+  onLinked
+}) {
+  const choices = useMemo2(() => linkChoicesFrom(register), [register]);
+  const [relation, setRelation] = useState5("");
+  const [targetId, setTargetId] = useState5("");
+  const { link, linking, error } = useLink(basePath);
+  const active = choices.find((c) => c.relation === relation) ?? null;
+  const { records } = useList(
+    active?.targetRegister ?? register,
+    basePath
+  );
+  const targets = (records ?? []).filter(
+    (r) => !(active?.targetRegister === register && r.id === recordId)
+  );
+  if (choices.length === 0) return null;
+  const onLink = async () => {
+    if (!active || !targetId || linking) return;
+    try {
+      await link({
+        relation: active.relation,
+        from: { register, id: recordId },
+        to: { register: active.targetRegister, id: targetId }
+      });
+      setTargetId("");
+      setRelation("");
+      onLinked();
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs7("section", { className: "border-t border-neutral-200 p-5 dark:border-neutral-800", children: [
+    /* @__PURE__ */ jsx7("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-neutral-400", children: "Link a record" }),
+    /* @__PURE__ */ jsxs7("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          "aria-label": "Relation",
+          value: relation,
+          onChange: (e) => {
+            setRelation(e.target.value);
+            setTargetId("");
+          },
+          className: FIELD_CONTROL_CLASS,
+          children: [
+            /* @__PURE__ */ jsx7("option", { value: "", children: "Choose a relation\u2026" }),
+            choices.map((c) => /* @__PURE__ */ jsx7("option", { value: c.relation, children: c.label }, c.relation))
+          ]
+        }
+      ),
+      active ? /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          "aria-label": "Target record",
+          value: targetId,
+          onChange: (e) => setTargetId(e.target.value),
+          className: FIELD_CONTROL_CLASS,
+          children: [
+            /* @__PURE__ */ jsx7("option", { value: "", children: "Choose a record\u2026" }),
+            targets.map((r) => /* @__PURE__ */ jsx7("option", { value: r.id, children: primaryLabel(r) }, r.id))
+          ]
+        }
+      ) : null,
+      error ? /* @__PURE__ */ jsx7("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : null,
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: onLink,
+          disabled: !active || !targetId || linking,
+          className: "rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
+          children: linking ? "Linking\u2026" : "Link"
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/register-browser.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function RegisterBrowser({ register, basePath }) {
-  const { records, loading, error } = useList(register, basePath);
-  const [openId, setOpenId] = useState2(null);
+  const { records, loading, error, refresh: refreshList } = useList(
+    register,
+    basePath
+  );
+  const [openId, setOpenId] = useState6(null);
+  const [creating, setCreating] = useState6(false);
   const {
     record,
     loading: recordLoading,
-    error: recordError
+    error: recordError,
+    refresh: refreshRecord
   } = useRecord(register, openId, basePath);
-  return /* @__PURE__ */ jsxs4("div", { children: [
-    loading && !records ? /* @__PURE__ */ jsxs4("p", { className: "text-sm text-neutral-500", children: [
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "mb-3 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx8("h1", { className: "text-lg font-semibold text-neutral-900 dark:text-neutral-50", children: REGISTER_LABEL[register] }),
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          onClick: () => setCreating(true),
+          className: "rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-500",
+          children: [
+            "New ",
+            REGISTER_SINGULAR[register]
+          ]
+        }
+      )
+    ] }),
+    loading && !records ? /* @__PURE__ */ jsxs8("p", { className: "text-sm text-neutral-500", children: [
       "Loading ",
       REGISTER_LABEL[register].toLowerCase(),
       "\u2026"
-    ] }) : error ? /* @__PURE__ */ jsx4("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : /* @__PURE__ */ jsx4(
+    ] }) : error ? /* @__PURE__ */ jsx8("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : /* @__PURE__ */ jsx8(
       RegisterTable,
       {
         register,
@@ -401,7 +1471,7 @@ function RegisterBrowser({ register, basePath }) {
         selectedId: openId
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx8(
       RecordDrawer,
       {
         register,
@@ -409,20 +1479,65 @@ function RegisterBrowser({ register, basePath }) {
         loading: recordLoading,
         error: recordError,
         open: openId !== null,
-        onClose: () => setOpenId(null)
+        onClose: () => setOpenId(null),
+        basePath,
+        onChanged: () => {
+          refreshRecord();
+          refreshList();
+        },
+        children: openId ? /* @__PURE__ */ jsx8(
+          RelationEditor,
+          {
+            register,
+            recordId: openId,
+            basePath,
+            onLinked: () => {
+              refreshRecord();
+              refreshList();
+            }
+          }
+        ) : null
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      DrawerShell,
+      {
+        open: creating,
+        onClose: () => setCreating(false),
+        ariaLabel: `New ${REGISTER_SINGULAR[register]} record`,
+        scroll: false,
+        children: [
+          /* @__PURE__ */ jsxs8("header", { className: "border-b border-neutral-200 p-5 dark:border-neutral-800", children: [
+            /* @__PURE__ */ jsx8("p", { className: "text-xs font-medium uppercase tracking-wide text-neutral-400", children: "New" }),
+            /* @__PURE__ */ jsx8("h2", { className: "mt-1 text-lg font-semibold text-neutral-900 dark:text-neutral-50", children: REGISTER_SINGULAR[register] })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            RecordForm,
+            {
+              register,
+              basePath,
+              onCreated: (id) => {
+                setCreating(false);
+                refreshList();
+                setOpenId(id);
+              },
+              onCancel: () => setCreating(false)
+            }
+          )
+        ]
       }
     )
   ] });
 }
 
 // src/use-counts.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
 function useCounts(basePath = "/api") {
-  const [counts, setCounts] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3(null);
-  const [tick, setTick] = useState3(0);
-  useEffect3(() => {
+  const [counts, setCounts] = useState7(null);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const [tick, setTick] = useState7(0);
+  useEffect4(() => {
     let live = true;
     setLoading(true);
     fetch(`${basePath}/counts`).then(async (res) => {
@@ -442,22 +1557,41 @@ function useCounts(basePath = "/api") {
       live = false;
     };
   }, [basePath, tick]);
-  const refresh = useCallback2(() => setTick((t) => t + 1), []);
+  const refresh = useCallback3(() => setTick((t2) => t2 + 1), []);
   return { counts, loading, error, refresh };
 }
 export {
+  CONFLICT_MESSAGE,
   REGISTER_LABEL,
   REGISTER_ORDER,
+  REGISTER_SINGULAR,
   RecordDrawer,
+  RecordForm,
   RegisterBrowser,
   RegisterCounts,
   RegisterTable,
+  RelationEditor,
+  UnderstandingPanel,
+  buildPatch,
+  buildUnderstanding,
   cellValue,
   columnsFor,
+  draftFrom,
+  editableFields,
+  emptyDraft,
+  formFieldsFor,
   formatValue,
+  hasEdits,
+  interpretSave,
+  linkChoicesFrom,
+  missingRequired,
   primaryLabel,
+  toCreatePayload,
   useCounts,
+  useCreate,
+  useLink,
   useList,
-  useRecord
+  useRecord,
+  useUpdate
 };
 //# sourceMappingURL=index.js.map