@growth-labs/cms 0.1.0

package/src/ui/screens/topics-data.ts

@@ -0,0 +1,75 @@
+export interface TopicSummary {
+	slug: string
+	label: string
+	count: number
+}
+
+export interface TopicsState {
+	loading: boolean
+	error: string | null
+	topics: TopicSummary[]
+	loaded: boolean
+}
+
+export type TopicsAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; topics: TopicSummary[] }
+	| { type: 'fetch-error'; error: string }
+	| { type: 'create-ok'; topic: TopicSummary }
+	| { type: 'rename-ok'; fromSlug: string; topic: TopicSummary }
+
+export function initTopicsState(): TopicsState {
+	return { loading: true, error: null, topics: [], loaded: false }
+}
+
+export function topicsReducer(state: TopicsState, action: TopicsAction): TopicsState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, topics: action.topics, loaded: true }
+		case 'fetch-error':
+			return { ...state, loading: false, error: action.error }
+		case 'create-ok':
+			return {
+				...state,
+				loading: false,
+				error: null,
+				loaded: true,
+				topics: [action.topic, ...state.topics.filter((topic) => topic.slug !== action.topic.slug)],
+			}
+		case 'rename-ok':
+			return {
+				...state,
+				loading: false,
+				error: null,
+				topics: state.topics.map((topic) =>
+					topic.slug === action.fromSlug ? action.topic : topic,
+				),
+			}
+		default:
+			return state
+	}
+}
+
+export function formatTopicSlug(topic: TopicSummary): string {
+	const label = topic.label.trim()
+	if (label && label !== topic.slug) return label
+	return topic.slug
+		.split('-')
+		.filter(Boolean)
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(' ')
+}
+
+export function topicAssignmentTotal(topics: TopicSummary[]): number {
+	return topics.reduce((sum, topic) => sum + topic.count, 0)
+}
+
+export function buildTopicRenameBody(label: string): { label: string } {
+	return { label: label.trim() }
+}
+
+export function buildTopicCreateBody(label: string): { label: string } {
+	return { label: label.trim() }
+}

package/src/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/src/ui/theme.ts

@@ -0,0 +1,104 @@
+// 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 interface AccentSet {
+	a: string
+	s: string
+	fg: string
+	tint: string
+	ring: string
+}
+export type AccentName = 'Ink blue' | 'Press red' | 'Forest' | 'Violet'
+
+export const ACCENTS: Record<AccentName, AccentSet> = {
+	'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: Record<AccentName, AccentSet> = {
+	'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 type ThemeMode = 'light' | 'dark'
+export type Density = 'compact' | 'regular' | 'comfy'
+export type PreviewPos = 'right' | 'bottom' | 'off'
+
+export const TWEAK_DEFAULTS = {
+	theme: 'dark' as ThemeMode,
+	accent: 'Ink blue' as AccentName,
+	density: 'regular' as Density,
+	previewPos: 'off' as PreviewPos,
+	serifDisplay: true,
+}
+
+const SERIF = '"Source Serif 4", Georgia, serif'
+const SANS = '"DM Sans", system-ui, sans-serif'
+
+export function serifVar(serifDisplay: boolean): string {
+	return serifDisplay ? SERIF : SANS
+}
+
+export function resolveAccentVars(theme: ThemeMode, accent: AccentName): Record<string, string> {
+	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,
+	}
+}

package/src/ui/tweaks.ts

@@ -0,0 +1,37 @@
+// 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 type TweakState = typeof TWEAK_DEFAULTS
+export const TWEAKS_KEY = 'masthead.tweaks'
+
+export function applyTweak(
+	prev: TweakState,
+	keyOrEdits: keyof TweakState | Partial<TweakState>,
+	val?: TweakState[keyof TweakState],
+): TweakState {
+	const edits =
+		typeof keyOrEdits === 'object' && keyOrEdits !== null
+			? keyOrEdits
+			: ({ [keyOrEdits]: val } as Partial<TweakState>)
+	return { ...prev, ...edits }
+}
+
+export function loadTweaks(store: Storage): TweakState {
+	try {
+		const raw = store.getItem(TWEAKS_KEY)
+		if (!raw) return { ...TWEAK_DEFAULTS }
+		return { ...TWEAK_DEFAULTS, ...(JSON.parse(raw) as Partial<TweakState>) }
+	} catch {
+		return { ...TWEAK_DEFAULTS }
+	}
+}
+
+export function saveTweaks(store: Storage, state: TweakState): void {
+	try {
+		store.setItem(TWEAKS_KEY, JSON.stringify(state))
+	} catch {
+		// storage may be unavailable (private mode); tweaks degrade to session-only.
+	}
+}

package/src/ui/use-hash-router.ts

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useState } from 'react'
+import { hashFor, parseHash, type Route } from './hash-router.js'
+
+export function useHashRouter(): { route: Route; navigate: (r: Route) => void } {
+	const [route, setRoute] = useState<Route>(() =>
+		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: Route) => {
+		location.hash = hashFor(r)
+	}, [])
+	return { route, navigate }
+}

package/src/ui/use-tweaks.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react'
+import { resolveAccentVars, serifVar } from './theme.js'
+import { applyTweak, loadTweaks, saveTweaks, type TweakState } from './tweaks.js'
+
+export function useTweaks(): {
+	t: TweakState
+	setTweak: (k: keyof TweakState | Partial<TweakState>, v?: TweakState[keyof TweakState]) => void
+} {
+	const [t, setState] = useState<TweakState>(() =>
+		typeof localStorage !== 'undefined' ? loadTweaks(localStorage) : ({} as TweakState),
+	)
+	const setTweak = useCallback(
+		(k: keyof TweakState | Partial<TweakState>, v?: TweakState[keyof TweakState]) => {
+			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 }
+}