@medicine-wheel/app 0.4.2 → 0.4.4

package/app/api/ceremonies/route.ts

@@ -12,7 +12,9 @@ export async function GET(request: Request) {
 
     if (direction) {
       ceremonies = ceremonies.filter((c) => c.direction === direction);
-    } else if (type) {
+    }
+
+    if (type) {
       ceremonies = ceremonies.filter((c) => c.type === type);
     }
 

package/app/ceremonies/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useEffect, useState, Suspense, useMemo } from "react";
+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 { extractCeremonyLogs } from "@/lib/ceremony-response";
 import { toast } from "sonner";
 
 function CeremoniesContent() {
@@ -14,16 +15,25 @@ function CeremoniesContent() {
   const [showForm, setShowForm] = useState(false);
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
-  useEffect(() => {
+  const loadCeremonies = useCallback(async () => {
     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([]));
+
+    try {
+      const res = await fetch(`/api/ceremonies?${params}`);
+      if (!res.ok) throw new Error("Failed to load ceremonies");
+      const data = await res.json();
+      setCeremonies(extractCeremonyLogs(data));
+    } catch {
+      setCeremonies([]);
+    }
   }, [filterDir, filterType]);
 
+  useEffect(() => {
+    loadCeremonies();
+  }, [loadCeremonies]);
+
   async function logCeremony(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const form = new FormData(e.currentTarget);
@@ -39,8 +49,7 @@ function CeremoniesContent() {
     if (res.ok) {
       toast.success("Ceremony logged");
       setShowForm(false);
-      const data = await fetch("/api/ceremonies").then((r) => r.json());
-      setCeremonies(Array.isArray(data) ? data : []);
+      await loadCeremonies();
     } else { toast.error("Failed to log ceremony"); }
   }
 

package/app/graph/page.tsx

@@ -3,6 +3,7 @@
 import "@xyflow/react/dist/style.css";
 
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import type { ChangeEvent } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -34,6 +35,11 @@ import {
   upsertCurrentGraphLayout,
   type GraphLayoutStore,
 } from "@/lib/graph-layout-storage";
+import {
+  DEFAULT_GRAPH_ANIMATION_ENABLED,
+  loadStoredGraphAnimationPreference,
+  persistGraphAnimationPreference,
+} from "@/lib/graph-animation-storage";
 import { toast } from "sonner";
 
 // React Flow touches `window`/`document`, so the interactive renderer is
@@ -84,6 +90,9 @@ export default function GraphPage() {
   const [selectedNode, setSelectedNode] = useState<MWGraphNode | null>(null);
   const [loading, setLoading] = useState(true);
   const [showLabels, setShowLabels] = useState(true);
+  const [animationsEnabled, setAnimationsEnabled] = useState(
+    DEFAULT_GRAPH_ANIMATION_ENABLED,
+  );
   const [layoutName, setLayoutName] = useState("");
   const [layoutsHydrated, setLayoutsHydrated] = useState(false);
   const [layoutStore, setLayoutStore] = useState<GraphLayoutStore>(() =>
@@ -139,6 +148,10 @@ export default function GraphPage() {
     setLayoutsHydrated(true);
   }, []);
 
+  useEffect(() => {
+    setAnimationsEnabled(loadStoredGraphAnimationPreference());
+  }, []);
+
   useEffect(() => {
     layoutStoreRef.current = layoutStore;
   }, [layoutStore]);
@@ -215,6 +228,18 @@ export default function GraphPage() {
     [router],
   );
 
+  const handleAnimationsEnabledChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const enabled = event.target.checked;
+      setAnimationsEnabled(enabled);
+
+      if (!persistGraphAnimationPreference(enabled)) {
+        toast.error("Could not save graph animation preference");
+      }
+    },
+    [],
+  );
+
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
       <div className="max-w-7xl mx-auto">
@@ -241,7 +266,19 @@ export default function GraphPage() {
         </div>
 
         <div className="flex gap-6">
-          <div className="flex-1 rounded-xl border border-white/10 overflow-hidden">
+          <div className="relative flex-1 rounded-xl border border-white/10 overflow-hidden">
+            {!loading && graph.nodes.length > 0 && (
+              <label className="absolute right-3 top-3 z-10 inline-flex items-center gap-2 rounded-md border border-white/10 bg-[#0a0a1a]/80 px-2 py-1 text-[11px] text-gray-300 shadow-sm backdrop-blur">
+                <input
+                  type="checkbox"
+                  checked={animationsEnabled}
+                  onChange={handleAnimationsEnabledChange}
+                  className="h-3 w-3 accent-yellow-400"
+                  aria-label="Animate graph edges"
+                />
+                <span>Animation</span>
+              </label>
+            )}
             {loading ? (
               <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
             ) : graph.nodes.length === 0 ? (
@@ -256,6 +293,7 @@ export default function GraphPage() {
                 height={600}
                 darkMode
                 showNodeLabels={showLabels}
+                animationsEnabled={animationsEnabled}
                 nodePositions={activeLayout.positions}
                 onNodeClick={(node) => setSelectedNode(node)}
                 onNodeDoubleClick={navigateToNode}

package/lib/ceremony-response.ts

@@ -0,0 +1,16 @@
+import type { CeremonyLog } from "@/lib/types";
+
+interface CeremonyListResponse {
+  ceremonies?: unknown;
+}
+
+export function extractCeremonyLogs(response: unknown): CeremonyLog[] {
+  if (Array.isArray(response)) return response as CeremonyLog[];
+
+  if (!response || typeof response !== "object") return [];
+
+  const candidate = response as CeremonyListResponse;
+  return Array.isArray(candidate.ceremonies)
+    ? (candidate.ceremonies as CeremonyLog[])
+    : [];
+}

package/lib/graph-animation-storage.ts

@@ -0,0 +1,84 @@
+export const GRAPH_ANIMATION_STORAGE_VERSION = 1;
+export const GRAPH_ANIMATION_STORAGE_KEY = "medicine-wheel:graph-animation:v1";
+export const DEFAULT_GRAPH_ANIMATION_ENABLED = true;
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+interface GraphAnimationPreference {
+  version: typeof GRAPH_ANIMATION_STORAGE_VERSION;
+  animationsEnabled: boolean;
+}
+
+function safeStorage(): StorageLike | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function serializeGraphAnimationPreference(
+  animationsEnabled: boolean,
+): string {
+  const value: GraphAnimationPreference = {
+    version: GRAPH_ANIMATION_STORAGE_VERSION,
+    animationsEnabled,
+  };
+
+  return JSON.stringify(value);
+}
+
+export function parseGraphAnimationPreference(raw: string | null): boolean {
+  if (!raw) return DEFAULT_GRAPH_ANIMATION_ENABLED;
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<GraphAnimationPreference>;
+
+    if (
+      parsed.version === GRAPH_ANIMATION_STORAGE_VERSION &&
+      typeof parsed.animationsEnabled === "boolean"
+    ) {
+      return parsed.animationsEnabled;
+    }
+  } catch {
+    return DEFAULT_GRAPH_ANIMATION_ENABLED;
+  }
+
+  return DEFAULT_GRAPH_ANIMATION_ENABLED;
+}
+
+export function loadStoredGraphAnimationPreference(
+  storage: StorageLike | null = safeStorage(),
+): boolean {
+  if (!storage) return DEFAULT_GRAPH_ANIMATION_ENABLED;
+
+  try {
+    return parseGraphAnimationPreference(
+      storage.getItem(GRAPH_ANIMATION_STORAGE_KEY),
+    );
+  } catch {
+    return DEFAULT_GRAPH_ANIMATION_ENABLED;
+  }
+}
+
+export function persistGraphAnimationPreference(
+  animationsEnabled: boolean,
+  storage: StorageLike | null = safeStorage(),
+): boolean {
+  if (!storage) return false;
+
+  try {
+    storage.setItem(
+      GRAPH_ANIMATION_STORAGE_KEY,
+      serializeGraphAnimationPreference(animationsEnabled),
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicine-wheel/app",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Medicine Wheel — Interactive visual layer for Indigenous relational research with Four Directions, ceremonies, and narrative arcs",
   "bin": {
     "mw": "dist/cli/mw.js",
@@ -74,24 +74,24 @@
     "release:major": "npm run version:major && npm run publish:all && npm run release:commit"
   },
   "dependencies": {
-    "@medicine-wheel/ceremony-protocol": "^0.4.2",
-    "@medicine-wheel/community-review": "^0.4.2",
-    "@medicine-wheel/consent-lifecycle": "^0.4.2",
-    "@medicine-wheel/data-store": "^0.4.2",
-    "@medicine-wheel/data-store-postgres": "^0.4.2",
-    "@medicine-wheel/fire-keeper": "^0.4.2",
-    "@medicine-wheel/graph-viz": "^0.4.2",
-    "@medicine-wheel/importance-unit": "^0.4.2",
-    "@medicine-wheel/mcp": "^4.4.1",
-    "@medicine-wheel/narrative-engine": "^0.4.2",
-    "@medicine-wheel/ontology-core": "^0.4.2",
-    "@medicine-wheel/prompt-decomposition": "^0.4.2",
-    "@medicine-wheel/relational-index": "^0.4.2",
-    "@medicine-wheel/relational-query": "^0.4.2",
-    "@medicine-wheel/session-reader": "^0.4.2",
-    "@medicine-wheel/storage-provider": "^0.4.2",
-    "@medicine-wheel/transformation-tracker": "^0.4.2",
-    "@medicine-wheel/ui-components": "^0.4.2",
+    "@medicine-wheel/ceremony-protocol": "^0.4.4",
+    "@medicine-wheel/community-review": "^0.4.4",
+    "@medicine-wheel/consent-lifecycle": "^0.4.4",
+    "@medicine-wheel/data-store": "^0.4.4",
+    "@medicine-wheel/data-store-postgres": "^0.4.4",
+    "@medicine-wheel/fire-keeper": "^0.4.4",
+    "@medicine-wheel/graph-viz": "^0.4.4",
+    "@medicine-wheel/importance-unit": "^0.4.4",
+    "@medicine-wheel/mcp": "^4.4.2",
+    "@medicine-wheel/narrative-engine": "^0.4.4",
+    "@medicine-wheel/ontology-core": "^0.4.4",
+    "@medicine-wheel/prompt-decomposition": "^0.4.4",
+    "@medicine-wheel/relational-index": "^0.4.4",
+    "@medicine-wheel/relational-query": "^0.4.4",
+    "@medicine-wheel/session-reader": "^0.4.4",
+    "@medicine-wheel/storage-provider": "^0.4.4",
+    "@medicine-wheel/transformation-tracker": "^0.4.4",
+    "@medicine-wheel/ui-components": "^0.4.4",
     "@neondatabase/serverless": "^0.10.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",