@medicine-wheel/app 0.4.12 → 0.5.0

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

package/app/narrative/cycles/page.tsx

@@ -2,10 +2,13 @@
 
 import { useEffect, useState } from "react";
 import type { FormEvent } from "react";
-import { type MedicineWheelCycle, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { type MedicineWheelCycle, type DirectionName } from "@/lib/types";
 import { extractCycles } from "@/lib/cycle-response";
 import { toast } from "sonner";
 
+const dirVar = (d: string) => `var(--mw-${d})`;
+const dirInk = (d: string) => `var(--mw-${d}-ink)`;
+
 export default function CyclesPage() {
   const [cycles, setCycles] = useState<MedicineWheelCycle[]>([]);
   const [showForm, setShowForm] = useState(false);
@@ -28,7 +31,7 @@ export default function CyclesPage() {
       setShowForm(false);
       const data = await fetch("/api/narrative/cycles").then((r) => r.json());
       setCycles(extractCycles(data));
-    } else { toast.error("Failed"); }
+    } else { toast.error("Could not create the cycle — try again"); }
   }
 
   const dirOrder: DirectionName[] = ["east", "south", "west", "north"];
@@ -37,18 +40,18 @@ export default function CyclesPage() {
     <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">Medicine Wheel Cycles</h1>
+          <h1 className="mw-h1">Cycles</h1>
           <p className="text-sm text-muted-foreground">{cycles.length} research cycles</p>
         </div>
-        <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ New Cycle</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">New cycle</button>
       </div>
 
       {showForm && (
         <form onSubmit={createCycle} className="mb-6 p-4 border rounded-lg bg-card">
           <textarea name="question" placeholder="What is your research question?" rows={3} required className="w-full px-3 py-2 rounded-md border bg-background text-sm mb-3" />
           <div className="flex gap-2">
-            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create Cycle</button>
-            <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 rounded-md border text-sm">Cancel</button>
+            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm hover:opacity-90">Create cycle</button>
+            <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 rounded-md border text-sm hover:bg-secondary/60">Cancel</button>
           </div>
         </form>
       )}
@@ -78,7 +81,7 @@ export default function CyclesPage() {
                       return (
                         <path key={dir}
                           d={`M 24 24 L ${x1} ${y1} A 20 20 0 0 1 ${x2} ${y2} Z`}
-                          fill={DIRECTION_COLORS[dir]}
+                          fill={dirVar(dir)}
                           opacity={completed ? 0.9 : 0.2}
                         />
                       );
@@ -89,7 +92,7 @@ export default function CyclesPage() {
                   <div className="flex-1 min-w-0">
                     <h3 className="font-semibold mb-1">{cycle.research_question}</h3>
                     <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                      <span className="capitalize" style={{ color: DIRECTION_COLORS[cycle.current_direction as DirectionName] }}>
+                      <span className="capitalize" style={{ color: dirInk(cycle.current_direction) }}>
                         ● {cycle.current_direction}
                       </span>
                       <span>{cycle.beats.length} beats</span>
@@ -101,7 +104,7 @@ export default function CyclesPage() {
                     <div className="mt-3 h-2 bg-secondary rounded-full overflow-hidden">
                       <div className="h-full rounded-full transition-all" style={{
                         width: `${progress}%`,
-                        background: `linear-gradient(to right, ${DIRECTION_COLORS.east}, ${DIRECTION_COLORS.south}, ${DIRECTION_COLORS.west}, ${DIRECTION_COLORS.north})`,
+                        background: "linear-gradient(to right, var(--mw-east), var(--mw-south), var(--mw-west), var(--mw-north))",
                       }} />
                     </div>
                   </div>
@@ -114,7 +117,7 @@ export default function CyclesPage() {
                     {dirOrder.map((dir) => {
                       const active = dirOrder.indexOf(dir) <= dirIdx;
                       return (
-                        <div key={dir} className="text-center p-2 rounded-md border" style={{ borderColor: active ? DIRECTION_COLORS[dir] : "var(--color-border)", opacity: active ? 1 : 0.4 }}>
+                        <div key={dir} className="text-center p-2 rounded-md border" style={{ borderColor: active ? dirVar(dir) : "var(--color-border)", opacity: active ? 1 : 0.4 }}>
                           <p className="text-xs capitalize font-medium">{dir}</p>
                           <p className="text-sm">{active ? "✓" : "○"}</p>
                         </div>

package/app/narrative/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: { default: "Narrative", template: "%s · Medicine Wheel" },
+};
+
+export default function NarrativeLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/app/narrative/page.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { type NarrativeBeat, type MedicineWheelCycle, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { type NarrativeBeat, type MedicineWheelCycle, type DirectionName } from "@/lib/types";
 import { extractCycles } from "@/lib/cycle-response";
 import { relativeTime, absoluteTime } from "@/lib/format-time";
 
+const dirVar = (d: string) => `var(--mw-${d})`;
+const dirInk = (d: string) => `var(--mw-${d}-ink)`;
+
 export default function NarrativePage() {
   const [beats, setBeats] = useState<NarrativeBeat[]>([]);
   const [cycles, setCycles] = useState<MedicineWheelCycle[]>([]);
@@ -25,7 +28,7 @@ export default function NarrativePage() {
 
   return (
     <div className="p-6 max-w-5xl mx-auto">
-      <h1 className="text-2xl font-bold mb-2">Narrative Arc</h1>
+      <h1 className="mw-h1 mb-2">Narrative arc</h1>
       <p className="text-sm text-muted-foreground mb-6">Journey through the Four Directions</p>
 
       {activeCycle && (
@@ -40,7 +43,7 @@ export default function NarrativePage() {
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
             <div>
               <p className="text-sm text-muted-foreground">Current Direction</p>
-              <p className="text-lg font-bold capitalize" style={{ color: DIRECTION_COLORS[activeCycle.current_direction as DirectionName] }}>
+              <p className="text-lg font-bold capitalize" style={{ color: dirInk(activeCycle.current_direction) }}>
                 {activeCycle.current_direction}
               </p>
             </div>
@@ -59,7 +62,7 @@ export default function NarrativePage() {
           </div>
           <div className="mt-4">
             <div className="h-2 bg-secondary rounded-full overflow-hidden">
-              <div className="h-full rounded-full transition-all" style={{ width: `${progress}%`, background: `linear-gradient(to right, ${DIRECTION_COLORS.east}, ${DIRECTION_COLORS.south}, ${DIRECTION_COLORS.west}, ${DIRECTION_COLORS.north})` }} />
+              <div className="h-full rounded-full transition-all" style={{ width: `${progress}%`, background: "linear-gradient(to right, var(--mw-east), var(--mw-south), var(--mw-west), var(--mw-north))" }} />
             </div>
             <div className="flex justify-between mt-1 text-xs text-muted-foreground">
               {dirOrder.map((d) => <span key={d} className="capitalize">{d}</span>)}
@@ -73,8 +76,8 @@ export default function NarrativePage() {
         {dirOrder.map((dir) => {
           const count = beats.filter((b) => b.direction === dir).length;
           return (
-            <div key={dir} className="p-3 rounded-lg border text-center" style={{ borderColor: DIRECTION_COLORS[dir] + "40" }}>
-              <span className="w-3 h-3 rounded-full inline-block mb-1" style={{ backgroundColor: DIRECTION_COLORS[dir] }} />
+            <div key={dir} className="p-3 rounded-lg border text-center" 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">{count}</p>
               <p className="text-xs text-muted-foreground">beats</p>
@@ -87,10 +90,10 @@ export default function NarrativePage() {
       <h2 className="text-lg font-semibold mb-3">Narrative Beats ({beats.length})</h2>
       <div className="space-y-3">
         {loading && <div className="text-center py-8 text-muted-foreground">Loading narrative beats…</div>}
-        {!loading && beats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats recorded yet.</div>}
+        {!loading && beats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats yet. Record the first one on the Beats page to begin the arc.</div>}
         {!loading && beats.map((beat) => (
           <div key={beat.id} className="border rounded-lg bg-card overflow-hidden cursor-pointer hover:border-ring/50"
-            style={{ borderLeftColor: DIRECTION_COLORS[beat.direction as DirectionName], borderLeftWidth: 4 }}
+            style={{ borderLeftColor: dirVar(beat.direction), borderLeftWidth: 4 }}
             onClick={() => setExpandedBeat(expandedBeat === beat.id ? null : beat.id)}>
             <div className="p-4">
               <div className="flex items-center justify-between">