@fonderie/vue-admin-screens 1.0.2 → 1.1.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent13, h as h14, ref as ref5 } from "vue";
+import { computed as computed2, defineComponent as defineComponent13, h as h15, onBeforeUnmount, onMounted, ref as ref6 } from "vue";
 
 // src/styles.ts
 var t = {
@@ -23,7 +23,32 @@ var t = {
   trackingDisplay: "var(--fonderie-tracking-display,-0.05em)",
   shadowCard: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
 };
-var styles = {
+var tint = (token, pct) => `color-mix(in srgb, ${token} ${pct}%, transparent)`;
+var toneColor = {
+  ok: t.accentStrong,
+  bad: t.danger,
+  // Amber on white fails contrast; mixing in the text colour darkens it in
+  // light mode and lightens it in dark, from the same two tokens.
+  warn: `color-mix(in srgb, ${t.warning} 70%, ${t.text})`,
+  neutral: t.muted,
+  info: t.text
+};
+var control = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  height: 32,
+  boxSizing: "border-box",
+  borderRadius: 6,
+  padding: "0 12px",
+  fontSize: 13,
+  fontWeight: 500,
+  fontFamily: "inherit",
+  lineHeight: 1,
+  whiteSpace: "nowrap"
+};
+var raw = {
   shell: {
     display: "flex",
     minHeight: "100vh",
@@ -31,137 +56,568 @@ var styles = {
     color: t.text,
     background: t.bg
   },
-  // The sidebar sits on the raised surface against the page canvas, which is
-  // what separates the two without a heavy rule between them.
+  // Sticky, full height, scrolls on its own: the nav never scrolls away with
+  // a long table, and the footer (session controls) stays in reach.
   nav: {
-    width: 220,
-    borderRight: `1px solid ${t.border}`,
-    padding: 16,
+    width: 248,
     flexShrink: 0,
-    background: t.surface
+    boxSizing: "border-box",
+    borderRight: `1px solid ${t.border}`,
+    background: t.surface,
+    position: "sticky",
+    top: 0,
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column"
   },
+  navBrand: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "18px 16px 14px",
+    borderBottom: `1px solid ${t.borderLight}`
+  },
+  navMark: {
+    width: 28,
+    height: 28,
+    borderRadius: 7,
+    background: t.text,
+    color: t.surface,
+    display: "grid",
+    placeItems: "center",
+    flexShrink: 0
+  },
+  navBrandTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  navScroll: { flex: 1, overflowY: "auto", padding: "8px 10px 16px" },
   navGroup: {
     fontSize: 11,
     textTransform: "uppercase",
     letterSpacing: 0.6,
     color: t.muted,
-    margin: "16px 0 6px",
+    margin: "16px 8px 4px",
     fontWeight: 600
   },
   navItem: {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
     width: "100%",
     textAlign: "left",
     background: "none",
     border: "none",
-    borderRadius: t.radius,
-    padding: "6px 8px",
+    borderRadius: 6,
+    padding: "7px 8px",
     cursor: "pointer",
-    fontSize: 14,
-    color: t.text,
-    fontFamily: "inherit"
+    fontSize: 13.5,
+    fontWeight: 500,
+    color: t.muted,
+    fontFamily: "inherit",
+    position: "relative"
+  },
+  navItemActive: { background: tint(t.accent, 12), color: t.text, fontWeight: 600 },
+  navIconActive: { color: t.accentStrong },
+  navFooter: {
+    borderTop: `1px solid ${t.borderLight}`,
+    padding: 12,
+    display: "flex",
+    flexDirection: "column",
+    gap: 10
+  },
+  // Phone layout: a top bar with the menu button replaces the sidebar, which
+  // opens as a drawer over the content.
+  topbar: {
+    position: "sticky",
+    top: 0,
+    zIndex: 20,
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "10px 16px",
+    background: t.surface,
+    borderBottom: `1px solid ${t.border}`
+  },
+  drawer: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 30,
+    display: "flex"
+  },
+  scrim: { flex: 1, background: "rgba(0,0,0,.35)" },
+  main: { flex: 1, minWidth: 0 },
+  container: { padding: "32px 40px 64px", maxWidth: 1160, boxSizing: "border-box" },
+  // ── page header ──
+  header: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 16,
+    marginBottom: 24,
+    flexWrap: "wrap"
   },
-  navItemActive: { background: t.surfaceAlt, fontWeight: 600, color: t.accentStrong },
-  main: { flex: 1, padding: 24, maxWidth: 960 },
-  container: { padding: 24, maxWidth: 960 },
   title: {
-    fontSize: 20,
+    fontSize: 22,
     fontWeight: 600,
-    marginTop: 0,
-    marginBottom: 12,
-    letterSpacing: t.trackingDisplay
+    margin: 0,
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.25
   },
+  lead: { color: t.muted, fontSize: 13.5, margin: "4px 0 0", lineHeight: 1.5 },
+  actions: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
   subtitle: {
     fontSize: 15,
     fontWeight: 600,
-    marginTop: 24,
-    marginBottom: 8,
-    letterSpacing: t.trackingDisplay
+    marginTop: 32,
+    marginBottom: 10,
+    letterSpacing: t.trackingDisplay,
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  // ── feedback ──
+  status: { padding: "24px 0", color: t.muted, fontSize: 13.5 },
+  error: {
+    color: t.danger,
+    background: tint(t.danger, 8),
+    border: `1px solid ${tint(t.danger, 25)}`,
+    borderRadius: t.radiusLg,
+    padding: "10px 14px",
+    marginBottom: 16,
+    fontSize: 13.5
+  },
+  notice: {
+    color: t.text,
+    background: tint(t.warning, 10),
+    border: `1px solid ${tint(t.warning, 35)}`,
+    borderRadius: t.radiusLg,
+    padding: "10px 14px",
+    marginBottom: 16,
+    fontSize: 13.5
   },
-  status: { padding: 12, color: t.muted },
-  error: { color: t.danger, marginBottom: 12, fontSize: 14 },
   ok: { color: t.accentStrong, fontWeight: 600 },
   bad: { color: t.danger, fontWeight: 600 },
   advice: { color: t.warning },
   muted: { color: t.muted, fontSize: 13 },
-  mono: { fontFamily: t.mono, fontSize: 13 },
-  table: { width: "100%", borderCollapse: "collapse", fontSize: 14 },
+  mono: { fontFamily: t.mono, fontSize: 12.5 },
+  code: {
+    fontFamily: t.mono,
+    fontSize: 12,
+    background: t.surfaceAlt,
+    border: `1px solid ${t.borderLight}`,
+    borderRadius: 4,
+    padding: "1px 5px"
+  },
+  // ── surfaces ──
+  // Tables and lists are cards themselves, so every screen gets the framed,
+  // rounded look without wrapping each one. The last row's rule is removed in
+  // the shell stylesheet (a pseudo-selector); embedded without the shell it
+  // simply doubles against the frame.
+  table: {
+    width: "100%",
+    borderCollapse: "separate",
+    borderSpacing: 0,
+    fontSize: 13.5,
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    overflow: "hidden",
+    boxShadow: t.shadowCard
+  },
   th: {
     textAlign: "left",
     borderBottom: `1px solid ${t.border}`,
-    padding: "6px 8px",
+    padding: "9px 14px",
+    fontWeight: 600,
+    fontSize: 11.5,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    color: t.muted,
+    background: t.surfaceAlt,
+    whiteSpace: "nowrap"
+  },
+  td: {
+    borderBottom: `1px solid ${t.borderLight}`,
+    padding: "11px 14px",
+    verticalAlign: "top"
+  },
+  list: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    overflow: "hidden",
+    boxShadow: t.shadowCard
+  },
+  row: { borderBottom: `1px solid ${t.borderLight}`, padding: "12px 16px" },
+  card: {
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    padding: 16,
+    boxShadow: t.shadowCard
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+    gap: 12,
+    marginBottom: 24
+  },
+  statLabel: { fontSize: 12, color: t.muted, fontWeight: 500 },
+  statValue: {
+    fontSize: 26,
     fontWeight: 600,
-    color: t.muted
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.2,
+    marginTop: 6
+  },
+  statHint: { fontSize: 12, color: t.muted, marginTop: 2 },
+  empty: {
+    background: t.surface,
+    border: `1px dashed ${t.border}`,
+    borderRadius: t.radiusLg,
+    padding: "40px 24px",
+    textAlign: "center",
+    color: t.muted,
+    fontSize: 13.5
+  },
+  emptyTitle: { color: t.text, fontWeight: 600, fontSize: 14.5, margin: "10px 0 4px" },
+  dl: { display: "grid", gridTemplateColumns: "160px 1fr", margin: 0 },
+  dt: {
+    color: t.muted,
+    fontSize: 13,
+    padding: "10px 16px",
+    borderBottom: `1px solid ${t.borderLight}`
+  },
+  dd: {
+    margin: 0,
+    padding: "10px 16px",
+    borderBottom: `1px solid ${t.borderLight}`,
+    fontSize: 13.5,
+    minWidth: 0
   },
-  td: { borderBottom: `1px solid ${t.borderLight}`, padding: "6px 8px", verticalAlign: "top" },
-  list: { listStyle: "none", padding: 0, margin: 0 },
-  row: { borderBottom: `1px solid ${t.borderLight}`, padding: "8px 0" },
   badge: {
-    display: "inline-block",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 5,
     borderRadius: 999,
-    padding: "1px 8px",
-    fontSize: 12,
+    padding: "2px 8px",
+    fontSize: 11.5,
+    fontWeight: 500,
+    lineHeight: 1.5,
     background: t.surfaceAlt,
     border: `1px solid ${t.border}`,
-    color: t.muted
+    color: t.muted,
+    whiteSpace: "nowrap"
+  },
+  pill: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 999,
+    padding: "2px 9px 2px 8px",
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1.5,
+    whiteSpace: "nowrap",
+    verticalAlign: "baseline"
   },
+  dot: { width: 6, height: 6, borderRadius: 999, flexShrink: 0, background: "currentColor" },
+  // ── controls ──
   button: {
+    ...control,
     background: t.surface,
     border: `1px solid ${t.border}`,
-    borderRadius: t.radius,
-    padding: "4px 10px",
-    cursor: "pointer",
-    fontSize: 13,
     color: t.text,
-    fontFamily: "inherit",
+    cursor: "pointer",
     boxShadow: t.shadowCard
   },
-  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 },
-  // Surfaces the screens compose themselves, kept here so a card looks the
-  // same on every page rather than being re-invented per screen.
-  card: {
+  buttonPrimary: {
+    ...control,
+    background: t.text,
+    border: `1px solid ${t.text}`,
+    color: t.surface,
+    cursor: "pointer"
+  },
+  buttonDanger: {
+    ...control,
     background: t.surface,
+    border: `1px solid ${tint(t.danger, 40)}`,
+    color: t.danger,
+    cursor: "pointer"
+  },
+  buttonGhost: {
+    ...control,
+    background: "none",
+    border: "1px solid transparent",
+    color: t.muted,
+    cursor: "pointer",
+    padding: "0 8px"
+  },
+  link: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    color: t.text,
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontWeight: 500,
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  input: {
+    height: 32,
+    boxSizing: "border-box",
     border: `1px solid ${t.border}`,
-    borderRadius: t.radiusLg,
-    padding: 16,
-    boxShadow: t.shadowCard
+    borderRadius: 6,
+    padding: "0 10px",
+    fontSize: 13.5,
+    fontFamily: "inherit",
+    background: t.surface,
+    color: t.text,
+    minWidth: 0
   },
+  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 16, flexWrap: "wrap" },
   accent: { color: t.accent }
 };
+var UNITLESS = /* @__PURE__ */ new Set([
+  "fontWeight",
+  "lineHeight",
+  "opacity",
+  "zIndex",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order"
+]);
+function withUnits(sheet) {
+  const out = {};
+  for (const [name, rule] of Object.entries(sheet)) {
+    const fixed = {};
+    for (const [prop, value] of Object.entries(rule)) {
+      fixed[prop] = typeof value === "number" && !UNITLESS.has(prop) ? `${value}px` : value;
+    }
+    out[name] = fixed;
+  }
+  return out;
+}
+var styles = withUnits(raw);
+
+// src/ui.ts
+import { h } from "vue";
+
+// src/icons.ts
+var ICONS = {
+  attention: ["M22 12h-4l-3 9L9 3l-3 9H2"],
+  modules: [
+    "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",
+    "M3.3 7 12 12l8.7-5",
+    "M12 22V12"
+  ],
+  environment: [
+    "M4 21v-7",
+    "M4 10V3",
+    "M12 21v-9",
+    "M12 8V3",
+    "M20 21v-5",
+    "M20 12V3",
+    "M1 14h6",
+    "M9 8h6",
+    "M17 16h6"
+  ],
+  doctor: [
+    "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+  ],
+  routes: [
+    "M6 3v12",
+    "M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    "M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    "M18 9a9 9 0 0 1-9 9"
+  ],
+  users: [
+    "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+    "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+    "M22 21v-2a4 4 0 0 0-3-3.87",
+    "M16 3.13a4 4 0 0 1 0 7.75"
+  ],
+  catalog: [
+    "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z",
+    "M7.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
+  ],
+  subscriber: ["M2 7h20v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z", "M2 11h20", "M6 15h4"],
+  settings: [
+    "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
+    "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+  ],
+  templates: [
+    "M22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",
+    "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
+  ],
+  audit: ["M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", "M9 12l2 2 4-4"],
+  log: ["M12 8v4l3 3", "M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"],
+  tokens: [
+    "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z",
+    "M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
+  ],
+  migrations: [
+    "M12 22c4.97 0 9-1.79 9-4V6",
+    "M3 6v12c0 2.21 4.03 4 9 4",
+    "M12 10c4.97 0 9-1.79 9-4s-4.03-4-9-4-9 1.79-9 4 4.03 4 9 4z",
+    "M3 12c0 2.21 4.03 4 9 4s9-1.79 9-4"
+  ],
+  menu: ["M4 6h16", "M4 12h16", "M4 18h16"],
+  close: ["M18 6 6 18", "m6 6 12 12"],
+  refresh: [
+    "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
+    "M21 3v5h-5",
+    "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
+    "M8 16H3v5"
+  ],
+  check: ["M20 6 9 17l-5-5"],
+  alert: [
+    "M12 9v4",
+    "M12 17h.01",
+    "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+  ],
+  search: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "m21 21-4.3-4.3"],
+  back: ["m12 19-7-7 7-7", "M19 12H5"],
+  logout: ["M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", "m16 17 5-5-5-5", "M21 12H9"],
+  lock: [
+    "M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z",
+    "M7 11V7a5 5 0 0 1 10 0v4"
+  ],
+  plus: ["M12 5v14", "M5 12h14"],
+  mark: [
+    "M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
+    "M15 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
+    "M15 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z",
+    "M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z"
+  ]
+};
+
+// src/ui.ts
+function icon(name, size = 16, style) {
+  return h(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": 2,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0, ...style }
+    },
+    ICONS[name].map((d) => h("path", { key: d, d }))
+  );
+}
+function pageHeader(title, lead, actions) {
+  return h("div", { style: styles.header }, [
+    h("div", { style: { minWidth: 0 } }, [
+      h("h1", { style: styles.title }, title),
+      lead ? h("p", { style: styles.lead }, lead) : null
+    ]),
+    actions?.filter(Boolean).length ? h("div", { style: styles.actions }, actions) : null
+  ]);
+}
+function pill(tone, text, dot = true) {
+  const color = toneColor[tone];
+  return h(
+    "span",
+    { style: { ...styles.pill, color, background: tint(color, tone === "neutral" ? 10 : 13) } },
+    [dot ? h("span", { style: styles.dot }) : null, text]
+  );
+}
+function stat(label, value, hint, tone) {
+  return h("div", { style: styles.card }, [
+    h("div", { style: styles.statLabel }, label),
+    h(
+      "div",
+      { style: { ...styles.statValue, ...tone ? { color: toneColor[tone] } : {} } },
+      value
+    ),
+    hint ? h("div", { style: styles.statHint }, hint) : null
+  ]);
+}
+function empty(title, body, iconName = "check") {
+  return h("div", { style: styles.empty }, [
+    icon(iconName, 22),
+    h("div", { style: styles.emptyTitle }, title),
+    body ? h("div", body) : null
+  ]);
+}
+function methodChip(method) {
+  const tone = method === "GET" ? "ok" : method === "DELETE" ? "bad" : method === "POST" ? "info" : "warn";
+  const color = toneColor[tone];
+  return h(
+    "span",
+    {
+      style: {
+        ...styles.mono,
+        fontSize: "11px",
+        fontWeight: 700,
+        color,
+        background: tint(color, 12),
+        borderRadius: "4px",
+        padding: "2px 6px",
+        display: "inline-block",
+        minWidth: "44px",
+        textAlign: "center"
+      }
+    },
+    method
+  );
+}
 
 // src/screens/AdminLogScreen.ts
 import { useAdminLog } from "@fonderie/vue-admin";
-import { defineComponent, h as h2 } from "vue";
+import { defineComponent, h as h3 } from "vue";
 
 // src/screens/common.ts
-import { h } from "vue";
+import { h as h2 } from "vue";
 function page(title, state, content, toolbar = [], options = {}) {
-  const body = state.isLoading.value ? h("p", { style: styles.status }, options.loadingText ?? "Loading\u2026") : state.error.value ? h(
+  const body = state.isLoading.value ? h2("p", { style: styles.status }, options.loadingText ?? "Loading\u2026") : state.error.value ? h2(
     "p",
     { style: styles.error, role: "alert" },
     (options.errorText ?? ((e) => e.explanation))(state.error.value)
   ) : content();
-  return h("div", { style: styles.container }, [
-    h("div", { style: styles.toolbar }, [
-      h("h1", { style: { ...styles.title, marginBottom: 0 } }, title),
-      ...toolbar
-    ]),
-    body
-  ]);
+  return h2("div", { style: styles.container }, [pageHeader(title, options.lead, toolbar), body]);
 }
 function table(headers, rows) {
-  return h("table", { style: styles.table }, [
-    h("thead", [
-      h(
+  return h2("table", { style: styles.table }, [
+    h2("thead", [
+      h2(
         "tr",
-        headers.map((t2) => h("th", { style: styles.th }, t2))
+        headers.map(
+          (t2) => typeof t2 === "string" ? h2("th", { style: styles.th }, t2) : h2("th", { style: { ...styles.th, ...t2.style } }, t2.label)
+        )
       )
     ]),
-    h("tbody", rows)
+    h2("tbody", rows)
   ]);
 }
-var td = (children, extra = {}) => h("td", { style: { ...styles.td, ...extra } }, children);
-var refreshButton = (label, disabled, onClick) => h("button", { type: "button", style: styles.button, disabled, onClick }, label);
+var td = (children, extra = {}) => h2("td", { style: { ...styles.td, ...extra } }, children);
+var refreshButton = (label, disabled, onClick) => h2("button", { type: "button", style: styles.button, disabled, onClick }, [
+  icon("refresh", 14),
+  disabled ? "Working\u2026" : label
+]);
+var loadMoreButton = (onClick) => h2(
+  "button",
+  { type: "button", style: { ...styles.button, marginTop: "12px" }, onClick },
+  "Load more"
+);
+var actionButton = (label, disabled, onClick, style = styles.button) => h2("button", { type: "button", style, disabled, onClick }, label);
 
 // src/screens/AdminLogScreen.ts
 var AdminLogScreen = defineComponent({
@@ -174,147 +630,269 @@ var AdminLogScreen = defineComponent({
     const { entries, hasMore, isLoading, error, refresh, loadMore } = useAdminLog(props.client, {
       limit: props.pageSize
     });
-    return () => h2("div", { style: styles.container }, [
-      h2("div", { style: styles.toolbar }, [
-        h2("h1", { style: { ...styles.title, marginBottom: 0 } }, "Admin log"),
-        refreshButton("Refresh", isLoading.value, () => void refresh())
-      ]),
-      error.value ? h2(
+    return () => h3("div", { style: styles.container }, [
+      pageHeader(
+        "Admin log",
+        "Every request made through this surface, newest first \u2014 refused ones included.",
+        [refreshButton("Refresh", isLoading.value, () => void refresh())]
+      ),
+      error.value ? h3(
         "p",
         { style: styles.error, role: "alert" },
         error.value.status === 404 ? "The admin log is off \u2014 give AdminModule a store." : error.value.explanation
-      ) : [
+      ) : entries.value.length === 0 && !isLoading.value ? empty("No requests yet", void 0, "log") : [
         table(
           ["When", "Actor", "Request", "Status", "Module"],
           entries.value.map(
-            (e) => h2("tr", { key: e.id }, [
-              td(new Date(e.at).toLocaleString(), styles.muted),
+            (e) => h3("tr", { key: e.id }, [
+              td(new Date(e.at).toLocaleString(), {
+                ...styles.muted,
+                whiteSpace: "nowrap"
+              }),
               td(e.actor),
-              td(`${e.method} ${e.path}`, styles.mono),
               td([
-                h2(
-                  "span",
-                  { style: e.status >= 400 ? styles.bad : styles.ok },
-                  String(e.status)
-                ),
+                methodChip(e.method),
                 " ",
-                h2("span", { style: styles.muted }, `${e.durationMs} ms`)
+                h3("span", { style: { ...styles.mono, wordBreak: "break-all" } }, e.path)
               ]),
+              td(
+                [
+                  pill(
+                    e.status >= 500 ? "bad" : e.status >= 400 ? "warn" : "ok",
+                    String(e.status)
+                  ),
+                  " ",
+                  h3("span", { style: styles.muted }, `${e.durationMs} ms`)
+                ],
+                { whiteSpace: "nowrap" }
+              ),
               td(e.module, styles.muted)
             ])
           )
         ),
-        isLoading.value ? h2("p", { style: styles.status }, "Loading\u2026") : null,
-        hasMore.value && !isLoading.value ? h2(
-          "button",
-          {
-            type: "button",
-            style: { ...styles.button, marginTop: "12px" },
-            onClick: () => void loadMore()
-          },
-          "Load more"
-        ) : null
+        isLoading.value ? h3("p", { style: styles.status }, "Loading\u2026") : null,
+        hasMore.value && !isLoading.value ? loadMoreButton(() => void loadMore()) : null
       ]
     ]);
   }
 });
 
 // src/screens/AttentionScreen.ts
-import { useAttention } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent2, h as h3 } from "vue";
+import { useAttention, useManifest } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent2, h as h4 } from "vue";
 var AttentionScreen = defineComponent2({
   name: "FonderieAttentionScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { attention, isLoading, error, refresh } = useAttention(props.client);
-    return () => page(
-      "Attention",
-      { isLoading, error },
-      () => {
-        const a = attention.value;
-        if (!a) return null;
-        if (a.items.length === 0)
-          return h3(
-            "p",
-            { style: styles.ok },
-            `Nothing needs you. Checked ${new Date(a.generatedAt).toLocaleString()}.`
-          );
-        return h3(
-          "ul",
-          { style: styles.list },
-          a.items.map(
-            (item) => h3("li", { key: `${item.source}:${item.message}`, style: styles.row }, [
-              h3(
-                "span",
-                { style: item.severity === "error" ? styles.bad : styles.advice },
-                item.severity
-              ),
-              " ",
-              h3("span", { style: styles.mono }, item.source),
-              ` \u2014 ${item.message}`
-            ])
-          )
-        );
-      },
-      [refreshButton("Refresh", isLoading.value, () => void refresh())],
-      { loadingText: "Running the checks\u2026" }
-    );
+    const { manifest } = useManifest(props.client);
+    return () => {
+      const a = attention.value;
+      const m = manifest.value;
+      const errors = a?.items.filter((i) => i.severity === "error") ?? [];
+      const advice = a?.items.filter((i) => i.severity !== "error") ?? [];
+      const ready = m?.modules.filter((x) => x.readiness.ok).length ?? 0;
+      const total = m?.modules.length ?? 0;
+      const tiles = h4("div", { style: styles.grid }, [
+        stat(
+          "Needs action",
+          a ? errors.length : "\u2014",
+          "errors to fix",
+          errors.length ? "bad" : a ? "ok" : void 0
+        ),
+        stat("Advice", a ? advice.length : "\u2014", "worth a look", advice.length ? "warn" : void 0),
+        stat(
+          "Modules ready",
+          m ? `${ready}/${total}` : "\u2014",
+          m ? `admin ${m.admin.version}` : void 0,
+          m && ready < total ? "warn" : m ? "ok" : void 0
+        ),
+        stat("Routes", m ? m.routes.length : "\u2014", m ? m.env : void 0)
+      ]);
+      return page(
+        "Attention",
+        // Tiles show while the checks run; only the list waits.
+        { isLoading: { value: false }, error },
+        () => {
+          if (isLoading.value && !a)
+            return [tiles, h4("p", { style: styles.status }, "Running the checks\u2026")];
+          if (!a) return tiles;
+          if (a.items.length === 0)
+            return [
+              tiles,
+              empty(
+                "Nothing needs you",
+                `Every check passes. Checked ${new Date(a.generatedAt).toLocaleString()}.`
+              )
+            ];
+          return [
+            tiles,
+            h4(
+              "ul",
+              { style: styles.list },
+              [...errors, ...advice].map(
+                (item) => h4(
+                  "li",
+                  {
+                    key: `${item.source}:${item.message}`,
+                    style: {
+                      ...styles.row,
+                      display: "flex",
+                      gap: "12px",
+                      alignItems: "flex-start"
+                    }
+                  },
+                  [
+                    icon("alert", 16, {
+                      marginTop: "3px",
+                      color: item.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-warning,#f5a623)"
+                    }),
+                    h4("div", { style: { minWidth: 0, flex: 1 } }, [
+                      h4(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: "8px",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            marginBottom: "2px"
+                          }
+                        },
+                        [
+                          pill(
+                            item.severity === "error" ? "bad" : "warn",
+                            item.severity === "error" ? "error" : "advice"
+                          ),
+                          h4("span", { style: styles.mono }, item.source)
+                        ]
+                      ),
+                      h4("div", { style: { lineHeight: 1.55 } }, item.message)
+                    ])
+                  ]
+                )
+              )
+            )
+          ];
+        },
+        [refreshButton("Refresh", isLoading.value, () => void refresh())],
+        {
+          lead: a ? `What needs you on this deployment \xB7 checked ${new Date(a.generatedAt).toLocaleTimeString()}` : "What needs you on this deployment"
+        }
+      );
+    };
   }
 });
 
 // src/screens/EnvironmentScreen.ts
 import { useAdminEnvironment } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent3, h as h4 } from "vue";
+import { defineComponent as defineComponent3, h as h5 } from "vue";
 var EnvironmentScreen = defineComponent3({
   name: "FonderieEnvironmentScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { report, isLoading, error } = useAdminEnvironment(props.client);
-    return () => page("Configuration", { isLoading, error }, () => {
+    return () => {
       const r = report.value;
-      if (!r) return null;
-      return [
-        h4("h2", { style: styles.subtitle }, "Readiness"),
-        h4(
-          "ul",
-          { style: styles.list },
-          r.modules.map(
-            (m) => h4("li", { key: m.name, style: styles.row }, [
-              h4("span", { style: styles.mono }, m.name),
-              " ",
-              ...m.problems.length === 0 ? [h4("span", { style: styles.ok }, "ok")] : m.problems.map(
-                (p) => h4(
+      const missing = r?.env.filter((e) => !e.set).length ?? 0;
+      return page(
+        "Environment",
+        { isLoading, error },
+        () => {
+          if (!r) return null;
+          return [
+            h5("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Variables"),
+            r.env.length === 0 ? h5(
+              "p",
+              { style: styles.muted },
+              "No variables declared \u2014 pass `env` to AdminModule."
+            ) : h5(
+              "div",
+              {
+                style: {
+                  ...styles.grid,
+                  gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+                  gap: "8px"
+                }
+              },
+              r.env.map(
+                (e) => h5(
                   "div",
                   {
-                    key: p.message,
-                    style: p.severity === "error" ? styles.bad : styles.advice
+                    key: e.name,
+                    style: {
+                      ...styles.card,
+                      padding: "10px 12px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: "8px"
+                    }
                   },
-                  p.message
+                  [
+                    h5("span", { style: { ...styles.mono, wordBreak: "break-all" } }, e.name),
+                    pill(e.set ? "ok" : "bad", e.set ? "set" : "missing")
+                  ]
                 )
               )
-            ])
-          )
-        ),
-        h4("h2", { style: styles.subtitle }, "Environment"),
-        r.env.length === 0 ? h4("p", { style: styles.muted }, "No variables declared \u2014 pass `env` to AdminModule.") : h4(
-          "ul",
-          { style: styles.list },
-          r.env.map(
-            (e) => h4("li", { key: e.name, style: styles.row }, [
-              h4("span", { style: styles.mono }, e.name),
-              " ",
-              h4("span", { style: e.set ? styles.ok : styles.bad }, e.set ? "set" : "missing")
-            ])
-          )
-        )
-      ];
-    });
+            ),
+            h5("h2", { style: styles.subtitle }, "Module readiness"),
+            h5(
+              "ul",
+              { style: styles.list },
+              r.modules.map(
+                (m) => h5("li", { key: m.name, style: styles.row }, [
+                  h5(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: "12px",
+                        alignItems: "center"
+                      }
+                    },
+                    [
+                      h5("span", { style: { ...styles.mono, fontWeight: 600 } }, m.name),
+                      pill(
+                        m.problems.length === 0 ? "ok" : m.problems.some((p) => p.severity === "error") ? "bad" : "warn",
+                        m.problems.length === 0 ? "ready" : `${m.problems.length} problem${m.problems.length === 1 ? "" : "s"}`
+                      )
+                    ]
+                  ),
+                  ...m.problems.map(
+                    (p) => h5(
+                      "div",
+                      {
+                        key: p.message,
+                        style: {
+                          marginTop: "6px",
+                          fontSize: "13px",
+                          color: p.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-text-muted,#5c5c5c)"
+                        }
+                      },
+                      p.message
+                    )
+                  )
+                ])
+              )
+            )
+          ];
+        },
+        [
+          r && r.env.length > 0 ? pill(missing ? "bad" : "ok", missing ? `${missing} missing` : "all set") : null
+        ],
+        {
+          lead: "Whether each module is configured and each variable the app reads is set. Values are never shown."
+        }
+      );
+    };
   }
 });
 
 // src/screens/DoctorScreen.ts
 import { useDoctor } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent4, h as h5 } from "vue";
+import { defineComponent as defineComponent4, h as h6 } from "vue";
 var DoctorScreen = defineComponent4({
   name: "FonderieDoctorScreen",
   props: { client: { type: Object, required: true } },
@@ -322,123 +900,193 @@ var DoctorScreen = defineComponent4({
     const { report, isLoading, error, refresh } = useDoctor(props.client);
     return () => page(
       "Doctor",
-      { isLoading, error },
+      { isLoading: { value: isLoading.value && !report.value }, error },
       () => {
         const r = report.value;
         if (!r) return null;
-        return h5(
-          "ul",
-          { style: styles.list },
+        return table(
+          [
+            { label: "Result", style: { width: "110px" } },
+            "Check",
+            { label: "Time", style: { textAlign: "right", width: "90px" } }
+          ],
           r.checks.map(
-            (c) => h5("li", { key: c.name, style: styles.row }, [
-              h5(
-                "span",
-                { style: c.skipped ? styles.muted : c.ok ? styles.ok : styles.bad },
-                c.skipped ? "skipped" : c.ok ? "ok" : "failed"
+            (c) => h6("tr", { key: c.name }, [
+              td(
+                pill(
+                  c.skipped ? "neutral" : c.ok ? c.findings.length ? "warn" : "ok" : "bad",
+                  c.skipped ? "skipped" : c.ok ? c.findings.length ? "advice" : "ok" : "failed"
+                )
               ),
-              " ",
-              h5("span", { style: styles.mono }, c.name),
-              " ",
-              h5("span", { style: styles.muted }, `${c.module} \xB7 ${c.durationMs} ms`),
-              c.skipped ? h5("div", { style: styles.muted }, c.skipped) : null,
-              ...c.findings.map(
-                (f) => h5("div", { key: f, style: c.ok ? styles.advice : styles.bad }, f)
-              )
+              td([
+                h6("div", [
+                  h6("span", { style: { ...styles.mono, fontWeight: 600 } }, c.name),
+                  " ",
+                  h6("span", { style: styles.muted }, c.module)
+                ]),
+                c.skipped ? h6("div", { style: { ...styles.muted, marginTop: "4px" } }, c.skipped) : null,
+                ...c.findings.map(
+                  (f) => h6(
+                    "div",
+                    {
+                      key: f,
+                      style: {
+                        marginTop: "4px",
+                        fontSize: "13px",
+                        lineHeight: 1.55,
+                        color: c.ok ? "var(--fonderie-text,#171717)" : "var(--fonderie-danger,#e00)"
+                      }
+                    },
+                    f
+                  )
+                )
+              ]),
+              td(`${c.durationMs} ms`, {
+                ...styles.muted,
+                textAlign: "right",
+                whiteSpace: "nowrap"
+              })
             ])
           )
         );
       },
       [
-        refreshButton("Run again", isLoading.value, () => void refresh()),
-        report.value && !isLoading.value ? h5(
-          "span",
-          { style: report.value.ok ? styles.ok : styles.bad },
+        report.value && !isLoading.value ? pill(
+          report.value.ok ? "ok" : "bad",
           report.value.ok ? "all checks pass" : "a check failed"
-        ) : h5("span")
+        ) : null,
+        refreshButton("Run again", isLoading.value, () => void refresh())
       ],
-      { loadingText: "Running the checks\u2026" }
+      {
+        loadingText: "Running the checks\u2026",
+        lead: "Every reconciliation check across the installed modules, run on demand."
+      }
     );
   }
 });
 
 // src/screens/ModulesScreen.ts
-import { useManifest } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent5, h as h6 } from "vue";
+import { useManifest as useManifest2 } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent5, h as h7 } from "vue";
 var ModulesScreen = defineComponent5({
   name: "FonderieModulesScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const { manifest, isLoading, error } = useManifest(props.client);
-    return () => page("Modules", { isLoading, error }, () => {
+    const { manifest, isLoading, error } = useManifest2(props.client);
+    return () => {
       const m = manifest.value;
-      if (!m) return null;
-      return [
-        h6(
-          "p",
-          { style: styles.muted },
-          `${m.env} \xB7 admin ${m.admin.version} \xB7 admin log ${m.admin.log ? "on" : "off"} \xB7 ${m.routes.length} routes`
-        ),
-        table(
-          ["Module", "Version", "Readiness", "Describes admin"],
-          m.modules.map(
-            (mod) => h6("tr", { key: mod.name }, [
-              td(mod.name, styles.mono),
-              td(mod.version ?? h6("span", { style: styles.muted }, "not reported")),
-              td([
-                h6(
-                  "span",
-                  { style: mod.readiness.ok ? styles.ok : styles.bad },
-                  mod.readiness.ok ? "ok" : "error"
-                ),
-                ...mod.readiness.problems.map(
-                  (p) => h6(
-                    "div",
-                    {
-                      key: p.message,
-                      style: p.severity === "error" ? styles.bad : styles.advice
-                    },
-                    p.message
+      return page(
+        "Modules",
+        { isLoading, error },
+        () => {
+          if (!m) return null;
+          return table(
+            ["Module", "Version", "Readiness", "Admin"],
+            m.modules.map(
+              (mod) => h7("tr", { key: mod.name }, [
+                td(mod.name, { ...styles.mono, fontWeight: 600 }),
+                td(mod.version ?? h7("span", { style: styles.muted }, "not reported"), styles.mono),
+                td([
+                  pill(mod.readiness.ok ? "ok" : "bad", mod.readiness.ok ? "ready" : "error"),
+                  ...mod.readiness.problems.map(
+                    (p) => h7(
+                      "div",
+                      {
+                        key: p.message,
+                        style: {
+                          marginTop: "6px",
+                          fontSize: "13px",
+                          color: p.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-text-muted,#5c5c5c)"
+                        }
+                      },
+                      p.message
+                    )
                   )
+                ]),
+                td(
+                  mod.describesAdmin ? h7("span", { style: styles.badge }, "describes admin") : h7("span", { style: styles.muted }, "\u2014")
                 )
-              ]),
-              td(mod.describesAdmin ? "yes" : h6("span", { style: styles.muted }, "no"))
-            ])
-          )
-        )
-      ];
-    });
+              ])
+            )
+          );
+        },
+        [],
+        {
+          lead: m ? `${m.env} \xB7 admin ${m.admin.version} \xB7 admin log ${m.admin.log ? "on" : "off"} \xB7 ${m.routes.length} routes` : "Every installed module, its version and whether it is ready."
+        }
+      );
+    };
   }
 });
 
 // src/screens/RoutesScreen.ts
 import { useAdminRoutes } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent6, h as h7 } from "vue";
+import { defineComponent as defineComponent6, h as h8, ref } from "vue";
 var RoutesScreen = defineComponent6({
   name: "FonderieRoutesScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { report, isLoading, error } = useAdminRoutes(props.client);
-    return () => page(
-      "Routes",
-      { isLoading, error },
-      () => table(
-        ["Method", "Path", "Guard", "Module"],
-        (report.value?.routes ?? []).map(
-          (r) => h7("tr", { key: `${r.method} ${r.path}` }, [
-            td(r.method, styles.mono),
-            td(r.path, styles.mono),
-            td(h7("span", { style: styles.badge }, r.guard)),
-            td(r.module ?? "application", styles.muted)
-          ])
-        )
-      )
-    );
+    const q = ref("");
+    return () => {
+      const needle = q.value.trim().toLowerCase();
+      const routes = (report.value?.routes ?? []).filter(
+        (r) => !needle || `${r.method} ${r.path} ${r.module ?? "application"} ${r.guard}`.toLowerCase().includes(needle)
+      );
+      return page(
+        "Routes",
+        { isLoading, error },
+        () => table(
+          [{ label: "Method", style: { width: "80px" } }, "Path", "Guard", "Module"],
+          [
+            ...routes.map(
+              (r) => h8("tr", { key: `${r.method} ${r.path}` }, [
+                td(methodChip(r.method)),
+                td(r.path, { ...styles.mono, wordBreak: "break-all" }),
+                td(
+                  pill(
+                    r.guard === "admin" ? "ok" : r.guard === "probe" ? "neutral" : "info",
+                    r.guard,
+                    false
+                  )
+                ),
+                td(r.module ?? "application", styles.muted)
+              ])
+            ),
+            ...routes.length === 0 ? [
+              h8("tr", [
+                h8(
+                  "td",
+                  { style: { ...styles.td, ...styles.muted }, colspan: 4 },
+                  `No route matches \u201C${q.value}\u201D.`
+                )
+              ])
+            ] : []
+          ]
+        ),
+        [
+          h8("input", {
+            type: "search",
+            value: q.value,
+            placeholder: "Filter by path, method, module\u2026",
+            style: { ...styles.input, width: "280px" },
+            "aria-label": "Filter routes",
+            onInput: (e) => {
+              q.value = e.target.value;
+            }
+          })
+        ],
+        {
+          lead: report.value ? `${report.value.routes.length} routes exposed by this deployment, with the guard in front of each.` : "Every exposed route, with its guard."
+        }
+      );
+    };
   }
 });
 
 // src/screens/MigrationsScreen.ts
 import { useAdminMigrations } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent7, h as h8 } from "vue";
+import { defineComponent as defineComponent7, h as h9 } from "vue";
 function why(m, everApplied) {
   if (m.pending.length === 0) return null;
   if (m.blockedBy) return `Apply "${m.blockedBy}" first \u2014 it runs before this one and is behind.`;
@@ -454,31 +1102,31 @@ var MigrationsScreen = defineComponent7({
     const section = (m, everApplied) => {
       const blocked = why(m, everApplied);
       const files = m.pending.map((p) => p.file);
-      return h8("section", { style: { marginBottom: "24px" } }, [
-        h8("h2", { style: styles.subtitle }, `${m.name} \u2014 ${m.pending.length} pending`),
-        h8(
+      return h9("section", { style: { ...styles.card, marginBottom: "16px" } }, [
+        h9("h2", { style: { ...styles.subtitle, marginTop: 0 } }, [
+          h9("span", { style: styles.mono }, m.name),
+          pill("warn", `${m.pending.length} pending`)
+        ]),
+        h9(
           "ul",
+          { style: { margin: "0 0 12px", paddingLeft: "18px", lineHeight: 1.9 } },
           m.pending.map(
-            (p) => h8("li", [
-              h8("code", p.file),
+            (p) => h9("li", [
+              h9("code", { style: styles.code }, p.file),
               " ",
-              h8(
-                "span",
-                { style: p.impact === "destructive" ? styles.bad : styles.advice },
-                p.impact
-              ),
-              p.destructive.length > 0 ? h8(
+              p.impact === "destructive" ? pill("bad", "destructive") : pill("neutral", "additive"),
+              p.destructive.length > 0 ? h9(
                 "ul",
-                p.destructive.map((s) => h8("li", [h8("code", s.slice(0, 120))]))
+                p.destructive.map((s) => h9("li", [h9("code", s.slice(0, 120))]))
               ) : null
             ])
           )
         ),
-        blocked ? h8("p", { style: styles.advice }, blocked) : h8(
+        blocked ? h9("p", { style: { ...styles.notice, marginBottom: 0 } }, blocked) : h9(
           "button",
           {
             type: "button",
-            style: styles.button,
+            style: styles.buttonPrimary,
             disabled: isLoading.value || !m.appliable,
             onClick: () => {
               if (window.confirm(
@@ -499,11 +1147,12 @@ var MigrationsScreen = defineComponent7({
         const r = report.value;
         if (!r) return null;
         const behind = r.modules.filter((m) => m.pending.length > 0);
-        if (behind.length === 0) return h8("p", { style: styles.ok }, "Every module is up to date.");
+        if (behind.length === 0)
+          return empty("Every module is up to date", "No pending migrations.", "migrations");
         return [
-          r.everApplied ? null : h8(
+          r.everApplied ? null : h9(
             "p",
-            { style: styles.advice },
+            { style: styles.notice },
             "This database has never been migrated \u2014 treating it as a first install, so nothing is held back."
           ),
           ...behind.map((m) => section(m, r.everApplied))
@@ -511,6 +1160,7 @@ var MigrationsScreen = defineComponent7({
       },
       [refreshButton("Refresh", isLoading.value, () => void refresh())],
       {
+        lead: "Schema changes each module ships, and whether this database has them.",
         errorText: (e) => e.status === 403 ? "Applying migrations needs a token with the write scope." : e.explanation
       }
     );
@@ -519,50 +1169,89 @@ var MigrationsScreen = defineComponent7({
 
 // src/screens/TokensScreen.ts
 import { useAdminTokens } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent8, h as h9, ref } from "vue";
+import { defineComponent as defineComponent8, h as h10, ref as ref2 } from "vue";
 var ALL = ["read", "write", "secrets"];
 var TokensScreen = defineComponent8({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { report, isLoading, error, issue, revoke } = useAdminTokens(props.client);
-    const name = ref("");
-    const scopes = ref(["read"]);
-    const days = ref("");
-    const minted = ref(null);
+    const name = ref2("");
+    const scopes = ref2(["read"]);
+    const days = ref2("");
+    const minted = ref2(null);
     const toggle = (s) => scopes.value = scopes.value.includes(s) ? scopes.value.filter((x) => x !== s) : [...scopes.value, s];
     return () => {
       const r = report.value;
-      return h9("div", { style: styles.container }, [
-        h9("h1", { style: styles.title }, "Access"),
-        error.value ? h9(
+      return h10("div", { style: styles.container }, [
+        pageHeader(
+          "Access",
+          "Who can open this surface: the root token's strength, scoped tokens you have issued, and any legacy per-module tokens."
+        ),
+        error.value ? h10(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.value.explanation
         ) : null,
-        h9("h2", { style: styles.subtitle }, "Root token"),
-        r ? h9("p", [
-          h9(
-            "span",
-            { style: r.admin.ok ? styles.ok : styles.bad },
-            r.admin.ok ? "strong" : "weak"
-          ),
-          ...r.admin.problems.map(
-            (p) => h9("div", { key: p.message, style: styles.bad }, p.message)
-          )
-        ]) : null,
-        h9("h2", { style: styles.subtitle }, "Issued tokens"),
-        r?.issued === null ? h9(
+        h10("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Root token"),
+        r ? h10(
+          "div",
+          { style: { ...styles.card, display: "flex", gap: "12px", alignItems: "flex-start" } },
+          [
+            icon("lock", 18, { marginTop: "2px" }),
+            h10("div", [
+              pill(r.admin.ok ? "ok" : "bad", r.admin.ok ? "strong" : "weak"),
+              ...r.admin.problems.map(
+                (p) => h10(
+                  "div",
+                  {
+                    key: p.message,
+                    style: {
+                      marginTop: "6px",
+                      color: "var(--fonderie-danger,#e00)",
+                      fontSize: "13px"
+                    }
+                  },
+                  p.message
+                )
+              )
+            ])
+          ]
+        ) : null,
+        h10("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? h10(
           "p",
           { style: styles.muted },
           "Issuing is off \u2014 give AdminModule a store and run its migrations."
         ) : [
-          minted.value ? h9("p", { style: styles.ok }, [
-            "Copy this now \u2014 it is never shown again. ",
-            h9("span", { style: styles.mono }, minted.value.token),
-            ` (${minted.value.name})`
-          ]) : null,
-          h9(
+          minted.value ? h10(
+            "div",
+            {
+              style: {
+                ...styles.notice,
+                background: "color-mix(in srgb, var(--fonderie-accent,#00d294) 10%, transparent)",
+                borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
+              }
+            },
+            [
+              h10("strong", "Copy this now \u2014 it is never shown again."),
+              ` (${minted.value.name})`,
+              h10(
+                "div",
+                {
+                  style: {
+                    ...styles.code,
+                    display: "block",
+                    marginTop: "8px",
+                    padding: "8px 10px",
+                    wordBreak: "break-all"
+                  }
+                },
+                minted.value.token
+              )
+            ]
+          ) : null,
+          h10(
             "form",
             {
               style: styles.toolbar,
@@ -582,49 +1271,60 @@ var TokensScreen = defineComponent8({
               }
             },
             [
-              h9("input", {
+              h10("input", {
                 value: name.value,
                 onInput: (e) => name.value = e.target.value,
                 placeholder: "name",
-                style: { ...styles.button, cursor: "text" },
+                style: styles.input,
                 "aria-label": "Name"
               }),
               ...ALL.map(
-                (s) => h9("label", { key: s, style: { ...styles.badge, cursor: "pointer" } }, [
-                  h9("input", {
-                    type: "checkbox",
-                    checked: scopes.value.includes(s),
-                    onChange: () => toggle(s)
-                  }),
-                  ` ${s}`
-                ])
+                (s) => h10(
+                  "label",
+                  {
+                    key: s,
+                    style: {
+                      ...styles.badge,
+                      cursor: "pointer",
+                      height: "32px",
+                      boxSizing: "border-box",
+                      padding: "0 10px",
+                      fontSize: "13px"
+                    }
+                  },
+                  [
+                    h10("input", {
+                      type: "checkbox",
+                      checked: scopes.value.includes(s),
+                      onChange: () => toggle(s)
+                    }),
+                    ` ${s}`
+                  ]
+                )
               ),
-              h9("input", {
+              h10("input", {
                 value: days.value,
                 onInput: (e) => days.value = e.target.value,
                 placeholder: "days (optional)",
-                style: { ...styles.button, cursor: "text", width: "140px" },
+                style: { ...styles.input, width: "140px" },
                 "aria-label": "Days"
               }),
-              h9(
+              h10(
                 "button",
                 {
                   type: "submit",
-                  style: styles.button,
+                  style: styles.buttonPrimary,
                   disabled: !name.value.trim() || scopes.value.length === 0 || isLoading.value
                 },
-                "Issue"
+                [icon("plus", 14), "Issue token"]
               )
             ]
           ),
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t2) => h9("tr", { key: t2.id }, [
-                td([
-                  t2.name,
-                  t2.revokedAt ? h9("span", { style: styles.badge }, " revoked") : ""
-                ]),
+              (t2) => h10("tr", { key: t2.id }, [
+                td([t2.name, t2.revokedAt ? [" ", pill("neutral", "revoked")] : ""]),
                 td(t2.scopes.join(", "), styles.mono),
                 td(
                   `${new Date(t2.createdAt).toLocaleDateString()} \xB7 ${t2.createdBy}`,
@@ -639,11 +1339,11 @@ var TokensScreen = defineComponent8({
                   styles.muted
                 ),
                 td(
-                  t2.revokedAt ? "" : h9(
+                  t2.revokedAt ? "" : h10(
                     "button",
                     {
                       type: "button",
-                      style: styles.button,
+                      style: styles.buttonDanger,
                       onClick: () => {
                         if (window.confirm(
                           `Revoke "${t2.name}"? Anything using it stops working immediately.`
@@ -657,21 +1357,25 @@ var TokensScreen = defineComponent8({
                 )
               ])
             )
-          ) : h9("p", { style: styles.muted }, "None issued.")
+          ) : empty(
+            "No scoped tokens yet",
+            "Issue a read-only token for a dashboard or a teammate instead of sharing the root.",
+            "tokens"
+          )
         ],
-        h9("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r && r.legacy.length === 0 ? h9(
+        h10("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r && r.legacy.length === 0 ? h10(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
-        ) : h9(
+        ) : h10(
           "ul",
           { style: styles.list },
           (r?.legacy ?? []).map(
-            (l) => h9("li", { key: l.module, style: styles.row }, [
-              h9("span", { style: styles.mono }, l.module),
+            (l) => h10("li", { key: l.module, style: styles.row }, [
+              h10("span", { style: styles.mono }, l.module),
               " ",
-              h9(
+              h10(
                 "span",
                 { style: styles.muted },
                 "still registers its standalone routes with its own token (deprecated)"
@@ -692,7 +1396,7 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent9, h as h10, ref as ref2 } from "vue";
+import { computed, defineComponent as defineComponent9, h as h11, ref as ref3 } from "vue";
 var UsersScreen = defineComponent9({
   name: "FonderieUsersScreen",
   props: {
@@ -700,9 +1404,9 @@ var UsersScreen = defineComponent9({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const input = ref2("");
-    const email = ref2("");
-    const selectedId = ref2("");
+    const input = ref3("");
+    const email = ref3("");
+    const selectedId = ref3("");
     const list = useAdminUsers(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
@@ -712,8 +1416,8 @@ var UsersScreen = defineComponent9({
     const sessions = useAdminUserSessions(props.client, userId);
     const history = useAdminLoginHistory(props.client, userId, { limit: 20 });
     const showList = computed(() => !email.value && !selectedId.value);
-    const yesNo = (v) => h10("span", { style: v ? styles.ok : styles.muted }, v ? "yes" : "no");
-    const row = (k, v) => h10("tr", [td(k), td(v)]);
+    const yesNo = (v) => v ? pill("ok", "yes") : pill("neutral", "no");
+    const row = (k, v) => h11("tr", [td(k), td(v)]);
     const clear = () => {
       email.value = "";
       selectedId.value = "";
@@ -721,9 +1425,12 @@ var UsersScreen = defineComponent9({
     };
     return () => {
       const u = user.value;
-      return h10("div", { style: styles.container }, [
-        h10("h1", { style: styles.title }, "Users"),
-        h10(
+      return h11("div", { style: styles.container }, [
+        pageHeader(
+          "Users",
+          "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
+        ),
+        h11(
           "form",
           {
             style: styles.toolbar,
@@ -734,75 +1441,67 @@ var UsersScreen = defineComponent9({
             }
           },
           [
-            h10("input", {
+            h11("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
               placeholder: "email address",
-              style: { ...styles.button, cursor: "text", minWidth: "280px" },
+              style: { ...styles.input, minWidth: "280px" },
               "aria-label": "Email"
             }),
-            h10(
+            h11(
               "button",
-              { type: "submit", style: styles.button, disabled: isLoading.value },
-              "Look up"
+              { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
+              [icon("search", 14), "Look up"]
             ),
-            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : refreshButton("\u2190 All users", false, clear)
+            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost)
           ]
         ),
-        showList.value ? h10("div", [
-          list.error.value ? h10("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
-          list.users.value.length === 0 && !list.isLoading.value ? h10("p", { style: styles.muted }, "No users yet.") : table(
+        showList.value ? h11("div", [
+          list.error.value ? h11("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.users.value.length === 0 && !list.isLoading.value ? empty("No users yet", "Sign-ups appear here as they happen.", "users") : table(
             ["Email", "Name", "Created", "Status"],
             list.users.value.map(
-              (u2) => h10("tr", { key: u2.id }, [
+              (u2) => h11("tr", { key: u2.id }, [
                 td(
-                  h10(
+                  h11(
                     "button",
                     {
                       type: "button",
-                      style: { ...styles.navItem, padding: 0 },
+                      style: styles.link,
                       onClick: () => selectedId.value = u2.id
                     },
                     u2.email
                   )
                 ),
                 td(
-                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h10("span", { style: styles.muted }, "\u2014")
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h11("span", { style: styles.muted }, "\u2014")
                 ),
                 td(new Date(u2.createdAt).toLocaleDateString()),
                 td(
-                  u2.suspended ? h10("span", { style: styles.badge }, "suspended") : u2.deletedAt ? h10("span", { style: styles.badge }, "deleted") : h10("span", { style: styles.muted }, "active")
+                  u2.suspended ? pill("warn", "suspended") : u2.deletedAt ? pill("neutral", "deleted") : pill("ok", "active")
                 )
               ])
             )
           ),
-          list.isLoading.value ? h10("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? h10(
-            "button",
-            {
-              type: "button",
-              style: { ...styles.button, marginTop: "8px" },
-              onClick: () => void list.loadMore()
-            },
-            "Load more"
-          ) : null
+          list.isLoading.value ? h11("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
         ]) : null,
-        error.value ? h10(
+        error.value ? h11(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
         u ? [
-          h10("h2", { style: styles.subtitle }, [
+          h11("h2", { style: styles.subtitle }, [
             u.firstName || u.lastName ? `${u.firstName} ${u.lastName}`.trim() : u.email,
             " ",
-            u.suspended ? h10("span", { style: styles.badge }, "suspended") : null,
-            u.deletedAt ? h10("span", { style: styles.badge }, "deleted") : null
+            u.suspended ? pill("warn", "suspended") : null,
+            u.deletedAt ? pill("neutral", "deleted") : null
           ]),
-          h10("table", { style: styles.table }, [
-            h10("tbody", [
-              row("id", h10("span", { style: styles.mono }, u.id)),
+          h11("table", { style: styles.table }, [
+            h11("tbody", [
+              row("id", h11("span", { style: styles.mono }, u.id)),
               row("email", [u.email, " \xB7 verified ", yesNo(u.isEmailVerified)]),
               row("MFA", yesNo(u.mfaEnabled)),
               row(
@@ -811,32 +1510,37 @@ var UsersScreen = defineComponent9({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h10("span", { style: styles.muted }, "never")
+                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h11("span", { style: styles.muted }, "never")
               ),
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          h10("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
-            u.suspended ? refreshButton("Unsuspend", isLoading.value, () => void unsuspend()) : refreshButton("Suspend", isLoading.value, () => void suspend()),
-            refreshButton(
+          h11("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+            u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
+              "Suspend",
+              isLoading.value,
+              () => void suspend(),
+              styles.buttonDanger
+            ),
+            actionButton(
               "Sign out everywhere",
               isLoading.value,
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          h10("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h10("p", { style: styles.muted }, "None.") : h10(
+          h11("h2", { style: styles.subtitle }, "Live sessions"),
+          sessions.sessions.value.length === 0 ? h11("p", { style: styles.muted }, "None.") : h11(
             "ul",
             { style: styles.list },
             sessions.sessions.value.map(
-              (s) => h10("li", { key: s.id, style: styles.row }, [
-                h10("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => h11("li", { key: s.id, style: styles.row }, [
+                h11("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                h10("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
+                h11("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
                 " ",
-                h10("span", { style: styles.muted }, s.userAgent ?? ""),
+                h11("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                h10(
+                h11(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -844,38 +1548,26 @@ var UsersScreen = defineComponent9({
               ])
             )
           ),
-          h10("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h10("p", { style: styles.muted }, "None recorded.") : h10(
+          h11("h2", { style: styles.subtitle }, "Recent sign-ins"),
+          history.events.value.length === 0 && !history.isLoading.value ? h11("p", { style: styles.muted }, "None recorded.") : h11(
             "ul",
             { style: styles.list },
             history.events.value.map(
-              (e) => h10("li", { key: e.id, style: styles.row }, [
-                h10(
-                  "span",
-                  { style: e.outcome === "success" ? styles.ok : styles.bad },
-                  e.outcome
-                ),
+              (e) => h11("li", { key: e.id, style: styles.row }, [
+                pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
                 " ",
-                h10("span", { style: styles.muted }, e.method),
+                h11("span", { style: styles.muted }, e.method),
                 " ",
-                h10("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                h11("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
                 " ",
-                h10("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
-                e.location?.proxy || e.location?.hosting ? h10("span", { style: styles.bad }, e.location.proxy ? " proxy/VPN" : " hosting") : "",
+                h11("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
+                e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
                 " ",
-                h10("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                h11("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
-          history.hasMore.value && !history.isLoading.value ? h10(
-            "button",
-            {
-              type: "button",
-              style: { ...styles.button, marginTop: "8px" },
-              onClick: () => void history.loadMore()
-            },
-            "Load more"
-          ) : null
+          history.hasMore.value && !history.isLoading.value ? loadMoreButton(() => void history.loadMore()) : null
         ] : null
       ]);
     };
@@ -884,7 +1576,7 @@ var UsersScreen = defineComponent9({
 
 // src/screens/CatalogScreen.ts
 import { useAdminCatalog } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent10, h as h11 } from "vue";
+import { defineComponent as defineComponent10, h as h12 } from "vue";
 var CatalogScreen = defineComponent10({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
@@ -893,35 +1585,42 @@ var CatalogScreen = defineComponent10({
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return h11("div", { style: styles.container }, [
-        h11("div", { style: styles.toolbar }, [
-          h11("h1", { style: { ...styles.title, marginBottom: 0 } }, "Catalog"),
-          refreshButton("Refresh", isLoading.value, () => void refresh())
-        ]),
-        error.value ? h11("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? h11("p", { style: styles.status }, "Loading\u2026") : null,
+      return h12("div", { style: styles.container }, [
+        pageHeader(
+          "Catalog",
+          "What you sell: plans as configured in code, and as stored in the database, side by side.",
+          [refreshButton("Refresh", isLoading.value, () => void refresh())]
+        ),
+        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? h12("p", { style: styles.status }, "Loading\u2026") : null,
         c ? [
-          h11("h2", { style: styles.subtitle }, "Configured (code)"),
-          h11(
+          h12("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
+          h12(
             "pre",
             {
               style: {
+                ...styles.card,
                 ...styles.mono,
-                background: "var(--fonderie-surface-alt,#fafafa)",
-                padding: "12px",
-                overflowX: "auto"
+                margin: 0,
+                overflowX: "auto",
+                maxHeight: "360px",
+                lineHeight: 1.6
               }
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          h11("h2", { style: styles.subtitle }, "Stored (database)"),
-          c.stored.length === 0 ? h11("p", { style: styles.muted }, "No stored plans.") : table(
+          h12("h2", { style: styles.subtitle }, "Stored (database)"),
+          c.stored.length === 0 ? empty(
+            "No stored plans",
+            "Plans are configured in code; nothing has been written to the database.",
+            "catalog"
+          ) : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => h11("tr", { key: p.id }, [
+              (p) => h12("tr", { key: p.id }, [
                 td([
-                  h11("strong", p.name),
-                  p.description ? h11("div", { style: styles.muted }, p.description) : ""
+                  h12("strong", p.name),
+                  p.description ? h12("div", { style: styles.muted }, p.description) : ""
                 ]),
                 td(String(p.tier)),
                 td(p.seats == null ? "\u221E" : String(p.seats)),
@@ -929,11 +1628,11 @@ var CatalogScreen = defineComponent10({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  h11(
+                  h12(
                     "button",
                     {
                       type: "button",
-                      style: styles.button,
+                      style: styles.buttonDanger,
                       onClick: () => {
                         if (window.confirm(`Delete stored plan "${p.name}"?`))
                           void deletePlan(p.id).catch(() => {
@@ -954,7 +1653,7 @@ var CatalogScreen = defineComponent10({
 
 // src/screens/SubscriberScreen.ts
 import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h12, ref as ref3 } from "vue";
+import { defineComponent as defineComponent11, h as h13, ref as ref4 } from "vue";
 var SubscriberScreen = defineComponent11({
   name: "FonderieSubscriberScreen",
   props: {
@@ -962,9 +1661,9 @@ var SubscriberScreen = defineComponent11({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const type = ref3("user");
-    const idInput = ref3("");
-    const subscriber = ref3(null);
+    const type = ref4("user");
+    const idInput = ref4("");
+    const subscriber = ref4(null);
     const list = useAdminSubscribers(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
     const open = (t2, id) => {
@@ -973,22 +1672,25 @@ var SubscriberScreen = defineComponent11({
       idInput.value = id;
       subscriber.value = { type: t2, id };
     };
-    const amount = ref3("");
-    const note = ref3("");
-    const granted = ref3(null);
-    const input = (model, placeholder, extra = {}) => h12("input", {
+    const amount = ref4("");
+    const note = ref4("");
+    const granted = ref4(null);
+    const input = (model, placeholder, extra = {}) => h13("input", {
       value: model.value,
       onInput: (e) => model.value = e.target.value,
       placeholder,
-      style: { ...styles.button, cursor: "text", ...extra },
+      style: { ...styles.input, ...extra },
       "aria-label": placeholder
     });
     return () => {
       const s = subscription.value;
       const w = wallet.value;
-      return h12("div", { style: styles.container }, [
-        h12("h1", { style: styles.title }, "Subscriber"),
-        h12(
+      return h13("div", { style: styles.container }, [
+        pageHeader(
+          "Subscribers",
+          "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
+        ),
+        h13(
           "form",
           {
             style: styles.toolbar,
@@ -999,26 +1701,26 @@ var SubscriberScreen = defineComponent11({
             }
           },
           [
-            h12(
+            h13(
               "select",
               {
                 value: type.value,
                 onChange: (e) => type.value = e.target.value,
-                style: styles.button,
+                style: styles.input,
                 "aria-label": "Type"
               },
               [
-                h12("option", { value: "user" }, "user"),
-                h12("option", { value: "workspace" }, "workspace")
+                h13("option", { value: "user" }, "user"),
+                h13("option", { value: "workspace" }, "workspace")
               ]
             ),
             input(idInput, "subscriber id", { minWidth: "280px" }),
-            h12(
+            h13(
               "button",
-              { type: "submit", style: styles.button, disabled: isLoading.value },
-              "Look up"
+              { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
+              [icon("search", 14), "Look up"]
             ),
-            subscriber.value ? h12(
+            subscriber.value ? h13(
               "button",
               {
                 type: "button",
@@ -1029,8 +1731,8 @@ var SubscriberScreen = defineComponent11({
                   granted.value = null;
                 }
               },
-              "\u2190 All subscribers"
-            ) : h12(
+              [icon("back", 14), "All subscribers"]
+            ) : h13(
               "button",
               {
                 type: "button",
@@ -1042,35 +1744,43 @@ var SubscriberScreen = defineComponent11({
             )
           ]
         ),
-        !subscriber.value ? h12("div", [
-          list.error.value ? h12("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
-          list.subscriptions.value.length === 0 && !list.isLoading.value ? h12("p", { style: styles.muted }, "No subscribers yet.") : table(
+        !subscriber.value ? h13("div", [
+          list.error.value ? h13("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.subscriptions.value.length === 0 && !list.isLoading.value ? empty(
+            "No subscribers yet",
+            "Subscriptions appear here once someone checks out.",
+            "subscriber"
+          ) : table(
             ["Subscriber", "Plan", "Status", "Renews"],
             list.subscriptions.value.map(
-              (sub) => h12("tr", { key: sub.id }, [
+              (sub) => h13("tr", { key: sub.id }, [
                 td(
-                  h12(
+                  h13(
                     "button",
                     {
                       type: "button",
-                      style: { ...styles.navItem, padding: 0, ...styles.mono },
+                      style: { ...styles.link, ...styles.mono },
                       onClick: () => open(sub.subscriberType, sub.subscriberId)
                     },
                     `${sub.subscriberType}/${sub.subscriberId}`
                   )
                 ),
                 td(`${sub.plan} \xB7 ${sub.interval}`),
+                td([
+                  pill(
+                    sub.status === "active" ? "ok" : sub.status === "trialing" ? "info" : sub.status === "past_due" ? "warn" : "neutral",
+                    sub.status
+                  ),
+                  sub.cancelAtPeriodEnd ? [" ", pill("warn", "cancels", false)] : null
+                ]),
                 td(
-                  sub.cancelAtPeriodEnd ? [sub.status, " ", h12("span", { style: styles.badge }, "cancels")] : sub.status
-                ),
-                td(
-                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h12("span", { style: styles.muted }, "\u2014")
+                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h13("span", { style: styles.muted }, "\u2014")
                 )
               ])
             )
           ),
-          list.isLoading.value ? h12("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? h12(
+          list.isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h13(
             "button",
             {
               type: "button",
@@ -1080,37 +1790,58 @@ var SubscriberScreen = defineComponent11({
             "Load more"
           ) : null
         ]) : null,
-        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
         subscriber.value && !isLoading.value ? [
-          h12("h2", { style: styles.subtitle }, "Subscription"),
-          s ? h12("table", { style: styles.table }, [
-            h12("tbody", [
-              h12("tr", [td("plan"), td([h12("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              h12("tr", [
+          h13("h2", { style: styles.subtitle }, "Subscription"),
+          s ? h13("table", { style: styles.table }, [
+            h13("tbody", [
+              h13("tr", [td("plan"), td([h13("strong", s.plan), ` \xB7 ${s.interval}`])]),
+              h13("tr", [
                 td("status"),
                 td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
               ]),
-              h12("tr", [
+              h13("tr", [
                 td("period"),
                 td(
                   `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
                 )
               ]),
-              h12("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
+              h13("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
             ])
-          ]) : h12("p", { style: styles.muted }, "No subscription."),
-          h12("h2", { style: styles.subtitle }, "Wallet"),
+          ]) : h13("p", { style: styles.muted }, "No subscription."),
+          h13("h2", { style: styles.subtitle }, "Wallet"),
           w ? [
-            h12("p", [
-              h12("strong", w.balance),
-              ` ${w.currency} `,
-              h12(
-                "span",
-                { style: styles.muted },
-                `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
-              )
-            ]),
-            h12(
+            h13(
+              "p",
+              {
+                style: {
+                  ...styles.card,
+                  display: "flex",
+                  alignItems: "baseline",
+                  gap: "8px",
+                  flexWrap: "wrap"
+                }
+              },
+              [
+                h13(
+                  "strong",
+                  {
+                    style: {
+                      fontSize: "22px",
+                      letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
+                    }
+                  },
+                  w.balance
+                ),
+                ` ${w.currency} `,
+                h13(
+                  "span",
+                  { style: styles.muted },
+                  `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
+                )
+              ]
+            ),
+            h13(
               "form",
               {
                 style: styles.toolbar,
@@ -1135,23 +1866,23 @@ var SubscriberScreen = defineComponent11({
               [
                 input(amount, "amount (minor units)"),
                 input(note, "reason (optional)", { minWidth: "220px" }),
-                h12(
+                h13(
                   "button",
                   {
                     type: "submit",
-                    style: styles.button,
+                    style: styles.buttonPrimary,
                     disabled: !/^\d+$/.test(amount.value.trim())
                   },
-                  "Grant"
+                  [icon("plus", 14), "Grant"]
                 ),
-                granted.value ? h12("span", { style: styles.ok }, granted.value) : null
+                granted.value ? h13("span", { style: styles.ok }, granted.value) : null
               ]
             ),
-            h12("h2", { style: styles.subtitle }, "Ledger"),
-            ledger.value.length === 0 ? h12("p", { style: styles.muted }, "Nothing moved yet.") : table(
+            h13("h2", { style: styles.subtitle }, "Ledger"),
+            ledger.value.length === 0 ? empty("Nothing moved yet", void 0, "subscriber") : table(
               ["When", "Kind", "Amount", "Note"],
               ledger.value.map(
-                (t2) => h12("tr", { key: t2.id }, [
+                (t2) => h13("tr", { key: t2.id }, [
                   td(new Date(t2.createdAt).toLocaleString(), styles.muted),
                   td(t2.type),
                   td(t2.amount, styles.mono),
@@ -1159,7 +1890,7 @@ var SubscriberScreen = defineComponent11({
                 ])
               )
             ),
-            hasMoreLedger.value ? h12(
+            hasMoreLedger.value ? h13(
               "button",
               {
                 type: "button",
@@ -1168,7 +1899,7 @@ var SubscriberScreen = defineComponent11({
               },
               "Load more"
             ) : null
-          ] : h12(
+          ] : h13(
             "p",
             { style: styles.muted },
             "No wallet \u2014 billing has no wallet configuration."
@@ -1181,7 +1912,7 @@ var SubscriberScreen = defineComponent11({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent12, h as h13, ref as ref4 } from "vue";
+import { defineComponent as defineComponent12, h as h14, ref as ref5 } from "vue";
 var AuditScreen = defineComponent12({
   name: "FonderieAuditScreen",
   props: {
@@ -1189,22 +1920,25 @@ var AuditScreen = defineComponent12({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = ref4({ workspaceId: "", type: "", actorId: "" });
-    const query = ref4({ limit: props.pageSize });
+    const draft = ref5({ workspaceId: "", type: "", actorId: "" });
+    const query = ref5({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
       props.client,
       query
     );
-    const field = (key, placeholder) => h13("input", {
+    const field = (key, placeholder) => h14("input", {
       value: draft.value[key],
       onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
       placeholder,
-      style: { ...styles.button, cursor: "text" },
+      style: styles.input,
       "aria-label": placeholder
     });
-    return () => h13("div", { style: styles.container }, [
-      h13("h1", { style: styles.title }, "Audit"),
-      h13(
+    return () => h14("div", { style: styles.container }, [
+      pageHeader(
+        "Audit",
+        "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
+      ),
+      h14(
         "form",
         {
           style: styles.toolbar,
@@ -1223,19 +1957,19 @@ var AuditScreen = defineComponent12({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          h13(
+          h14(
             "button",
-            { type: "submit", style: styles.button, disabled: isLoading.value },
-            "Filter"
+            { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
+            [icon("search", 14), "Filter"]
           ),
           refreshButton("Refresh", isLoading.value, () => void refresh())
         ]
       ),
-      error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-      events.value.length === 0 && !isLoading.value ? h13("p", { style: styles.muted }, "Nothing recorded for this filter.") : table(
+      error.value ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      events.value.length === 0 && !isLoading.value ? empty("Nothing recorded for this filter", void 0, "audit") : table(
         ["When", "Type", "Workspace", "Actor", "Request"],
         events.value.map(
-          (e) => h13("tr", { key: e.id }, [
+          (e) => h14("tr", { key: e.id }, [
             td(new Date(e.createdAt).toLocaleString(), styles.muted),
             td(e.type, styles.mono),
             td(String(e.payload["workspaceId"] ?? "\u2014"), styles.mono),
@@ -1244,16 +1978,8 @@ var AuditScreen = defineComponent12({
           ])
         )
       ),
-      isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
-      hasMore.value && !isLoading.value ? h13(
-        "button",
-        {
-          type: "button",
-          style: { ...styles.button, marginTop: "8px" },
-          onClick: () => void loadMore()
-        },
-        "Load more"
-      ) : null
+      isLoading.value ? h14("p", { style: styles.status }, "Loading\u2026") : null,
+      hasMore.value && !isLoading.value ? loadMoreButton(() => void loadMore()) : null
     ]);
   }
 });
@@ -1290,6 +2016,23 @@ var NAV = [
     ]
   }
 ];
+var ICON = {
+  attention: "attention",
+  modules: "modules",
+  environment: "environment",
+  doctor: "doctor",
+  routes: "routes",
+  users: "users",
+  catalog: "catalog",
+  subscriber: "subscriber",
+  settings: "settings",
+  templates: "templates",
+  audit: "audit",
+  log: "log",
+  tokens: "tokens",
+  migrations: "migrations"
+};
+var NARROW = "(max-width: 820px)";
 var AdminShell = defineComponent13({
   name: "FonderieAdminShell",
   props: {
@@ -1307,75 +2050,75 @@ var AdminShell = defineComponent13({
     environment: { type: String, default: void 0 },
     // Controlled navigation: pass `page` and listen to `navigate` to own the
     // URL. Omit `page` and the shell keeps it itself.
-    page: { type: String, default: void 0 }
+    page: { type: String, default: void 0 },
+    // Shown at the top of the sidebar. Defaults to "Admin".
+    appName: { type: String, default: "Admin" },
+    // A badge beside the name — the deployment's environment ("production").
+    // Production is tinted so an operator always knows where their clicks land.
+    envLabel: { type: String, default: void 0 }
   },
+  // `footer` slot: pinned to the bottom of the sidebar — session controls
+  // (theme, sign out). The React shell takes the same thing as a `footer` prop.
   emits: { navigate: (_page) => true },
-  setup(props, { emit }) {
-    const own = ref5("attention");
+  setup(props, { emit, slots }) {
+    const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
+    const narrow = ref6(query?.matches ?? false);
+    const drawer = ref6(false);
+    const onMedia = (e) => narrow.value = e.matches;
+    onMounted(() => query?.addEventListener("change", onMedia));
+    onBeforeUnmount(() => query?.removeEventListener("change", onMedia));
+    const own = ref6("attention");
     const current = computed2(() => props.page ?? own.value);
-    const editing = ref5(null);
+    const editing = ref6(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
+      drawer.value = false;
     };
-    const back = () => h14(
-      "button",
-      { type: "button", style: styles.button, onClick: () => editing.value = null },
-      "\u2190 Back"
-    );
+    const back = (label) => h15("div", { style: { padding: "24px 40px 0" } }, [
+      h15(
+        "button",
+        { type: "button", style: styles.buttonGhost, onClick: () => editing.value = null },
+        [icon("back", 14), label]
+      )
+    ]);
+    const missing = (text) => h15("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
     const body = () => {
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return h14(AttentionScreen, { client: c });
+          return h15(AttentionScreen, { client: c });
         case "modules":
-          return h14(ModulesScreen, { client: c });
+          return h15(ModulesScreen, { client: c });
         case "doctor":
-          return h14(DoctorScreen, { client: c });
+          return h15(DoctorScreen, { client: c });
         case "environment":
-          return h14(EnvironmentScreen, { client: c });
+          return h15(EnvironmentScreen, { client: c });
         case "routes":
-          return h14(RoutesScreen, { client: c });
+          return h15(RoutesScreen, { client: c });
         case "tokens":
-          return h14(TokensScreen, { client: c });
+          return h15(TokensScreen, { client: c });
         case "migrations":
-          return h14(MigrationsScreen, { client: c });
+          return h15(MigrationsScreen, { client: c });
         case "log":
-          return h14(AdminLogScreen, { client: c });
+          return h15(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h14(CatalogScreen, { client: props.billingClient }) : h14(
-            "p",
-            { style: styles.status },
-            "Pass a BillingAdminClient to see the catalog here."
-          );
+          return props.billingClient ? h15(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
         case "subscriber":
-          return props.billingClient ? h14(SubscriberScreen, { client: props.billingClient }) : h14(
-            "p",
-            { style: styles.status },
-            "Pass a BillingAdminClient to look up subscribers here."
-          );
+          return props.billingClient ? h15(SubscriberScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to look up subscribers here.");
         case "audit":
-          return props.auditClient ? h14(AuditScreen, { client: props.auditClient }) : h14(
-            "p",
-            { style: styles.status },
-            "Pass an AuditAdminClient to see the audit trail here."
-          );
+          return props.auditClient ? h15(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
         case "users":
-          return props.authClient ? h14(UsersScreen, { client: props.authClient }) : h14("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? h15(UsersScreen, { client: props.authClient }) : missing("Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
-          if (!cc)
-            return h14(
-              "p",
-              { style: styles.status },
-              "Pass a ConfigAdminClient to manage config and secrets here."
-            );
+          if (!cc) return missing("Pass a ConfigAdminClient to manage config and secrets here.");
           const e = editing.value;
           if (e && e.kind !== "template")
             return [
-              back(),
-              h14(ConfigEditorScreen, {
+              back("Config & secrets"),
+              h15(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -1383,7 +2126,7 @@ var AdminShell = defineComponent13({
                 onSaved: () => editing.value = null
               })
             ];
-          return h14(ConfigListScreen, {
+          return h15(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -1395,61 +2138,135 @@ var AdminShell = defineComponent13({
         }
         case "templates": {
           const kc = props.courierClient;
-          if (!kc)
-            return h14(
-              "p",
-              { style: styles.status },
-              "Pass a CourierAdminClient to manage templates here."
-            );
+          if (!kc) return missing("Pass a CourierAdminClient to manage templates here.");
           const e = editing.value;
           if (e?.kind === "template")
             return [
-              back(),
-              h14(TemplateEditorScreen, {
+              back("Templates"),
+              h15(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h14(TemplateListScreen, {
+          return h15(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
         }
       }
     };
-    return () => h14("div", { style: styles.shell }, [
-      h14(
-        "nav",
-        { style: styles.nav, "aria-label": "Admin" },
-        NAV.map((g) => {
-          const items = g.items.filter(
-            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient)
-          );
-          if (items.length === 0) return null;
-          return h14("div", { key: g.group }, [
-            h14("div", { style: styles.navGroup }, g.group),
-            ...items.map(
-              (i) => h14(
+    const visible = (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient);
+    const brand = () => {
+      const production = props.envLabel ? /^prod/i.test(props.envLabel) : false;
+      return h15("div", { style: styles.navBrand }, [
+        h15("div", { style: styles.navMark }, [icon("mark", 15)]),
+        h15("div", { style: { minWidth: 0, flex: 1 } }, [
+          h15("div", { style: styles.navBrandTitle }, props.appName),
+          props.envLabel ? h15(
+            "span",
+            {
+              style: {
+                ...styles.badge,
+                marginTop: "3px",
+                padding: "0 7px",
+                fontSize: "11px",
+                ...production ? {
+                  color: "var(--fonderie-danger,#e00)",
+                  borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 35%, transparent)"
+                } : {}
+              }
+            },
+            props.envLabel
+          ) : null
+        ]),
+        narrow.value ? h15(
+          "button",
+          {
+            type: "button",
+            style: styles.buttonGhost,
+            "aria-label": "Close menu",
+            onClick: () => drawer.value = false
+          },
+          [icon("close")]
+        ) : null
+      ]);
+    };
+    const nav = () => h15(
+      "nav",
+      {
+        style: {
+          ...styles.nav,
+          ...narrow.value ? { width: "280px", maxWidth: "85vw", boxShadow: "0 10px 40px rgba(0,0,0,.25)" } : {}
+        },
+        "aria-label": "Admin"
+      },
+      [
+        brand(),
+        h15(
+          "div",
+          { style: styles.navScroll },
+          NAV.map((g) => {
+            const items = g.items.filter(visible);
+            if (items.length === 0) return null;
+            return h15("div", { key: g.group }, [
+              h15("div", { style: styles.navGroup }, g.group),
+              ...items.map((i) => {
+                const active = current.value === i.page;
+                return h15(
+                  "button",
+                  {
+                    key: i.page,
+                    type: "button",
+                    class: "fonderie-admin-nav-item",
+                    style: { ...styles.navItem, ...active ? styles.navItemActive : {} },
+                    "aria-current": active ? "page" : void 0,
+                    onClick: () => go(i.page)
+                  },
+                  [icon(ICON[i.page], 16, active ? styles.navIconActive : void 0), i.label]
+                );
+              })
+            ]);
+          })
+        ),
+        slots["footer"] ? h15("div", { style: styles.navFooter }, slots["footer"]()) : null
+      ]
+    );
+    return () => {
+      const title = NAV.flatMap((g) => g.items).find((i) => i.page === current.value)?.label ?? "";
+      return h15(
+        "div",
+        { style: { ...styles.shell, ...narrow.value ? { flexDirection: "column" } : {} } },
+        [
+          ...narrow.value ? [
+            h15("div", { style: styles.topbar }, [
+              h15(
                 "button",
                 {
-                  key: i.page,
                   type: "button",
-                  style: {
-                    ...styles.navItem,
-                    ...current.value === i.page ? styles.navItemActive : {}
-                  },
-                  "aria-current": current.value === i.page ? "page" : void 0,
-                  onClick: () => go(i.page)
+                  style: styles.buttonGhost,
+                  "aria-label": "Open menu",
+                  "aria-expanded": drawer.value,
+                  onClick: () => drawer.value = true
                 },
-                i.label
-              )
-            )
-          ]);
-        })
-      ),
-      h14("main", { style: styles.main }, body())
-    ]);
+                [icon("menu")]
+              ),
+              h15("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
+              props.envLabel ? h15("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
+            ]),
+            drawer.value ? h15("div", { style: styles.drawer }, [
+              nav(),
+              h15("div", {
+                style: styles.scrim,
+                "aria-hidden": "true",
+                onClick: () => drawer.value = false
+              })
+            ]) : null
+          ] : [nav()],
+          h15("main", { class: "fonderie-admin-main", style: styles.main }, body())
+        ]
+      );
+    };
   }
 });
 export {