@growth-labs/cms 0.1.0

package/dist/ui/styles/broadsheet.css

@@ -0,0 +1,394 @@
+/* ============================================================
+   BROADSHEET — publishing platform UI
+   Rooted in Fronts DNA: Source Serif 4 display, DM Sans UI,
+   DM Mono micro-labels, navy + gold. Its own product identity.
+   ============================================================ */
+
+:root {
+  /* Brand constants (shared across themes) */
+  --gold: #b8941b;
+  --gold-soft: #d4b88a;
+  --premium: #8c6d14;
+
+  /* Accent — overridden live by Tweaks (JS sets these). Default ink-blue. */
+  --accent: #0c4a6e;
+  --accent-strong: #075985;
+  --accent-fg: #ffffff;
+  --accent-tint: rgba(12, 74, 110, 0.08);
+  --accent-ring: rgba(12, 74, 110, 0.35);
+
+  /* Type */
+  --serif: "Source Serif 4", Georgia, serif;
+  --ui: "DM Sans", system-ui, sans-serif;
+  --mono: "DM Mono", ui-monospace, monospace;
+
+  /* Density scale (overridden by [data-density]) */
+  --row-h: 44px;
+  --pad: 16px;
+  --gap: 16px;
+  --radius: 10px;
+  --radius-sm: 7px;
+}
+
+[data-density="compact"] { --row-h: 38px; --pad: 12px; --gap: 12px; }
+[data-density="comfy"]   { --row-h: 52px; --pad: 22px; --gap: 22px; }
+
+/* ---------- LIGHT (default) ---------- */
+:root,
+[data-theme="light"] {
+  --bg: #f7f5f1;
+  --panel: #ffffff;
+  --panel-2: #fbfaf7;
+  --sidebar: #ffffff;
+  --sidebar-deep: #11151b;
+  --ink: #1a2332;
+  --ink-soft: #4a5562;
+  --ink-muted: #79828f;
+  --ink-faint: #a7adb6;
+  --border: #e7e2d9;
+  --border-soft: #efebe3;
+  --hairline: #ddd7cc;
+  --hover: #f3f0ea;
+  --field: #ffffff;
+  --field-border: #d9d3c8;
+  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.06);
+  --shadow-md: 0 8px 24px rgba(26, 35, 50, 0.10);
+  --shadow-lg: 0 20px 60px rgba(26, 35, 50, 0.18);
+  --green: #1d7a4d;
+  --green-tint: #e4f3ea;
+  --amber: #9a6a00;
+  --amber-tint: #f8eed5;
+  --red: #c0392b;
+  --red-tint: #f8e4e1;
+  --blue-tint: #e6eef5;
+  color-scheme: light;
+}
+
+/* ---------- DARK ---------- */
+[data-theme="dark"] {
+  --bg: #0c0f14;
+  --panel: #14181f;
+  --panel-2: #11151b;
+  --sidebar: #0b0e12;
+  --sidebar-deep: #07090c;
+  --ink: #e9ecf1;
+  --ink-soft: #aeb6c2;
+  --ink-muted: #79828f;
+  --ink-faint: #565f6c;
+  --border: #232a34;
+  --border-soft: #1b212a;
+  --hairline: #2a323d;
+  --hover: #1a202a;
+  --field: #11151b;
+  --field-border: #2c343f;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
+  --green: #4ec98a;
+  --green-tint: rgba(78, 201, 138, 0.14);
+  --amber: #e0b65a;
+  --amber-tint: rgba(224, 182, 90, 0.14);
+  --red: #ef6e62;
+  --red-tint: rgba(239, 110, 98, 0.14);
+  --blue-tint: rgba(76, 154, 232, 0.14);
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--ui);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+#root { height: 100%; }
+
+button { font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: 0; color: inherit; }
+input, textarea, select { font-family: inherit; }
+::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
+
+/* Scrollbars */
+*::-webkit-scrollbar { width: 11px; height: 11px; }
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--ink) 18%, transparent);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 30%, transparent); background-clip: padding-box; }
+*::-webkit-scrollbar-track { background: transparent; }
+
+/* ---------- Typographic helpers ---------- */
+.serif { font-family: var(--serif); }
+.mono { font-family: var(--mono); }
+.kicker {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tnum { font-variant-numeric: tabular-nums; }
+
+/* The signature Broadsheet "masthead rule": a hairline above a heavier rule */
+.masthead-rule {
+  border: 0;
+  height: 3px;
+  border-top: 1px solid var(--hairline);
+  border-bottom: 2px solid var(--ink);
+  background: transparent;
+}
+
+/* ---------- App shell ---------- */
+.app {
+  display: grid;
+  grid-template-columns: var(--sb-w, 248px) 1fr;
+  height: 100%;
+  overflow: hidden;
+  transition: grid-template-columns 0.22s ease;
+}
+.app[data-collapsed="true"] { --sb-w: 68px; }
+
+/* ---------- Sidebar ---------- */
+.sidebar {
+  background: var(--sidebar);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+.sb-brand {
+  display: flex; align-items: center; gap: 11px;
+  padding: 18px 18px 14px;
+}
+.sb-mark {
+  width: 30px; height: 30px; flex: none;
+  border-radius: 8px;
+  background: var(--ink);
+  color: #fff;
+  display: grid; place-items: center;
+}
+[data-theme="dark"] .sb-mark { background: var(--accent); }
+.sb-wordmark { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
+.sb-wordmark .dot { color: var(--accent); }
+
+.site-switch {
+  margin: 2px 12px 10px;
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--panel-2);
+  cursor: pointer;
+  transition: border-color .15s, background .15s;
+}
+.site-switch:hover { border-color: var(--accent-ring); }
+.site-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
+.site-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.site-meta { font-size: 11px; color: var(--ink-muted); }
+
+.nav-section { padding: 6px 12px; }
+.nav-label {
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
+  text-transform: uppercase; color: var(--ink-faint);
+  padding: 10px 10px 6px;
+}
+.nav-item {
+  display: flex; align-items: center; gap: 11px;
+  padding: 8px 10px; border-radius: var(--radius-sm);
+  color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
+  cursor: pointer; user-select: none;
+  transition: background .12s, color .12s;
+  position: relative;
+}
+.nav-item:hover { background: var(--hover); color: var(--ink); }
+.nav-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
+[data-theme="dark"] .nav-item.active { color: var(--ink); }
+.nav-item.active::before {
+  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
+}
+.nav-item .ni-icon { flex: none; color: currentColor; opacity: .9; }
+.nav-item .ni-count {
+  margin-left: auto; font-family: var(--mono); font-size: 11px;
+  color: var(--ink-muted); background: var(--hover); padding: 1px 7px; border-radius: 20px;
+}
+.nav-item.active .ni-count { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
+[data-collapsed="true"] .nav-item { justify-content: center; padding: 9px 0; }
+[data-collapsed="true"] .nav-label,
+[data-collapsed="true"] .ni-label,
+[data-collapsed="true"] .ni-count,
+[data-collapsed="true"] .site-name,
+[data-collapsed="true"] .site-meta,
+[data-collapsed="true"] .sb-wordmark { display: none; }
+[data-collapsed="true"] .site-switch { justify-content: center; padding: 8px; }
+
+.sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
+.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
+.sb-user:hover { background: var(--hover); }
+.avatar {
+  width: 30px; height: 30px; border-radius: 50%; flex: none;
+  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
+  font-family: var(--ui);
+}
+
+/* ---------- Main column ---------- */
+.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
+.topbar {
+  height: 58px; flex: none;
+  display: flex; align-items: center; gap: 14px;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg) 86%, transparent);
+  backdrop-filter: blur(8px);
+  position: sticky; top: 0; z-index: 20;
+}
+.icon-btn {
+  width: 34px; height: 34px; flex: none; border-radius: 8px;
+  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
+  display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s;
+}
+.icon-btn:hover { background: var(--hover); color: var(--ink); }
+
+.search {
+  flex: 1; max-width: 460px;
+  display: flex; align-items: center; gap: 9px;
+  height: 36px; padding: 0 12px;
+  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
+  color: var(--ink-muted); font-size: 13px;
+}
+.search input { border: 0; background: transparent; outline: none; color: var(--ink); flex: 1; font-size: 13px; }
+.search .kbd {
+  font-family: var(--mono); font-size: 10px; color: var(--ink-muted);
+  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
+}
+
+.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
+.page { padding: 26px 30px 60px; max-width: 1280px; margin: 0 auto; }
+.page-wide { max-width: none; }
+
+.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
+.page-title { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.05; }
+.page-sub { color: var(--ink-muted); font-size: 13.5px; margin-top: 6px; }
+
+/* ---------- Buttons ---------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
+  height: 36px; padding: 0 15px; border-radius: 9px;
+  font-size: 13px; font-weight: 600; border: 1px solid var(--field-border);
+  background: var(--panel); color: var(--ink); transition: all .13s ease;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--hover); border-color: var(--hairline); }
+.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
+.btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
+.btn.ghost { background: transparent; border-color: transparent; }
+.btn.ghost:hover { background: var(--hover); }
+.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1402; }
+.btn.gold:hover { filter: brightness(1.06); }
+.btn.danger { color: var(--red); border-color: transparent; background: transparent; }
+.btn.danger:hover { background: var(--red-tint); }
+
+/* ---------- Panels / cards ---------- */
+.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
+.panel-pad { padding: var(--pad); }
+.card-title { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
+
+/* ---------- Status pills ---------- */
+.pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
+  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
+  border: 1px solid transparent; white-space: nowrap;
+}
+.pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill.published { color: var(--green); background: var(--green-tint); }
+.pill.draft { color: var(--ink-muted); background: var(--hover); }
+.pill.review { color: var(--amber); background: var(--amber-tint); }
+.pill.scheduled { color: var(--accent); background: var(--accent-tint); }
+.pill.processing { color: var(--amber); background: var(--amber-tint); }
+
+.type-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
+}
+
+/* ---------- Tables ---------- */
+.tbl { width: 100%; border-collapse: collapse; }
+.tbl thead th {
+  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--ink-muted); font-weight: 500; text-align: left;
+  padding: 0 14px 11px; border-bottom: 1px solid var(--border);
+}
+.tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
+.tbl tbody tr { cursor: pointer; transition: background .1s; }
+.tbl tbody tr:hover { background: var(--hover); }
+.tbl tbody tr:last-child td { border-bottom: 0; }
+
+/* ---------- Forms ---------- */
+.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
+.field-label .req { color: var(--red); }
+.input, .textarea, .selectbox {
+  width: 100%; background: var(--field); border: 1px solid var(--field-border);
+  border-radius: var(--radius-sm); color: var(--ink); font-size: 14px;
+  padding: 10px 12px; outline: none; transition: border-color .14s, box-shadow .14s;
+}
+.input:focus, .textarea:focus, .selectbox:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
+.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
+.textarea { resize: vertical; line-height: 1.6; }
+.help { font-size: 12px; color: var(--ink-muted); margin-top: 6px; line-height: 1.5; }
+
+/* segmented control */
+.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
+.seg button {
+  border: 0; background: transparent; color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
+  padding: 6px 13px; border-radius: 6px; transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
+}
+.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
+[data-theme="dark"] .seg button.on { background: var(--hover); }
+
+/* ---------- Misc ---------- */
+.divider { height: 1px; background: var(--border); border: 0; margin: var(--gap) 0; }
+
+/* responsive grid helpers */
+.grid-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
+.grid-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; }
+.grid-split-wide { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); align-items: start; }
+@media (max-width: 1080px) {
+  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-split, .grid-split-wide { grid-template-columns: 1fr; }
+}
+.tag-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; color: var(--ink-soft); background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px;
+}
+.tag-chip .x { color: var(--ink-faint); }
+.tag-chip .x:hover { color: var(--red); }
+
+@keyframes fadeIn { from { transform: translateY(8px); } to { transform: none; } }
+@keyframes fadeOnly { from { transform: translateY(3px); } to { transform: none; } }
+@media (prefers-reduced-motion: no-preference) {
+  .fade-in { animation: fadeIn .28s ease; }
+  .fade-only { animation: fadeOnly .2s ease; }
+}
+
+.skeleton-shimmer { background: linear-gradient(90deg, var(--hover) 0%, var(--panel-2) 50%, var(--hover) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
+@keyframes shimmer { to { background-position: -200% 0; } }
+
+/* command palette / modal scrim */
+.scrim { position: fixed; inset: 0; background: rgba(8, 11, 16, 0.55); backdrop-filter: blur(3px); z-index: 80; display: grid; place-items: flex-start center; animation: fadeOnly .15s ease; }
+[data-theme="dark"] .scrim { background: rgba(0,0,0,0.62); }
+
+/* tooltip dots used in calendar / analytics */
+.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
+.spark span { width: 6px; border-radius: 2px; background: var(--accent); opacity: .85; }

package/dist/ui/theme.d.ts

@@ -0,0 +1,23 @@
+export interface AccentSet {
+    a: string;
+    s: string;
+    fg: string;
+    tint: string;
+    ring: string;
+}
+export type AccentName = 'Ink blue' | 'Press red' | 'Forest' | 'Violet';
+export declare const ACCENTS: Record<AccentName, AccentSet>;
+export declare const ACCENTS_DARK: Record<AccentName, AccentSet>;
+export type ThemeMode = 'light' | 'dark';
+export type Density = 'compact' | 'regular' | 'comfy';
+export type PreviewPos = 'right' | 'bottom' | 'off';
+export declare const TWEAK_DEFAULTS: {
+    theme: ThemeMode;
+    accent: AccentName;
+    density: Density;
+    previewPos: PreviewPos;
+    serifDisplay: boolean;
+};
+export declare function serifVar(serifDisplay: boolean): string;
+export declare function resolveAccentVars(theme: ThemeMode, accent: AccentName): Record<string, string>;
+//# sourceMappingURL=theme.d.ts.map

package/dist/ui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,SAAS;IACzB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACZ;AACD,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEvE,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,CA6BjD,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,CA6BtD,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AACxC,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AACrD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEnD,eAAO,MAAM,cAAc;WACT,SAAS;YACJ,UAAU;aACV,OAAO;gBACR,UAAU;;CAE/B,CAAA;AAKD,wBAAgB,QAAQ,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAEtD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU9F"}

package/dist/ui/theme.js

@@ -0,0 +1,87 @@
+// src/ui/theme.ts — theme tokens ported from the resolved Broadsheet design
+// (app.jsx). The accent/serif vars are applied to documentElement at runtime by
+// the useTweaks effect; broadsheet.css carries the rest.
+export const ACCENTS = {
+    'Ink blue': {
+        a: '#0c4a6e',
+        s: '#075985',
+        fg: '#ffffff',
+        tint: 'rgba(12,74,110,0.09)',
+        ring: 'rgba(12,74,110,0.38)',
+    },
+    'Press red': {
+        a: '#b23a2e',
+        s: '#962f25',
+        fg: '#ffffff',
+        tint: 'rgba(178,58,46,0.10)',
+        ring: 'rgba(178,58,46,0.38)',
+    },
+    Forest: {
+        a: '#1f6b4a',
+        s: '#19583d',
+        fg: '#ffffff',
+        tint: 'rgba(31,107,74,0.10)',
+        ring: 'rgba(31,107,74,0.38)',
+    },
+    Violet: {
+        a: '#5b4bc4',
+        s: '#4c3ea8',
+        fg: '#ffffff',
+        tint: 'rgba(91,75,196,0.10)',
+        ring: 'rgba(91,75,196,0.38)',
+    },
+};
+export const ACCENTS_DARK = {
+    'Ink blue': {
+        a: '#4c9ae8',
+        s: '#3b86d4',
+        fg: '#06121d',
+        tint: 'rgba(76,154,232,0.16)',
+        ring: 'rgba(76,154,232,0.45)',
+    },
+    'Press red': {
+        a: '#ef6e62',
+        s: '#e05348',
+        fg: '#1d0a08',
+        tint: 'rgba(239,110,98,0.16)',
+        ring: 'rgba(239,110,98,0.45)',
+    },
+    Forest: {
+        a: '#4ec98a',
+        s: '#3bb476',
+        fg: '#06160f',
+        tint: 'rgba(78,201,138,0.16)',
+        ring: 'rgba(78,201,138,0.45)',
+    },
+    Violet: {
+        a: '#9d8df0',
+        s: '#8978e6',
+        fg: '#0e0a1d',
+        tint: 'rgba(157,141,240,0.16)',
+        ring: 'rgba(157,141,240,0.45)',
+    },
+};
+export const TWEAK_DEFAULTS = {
+    theme: 'dark',
+    accent: 'Ink blue',
+    density: 'regular',
+    previewPos: 'off',
+    serifDisplay: true,
+};
+const SERIF = '"Source Serif 4", Georgia, serif';
+const SANS = '"DM Sans", system-ui, sans-serif';
+export function serifVar(serifDisplay) {
+    return serifDisplay ? SERIF : SANS;
+}
+export function resolveAccentVars(theme, accent) {
+    const table = theme === 'dark' ? ACCENTS_DARK : ACCENTS;
+    const set = table[accent] ?? table['Ink blue'];
+    return {
+        '--accent': set.a,
+        '--accent-strong': set.s,
+        '--accent-fg': set.fg,
+        '--accent-tint': set.tint,
+        '--accent-ring': set.ring,
+    };
+}
+//# sourceMappingURL=theme.js.map

package/dist/ui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,gFAAgF;AAChF,yDAAyD;AAWzD,MAAM,CAAC,MAAM,OAAO,GAAkC;IACrD,UAAU,EAAE;QACX,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,WAAW,EAAE;QACZ,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;CACD,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAkC;IAC1D,UAAU,EAAE;QACX,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,WAAW,EAAE;QACZ,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,wBAAwB;KAC9B;CACD,CAAA;AAMD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,KAAK,EAAE,MAAmB;IAC1B,MAAM,EAAE,UAAwB;IAChC,OAAO,EAAE,SAAoB;IAC7B,UAAU,EAAE,KAAmB;IAC/B,YAAY,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,KAAK,GAAG,kCAAkC,CAAA;AAChD,MAAM,IAAI,GAAG,kCAAkC,CAAA;AAE/C,MAAM,UAAU,QAAQ,CAAC,YAAqB;IAC7C,OAAO,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAgB,EAAE,MAAkB;IACrE,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IACvD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,CAAA;IAC9C,OAAO;QACN,UAAU,EAAE,GAAG,CAAC,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACxB,aAAa,EAAE,GAAG,CAAC,EAAE;QACrB,eAAe,EAAE,GAAG,CAAC,IAAI;QACzB,eAAe,EAAE,GAAG,CAAC,IAAI;KACzB,CAAA;AACF,CAAC"}

package/dist/ui/tweaks.d.ts

@@ -0,0 +1,7 @@
+import { TWEAK_DEFAULTS } from './theme.js';
+export type TweakState = typeof TWEAK_DEFAULTS;
+export declare const TWEAKS_KEY = "masthead.tweaks";
+export declare function applyTweak(prev: TweakState, keyOrEdits: keyof TweakState | Partial<TweakState>, val?: TweakState[keyof TweakState]): TweakState;
+export declare function loadTweaks(store: Storage): TweakState;
+export declare function saveTweaks(store: Storage, state: TweakState): void;
+//# sourceMappingURL=tweaks.d.ts.map

package/dist/ui/tweaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tweaks.d.ts","sourceRoot":"","sources":["../../src/ui/tweaks.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,MAAM,MAAM,UAAU,GAAG,OAAO,cAAc,CAAA;AAC9C,eAAO,MAAM,UAAU,oBAAoB,CAAA;AAE3C,wBAAgB,UAAU,CACzB,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,EAClD,GAAG,CAAC,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC,GAChC,UAAU,CAMZ;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU,CAQrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAMlE"}

package/dist/ui/tweaks.js

@@ -0,0 +1,31 @@
+// src/ui/tweaks.ts — the persisted display-tweak state (theme/accent/density/
+// serif/preview), ported from the design's useTweaks but localStorage-only
+// (the design's window.parent.postMessage edit-mode channel is dropped).
+import { TWEAK_DEFAULTS } from './theme.js';
+export const TWEAKS_KEY = 'masthead.tweaks';
+export function applyTweak(prev, keyOrEdits, val) {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+        ? keyOrEdits
+        : { [keyOrEdits]: val };
+    return { ...prev, ...edits };
+}
+export function loadTweaks(store) {
+    try {
+        const raw = store.getItem(TWEAKS_KEY);
+        if (!raw)
+            return { ...TWEAK_DEFAULTS };
+        return { ...TWEAK_DEFAULTS, ...JSON.parse(raw) };
+    }
+    catch {
+        return { ...TWEAK_DEFAULTS };
+    }
+}
+export function saveTweaks(store, state) {
+    try {
+        store.setItem(TWEAKS_KEY, JSON.stringify(state));
+    }
+    catch {
+        // storage may be unavailable (private mode); tweaks degrade to session-only.
+    }
+}
+//# sourceMappingURL=tweaks.js.map

package/dist/ui/tweaks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tweaks.js","sourceRoot":"","sources":["../../src/ui/tweaks.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,2EAA2E;AAC3E,yEAAyE;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,MAAM,CAAC,MAAM,UAAU,GAAG,iBAAiB,CAAA;AAE3C,MAAM,UAAU,UAAU,CACzB,IAAgB,EAChB,UAAkD,EAClD,GAAkC;IAElC,MAAM,KAAK,GACV,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,IAAI;QACpD,CAAC,CAAC,UAAU;QACZ,CAAC,CAAE,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAA0B,CAAA;IAClD,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAc;IACxC,IAAI,CAAC;QACJ,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QACrC,IAAI,CAAC,GAAG;YAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAA;QACtC,OAAO,EAAE,GAAG,cAAc,EAAE,GAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAyB,EAAE,CAAA;IAC1E,CAAC;IAAC,MAAM,CAAC;QACR,OAAO,EAAE,GAAG,cAAc,EAAE,CAAA;IAC7B,CAAC;AACF,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAc,EAAE,KAAiB;IAC3D,IAAI,CAAC;QACJ,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IACjD,CAAC;IAAC,MAAM,CAAC;QACR,6EAA6E;IAC9E,CAAC;AACF,CAAC"}

package/dist/ui/use-hash-router.d.ts

@@ -0,0 +1,6 @@
+import { type Route } from './hash-router.js';
+export declare function useHashRouter(): {
+    route: Route;
+    navigate: (r: Route) => void;
+};
+//# sourceMappingURL=use-hash-router.d.ts.map

package/dist/ui/use-hash-router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hash-router.d.ts","sourceRoot":"","sources":["../../src/ui/use-hash-router.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAEjE,wBAAgB,aAAa,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CAa9E"}

package/dist/ui/use-hash-router.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useState } from 'react';
+import { hashFor, parseHash } from './hash-router.js';
+export function useHashRouter() {
+    const [route, setRoute] = useState(() => typeof location !== 'undefined' ? parseHash(location.hash) : 'dashboard');
+    useEffect(() => {
+        const on = () => setRoute(parseHash(location.hash));
+        window.addEventListener('hashchange', on);
+        return () => window.removeEventListener('hashchange', on);
+    }, []);
+    const navigate = useCallback((r) => {
+        location.hash = hashFor(r);
+    }, []);
+    return { route, navigate };
+}
+//# sourceMappingURL=use-hash-router.js.map

package/dist/ui/use-hash-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hash-router.js","sourceRoot":"","sources":["../../src/ui/use-hash-router.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,kBAAkB,CAAA;AAEjE,MAAM,UAAU,aAAa;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,GAAG,EAAE,CAC9C,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CACxE,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAA;QACnD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;QACzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAQ,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA;AAC3B,CAAC"}

package/dist/ui/use-tweaks.d.ts

@@ -0,0 +1,6 @@
+import { type TweakState } from './tweaks.js';
+export declare function useTweaks(): {
+    t: TweakState;
+    setTweak: (k: keyof TweakState | Partial<TweakState>, v?: TweakState[keyof TweakState]) => void;
+};
+//# sourceMappingURL=use-tweaks.d.ts.map

package/dist/ui/use-tweaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tweaks.d.ts","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEjF,wBAAgB,SAAS,IAAI;IAC5B,CAAC,EAAE,UAAU,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC,KAAK,IAAI,CAAA;CAC/F,CAuBA"}

package/dist/ui/use-tweaks.js

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from 'react';
+import { resolveAccentVars, serifVar } from './theme.js';
+import { applyTweak, loadTweaks, saveTweaks } from './tweaks.js';
+export function useTweaks() {
+    const [t, setState] = useState(() => typeof localStorage !== 'undefined' ? loadTweaks(localStorage) : {});
+    const setTweak = useCallback((k, v) => {
+        setState((prev) => {
+            const next = applyTweak(prev, k, v);
+            if (typeof localStorage !== 'undefined')
+                saveTweaks(localStorage, next);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        const root = document.documentElement;
+        root.setAttribute('data-theme', t.theme);
+        root.setAttribute('data-density', t.density);
+        for (const [k, val] of Object.entries(resolveAccentVars(t.theme, t.accent)))
+            root.style.setProperty(k, val);
+        root.style.setProperty('--serif', serifVar(t.serifDisplay));
+    }, [t.theme, t.density, t.accent, t.serifDisplay]);
+    return { t, setTweak };
+}
+//# sourceMappingURL=use-tweaks.js.map

package/dist/ui/use-tweaks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tweaks.js","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAA;AAEjF,MAAM,UAAU,SAAS;IAIxB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,GAAG,EAAE,CAC/C,OAAO,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAE,EAAiB,CACnF,CAAA;IACD,MAAM,QAAQ,GAAG,WAAW,CAC3B,CAAC,CAAyC,EAAE,CAAgC,EAAE,EAAE;QAC/E,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YACjB,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YACnC,IAAI,OAAO,YAAY,KAAK,WAAW;gBAAE,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;YACvE,OAAO,IAAI,CAAA;QACZ,CAAC,CAAC,CAAA;IACH,CAAC,EACD,EAAE,CACF,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAA;QACrC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;QACxC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAC/B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;IAClD,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAA;AACvB,CAAC"}

package/dist/ui/workspace-context.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { CmsUser } from '../routes/context.js';
+export interface WorkspaceDescriptor {
+    id: string;
+    name: string;
+    meta: string;
+    color: string;
+}
+export interface WorkspaceState {
+    workspaces: WorkspaceDescriptor[];
+    activeId: string;
+    user: CmsUser | null;
+}
+export type WorkspaceAction = {
+    type: 'switch';
+    id: string;
+} | {
+    type: 'set-user';
+    user: CmsUser | null;
+};
+export declare function initialWorkspaceState(workspaces: WorkspaceDescriptor[], activeId: string, user: CmsUser | null): WorkspaceState;
+export declare function workspaceReducer(state: WorkspaceState, action: WorkspaceAction): WorkspaceState;
+interface WorkspaceContextValue {
+    state: WorkspaceState;
+    dispatch: (action: WorkspaceAction) => void;
+    active: WorkspaceDescriptor | undefined;
+}
+export declare function WorkspaceProvider(props: {
+    initial: WorkspaceState;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useWorkspace(): WorkspaceContextValue;
+export {};
+//# sourceMappingURL=workspace-context.d.ts.map