Navigation, state management, create rule button integration

app/create/context/CreateFlowContext.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { createContext, useContext, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
 import type {
   CreateFlowState,
   CreateFlowContextValue,
@@ -9,6 +16,39 @@ import type {
 
 const CreateFlowContext = createContext<CreateFlowContextValue | null>(null);
 
+const STORAGE_KEY = "create-flow-state";
+const DRAFT_STORAGE_KEY = "create-flow-draft";
+
+function readStateFromStorage(key: string): CreateFlowState {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as CreateFlowState;
+    return typeof parsed === "object" && parsed !== null ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeStateToStorage(key: string, value: CreateFlowState): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // Ignore storage errors (e.g. quota, private mode)
+  }
+}
+
+function removeFromStorage(key: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(key);
+  } catch {
+    // Ignore
+  }
+}
+
 interface CreateFlowProviderProps {
   children: ReactNode;
   initialStep?: CreateFlowStep | null;
@@ -17,27 +57,39 @@ interface CreateFlowProviderProps {
 /**
  * Provider component for Create Flow state management
  *
- * This is a basic implementation that will be expanded in CR-56
- * with full navigation logic, state persistence, and validation.
+ * Manages flow state with optional localStorage persistence and draft support.
  */
 export function CreateFlowProvider({
   children,
   initialStep = null,
 }: CreateFlowProviderProps) {
-  const [state, setState] = useState<CreateFlowState>({});
+  const [state, setState] = useState<CreateFlowState>(() =>
+    readStateFromStorage(STORAGE_KEY),
+  );
   const [currentStep] = useState<CreateFlowStep | null>(initialStep);
 
-  const updateState = (updates: Partial<CreateFlowState>) => {
+  useEffect(() => {
+    writeStateToStorage(STORAGE_KEY, state);
+  }, [state]);
+
+  const updateState = useCallback((updates: Partial<CreateFlowState>) => {
     setState((prevState) => ({
       ...prevState,
       ...updates,
     }));
-  };
+  }, []);
+
+  const clearState = useCallback(() => {
+    setState({});
+    removeFromStorage(STORAGE_KEY);
+    removeFromStorage(DRAFT_STORAGE_KEY);
+  }, []);
 
   const contextValue: CreateFlowContextValue = {
     state,
     currentStep,
     updateState,
+    clearState,
   };
 
   return (
@@ -47,6 +99,16 @@ export function CreateFlowProvider({
   );
 }
 
+/** Save current state as draft (e.g. on "Save & Exit"). Stub for CR-57. */
+export function saveCreateFlowDraft(state: CreateFlowState): void {
+  writeStateToStorage(DRAFT_STORAGE_KEY, state);
+}
+
+/** Load draft state if present. Caller can merge into initial state when entering flow. */
+export function loadCreateFlowDraft(): CreateFlowState {
+  return readStateFromStorage(DRAFT_STORAGE_KEY);
+}
+
 /**
  * Hook to access Create Flow context
  *