@validation-os/dashboard 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,5 +1,8 @@
 "use client";
 
+// src/dashboard-app.tsx
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } from "react";
+
 // src/labels.ts
 var REGISTER_LABEL = {
   assumptions: "Assumptions",
@@ -28,44 +31,78 @@ var REGISTER_ORDER = [
   "glossary",
   "people"
 ];
+var REGISTER_SUBTITLE = {
+  assumptions: "Falsifiable beliefs the plan rests on. Risk = Impact \xD7 (1 \u2212 max(0, Confidence)/100).",
+  experiments: "The tests that move Confidence in the beliefs.",
+  readings: "The evidence logged against experiments and beliefs.",
+  goals: "The outcomes the plan is steering toward.",
+  decisions: "The choices made, and what they rest on.",
+  glossary: "The shared vocabulary for this venture.",
+  people: "The people the plan touches."
+};
+var REGISTER_ICON = {
+  assumptions: "\u25CE",
+  experiments: "\u2697",
+  readings: "\u25A4",
+  goals: "\u25C7",
+  decisions: "\xA7",
+  glossary: "A",
+  people: "\u263A"
+};
+var REGISTER_GROUPS = [
+  {
+    label: "Registers",
+    registers: ["assumptions", "experiments", "readings", "goals", "decisions", "glossary"]
+  },
+  { label: "Reference", registers: ["people"] }
+];
 
-// src/register-counts.tsx
+// src/register-browser.tsx
+import { useState as useState6 } from "react";
+
+// src/drawer-shell.tsx
+import { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function RegisterCounts({ counts, caption, hrefFor }) {
-  const registers = REGISTER_ORDER.filter(
-    (r) => counts[r] !== void 0
-  );
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Register counts", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: registers.map((register) => /* @__PURE__ */ jsx(
-      StatTile,
-      {
-        label: REGISTER_LABEL[register],
-        value: counts[register] ?? 0,
-        href: hrefFor?.(register)
-      },
-      register
-    )) }),
-    caption ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-neutral-500 dark:text-neutral-400", children: caption }) : null
-  ] });
-}
-function StatTile({
-  label,
-  value,
-  href
+function DrawerShell({
+  open,
+  onClose,
+  ariaLabel,
+  children
 }) {
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-neutral-500 dark:text-neutral-400", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1 text-3xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-50", children: value.toLocaleString() })
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    panelRef.current?.focus();
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close",
+        onClick: onClose,
+        className: "vos-scrim"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        className: "vos-drawer",
+        children
+      }
+    )
   ] });
-  const className = "block rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-800 dark:bg-neutral-900";
-  return href ? /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      className: `${className} transition-colors hover:border-neutral-300 hover:bg-neutral-50 dark:hover:border-neutral-700 dark:hover:bg-neutral-800`,
-      children: body
-    }
-  ) : /* @__PURE__ */ jsx("div", { className, children: body });
 }
 
 // src/columns.ts
@@ -74,13 +111,19 @@ function derivedField(field) {
 }
 var COLUMNS = {
   assumptions: [
-    { key: "Title", header: "Assumption" },
+    { key: "Title", header: "Belief" },
+    {
+      key: "Status",
+      header: "Status",
+      kind: "status"
+    },
     { key: "Impact", header: "Impact", align: "right" },
     {
       key: "confidence",
       header: "Confidence",
       align: "right",
       derived: true,
+      kind: "confidence",
       accessor: derivedField("confidence")
     },
     {
@@ -88,13 +131,13 @@ var COLUMNS = {
       header: "Risk",
       align: "right",
       derived: true,
+      kind: "risk",
       accessor: derivedField("risk")
-    },
-    { key: "Status", header: "Status" }
+    }
   ],
   experiments: [
     { key: "Title", header: "Experiment" },
-    { key: "Status", header: "Status" },
+    { key: "Status", header: "Status", kind: "status" },
     { key: "Feasibility", header: "Feasibility" }
   ],
   readings: [
@@ -111,16 +154,16 @@ var COLUMNS = {
   ],
   goals: [
     { key: "Title", header: "Goal" },
-    { key: "Status", header: "Status" },
+    { key: "Status", header: "Status", kind: "status" },
     { key: "Outcome", header: "Outcome" }
   ],
   decisions: [
     { key: "Title", header: "Decision" },
-    { key: "Status", header: "Status" }
+    { key: "Status", header: "Status", kind: "status" }
   ],
   glossary: [
     { key: "Title", header: "Term" },
-    { key: "Status", header: "Status" }
+    { key: "Status", header: "Status", kind: "status" }
   ],
   people: [
     { key: "Name", header: "Name" },
@@ -186,8 +229,244 @@ function derivedLabel(key) {
   return DERIVED_LABEL[key] ?? fieldLabel(key);
 }
 
+// src/primitives.ts
+var GOOD_STATUS = /* @__PURE__ */ new Set([
+  "live",
+  "concluded",
+  "closed",
+  "done",
+  "resolved",
+  "accepted",
+  "adopted",
+  "shipped"
+]);
+var WARN_STATUS = /* @__PURE__ */ new Set([
+  "testing",
+  "running",
+  "in progress",
+  "in-progress",
+  "draft"
+]);
+var CRIT_STATUS = /* @__PURE__ */ new Set([
+  "invalidated",
+  "rejected",
+  "blocked",
+  "failed",
+  "at risk"
+]);
+function statusTone(status) {
+  if (!status) return "neutral";
+  const s = status.trim().toLowerCase();
+  if (GOOD_STATUS.has(s)) return "good";
+  if (WARN_STATUS.has(s)) return "warn";
+  if (CRIT_STATUS.has(s)) return "crit";
+  return "neutral";
+}
+var RISK_CRIT = 60;
+var RISK_WARN = 30;
+function riskLevel(risk) {
+  if (risk >= RISK_CRIT) return "crit";
+  if (risk >= RISK_WARN) return "warn";
+  return "good";
+}
+function riskFraction(risk) {
+  if (!Number.isFinite(risk)) return 0;
+  return Math.max(0, Math.min(100, risk)) / 100;
+}
+function confidenceTone(confidence) {
+  return confidence < 0 ? "crit" : "good";
+}
+function derivedTone(field, value) {
+  if (field === "confidence") return confidenceTone(value);
+  if (field === "risk") return riskLevel(value);
+  return "neutral";
+}
+function heroToneClass(tone) {
+  if (tone === "crit") return "vos-text-crit";
+  if (tone === "warn") return "vos-text-warn";
+  return "";
+}
+function formatSigned(n) {
+  const r = Math.round(n);
+  return r > 0 ? `+${r}` : String(r);
+}
+function formatCount(n) {
+  return n.toLocaleString();
+}
+function sparklinePath(values, width, height, min, max) {
+  if (values.length < 2) return "";
+  const lo = min ?? Math.min(...values, 0);
+  const hi = max ?? Math.max(...values, 0);
+  const span = hi - lo || 1;
+  const inset = 2;
+  return values.map((v, i) => {
+    const x = i / (values.length - 1) * (width - inset * 2) + inset;
+    const y = height - inset - (v - lo) / span * (height - inset * 2);
+    return `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`;
+  }).join(" ");
+}
+function sparklineY(value, height, lo, hi) {
+  const span = hi - lo || 1;
+  const inset = 2;
+  return height - inset - (value - lo) / span * (height - inset * 2);
+}
+
+// src/primitives-view.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PILL_CLASS = {
+  good: "vos-pill vos-pill-good",
+  warn: "vos-pill vos-pill-warn",
+  crit: "vos-pill vos-pill-crit",
+  accent: "vos-pill vos-pill-accent",
+  neutral: "vos-pill vos-pill-neutral"
+};
+function StatusPill({ status }) {
+  if (!status) return /* @__PURE__ */ jsx2("span", { className: "vos-muted", children: "\u2014" });
+  return /* @__PURE__ */ jsx2("span", { className: PILL_CLASS[statusTone(status)], children: status });
+}
+var FILL_CLASS = {
+  good: "vos-fill-good",
+  warn: "vos-fill-warn",
+  crit: "vos-fill-crit",
+  accent: "vos-fill-good",
+  neutral: "vos-fill-good"
+};
+var TEXT_CLASS = {
+  good: "vos-text-good",
+  warn: "vos-text-warn",
+  crit: "vos-text-crit",
+  accent: "vos-text-good",
+  neutral: ""
+};
+function RiskBar({ risk }) {
+  const level = riskLevel(risk);
+  const pct = Math.round(riskFraction(risk) * 100);
+  return /* @__PURE__ */ jsxs2("span", { className: "vos-metric-cell", children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "vos-risk-bar",
+        role: "img",
+        "aria-label": `Risk ${Math.round(risk)} of 100`,
+        children: /* @__PURE__ */ jsx2("i", { className: FILL_CLASS[level], style: { width: `${pct}%` } })
+      }
+    ),
+    /* @__PURE__ */ jsx2("b", { className: `vos-metric-num ${TEXT_CLASS[level]}`, children: Math.round(risk) })
+  ] });
+}
+function ConfidenceCell({
+  confidence,
+  history
+}) {
+  const tone = confidenceTone(confidence);
+  return /* @__PURE__ */ jsxs2("span", { className: "vos-metric-cell", children: [
+    history && history.length >= 2 ? /* @__PURE__ */ jsx2(
+      Sparkline,
+      {
+        values: history,
+        width: 46,
+        height: 16,
+        min: -100,
+        max: 100,
+        tone
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2("b", { className: `vos-metric-num ${TEXT_CLASS[tone]}`, children: formatSigned(confidence) })
+  ] });
+}
+var STROKE_VAR = {
+  good: "var(--vos-good)",
+  warn: "var(--vos-warn)",
+  crit: "var(--vos-crit)",
+  accent: "var(--vos-accent)",
+  neutral: "var(--vos-muted)"
+};
+function Sparkline({
+  values,
+  width = 240,
+  height = 44,
+  min,
+  max,
+  tone = "good",
+  fill = false,
+  ariaLabel
+}) {
+  const d = sparklinePath(values, width, height, min, max);
+  if (!d) return null;
+  const lo = min ?? Math.min(...values, 0);
+  const hi = max ?? Math.max(...values, 0);
+  const stroke = STROKE_VAR[tone];
+  const last = values[values.length - 1];
+  const lastX = width - 2;
+  const lastY = sparklineY(last, height, lo, hi);
+  const zeroY = sparklineY(0, height, lo, hi);
+  const showBaseline = lo < 0 && hi > 0;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      className: "vos-spark",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      role: "img",
+      "aria-label": ariaLabel ?? `Trend, now ${formatSigned(last)}`,
+      children: [
+        fill ? /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: `${d} L ${width - 2} ${height} L 2 ${height} Z`,
+            fill: stroke,
+            opacity: "0.13"
+          }
+        ) : null,
+        showBaseline ? /* @__PURE__ */ jsx2(
+          "line",
+          {
+            x1: 2,
+            x2: width - 2,
+            y1: zeroY,
+            y2: zeroY,
+            stroke: "var(--vos-border-strong)",
+            strokeWidth: 1,
+            strokeDasharray: "3 3"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2("path", { d, fill: "none", stroke, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx2("circle", { cx: lastX, cy: lastY, r: 3, fill: stroke })
+      ]
+    }
+  );
+}
+function StatTile({
+  label,
+  value,
+  sub,
+  onClick,
+  active
+}) {
+  const body = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("div", { className: "vos-tile-label", children: label }),
+    /* @__PURE__ */ jsx2("div", { className: "vos-tile-value", children: formatCount(value) }),
+    sub ? /* @__PURE__ */ jsx2("div", { className: "vos-tile-sub", children: sub }) : null
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "vos-tile",
+        onClick,
+        "aria-pressed": active,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "vos-tile", children: body });
+}
+
 // src/register-table.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function RegisterTable({
   register,
   records,
@@ -196,21 +475,21 @@ function RegisterTable({
 }) {
   const columns = columnsFor(register);
   if (records.length === 0) {
-    return /* @__PURE__ */ jsx2("p", { className: "rounded-xl border border-dashed border-neutral-300 p-8 text-center text-sm text-neutral-500 dark:border-neutral-700 dark:text-neutral-400", children: "No records yet." });
+    return /* @__PURE__ */ jsx3("p", { className: "vos-empty", children: "No records yet." });
   }
-  return /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto rounded-xl border border-neutral-200 dark:border-neutral-800", children: /* @__PURE__ */ jsxs2("table", { className: "w-full border-collapse text-left text-sm", children: [
-    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "border-b border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900", children: columns.map((c) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("div", { className: "vos-card vos-table-scroll", children: /* @__PURE__ */ jsxs3("table", { className: "vos-table", children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: columns.map((c) => /* @__PURE__ */ jsx3(
       "th",
       {
         scope: "col",
-        className: `px-4 py-2.5 font-medium text-neutral-500 dark:text-neutral-400 ${c.align === "right" ? "text-right tabular-nums" : "text-left"}`,
+        className: c.align === "right" ? "vos-r" : void 0,
         children: c.header
       },
       c.key
     )) }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: records.map((record) => {
+    /* @__PURE__ */ jsx3("tbody", { children: records.map((record) => {
       const isSelected = record.id === selectedId;
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "tr",
         {
           onClick: () => onRowClick?.(record.id),
@@ -222,75 +501,43 @@ function RegisterTable({
           } : void 0,
           tabIndex: onRowClick ? 0 : void 0,
           "aria-selected": isSelected,
-          className: `border-b border-neutral-100 last:border-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:border-neutral-900 ${onRowClick ? "cursor-pointer" : ""} ${isSelected ? "bg-blue-50 dark:bg-blue-950/40" : "hover:bg-neutral-50 dark:hover:bg-neutral-900/60"}`,
-          children: columns.map((c, i) => {
-            const raw = cellValue(c, record);
-            const text = i === 0 && (raw === null || raw === void 0 || raw === "") ? primaryLabel(record) : formatValue(raw);
-            return /* @__PURE__ */ jsx2(
-              "td",
-              {
-                className: `px-4 py-2.5 ${c.align === "right" ? "text-right tabular-nums text-neutral-700 dark:text-neutral-300" : "text-left"} ${i === 0 ? "font-medium text-neutral-900 dark:text-neutral-100" : "text-neutral-600 dark:text-neutral-400"}`,
-                children: text
-              },
-              c.key
-            );
-          })
+          className: isSelected ? "is-selected" : void 0,
+          children: columns.map((c, i) => /* @__PURE__ */ jsx3(
+            "td",
+            {
+              className: c.align === "right" ? "vos-r" : void 0,
+              children: /* @__PURE__ */ jsx3(Cell, { column: c, record, headline: i === 0 })
+            },
+            c.key
+          ))
         },
         record.id
       );
     }) })
   ] }) });
 }
+function Cell({
+  column,
+  record,
+  headline
+}) {
+  const raw = cellValue(column, record);
+  if (column.kind === "status") {
+    return /* @__PURE__ */ jsx3(StatusPill, { status: raw == null ? null : String(raw) });
+  }
+  if (column.kind === "risk") {
+    return typeof raw === "number" ? /* @__PURE__ */ jsx3(RiskBar, { risk: raw }) : /* @__PURE__ */ jsx3("span", { className: "vos-muted", children: "\u2014" });
+  }
+  if (column.kind === "confidence") {
+    return typeof raw === "number" ? /* @__PURE__ */ jsx3(ConfidenceCell, { confidence: raw }) : /* @__PURE__ */ jsx3("span", { className: "vos-muted", children: "\u2014" });
+  }
+  const text = headline && (raw === null || raw === void 0 || raw === "") ? primaryLabel(record) : formatValue(raw);
+  return /* @__PURE__ */ jsx3("span", { className: headline ? "vos-ttl" : void 0, children: text });
+}
 
 // src/record-drawer.tsx
 import { useEffect as useEffect3, useState as useState2 } from "react";
 
-// src/drawer-shell.tsx
-import { useEffect, useRef } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function DrawerShell({
-  open,
-  onClose,
-  ariaLabel,
-  scroll = true,
-  children
-}) {
-  const panelRef = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    panelRef.current?.focus();
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50 flex justify-end", children: [
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Close",
-        onClick: onClose,
-        className: "absolute inset-0 bg-neutral-950/30 backdrop-blur-sm"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "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/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" });
@@ -573,7 +820,7 @@ function buildUnderstanding(assumption, readings, experiments) {
 }
 
 // src/understanding-panel.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function UnderstandingPanel({
   assumption,
   basePath
@@ -599,135 +846,91 @@ function UnderstandingPanel({
     ...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: [
+  return /* @__PURE__ */ jsxs4(Fragment3, { 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)) })
+      /* @__PURE__ */ jsx4("div", { className: "vos-why-section-title", children: "What's moving Confidence" }),
+      u.experiments.map((e) => /* @__PURE__ */ jsx4(
+        PushRow,
+        {
+          label: e.title ?? `Experiment ${e.experimentId}`,
+          note: experimentDetail(e),
+          contribution: e.contribution,
+          magnitude: e.magnitude,
+          max: maxMagnitude,
+          done: e.done
+        },
+        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(
+      /* @__PURE__ */ jsx4("div", { className: "vos-why-section-title", children: "Other evidence" }),
+      u.otherMovers.map((m) => /* @__PURE__ */ jsx4(
         PushRow,
         {
           label: otherMoverLabel(m),
           contribution: m.contribution,
           magnitude: m.magnitude,
           max: maxMagnitude
-        }
-      ) }, m.key)) })
+        },
+        m.key
+      ))
     ] }) : null,
-    /* @__PURE__ */ jsxs4("section", { children: [
-      /* @__PURE__ */ jsx4(Heading, { children: "Confidence over time" }),
-      /* @__PURE__ */ jsx4(Trajectory, { points: u.trajectory })
-    ] })
+    /* @__PURE__ */ jsx4(Trajectory, { points: u.trajectory })
   ] });
 }
 function PushRow({
   label,
+  note,
   contribution,
   magnitude,
-  max
+  max,
+  done
 }) {
   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",
+  const width = Math.round(magnitude / max * 50);
+  const fill = up ? { left: "50%", width: `${width}%`, background: "var(--vos-good)" } : { right: "50%", width: `${width}%`, background: "var(--vos-crit)" };
+  return /* @__PURE__ */ jsxs4("div", { className: "vos-mover", children: [
+    /* @__PURE__ */ jsx4("span", { className: "vos-mover-name", children: label }),
+    note ? /* @__PURE__ */ jsx4("span", { className: `vos-mover-note ${done ? "vos-text-good" : "vos-text-warn"}`, children: note }) : null,
+    /* @__PURE__ */ jsx4("span", { className: "vos-track vos-signed", children: moving ? /* @__PURE__ */ jsx4("i", { style: fill }) : null }),
+    /* @__PURE__ */ jsx4(
+      "span",
       {
-        className: `h-full rounded-full ${up ? "bg-emerald-500" : "bg-rose-500"}`,
-        style: { width: `${magnitude / max * 100}%` }
+        className: "vos-mover-val",
+        style: { color: up ? "var(--vos-good)" : "var(--vos-crit)" },
+        children: moving ? formatSigned(contribution) : "\u2014"
       }
-    ) })
+    )
   ] });
 }
 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("p", { className: "vos-hint", children: points.length === 1 ? `One dated reading so far \u2014 Confidence ${formatSigned(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",
+  const last = points[points.length - 1];
+  const values = points.map((p) => p.confidence);
+  return /* @__PURE__ */ jsxs4("div", { className: "vos-traj", children: [
+    /* @__PURE__ */ jsx4("div", { className: "vos-traj-head", children: /* @__PURE__ */ jsx4("span", { className: "vos-lbl", children: "Confidence over time" }) }),
+    /* @__PURE__ */ jsx4(
+      Sparkline,
       {
-        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"
-            }
-          )
-        ]
+        values,
+        width: 260,
+        height: 44,
+        min: -100,
+        max: 100,
+        tone: confidenceTone(last.confidence),
+        fill: true,
+        ariaLabel: `Confidence moved from ${formatSigned(first.confidence)} to ${formatSigned(last.confidence)}`
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { className: "mt-1 flex justify-between text-[11px] text-neutral-400", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "vos-traj-foot", children: [
       /* @__PURE__ */ jsx4("span", { children: first.date }),
-      /* @__PURE__ */ jsxs4("span", { className: "tabular-nums text-neutral-600 dark:text-neutral-300", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "vos-num", children: [
         "now ",
-        last.confidence
+        formatSigned(last.confidence)
       ] })
     ] })
   ] });
@@ -745,16 +948,21 @@ 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 });
+  return /* @__PURE__ */ jsx4("p", { className: "vos-hint", children });
 }
 
 // src/record-drawer.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var META_FIELDS = /* @__PURE__ */ new Set(["id", "version", "createdAt", "updatedAt", "derived"]);
+var DERIVED_SUB = {
+  confidence: "Signed average of concluded readings",
+  risk: "Impact \xD7 (1 \u2212 Confidence\u207A/100)",
+  derivedImpact: "Impact re-weighted by links",
+  impact: "Impact re-weighted by links",
+  strength: "of the evidence base",
+  sourceQuality: "of the source"
+};
 function RecordDrawer({
   register,
   record,
@@ -820,65 +1028,58 @@ function RecordDrawer({
       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("header", { className: "vos-drawer-header", children: [
+          /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx5("p", { className: "vos-drawer-eyebrow", children: REGISTER_LABEL[register] }),
+            /* @__PURE__ */ jsx5("h2", { className: "vos-drawer-title", 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
+          record ? /* @__PURE__ */ jsxs5("span", { className: "vos-verbadge", children: [
+            "v",
+            formatValue(record.version)
           ] }) : null,
-          conflict ? /* @__PURE__ */ jsx5(ConflictBanner, { message: conflict, onReload: reloadLatest }) : null,
-          saveError ? /* @__PURE__ */ jsx5(
-            "p",
+          record && !editing ? /* @__PURE__ */ jsx5(
+            "button",
             {
-              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
+              type: "button",
+              onClick: startEditing,
+              className: "vos-btn vos-btn-ghost vos-btn-sm",
+              children: "Edit"
             }
           ) : null,
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "vos-iconbtn",
+              "aria-label": "Close",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "vos-drawer-body", children: loading ? /* @__PURE__ */ jsx5("p", { className: "vos-muted", children: "Loading record\u2026" }) : error ? /* @__PURE__ */ jsx5("p", { className: "vos-error", children: error }) : !record ? /* @__PURE__ */ jsx5("p", { className: "vos-muted", children: "No record." }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+          derived ? /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsxs5("div", { className: "vos-derived", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "vos-derived-head", children: [
+                "Derived",
+                /* @__PURE__ */ jsx5("span", { className: "vos-lock", children: "\u{1F512} computed on write \u2014 not editable" })
+              ] }),
+              /* @__PURE__ */ jsx5("div", { className: "vos-dgrid", children: Object.entries(derived).map(([key, value]) => /* @__PURE__ */ jsx5(
+                DerivedCell,
+                {
+                  field: key,
+                  value,
+                  showWhy: key === "confidence",
+                  whyOpen: why,
+                  onWhy: () => setWhy((w) => !w)
+                },
+                key
+              )) })
+            ] }),
+            "confidence" in derived && why ? /* @__PURE__ */ jsx5("div", { className: "vos-why-panel", children: /* @__PURE__ */ jsx5(UnderstandingPanel, { assumption: record, basePath }) }) : null
+          ] }) : null,
+          conflict ? /* @__PURE__ */ jsx5(ConflictBanner, { message: conflict, onReload: reloadLatest }) : null,
+          saveError ? /* @__PURE__ */ jsx5("p", { role: "alert", className: "vos-banner vos-banner-crit", children: saveError }) : null,
           editing ? /* @__PURE__ */ jsx5(
             EditFields,
             {
@@ -886,20 +1087,20 @@ function RecordDrawer({
               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]) })
+          ) : /* @__PURE__ */ jsx5("div", { className: "vos-detail-list", children: fields.map((key) => /* @__PURE__ */ jsxs5("div", { className: "vos-detail-row", children: [
+            /* @__PURE__ */ jsx5("span", { className: "vos-detail-k", children: fieldLabel(key) }),
+            /* @__PURE__ */ jsx5("span", { className: "vos-detail-v", 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: [
+        record && editing ? /* @__PURE__ */ jsxs5("footer", { className: "vos-drawer-footer", 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",
+              className: "vos-btn vos-btn-ghost vos-btn-sm",
               children: "Cancel"
             }
           ),
@@ -909,11 +1110,11 @@ function RecordDrawer({
               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",
+              className: "vos-btn vos-btn-sm",
               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 ? /* @__PURE__ */ jsxs5("footer", { className: "vos-drawer-footer", children: [
           record.id,
           " \xB7 updated ",
           formatValue(record.updatedAt)
@@ -922,56 +1123,56 @@ function RecordDrawer({
     }
   );
 }
-function WhyReveal({
-  open,
-  onToggle,
-  assumption,
-  basePath
+function DerivedCell({
+  field,
+  value,
+  showWhy,
+  whyOpen,
+  onWhy
 }) {
-  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
+  const num2 = typeof value === "number" ? value : null;
+  let toneClass = "";
+  let display = formatValue(value);
+  if (num2 !== null) {
+    toneClass = heroToneClass(derivedTone(field, num2));
+    display = field === "confidence" ? formatSigned(num2) : String(Math.round(num2));
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "vos-dcell", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "vos-dcell-k", children: [
+      derivedLabel(field),
+      showWhy ? /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          className: "vos-why",
+          onClick: onWhy,
+          "aria-expanded": whyOpen,
+          children: [
+            "Why? ",
+            whyOpen ? "\u25B4" : "\u25BE"
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: `vos-dcell-v ${toneClass}`, children: display }),
+    DERIVED_SUB[field] ? /* @__PURE__ */ jsx5("div", { className: "vos-dcell-sub", children: DERIVED_SUB[field] }) : 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"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs5("div", { role: "alert", className: "vos-banner vos-banner-warn", children: [
+    /* @__PURE__ */ jsx5("div", { className: "vos-banner-body", children: /* @__PURE__ */ jsx5("span", { children: message }) }),
+    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onReload, children: "Review the latest" })
+  ] });
 }
 function EditFields({
   register,
   draft,
   onField
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: "space-y-4", children: editableFields(register).map((field) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx5("div", { className: "vos-field-stack", children: editableFields(register).map((field) => /* @__PURE__ */ jsx5(
     FieldInput,
     {
       field,
@@ -981,22 +1182,14 @@ function EditFields({
     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
-      }
-    ),
+  return /* @__PURE__ */ jsxs5("div", { className: "vos-field", children: [
+    /* @__PURE__ */ jsx5("label", { htmlFor: id, children: field.label }),
     field.kind === "textarea" ? /* @__PURE__ */ jsx5(
       "textarea",
       {
@@ -1004,7 +1197,7 @@ function FieldInput({
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         rows: 3,
-        className: INPUT_CLASS
+        className: "vos-input"
       }
     ) : field.kind === "select" ? /* @__PURE__ */ jsxs5(
       "select",
@@ -1012,7 +1205,7 @@ function FieldInput({
         id,
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
-        className: INPUT_CLASS,
+        className: "vos-input",
         children: [
           field.nullable ? /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }) : null,
           field.options?.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt, children: opt }, opt))
@@ -1025,7 +1218,7 @@ function FieldInput({
         type: field.kind === "number" ? "number" : "text",
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
-        className: INPUT_CLASS
+        className: "vos-input"
       }
     )
   ] });
@@ -1153,8 +1346,8 @@ function toCreatePayload(register, draft) {
 }
 
 // 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";
+var FIELD_LABEL_CLASS = "vos-field-label";
+var FIELD_CONTROL_CLASS = "vos-input";
 
 // src/use-mutations.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
@@ -1238,8 +1431,8 @@ function RecordForm({
     } 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: [
+  return /* @__PURE__ */ jsxs6("form", { onSubmit, className: "vos-form", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "vos-form-body", children: [
       fields.map((field) => /* @__PURE__ */ jsx6(
         Field,
         {
@@ -1249,25 +1442,17 @@ function RecordForm({
         },
         field.key
       )),
-      error ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : null
+      error ? /* @__PURE__ */ jsx6("p", { className: "vos-error", 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__ */ jsxs6("footer", { className: "vos-drawer-footer", children: [
+      /* @__PURE__ */ jsx6("button", { type: "button", onClick: onCancel, className: "vos-btn vos-btn-ghost vos-btn-sm", 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",
+          className: "vos-btn vos-btn-sm",
           children: saving ? "Creating\u2026" : `Create ${REGISTER_LABEL[register]}`
         }
       )
@@ -1280,10 +1465,10 @@ function Field({
   onChange
 }) {
   const id = `field-${field.key}`;
-  return /* @__PURE__ */ jsxs6("div", { children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "vos-field", 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.required ? /* @__PURE__ */ jsx6("span", { className: "vos-req", children: " *" }) : null
     ] }),
     field.kind === "textarea" ? /* @__PURE__ */ jsx6(
       "textarea",
@@ -1379,9 +1564,9 @@ function RelationEditor({
     } 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: [
+  return /* @__PURE__ */ jsxs7("section", { className: "vos-relation", children: [
+    /* @__PURE__ */ jsx7("h3", { className: "vos-sectitle", children: "Link a record" }),
+    /* @__PURE__ */ jsxs7("div", { className: "vos-field-stack", children: [
       /* @__PURE__ */ jsxs7(
         "select",
         {
@@ -1411,14 +1596,15 @@ function RelationEditor({
           ]
         }
       ) : null,
-      error ? /* @__PURE__ */ jsx7("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : null,
+      error ? /* @__PURE__ */ jsx7("p", { className: "vos-error", 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",
+          className: "vos-btn vos-btn-sm",
+          style: { alignSelf: "flex-start" },
           children: linking ? "Linking\u2026" : "Link"
         }
       )
@@ -1427,9 +1613,12 @@ function RelationEditor({
 }
 
 // src/register-browser.tsx
-import { useState as useState6 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function RegisterBrowser({ register, basePath }) {
+function RegisterBrowser({
+  register,
+  basePath,
+  subtitle
+}) {
   const { records, loading, error, refresh: refreshList } = useList(
     register,
     basePath
@@ -1443,26 +1632,39 @@ function RegisterBrowser({ register, basePath }) {
     refresh: refreshRecord
   } = useRecord(register, openId, basePath);
   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("div", { className: "vos-head", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx8("h1", { children: REGISTER_LABEL[register] }),
+        subtitle ? /* @__PURE__ */ jsx8("p", { children: subtitle }) : null
+      ] }),
+      /* @__PURE__ */ jsx8("div", { className: "vos-spacer" }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: () => refreshList(),
+          className: "vos-btn vos-btn-ghost",
+          children: "\u21BB Refresh"
+        }
+      ),
       /* @__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",
+          className: "vos-btn",
           children: [
-            "New ",
+            "+ New ",
             REGISTER_SINGULAR[register]
           ]
         }
       )
     ] }),
-    loading && !records ? /* @__PURE__ */ jsxs8("p", { className: "text-sm text-neutral-500", children: [
+    loading && !records ? /* @__PURE__ */ jsxs8("p", { className: "vos-muted", children: [
       "Loading ",
       REGISTER_LABEL[register].toLowerCase(),
       "\u2026"
-    ] }) : error ? /* @__PURE__ */ jsx8("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) : /* @__PURE__ */ jsx8(
+    ] }) : error ? /* @__PURE__ */ jsx8("p", { className: "vos-error", children: error }) : /* @__PURE__ */ jsx8(
       RegisterTable,
       {
         register,
@@ -1505,12 +1707,11 @@ function RegisterBrowser({ register, basePath }) {
         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("header", { className: "vos-drawer-header", children: /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("p", { className: "vos-drawer-eyebrow", children: "New" }),
+            /* @__PURE__ */ jsx8("h2", { className: "vos-drawer-title", children: REGISTER_SINGULAR[register] })
+          ] }) }),
           /* @__PURE__ */ jsx8(
             RecordForm,
             {
@@ -1530,6 +1731,38 @@ function RegisterBrowser({ register, basePath }) {
   ] });
 }
 
+// src/register-nav.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function RegisterNav({
+  active,
+  onSelect,
+  counts,
+  registers
+}) {
+  const groups = REGISTER_GROUPS.map((g) => ({
+    ...g,
+    registers: registers ? g.registers.filter((r) => registers.includes(r)) : g.registers
+  })).filter((g) => g.registers.length > 0);
+  return /* @__PURE__ */ jsx9("nav", { className: "vos-nav", "aria-label": "Registers", children: groups.map((group) => /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsx9("div", { className: "vos-nav-group", children: group.label }),
+    group.registers.map((register) => /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        className: `vos-nav-item ${register === active ? "is-active" : ""}`,
+        "aria-current": register === active ? "page" : void 0,
+        onClick: () => onSelect(register),
+        children: [
+          /* @__PURE__ */ jsx9("span", { className: "vos-nav-ic", "aria-hidden": "true", children: REGISTER_ICON[register] }),
+          REGISTER_LABEL[register],
+          /* @__PURE__ */ jsx9("span", { className: "vos-nav-count vos-num", children: counts?.[register] !== void 0 ? formatCount(counts[register] ?? 0) : "\xB7" })
+        ]
+      },
+      register
+    ))
+  ] }, group.label)) });
+}
+
 // src/use-counts.ts
 import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
 function useCounts(basePath = "/api") {
@@ -1560,32 +1793,172 @@ function useCounts(basePath = "/api") {
   const refresh = useCallback3(() => setTick((t2) => t2 + 1), []);
   return { counts, loading, error, refresh };
 }
+
+// src/dashboard-app.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function initialsOf(name) {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
+  return (first + last).toUpperCase() || "?";
+}
+function registerFromHash(available) {
+  if (typeof window === "undefined") return null;
+  const hash = window.location.hash.replace(/^#\/?/, "");
+  return available.includes(hash) ? hash : null;
+}
+function ValidationOSDashboard({ config = {} }) {
+  const {
+    basePath = "/api",
+    backendLabel,
+    branding,
+    agentLabel,
+    user,
+    registers = REGISTER_ORDER
+  } = config;
+  const [active, setActive] = useState8(
+    () => registerFromHash(registers) ?? registers[0] ?? "assumptions"
+  );
+  const { counts } = useCounts(basePath);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const onHash = () => {
+      const next = registerFromHash(registers);
+      if (next) setActive(next);
+    };
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, [registers]);
+  const select = useCallback4((register) => {
+    setActive(register);
+    if (typeof window !== "undefined") {
+      window.location.hash = register;
+    }
+  }, []);
+  const toggleTheme = useCallback4(() => {
+    const root = document.documentElement;
+    const current = root.getAttribute("data-theme") ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    root.setAttribute("data-theme", current === "dark" ? "light" : "dark");
+  }, []);
+  const brandName = branding?.name ?? "Validation-OS";
+  const brandMark = branding?.initials ?? "V";
+  return /* @__PURE__ */ jsxs10("div", { className: "vos-app", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "vos-brand", children: [
+      /* @__PURE__ */ jsx10("span", { className: "vos-brand-dot", children: branding?.logoUrl ? /* @__PURE__ */ jsx10("img", { src: branding.logoUrl, alt: "" }) : brandMark }),
+      " ",
+      brandName
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "vos-topbar", children: [
+      backendLabel ? /* @__PURE__ */ jsxs10("div", { className: "vos-backend", children: [
+        /* @__PURE__ */ jsx10("span", { className: "vos-live-dot" }),
+        " Backend: ",
+        /* @__PURE__ */ jsx10("b", { children: backendLabel })
+      ] }) : null,
+      agentLabel ? /* @__PURE__ */ jsxs10("span", { className: "vos-hint", children: [
+        "Agent: ",
+        /* @__PURE__ */ jsx10("b", { style: { color: "var(--vos-text)" }, children: agentLabel })
+      ] }) : null,
+      /* @__PURE__ */ jsx10("div", { className: "vos-spacer" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: "vos-iconbtn", onClick: toggleTheme, children: "\u25D0 Theme" }),
+      user?.name ? /* @__PURE__ */ jsxs10("div", { className: "vos-user", children: [
+        /* @__PURE__ */ jsx10("span", { className: "vos-avatar", children: initialsOf(user.name) }),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx10("span", { className: "vos-user-name", children: user.name }),
+          user.caption ? /* @__PURE__ */ jsx10("small", { children: user.caption }) : null
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx10(
+      RegisterNav,
+      {
+        active,
+        onSelect: select,
+        counts,
+        registers
+      }
+    ),
+    /* @__PURE__ */ jsx10("main", { className: "vos-main", children: /* @__PURE__ */ jsx10(
+      RegisterBrowser,
+      {
+        register: active,
+        basePath,
+        subtitle: REGISTER_SUBTITLE[active]
+      },
+      active
+    ) })
+  ] });
+}
+
+// src/register-counts.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function RegisterCounts({
+  counts,
+  caption,
+  onSelect,
+  active
+}) {
+  const registers = REGISTER_ORDER.filter(
+    (r) => counts[r] !== void 0
+  );
+  return /* @__PURE__ */ jsxs11("section", { "aria-label": "Register counts", children: [
+    /* @__PURE__ */ jsx11("div", { className: "vos-tile-grid", children: registers.map((register) => /* @__PURE__ */ jsx11(
+      StatTile,
+      {
+        label: REGISTER_LABEL[register],
+        value: counts[register] ?? 0,
+        onClick: onSelect ? () => onSelect(register) : void 0,
+        active: active === register
+      },
+      register
+    )) }),
+    caption ? /* @__PURE__ */ jsx11("p", { className: "vos-hint", style: { marginTop: 16 }, children: caption }) : null
+  ] });
+}
 export {
   CONFLICT_MESSAGE,
+  ConfidenceCell,
+  REGISTER_GROUPS,
+  REGISTER_ICON,
   REGISTER_LABEL,
   REGISTER_ORDER,
   REGISTER_SINGULAR,
+  REGISTER_SUBTITLE,
+  RISK_CRIT,
+  RISK_WARN,
   RecordDrawer,
   RecordForm,
   RegisterBrowser,
   RegisterCounts,
+  RegisterNav,
   RegisterTable,
   RelationEditor,
+  RiskBar,
+  Sparkline,
+  StatTile,
+  StatusPill,
   UnderstandingPanel,
+  ValidationOSDashboard,
   buildPatch,
   buildUnderstanding,
   cellValue,
   columnsFor,
+  confidenceTone,
   draftFrom,
   editableFields,
   emptyDraft,
   formFieldsFor,
+  formatCount,
+  formatSigned,
   formatValue,
   hasEdits,
   interpretSave,
   linkChoicesFrom,
   missingRequired,
   primaryLabel,
+  riskFraction,
+  riskLevel,
+  sparklinePath,
+  statusTone,
   toCreatePayload,
   useCounts,
   useCreate,