A Griddy AI prototype

src/Griddy/plan.md

@@ -850,28 +850,32 @@ Rendering uses `table.getLeftHeaderGroups()`, `table.getCenterHeaderGroups()`, `
 
 ## Architectural Patterns from Gridler to Adopt
 
-### 1. Zustand Store Pattern
-For UI state not managed by TanStack Table:
+### 1. createSyncStore Pattern (from @warkypublic/zustandsyncstore)
+Uses `createSyncStore` which provides a Provider that auto-syncs parent props into the Zustand store, plus a context-scoped `useStore` hook with selector support. `GriddyStoreState` includes both UI state AND synced prop fields (so TypeScript sees them):
 ```typescript
-const { Provider, useGriddyStore } = createSyncStore<GriddyUIState, GriddyStoreProps>(
+const { Provider: GriddyProvider, useStore: useGriddyStore } = createSyncStore<
+  GriddyStoreState,  // UI state + prop fields + internal refs
+  GriddyProps<any>    // Props synced from parent
+>(
   (set, get) => ({
+    // UI state
     focusedRowIndex: null,
     isEditing: false,
     isSearchOpen: false,
     isSelecting: false,
+    // Internal refs
+    _table: null,
+    _virtualizer: null,
+    // Actions
     setFocusedRow: (index) => set({ focusedRowIndex: index }),
-    setEditing: (editing) => set({ isEditing: editing }),
-    setSearchOpen: (open) => set({ isSearchOpen: open }),
-    setSelecting: (selecting) => set({ isSelecting: selecting }),
-    moveFocus: (direction, amount) => set(state => {
-      const current = state.focusedRowIndex ?? 0
-      const delta = direction === 'down' ? amount : -amount
-      return { focusedRowIndex: Math.max(0, Math.min(current + delta, get().totalRows - 1)) }
-    }),
-    moveFocusToStart: () => set({ focusedRowIndex: 0 }),
-    moveFocusToEnd: () => set(state => ({ focusedRowIndex: get().totalRows - 1 })),
+    moveFocus: (direction, amount) => { ... },
+    setTable: (table) => set({ _table: table }),
+    ...
   })
 )
+
+// Usage: <GriddyProvider {...props}><GriddyInner /></GriddyProvider>
+// All props (data, columns, selection, etc.) are available via useGriddyStore((s) => s.data)
 ```
 
 ### 2. Data Adapter Pattern