@medicine-wheel/app 0.2.3

package/app/api/health/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+import { createProvider, detectProvider } from '@medicine-wheel/storage-provider';
+
+export async function GET() {
+  const providerType = detectProvider();
+  
+  try {
+    const store = await createProvider();
+    
+    // Test basic connectivity
+    const nodes = await store.getAllNodes();
+    const ceremonies = await store.getAllCeremonies();
+    
+    return NextResponse.json({
+      status: 'healthy',
+      provider: providerType,
+      counts: {
+        nodes: nodes.length,
+        ceremonies: ceremonies.length,
+      },
+      env: {
+        MW_STORAGE_PROVIDER: process.env.MW_STORAGE_PROVIDER || 'not set',
+        DATABASE_URL: process.env.DATABASE_URL ? 'configured' : 'not configured',
+      },
+    });
+  } catch (error) {
+    return NextResponse.json({
+      status: 'unhealthy',
+      provider: providerType,
+      error: String(error),
+      env: {
+        MW_STORAGE_PROVIDER: process.env.MW_STORAGE_PROVIDER || 'not set',
+        DATABASE_URL: process.env.DATABASE_URL ? 'configured' : 'not configured',
+      },
+    }, { status: 500 });
+  }
+}

package/app/api/narrative/beats/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import { getAllBeats, createBeat } from "@/lib/store";
+
+export async function GET() {
+  try {
+    return NextResponse.json(getAllBeats());
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const beat = createBeat({
+      direction: body.direction,
+      title: body.title,
+      description: body.description,
+      prose: body.prose,
+      ceremonies: body.ceremonies ?? [],
+      learnings: body.learnings ?? [],
+      act: body.act ?? 1,
+      relations_honored: body.relations_honored ?? [],
+    });
+    return NextResponse.json(beat, { status: 201 });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

package/app/api/narrative/cycles/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { getAllCycles, createCycle } from "@/lib/store";
+
+export async function GET() {
+  try {
+    return NextResponse.json(getAllCycles());
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const cycle = createCycle({
+      research_question: body.research_question,
+      current_direction: body.current_direction,
+    });
+    return NextResponse.json(cycle, { status: 201 });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

package/app/api/nodes/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from "next/server";
+import { createProvider, detectProvider } from "@medicine-wheel/storage-provider";
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get("type");
+    const direction = searchParams.get("direction");
+
+    const store = await createProvider();
+    let nodes = await store.getAllNodes();
+
+    if (type) {
+      nodes = nodes.filter((n) => n.type === type);
+    } else if (direction) {
+      nodes = nodes.filter((n) => n.direction === direction);
+    }
+
+    return NextResponse.json({ 
+      nodes, 
+      provider: detectProvider(),
+      count: nodes.length 
+    });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const store = await createProvider();
+    const body = await request.json();
+    
+    const node = {
+      id: body.id || crypto.randomUUID(),
+      name: body.name,
+      type: body.type,
+      description: body.description || "",
+      direction: body.direction || undefined,
+      metadata: body.metadata || {},
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    };
+    
+    await store.createNode(node);
+    return NextResponse.json({ success: true, node, provider: detectProvider() }, { status: 201 });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/api/resources/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+
+const RESOURCES = [
+  {
+    id: "wilson-paradigm",
+    name: "Shawn Wilson's Indigenous Research Paradigm",
+    description: "Research is Ceremony — ontology, epistemology, axiology framework",
+    content: {
+      ontology: "Reality is relational — all things exist in relationship",
+      epistemology: "Knowledge is shared and ceremony-based",
+      axiology: "Relational accountability to all relations",
+    },
+  },
+  {
+    id: "two-eyed-seeing",
+    name: "Two-Eyed Seeing (Etuaptmumk)",
+    description: "Mi'kmaw framework for integrating Indigenous and Western knowledge",
+    content: {
+      principle: "Learn to see from one eye with the strengths of Indigenous knowledge, and from the other eye with the strengths of Western knowledge, and to use both these eyes together",
+      source: "Elder Albert Marshall, Mi'kmaq",
+    },
+  },
+  {
+    id: "ocap",
+    name: "OCAP® Data Sovereignty",
+    description: "Ownership, Control, Access, Possession principles for First Nations data",
+    content: {
+      ownership: "Community collectively owns cultural information",
+      control: "Community controls research processes and data management",
+      access: "Community determines who has access",
+      possession: "Data must be physically possessed by community (on-premise)",
+    },
+  },
+  {
+    id: "methodologies",
+    name: "Indigenous Research Methodologies",
+    description: "Kapati, Storywork, and Conversational methods",
+    content: {
+      kapati: "Kaupapa Māori research approach",
+      storywork: "Jo-ann Archibald's Indigenous storywork methodology",
+      conversational: "Relational dialogue-based research",
+    },
+  },
+];
+
+export async function GET() {
+  return NextResponse.json(RESOURCES);
+}

package/app/ceremonies/page.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { 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 { toast } from "sonner";
+
+function CeremoniesContent() {
+  const searchParams = useSearchParams();
+  const [ceremonies, setCeremonies] = useState<CeremonyLog[]>([]);
+  const [filterDir, setFilterDir] = useState<string>(searchParams.get("direction") || "all");
+  const [filterType, setFilterType] = useState<string>("all");
+  const [showForm, setShowForm] = useState(false);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (filterDir !== "all") params.set("direction", filterDir);
+    if (filterType !== "all") params.set("type", filterType);
+    fetch(`/api/ceremonies?${params}`)
+      .then((r) => r.json())
+      .then((data) => setCeremonies(Array.isArray(data) ? data : []))
+      .catch(() => setCeremonies([]));
+  }, [filterDir, filterType]);
+
+  async function logCeremony(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const body = {
+      type: form.get("type") as string,
+      direction: form.get("direction") as string,
+      participants: (form.get("participants") as string).split(",").map((s) => s.trim()).filter(Boolean),
+      medicines_used: (form.get("medicines") as string).split(",").map((s) => s.trim()).filter(Boolean),
+      intentions: [(form.get("intention") as string)].filter(Boolean),
+      research_context: (form.get("context") as string) || undefined,
+    };
+    const res = await fetch("/api/ceremonies", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    if (res.ok) {
+      toast.success("Ceremony logged");
+      setShowForm(false);
+      const data = await fetch("/api/ceremonies").then((r) => r.json());
+      setCeremonies(Array.isArray(data) ? data : []);
+    } else { toast.error("Failed to log ceremony"); }
+  }
+
+  const directions: DirectionName[] = ["east", "south", "west", "north"];
+  const cTypes: CeremonyType[] = ["smudging", "talking_circle", "spirit_feeding", "opening", "closing"];
+
+  const phaseMap: Record<DirectionName, string> = { east: "opening", south: "council", west: "integration", north: "closure" };
+  const currentPhase = useMemo(() => {
+    if (ceremonies.length === 0) return "opening";
+    const latest = [...ceremonies].sort((a, b) => b.timestamp.localeCompare(a.timestamp))[0];
+    return phaseMap[latest.direction] ?? "opening";
+  }, [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",
+  };
+  const phases = ["opening", "council", "integration", "closure"];
+  const nextPhase = phases[(phases.indexOf(currentPhase) + 1) % 4];
+
+  return (
+    <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>
+          <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>
+      </div>
+
+      <div className="mb-6 p-4 rounded-lg border bg-card/50 backdrop-blur">
+        <div className="flex items-center gap-3">
+          <span className="text-2xl">🔥</span>
+          <div className="flex-1">
+            <p className="text-sm font-medium">{phaseFramings[currentPhase]}</p>
+            <p className="text-xs text-muted-foreground mt-1">Next phase: <span className="capitalize">{nextPhase}</span></p>
+          </div>
+          <div className="flex gap-1">
+            {phases.map((p) => (
+              <div key={p} className="w-2 h-2 rounded-full" style={{ backgroundColor: p === currentPhase ? "var(--color-primary)" : "var(--color-muted-foreground)", opacity: p === currentPhase ? 1 : 0.3 }} title={p} />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-6 flex-wrap">
+        <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] } : {}}>
+              {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>
+          {cTypes.map((t) => <option key={t} value={t}>{t.replace("_", " ")}</option>)}
+        </select>
+      </div>
+
+      {showForm && (
+        <form onSubmit={logCeremony} className="mb-6 p-4 border rounded-lg bg-card grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <select name="type" required className="px-3 py-2 rounded-md border bg-background text-sm">
+            {cTypes.map((t) => <option key={t} value={t}>{CEREMONY_ICONS[t]} {t.replace("_", " ")}</option>)}
+          </select>
+          <select name="direction" required className="px-3 py-2 rounded-md border bg-background text-sm">
+            {directions.map((d) => <option key={d} value={d}>{d}</option>)}
+          </select>
+          <input name="participants" placeholder="Participants (comma-separated)" className="px-3 py-2 rounded-md border bg-background text-sm" />
+          <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>
+        </form>
+      )}
+
+      <div className="space-y-3">
+        {ceremonies.length === 0 && <div className="text-center py-12 text-muted-foreground"><p>No ceremonies found. Log your first ceremony to begin.</p></div>}
+        {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)}>
+            <div className="p-4 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{CEREMONY_ICONS[c.type]}</span>
+                <div>
+                  <div className="font-medium text-sm capitalize">{c.type.replace("_", " ")}</div>
+                  <div className="text-xs text-muted-foreground">{c.direction} · {new Date(c.timestamp).toLocaleString()}</div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {c.participants.length > 0 && <span className="px-2 py-0.5 rounded-full bg-secondary text-xs">{c.participants.length} participant{c.participants.length !== 1 ? "s" : ""}</span>}
+                {c.medicines_used.length > 0 && <span className="px-2 py-0.5 rounded-full bg-secondary text-xs">🌿 {c.medicines_used.length}</span>}
+              </div>
+            </div>
+            {expandedId === c.id && (
+              <div className="px-4 pb-4 space-y-3 border-t pt-3">
+                {c.intentions.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Intentions</div>{c.intentions.map((int, i) => <p key={i} className="text-sm">{int}</p>)}</div>}
+                {c.participants.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Participants</div><div className="flex flex-wrap gap-1">{c.participants.map((p) => <span key={p} className="px-2 py-0.5 rounded bg-secondary text-xs">{p}</span>)}</div></div>}
+                {c.medicines_used.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Medicines</div><div className="flex flex-wrap gap-1">{c.medicines_used.map((m) => <span key={m} className="px-2 py-0.5 rounded bg-secondary text-xs">🌿 {m}</span>)}</div></div>}
+                {c.research_context && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Research Context</div><p className="text-sm">{c.research_context}</p></div>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function CeremoniesPage() {
+  return (
+    <Suspense fallback={<div className="p-6 text-center text-muted-foreground">Loading ceremonies...</div>}>
+      <CeremoniesContent />
+    </Suspense>
+  );
+}

package/app/globals.css

@@ -0,0 +1,68 @@
+@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";
+
+@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);
+  --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-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 */
+
+  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
+  --font-display: 'Stereohead', 'Nunito', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+  h1, h2 {
+    font-family: var(--font-display);
+    font-weight: normal;
+    letter-spacing: 0.01em;
+  }
+}
+
+@keyframes pulse-center {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.08); }
+}
+@keyframes glow {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.3); }
+}
+.animate-pulse-center { animation: pulse-center 3s ease-in-out infinite; }
+.animate-glow { animation: glow 2s ease-in-out infinite; }

package/app/graph/page.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { type RelationalNode, type RelationalEdge, DIRECTION_COLORS } from "@/lib/types";
+import { toast } from "sonner";
+
+interface GraphNode {
+  id: string;
+  label: string;
+  type: string;
+  direction?: string;
+  x: number;
+  y: number;
+}
+
+interface GraphLink {
+  source: string;
+  target: string;
+  label: string;
+  ceremonyHonored: boolean;
+  strength: number;
+}
+
+export default function GraphPage() {
+  const [nodes, setNodes] = useState<GraphNode[]>([]);
+  const [links, setLinks] = useState<GraphLink[]>([]);
+  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [showLabels, setShowLabels] = useState(true);
+
+  const loadData = useCallback(async () => {
+    try {
+      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
+      const nodesData: RelationalNode[] = await nodesRes.json();
+      const edgesData: RelationalEdge[] = await edgesRes.json();
+
+      // Position nodes by direction on a circular layout
+      const CX = 350, CY = 300, R = 220;
+      const dirAngles: Record<string, number> = { east: 0, south: 90, west: 180, north: 270 };
+
+      const graphNodes = nodesData.map((n, i) => {
+        const baseAngle = n.direction ? dirAngles[n.direction] ?? 0 : (360 * i) / nodesData.length;
+        const jitter = (Math.random() - 0.5) * 60;
+        const angle = ((baseAngle + jitter) * Math.PI) / 180;
+        const r = R * (0.5 + Math.random() * 0.4);
+        return {
+          id: n.id,
+          label: n.name,
+          type: n.type,
+          direction: n.direction,
+          x: CX + r * Math.cos(angle),
+          y: CY + r * Math.sin(angle),
+        };
+      });
+
+      const graphLinks = edgesData.map((e) => ({
+        source: e.from_id,
+        target: e.to_id,
+        label: e.relationship_type,
+        ceremonyHonored: e.ceremony_honored,
+        strength: e.strength,
+      }));
+
+      setNodes(graphNodes);
+      setLinks(graphLinks);
+    } catch {
+      toast.error("Failed to load graph data");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+
+  return (
+    <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-bold flex items-center gap-2">
+              <span className="text-3xl">🔮</span> Medicine Wheel Graph
+            </h1>
+            <p className="text-gray-400 text-sm mt-1">Relational visualization across four directions</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setShowLabels(!showLabels)}
+              className={`px-3 py-1.5 rounded text-sm ${showLabels ? "bg-white/10" : "bg-white/5"}`}
+            >
+              Labels {showLabels ? "ON" : "OFF"}
+            </button>
+            <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10">↻ Refresh</button>
+          </div>
+        </div>
+
+        <div className="flex gap-6">
+          <div className="flex-1 rounded-xl border border-white/10 overflow-hidden">
+            {loading ? (
+              <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
+            ) : nodes.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-[600px] text-gray-500">
+                <span className="text-4xl mb-3">🌀</span>
+                <p>No relational nodes yet.</p>
+                <p className="text-sm mt-1">Create nodes via the Nodes page.</p>
+              </div>
+            ) : (
+              <svg viewBox="0 0 700 600" className="w-full h-[600px]">
+                {/* Quadrant backgrounds */}
+                {[
+                  { dir: "east", cx: 525, cy: 300 },
+                  { dir: "south", cx: 350, cy: 475 },
+                  { dir: "west", cx: 175, cy: 300 },
+                  { dir: "north", cx: 350, cy: 125 },
+                ].map(({ dir, cx, cy }) => (
+                  <g key={dir}>
+                    <circle cx={cx} cy={cy} r={40} fill={(DIRECTION_COLORS as any)[dir]} opacity={0.1} />
+                    <text x={cx} y={cy + 4} textAnchor="middle" fill={(DIRECTION_COLORS as any)[dir]} className="text-xs font-bold capitalize" opacity={0.6}>
+                      {dir}
+                    </text>
+                  </g>
+                ))}
+
+                {/* Links */}
+                {links.map((link, i) => {
+                  const source = nodeMap.get(link.source);
+                  const target = nodeMap.get(link.target);
+                  if (!source || !target) return null;
+                  return (
+                    <line
+                      key={i}
+                      x1={source.x} y1={source.y} x2={target.x} y2={target.y}
+                      stroke={link.ceremonyHonored ? "#FFD700" : "#555"}
+                      strokeWidth={1 + link.strength * 2}
+                      strokeDasharray={link.ceremonyHonored ? "none" : "6,4"}
+                      opacity={0.5}
+                    />
+                  );
+                })}
+
+                {/* Nodes */}
+                {nodes.map((node) => (
+                  <g key={node.id} className="cursor-pointer" onClick={() => setSelectedNode(node)}>
+                    <circle
+                      cx={node.x} cy={node.y} r={selectedNode?.id === node.id ? 18 : 14}
+                      fill={node.direction ? (DIRECTION_COLORS as any)[node.direction] || "#888" : "#888"}
+                      stroke={selectedNode?.id === node.id ? "#FFD700" : "#333"}
+                      strokeWidth={selectedNode?.id === node.id ? 3 : 1}
+                      opacity={0.9}
+                    />
+                    {showLabels && (
+                      <text x={node.x} y={node.y + 26} textAnchor="middle" fill="#ccc" className="text-[10px]">
+                        {node.label.length > 15 ? node.label.slice(0, 14) + "…" : node.label}
+                      </text>
+                    )}
+                  </g>
+                ))}
+              </svg>
+            )}
+          </div>
+
+          <div className="w-72 space-y-4">
+            <div className="rounded-xl border border-white/10 p-4">
+              <h3 className="text-sm font-semibold text-gray-400 mb-3">Directions</h3>
+              {(["east", "south", "west", "north"] as const).map((dir) => (
+                <div key={dir} className="flex items-center gap-2 mb-2">
+                  <span className="w-3 h-3 rounded-full" style={{ backgroundColor: DIRECTION_COLORS[dir] }} />
+                  <span className="text-sm capitalize">{dir}</span>
+                </div>
+              ))}
+            </div>
+
+            {selectedNode && (
+              <div className="rounded-xl border border-white/10 p-4">
+                <h3 className="text-sm font-semibold text-gray-400 mb-2">Selected Node</h3>
+                <div className="space-y-2">
+                  <div><span className="text-xs text-gray-500">Name</span><p className="font-medium">{selectedNode.label}</p></div>
+                  <div><span className="text-xs text-gray-500">Type</span><p className="capitalize">{selectedNode.type}</p></div>
+                  {selectedNode.direction && <div><span className="text-xs text-gray-500">Direction</span><p className="capitalize">{selectedNode.direction}</p></div>}
+                  <div><span className="text-xs text-gray-500">ID</span><p className="text-xs text-gray-400 font-mono break-all">{selectedNode.id}</p></div>
+                </div>
+              </div>
+            )}
+
+            <div className="rounded-xl border border-white/10 p-4">
+              <h3 className="text-sm font-semibold text-gray-400 mb-3">Graph Stats</h3>
+              <div className="grid grid-cols-2 gap-3 text-center">
+                <div><p className="text-2xl font-bold">{nodes.length}</p><p className="text-xs text-gray-500">Nodes</p></div>
+                <div><p className="text-2xl font-bold">{links.length}</p><p className="text-xs text-gray-500">Relations</p></div>
+                <div><p className="text-2xl font-bold">{links.filter((l) => l.ceremonyHonored).length}</p><p className="text-xs text-gray-500">Ceremonied</p></div>
+                <div><p className="text-2xl font-bold">{new Set(nodes.map((n) => n.direction).filter(Boolean)).size}</p><p className="text-xs text-gray-500">Directions</p></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "sonner";
+import { Navigation } from "@/components/navigation";
+
+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",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="font-sans antialiased">
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} forcedTheme="dark">
+          <Navigation />
+          <main className="min-h-screen pt-16">{children}</main>
+          <Toaster richColors position="bottom-right" />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}