@medicine-wheel/app 0.4.12 → 0.5.0

package/app/ceremonies/page.tsx

@@ -3,11 +3,14 @@
 import { useCallback, useEffect, useState, Suspense, useMemo } from "react";
 import type { FormEvent } from "react";
 import { useSearchParams } from "next/navigation";
-import { type CeremonyLog, DIRECTION_COLORS, CEREMONY_ICONS, type DirectionName, type CeremonyType } from "@/lib/types";
+import { type CeremonyLog, CEREMONY_ICONS, type DirectionName, type CeremonyType } from "@/lib/types";
 import { extractCeremonyLogs } from "@/lib/ceremony-response";
 import { relativeTime, absoluteTime } from "@/lib/format-time";
 import { toast } from "sonner";
 
+const dirVar = (d: string) => `var(--mw-${d})`;
+const dirInk = (d: string) => `var(--mw-${d}-ink)`;
+
 function CeremoniesContent() {
   const searchParams = useSearchParams();
   const [ceremonies, setCeremonies] = useState<CeremonyLog[]>([]);
@@ -58,7 +61,7 @@ function CeremoniesContent() {
       toast.success("Ceremony logged");
       setShowForm(false);
       await loadCeremonies();
-    } else { toast.error("Failed to log ceremony"); }
+    } else { toast.error("Could not save the ceremony — check the form and try again"); }
   }
 
   const directions: DirectionName[] = ["east", "south", "west", "north"];
@@ -73,10 +76,10 @@ function CeremoniesContent() {
   }, [ceremonies]);
 
   const phaseFramings: Record<string, string> = {
-    opening: "🔥 We are in the Opening phase — setting intentions and acknowledging relationships",
-    council: "🔥 We are in the Council phase — deepening understanding through dialogue",
-    integration: "🔥 We are in the Integration phase — weaving learnings together",
-    closure: "🔥 We are in the Closure phase — honoring what has been shared",
+    opening: "We are in the Opening phase — setting intentions and acknowledging relationships",
+    council: "We are in the Council phase — deepening understanding through dialogue",
+    integration: "We are in the Integration phase — weaving learnings together",
+    closure: "We are in the Closure phase — honoring what has been shared",
   };
   const phases = ["opening", "council", "integration", "closure"];
   const nextPhase = phases[(phases.indexOf(currentPhase) + 1) % 4];
@@ -85,10 +88,10 @@ function CeremoniesContent() {
     <div className="p-6 max-w-5xl mx-auto">
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold">Ceremonies</h1>
+          <h1 className="mw-h1">Ceremonies</h1>
           <p className="text-sm text-muted-foreground">{ceremonies.length} ceremony logs</p>
         </div>
-        <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ Log Ceremony</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">Log ceremony</button>
       </div>
 
       <div className="mb-6 p-4 rounded-lg border bg-card/50 backdrop-blur">
@@ -110,13 +113,13 @@ function CeremoniesContent() {
         <div className="flex gap-1">
           <button onClick={() => setFilterDir("all")} className={`px-3 py-1 rounded-full text-xs font-medium border ${filterDir === "all" ? "bg-secondary" : ""}`}>All</button>
           {directions.map((d) => (
-            <button key={d} onClick={() => setFilterDir(d)} className={`px-3 py-1 rounded-full text-xs font-medium border capitalize ${filterDir === d ? "bg-secondary" : ""}`} style={filterDir === d ? { borderColor: DIRECTION_COLORS[d] } : {}}>
+            <button key={d} onClick={() => setFilterDir(d)} className={`px-3 py-1 rounded-full text-xs font-medium border capitalize hover:bg-secondary/60 ${filterDir === d ? "bg-secondary" : ""}`} style={filterDir === d ? { borderColor: dirVar(d) } : {}}>
               {d}
             </button>
           ))}
         </div>
         <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-1 rounded-md border bg-background text-xs">
-          <option value="all">All Types</option>
+          <option value="all">All types</option>
           {cTypes.map((t) => <option key={t} value={t}>{t.replace("_", " ")}</option>)}
         </select>
         {filtersActive && (
@@ -136,7 +139,7 @@ function CeremoniesContent() {
           <input name="medicines" placeholder="Medicines used (comma-separated)" className="px-3 py-2 rounded-md border bg-background text-sm" />
           <textarea name="intention" placeholder="Intention" rows={2} className="px-3 py-2 rounded-md border bg-background text-sm sm:col-span-2" />
           <input name="context" placeholder="Research context (optional)" className="px-3 py-2 rounded-md border bg-background text-sm" />
-          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Log Ceremony</button>
+          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm hover:opacity-90">Log ceremony</button>
         </form>
       )}
 
@@ -144,13 +147,13 @@ function CeremoniesContent() {
         {loading && <div className="text-center py-12 text-muted-foreground">Loading ceremonies…</div>}
         {!loading && ceremonies.length === 0 && (
           <div className="text-center py-12 text-muted-foreground">
-            <p>{filtersActive ? "No ceremonies match these filters." : "No ceremonies found. Log your first ceremony to begin."}</p>
+            <p>{filtersActive ? "No ceremonies match these filters." : "No ceremonies yet. Log the first one to open the circle."}</p>
             {filtersActive && <button onClick={clearFilters} className="text-sm mt-2 underline hover:text-foreground">Clear filters</button>}
           </div>
         )}
         {!loading && ceremonies.map((c) => (
           <div key={c.id} className="border rounded-lg bg-card overflow-hidden cursor-pointer hover:border-ring/50 transition-colors"
-            style={{ borderTopColor: DIRECTION_COLORS[c.direction], borderTopWidth: 3 }} onClick={() => setExpandedId(expandedId === c.id ? null : c.id)}>
+            style={{ borderTopColor: dirVar(c.direction), borderTopWidth: 3 }} onClick={() => setExpandedId(expandedId === c.id ? null : c.id)}>
             <div className="p-4 flex items-center justify-between gap-3">
               <div className="flex items-center gap-3 min-w-0">
                 <span className="text-2xl shrink-0">{CEREMONY_ICONS[c.type]}</span>
@@ -158,7 +161,7 @@ function CeremoniesContent() {
                   <div className="flex items-center gap-2">
                     <span className="font-medium text-sm capitalize">{c.type.replace("_", " ")}</span>
                     <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium capitalize border"
-                      style={{ borderColor: DIRECTION_COLORS[c.direction], color: DIRECTION_COLORS[c.direction] }}>
+                      style={{ borderColor: `var(--mw-${c.direction}-border)`, color: dirInk(c.direction) }}>
                       {DIRECTION_ICONS[c.direction]} {c.direction}
                     </span>
                   </div>

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;
+}