@medicine-wheel/app 0.4.13 → 0.5.1

package/app/globals.css

@@ -1,44 +1,48 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 @import "tailwindcss";
 @import "../src/ui-components/src/tokens.css";
 
+/*
+ * Tailwind theme mirrors tokens.css (the source of truth).
+ * Fonts arrive via next/font in app/layout.tsx as
+ * --font-fraunces / --font-inter / --font-jbmono.
+ */
 @theme inline {
-  --color-background: oklch(0.145 0 0);
-  --color-foreground: oklch(0.985 0 0);
-  --color-card: oklch(0.185 0 0);
-  --color-card-foreground: oklch(0.985 0 0);
-  --color-popover: oklch(0.185 0 0);
-  --color-popover-foreground: oklch(0.985 0 0);
-  --color-primary: oklch(0.785 0.115 85);
-  --color-primary-foreground: oklch(0.145 0 0);
-  --color-secondary: oklch(0.269 0 0);
-  --color-secondary-foreground: oklch(0.985 0 0);
-  --color-muted: oklch(0.269 0 0);
-  --color-muted-foreground: oklch(0.708 0 0);
-  --color-accent: oklch(0.269 0 0);
-  --color-accent-foreground: oklch(0.985 0 0);
-  --color-destructive: oklch(0.396 0.141 25.723);
-  --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.3 0 0);
-  --color-input: oklch(0.3 0 0);
-  --color-ring: oklch(0.785 0.115 85);
+  --color-background: var(--mw-bg);
+  --color-foreground: var(--mw-fg);
+  --color-card: var(--mw-card);
+  --color-card-foreground: var(--mw-fg);
+  --color-popover: var(--mw-card);
+  --color-popover-foreground: var(--mw-fg);
+  --color-primary: var(--mw-primary);
+  --color-primary-foreground: var(--mw-primary-fg);
+  --color-secondary: var(--mw-secondary);
+  --color-secondary-foreground: var(--mw-fg);
+  --color-muted: var(--mw-secondary);
+  --color-muted-foreground: var(--mw-muted);
+  --color-accent: var(--mw-secondary);
+  --color-accent-foreground: var(--mw-fg);
+  --color-destructive: var(--mw-destructive);
+  --color-destructive-foreground: var(--mw-fg);
+  --color-border: var(--mw-border);
+  --color-input: var(--mw-border);
+  --color-ring: var(--mw-ring);
   --radius: 0.625rem;
 
-  --color-east: oklch(0.85 0.15 85);
-  --color-south: oklch(0.55 0.22 25);
-  --color-west: oklch(0.25 0.05 270);
-  --color-north: oklch(0.92 0.01 0);
+  --color-east: var(--mw-east);
+  --color-south: var(--mw-south);
+  --color-west: var(--mw-west);
+  --color-north: var(--mw-north);
 
-  --color-node-human: oklch(0.72 0.15 55);
-  --color-node-land: oklch(0.6 0.16 145);
-  --color-node-spirit: oklch(0.6 0.18 300);
-  --color-node-ancestor: oklch(0.48 0.09 55);   /* deep copper — #8a5a2a */
-  --color-node-future: oklch(0.7 0.12 230);
-  --color-node-knowledge: oklch(0.83 0.18 110); /* lime-gold — #c8d42a */
+  --color-node-human: var(--mw-node-human);
+  --color-node-land: var(--mw-node-land);
+  --color-node-spirit: var(--mw-node-spirit);
+  --color-node-ancestor: var(--mw-node-ancestor);
+  --color-node-future: var(--mw-node-future);
+  --color-node-knowledge: var(--mw-node-knowledge);
 
-  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
-  --font-display: 'Stereohead', 'Nunito', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-sans: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
+  --font-display: var(--font-fraunces, 'Fraunces'), 'Iowan Old Style', Georgia, serif;
+  --font-mono: var(--font-jbmono, 'JetBrains Mono'), ui-monospace, monospace;
 }
 
 @layer base {
@@ -49,10 +53,44 @@
     @apply bg-background text-foreground;
     font-family: var(--font-sans);
   }
-  h1, h2 {
+  /* Display face is reserved for page titles + home hero (h1 only) */
+  h1 {
     font-family: var(--font-display);
-    font-weight: normal;
-    letter-spacing: 0.01em;
+    font-weight: var(--weight-medium);
+    letter-spacing: -0.01em;
+  }
+  h2 {
+    font-family: var(--font-sans);
+    font-weight: var(--weight-semibold);
+  }
+}
+
+/* Navigation — item color arrives via --nav-c (a token var, set inline) */
+@layer components {
+  .nav-item {
+    white-space: nowrap;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-muted-foreground);
+    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
+  }
+  .nav-item:hover {
+    color: var(--color-foreground);
+    background: color-mix(in srgb, var(--nav-c, var(--mw-muted)) 12%, transparent);
+  }
+  .nav-item--active {
+    color: var(--color-foreground);
+    background: var(--color-secondary);
+    box-shadow: inset 0 -2px 0 var(--nav-c, var(--mw-ring));
+  }
+  .nav-scroll {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .nav-scroll::-webkit-scrollbar {
+    display: none;
   }
 }
 
@@ -66,3 +104,7 @@
 }
 .animate-pulse-center { animation: pulse-center 3s ease-in-out infinite; }
 .animate-glow { animation: glow 2s ease-in-out infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-pulse-center, .animate-glow { animation: none; }
+}

package/app/graph/medicine-wheel-flow.css

@@ -0,0 +1,157 @@
+/**
+ * Medicine Wheel flow theme — React Flow v12 internals tuned to the
+ * midnight-indigo ground. Imported by app/graph/page.tsx AFTER
+ * `@xyflow/react/dist/style.css`.
+ *
+ * Palette rules (design-direction 2607):
+ * - Direction color = information. Nothing here claims a direction.
+ * - Ceremony gold #FFD700 is reserved for ceremony-honored elements,
+ *   so selection/interaction chrome uses neutral bone/slate tones.
+ */
+
+.react-flow.dark {
+  --xy-background-color: var(--mw-bg, #0a0a1a);
+  --xy-background-pattern-dots-color: rgba(255, 255, 255, 0.1);
+
+  --xy-edge-stroke: #55516a;
+  --xy-edge-stroke-selected: var(--mw-north, #f7f5f0);
+
+  --xy-connectionline-stroke: var(--mw-north, #f7f5f0);
+
+  --xy-controls-button-background-color: rgba(255, 255, 255, 0.06);
+  --xy-controls-button-background-color-hover: rgba(255, 255, 255, 0.14);
+  --xy-controls-button-color: #cbd5e1;
+  --xy-controls-button-color-hover: #ffffff;
+  --xy-controls-button-border-color: rgba(255, 255, 255, 0.1);
+  --xy-controls-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+  --xy-minimap-background-color: #101020;
+
+  --xy-selection-background-color: rgba(247, 245, 240, 0.05);
+  --xy-selection-border: 1px dashed rgba(247, 245, 240, 0.45);
+
+  --xy-attribution-background-color: transparent;
+}
+
+/* Controls: quiet panel that reads as part of the instrument */
+.react-flow.dark .react-flow__controls {
+  border-radius: 10px;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+}
+
+.react-flow.dark .react-flow__controls-button {
+  width: 28px;
+  height: 28px;
+}
+
+.react-flow.dark .react-flow__controls-button:focus-visible {
+  outline: 2px solid var(--mw-ring, #cbd5e1);
+  outline-offset: -2px;
+}
+
+/* MiniMap: rounded, bordered, round node dots */
+.react-flow.dark .react-flow__minimap {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ── Weaving relations ─────────────────────────────────────────────── */
+
+/* Cardinal source handles: hidden until the node is hovered/selected */
+.react-flow__node .mw-node-handle {
+  width: 9px;
+  height: 9px;
+  border-radius: 9999px;
+  background: var(--mw-north, #f7f5f0);
+  border: 1.5px solid var(--mw-bg, #0a0a1a);
+  opacity: 0;
+  /* React Flow positions handles via transform — never animate it here. */
+  transition: opacity 150ms ease;
+  cursor: crosshair;
+}
+
+.react-flow__node:hover .mw-node-handle,
+.react-flow__node.selected .mw-node-handle,
+.react-flow__node:focus-visible .mw-node-handle {
+  opacity: 0.9;
+}
+
+.react-flow__node .mw-node-handle:hover {
+  opacity: 1;
+}
+
+/* The in-flight thread: dashed, neutral — it only turns gold if the
+   relation is later ceremony-honored. */
+.react-flow.dark .react-flow__connectionline path {
+  stroke-dasharray: 8 4;
+  stroke-width: 1.75;
+}
+
+/* ── Context menus ─────────────────────────────────────────────────── */
+
+.mw-context-menu-item:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Node hover & focus states ─────────────────────────────────────── */
+
+.react-flow__node {
+  cursor: grab;
+}
+
+.react-flow__node.dragging {
+  cursor: grabbing;
+}
+
+.react-flow__node > div {
+  transition: transform 150ms ease;
+}
+
+.react-flow__node:hover > div {
+  transform: scale(1.06);
+}
+
+/* ── Hover neighbor-dimming: the circle holds its relations in light ── */
+
+.mw-hovering .react-flow__node:not(.mw-neighbor) {
+  opacity: 0.22;
+  transition: opacity 200ms ease;
+}
+
+.react-flow__node {
+  transition: opacity 200ms ease;
+}
+
+/* ── Selection halo breath ─────────────────────────────────────────── */
+
+@keyframes mw-halo-breathe {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.95;
+  }
+}
+
+.mw-selection-halo {
+  animation: mw-halo-breathe 2.4s var(--ease-in-out, ease-in-out) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-selection-halo {
+    animation: none;
+  }
+
+  .react-flow__node > div,
+  .react-flow__node,
+  .mw-hovering .react-flow__node:not(.mw-neighbor) {
+    transition: none;
+  }
+
+  .react-flow__node:hover > div {
+    transform: none;
+  }
+}

package/app/graph/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import "@xyflow/react/dist/style.css";
+import "./medicine-wheel-flow.css";
 
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import type { ChangeEvent } from "react";
@@ -22,6 +23,7 @@ import {
   applyWheelLayout,
   buildGraphData,
   type MWGraphData,
+  type MWGraphLink,
   type MWGraphNode,
   type MWGraphNodePositions,
 } from "@medicine-wheel/graph-viz";
@@ -85,10 +87,16 @@ function graphNodePositions(data: MWGraphData): MWGraphNodePositions {
   return positions;
 }
 
+const DIRECTION_NAMES = ["east", "south", "west", "north"] as const;
+type DirectionParam = (typeof DIRECTION_NAMES)[number];
+
 export default function GraphPage() {
   const router = useRouter();
   const [graph, setGraph] = useState<MWGraphData>({ nodes: [], links: [] });
   const [selectedNode, setSelectedNode] = useState<MWGraphNode | null>(null);
+  const [focusedNodeId, setFocusedNodeId] = useState<string | undefined>(undefined);
+  const [highlightDirection, setHighlightDirection] = useState<DirectionParam | undefined>(undefined);
+  const [radialSnap, setRadialSnap] = useState<"off" | "ring" | "sector">("off");
   const [loading, setLoading] = useState(true);
   const [showLabels, setShowLabels] = useState(true);
   const [animationsEnabled, setAnimationsEnabled] = useState(
@@ -153,6 +161,30 @@ export default function GraphPage() {
     setAnimationsEnabled(loadStoredGraphAnimationPreference());
   }, []);
 
+  // Deep links: ?node=<id> focuses a being; ?direction=<dir> keeps that
+  // quadrant's beings lit (arriving from the home wheel).
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const node = params.get("node");
+    if (node) setFocusedNodeId(node);
+    const direction = params.get("direction");
+    if (direction && (DIRECTION_NAMES as readonly string[]).includes(direction)) {
+      setHighlightDirection(direction as DirectionParam);
+    }
+  }, []);
+
+  // Surface the deep-linked node in the side panel once data arrives.
+  useEffect(() => {
+    if (!focusedNodeId || graph.nodes.length === 0) return;
+    const node = graph.nodes.find((n) => n.id === focusedNodeId);
+    if (node) setSelectedNode(node);
+  }, [focusedNodeId, graph.nodes]);
+
+  const graphData = useMemo<MWGraphData>(
+    () => (focusedNodeId ? { ...graph, focusedNodeId } : graph),
+    [graph, focusedNodeId],
+  );
+
   useEffect(() => {
     layoutStoreRef.current = layoutStore;
   }, [layoutStore]);
@@ -233,6 +265,31 @@ export default function GraphPage() {
     [router],
   );
 
+  const handleRelationCreate = useCallback(
+    async (sourceId: string, targetId: string) => {
+      try {
+        const res = await fetch("/api/edges", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            from_id: sourceId,
+            to_id: targetId,
+            relationship_type: "speaks-with",
+            strength: 0.5,
+          }),
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        toast.success("Relation woven — speaks-with");
+      } catch {
+        toast.error("Could not save the relation — restoring the canvas");
+      } finally {
+        // Reload canonical data: confirms the new thread or reverts it.
+        await loadData();
+      }
+    },
+    [loadData],
+  );
+
   const handleAnimationsEnabledChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       const enabled = event.target.checked;
@@ -245,6 +302,83 @@ export default function GraphPage() {
     [],
   );
 
+  const handleNodeCreateRequest = useCallback(
+    async (request: {
+      name: string;
+      type: string;
+      direction?: string;
+      position: { x: number; y: number };
+    }) => {
+      try {
+        const res = await fetch("/api/nodes", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: request.name,
+            type: request.type,
+            direction: request.direction,
+          }),
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const { node } = await res.json();
+        // Seat the new being exactly where the circle was opened.
+        if (node?.id) {
+          saveLayoutStore(
+            upsertActiveGraphLayout(layoutStoreRef.current, {
+              [node.id]: request.position,
+            }),
+          );
+        }
+        toast.success(`${request.name} placed in the ${request.direction ?? "center"}`);
+      } catch {
+        toast.error("Could not create the node");
+      } finally {
+        await loadData();
+      }
+    },
+    [loadData, saveLayoutStore],
+  );
+
+  const handleEdgeCeremonyRequest = useCallback(
+    async (link: MWGraphLink) => {
+      try {
+        const res = await fetch(
+          `/api/edges?from=${encodeURIComponent(link.source)}&to=${encodeURIComponent(link.target)}`,
+          {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ ceremony_honored: true }),
+          },
+        );
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        toast.success("Ceremony honored — the thread turns gold");
+      } catch {
+        toast.error("Could not honor the ceremony");
+      } finally {
+        await loadData();
+      }
+    },
+    [loadData],
+  );
+
+  const handleEdgeDeleteRequest = useCallback(
+    async (link: MWGraphLink) => {
+      try {
+        const res = await fetch(
+          `/api/edges?from=${encodeURIComponent(link.source)}&to=${encodeURIComponent(link.target)}`,
+          { method: "DELETE" },
+        );
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        toast.success("Relation released");
+      } catch {
+        toast.error("Could not release the relation");
+      } finally {
+        await loadData();
+      }
+    },
+    [loadData],
+  );
+
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
       <div className="max-w-7xl mx-auto">
@@ -264,6 +398,15 @@ export default function GraphPage() {
             >
               Labels {showLabels ? "ON" : "OFF"}
             </button>
+            <button
+              onClick={() =>
+                setRadialSnap((s) => (s === "off" ? "ring" : s === "ring" ? "sector" : "off"))
+              }
+              className={`px-3 py-1.5 rounded text-sm ${radialSnap !== "off" ? "bg-white/10" : "bg-white/5"}`}
+              title="Radial snapping: the wheel guides dragged beings — ring keeps them in their band, sector also inside their quadrant"
+            >
+              Snap {radialSnap === "off" ? "OFF" : radialSnap.toUpperCase()}
+            </button>
             <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10 inline-flex items-center gap-2">
               <RefreshCw className="h-4 w-4" /> Refresh
             </button>
@@ -294,7 +437,7 @@ export default function GraphPage() {
               </div>
             ) : (
               <MedicineWheelFlowGraph
-                data={graph}
+                data={graphData}
                 height={600}
                 darkMode
                 showNodeLabels={showLabels}
@@ -303,6 +446,14 @@ export default function GraphPage() {
                 onNodeClick={(node) => setSelectedNode(node)}
                 onNodeDoubleClick={navigateToNode}
                 onNodePositionsChange={handleNodePositionsChange}
+                enableConnections
+                onRelationCreate={handleRelationCreate}
+                onNodeOpen={navigateToNode}
+                onNodeCreateRequest={handleNodeCreateRequest}
+                onEdgeCeremonyRequest={handleEdgeCeremonyRequest}
+                onEdgeDeleteRequest={handleEdgeDeleteRequest}
+                highlightDirection={highlightDirection}
+                radialSnap={radialSnap}
               />
             )}
           </div>

package/app/layout.tsx

@@ -1,17 +1,46 @@
 import type { Metadata } from "next";
+import { Fraunces, Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "sonner";
 import { Navigation } from "@/components/navigation";
 
+// Display face — page titles + home hero only (see design tokens).
+const fraunces = Fraunces({
+  subsets: ["latin"],
+  variable: "--font-fraunces",
+  axes: ["opsz"],
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jbmono",
+});
+
 export const metadata: Metadata = {
-  title: "Medicine Wheel — Relational Research",
-  description: "Interactive visual layer for the Medicine Wheel — ceremonies, Four Directions, relational web, and narrative arcs",
+  title: {
+    default: "Medicine Wheel — Relational Research",
+    template: "%s · Medicine Wheel",
+  },
+  description:
+    "Interactive visual layer for the Medicine Wheel — ceremonies, Four Directions, relational web, and narrative arcs",
+  icons: {
+    icon: "/favicon.svg",
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${fraunces.variable} ${inter.variable} ${jetbrainsMono.variable}`}
+    >
       <body className="font-sans antialiased">
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} forcedTheme="dark">
           <Navigation />

package/app/narrative/beats/layout.tsx

@@ -0,0 +1,7 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Beats" };
+
+export default function BeatsLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/app/narrative/beats/page.tsx

@@ -2,9 +2,12 @@
 
 import { useEffect, useState } from "react";
 import type { FormEvent } from "react";
-import { type NarrativeBeat, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { type NarrativeBeat, type DirectionName } from "@/lib/types";
 import { toast } from "sonner";
 
+const dirVar = (d: string) => `var(--mw-${d})`;
+const dirInk = (d: string) => `var(--mw-${d}-ink)`;
+
 export default function BeatsPage() {
   const [beats, setBeats] = useState<NarrativeBeat[]>([]);
   const [viewMode, setViewMode] = useState<"timeline" | "direction">("timeline");
@@ -34,11 +37,11 @@ export default function BeatsPage() {
     };
     const res = await fetch("/api/narrative/beats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
     if (res.ok) {
-      toast.success("Beat created");
+      toast.success("Beat added");
       setShowForm(false);
       const data = await fetch("/api/narrative/beats").then((r) => r.json());
       setBeats(Array.isArray(data) ? data : []);
-    } else { toast.error("Failed"); }
+    } else { toast.error("Could not save the beat — check the form and try again"); }
   }
 
   // Direction summary
@@ -52,13 +55,13 @@ export default function BeatsPage() {
     <div className="p-6 max-w-6xl mx-auto">
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold">Narrative Beats</h1>
+          <h1 className="mw-h1">Narrative beats</h1>
           <p className="text-sm text-muted-foreground">{beats.length} beats across the Four Directions</p>
         </div>
         <div className="flex gap-2">
           <button onClick={() => setViewMode(viewMode === "timeline" ? "direction" : "timeline")}
-            className="px-3 py-1.5 rounded-md border text-sm">{viewMode === "timeline" ? "By Direction" : "Timeline"}</button>
-          <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ Add Beat</button>
+            className="px-3 py-1.5 rounded-md border text-sm hover:bg-secondary/60">{viewMode === "timeline" ? "By direction" : "Timeline"}</button>
+          <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90">Add beat</button>
         </div>
       </div>
 
@@ -66,9 +69,9 @@ export default function BeatsPage() {
       <div className="grid grid-cols-4 gap-3 mb-6">
         {directions.map((dir) => (
           <button key={dir} onClick={() => setFilterDir(filterDir === dir ? "all" : dir)}
-            className={`p-3 rounded-lg border text-center transition-all ${filterDir === dir ? "ring-2 ring-primary" : ""}`}
-            style={{ borderColor: DIRECTION_COLORS[dir] + "40" }}>
-            <span className="w-3 h-3 rounded-full inline-block mb-1" style={{ backgroundColor: DIRECTION_COLORS[dir] }} />
+            className={`p-3 rounded-lg border text-center transition-all hover:bg-secondary/40 ${filterDir === dir ? "ring-2 ring-primary" : ""}`}
+            style={{ borderColor: `var(--mw-${dir}-border)` }}>
+            <span className="w-3 h-3 rounded-full inline-block mb-1" style={{ backgroundColor: dirVar(dir) }} />
             <p className="text-sm capitalize font-medium">{dir}</p>
             <p className="text-lg font-bold">{dirCounts[dir]}</p>
             <p className="text-xs text-muted-foreground">{dirToPhase[dir]} {visitedDirs.has(dir) ? "✓" : ""}</p>
@@ -88,19 +91,19 @@ export default function BeatsPage() {
             <option value="1">Act 1 (East)</option><option value="2">Act 2 (South)</option><option value="3">Act 3 (West)</option><option value="4">Act 4 (North)</option>
           </select>
           <input name="learnings" placeholder="Learnings (comma-separated)" className="px-3 py-2 rounded-md border bg-background text-sm sm:col-span-2" />
-          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create Beat</button>
+          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm hover:opacity-90">Add beat</button>
         </form>
       )}
 
       {viewMode === "timeline" ? (
         <div className="relative pl-8">
           <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-border" />
-          {filteredBeats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats yet.</div>}
+          {filteredBeats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats yet. Add the first one to begin the arc.</div>}
           {filteredBeats.map((beat) => (
             <div key={beat.id} className="relative mb-4" onClick={() => setExpandedBeat(expandedBeat === beat.id ? null : beat.id)}>
-              <div className="absolute -left-5 top-4 w-3 h-3 rounded-full border-2 border-background" style={{ backgroundColor: DIRECTION_COLORS[beat.direction as DirectionName] }} />
+              <div className="absolute -left-5 top-4 w-3 h-3 rounded-full border-2 border-background" style={{ backgroundColor: dirVar(beat.direction) }} />
               <div className="border rounded-lg bg-card p-4 cursor-pointer hover:border-ring/50"
-                style={{ borderLeftColor: DIRECTION_COLORS[beat.direction as DirectionName], borderLeftWidth: 3 }}>
+                style={{ borderLeftColor: dirVar(beat.direction), borderLeftWidth: 3 }}>
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="font-medium">{beat.title}</h3>
@@ -125,7 +128,7 @@ export default function BeatsPage() {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           {directions.map((dir) => (
             <div key={dir} className="space-y-2">
-              <h3 className="font-semibold capitalize text-center py-2 rounded-md" style={{ backgroundColor: DIRECTION_COLORS[dir] + "20", color: DIRECTION_COLORS[dir] }}>
+              <h3 className="font-semibold capitalize text-center py-2 rounded-md" style={{ backgroundColor: `var(--mw-${dir}-tint)`, color: dirInk(dir) }}>
                 {dir} ({dirCounts[dir]})
               </h3>
               {beats.filter((b) => b.direction === dir).map((beat) => (

package/app/narrative/cycles/layout.tsx

@@ -0,0 +1,7 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Cycles" };
+
+export default function CyclesLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}