@setzkasten-cms/ui 0.4.2

package/src/stores/app-store.ts

@@ -0,0 +1,61 @@
+import { createStore } from 'zustand/vanilla'
+
+export interface RecentEntry {
+  readonly collection: string
+  readonly slug: string
+  readonly label: string
+  readonly timestamp: number
+}
+
+export interface AppState {
+  currentCollection: string | null
+  currentSlug: string | null
+  sidebarOpen: boolean
+  theme: 'light' | 'dark' | 'system'
+  recentEntries: RecentEntry[]
+}
+
+export interface AppActions {
+  navigate(collection: string, slug: string): void
+  toggleSidebar(): void
+  setTheme(theme: AppState['theme']): void
+  addRecentEntry(entry: Omit<RecentEntry, 'timestamp'>): void
+}
+
+export type AppStore = AppState & AppActions
+
+const MAX_RECENT = 10
+
+export function createAppStore() {
+  return createStore<AppStore>((set, get) => ({
+    currentCollection: null,
+    currentSlug: null,
+    sidebarOpen: true,
+    theme: 'system',
+    recentEntries: [],
+
+    navigate(collection, slug) {
+      set({ currentCollection: collection, currentSlug: slug })
+      get().addRecentEntry({ collection, slug, label: `${collection}/${slug}` })
+    },
+
+    toggleSidebar() {
+      set((state) => ({ sidebarOpen: !state.sidebarOpen }))
+    },
+
+    setTheme(theme) {
+      set({ theme })
+    },
+
+    addRecentEntry(entry) {
+      set((state) => {
+        const filtered = state.recentEntries.filter(
+          (e) => !(e.collection === entry.collection && e.slug === entry.slug),
+        )
+        return {
+          recentEntries: [{ ...entry, timestamp: Date.now() }, ...filtered].slice(0, MAX_RECENT),
+        }
+      })
+    },
+  }))
+}

package/src/stores/form-store.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest'
+import { createFormStore } from './form-store'
+import { f } from '@setzkasten-cms/core'
+
+describe('FormStore', () => {
+  const schema = {
+    title: f.text({ label: 'Title', required: true }),
+    count: f.number({ label: 'Count' }),
+    active: f.boolean({ label: 'Active' }),
+  }
+
+  it('initializes with schema and values', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: 'Hello', count: 5, active: true })
+
+    const state = store.getState()
+    expect(state.schema).toBe(schema)
+    expect(state.values).toEqual({ title: 'Hello', count: 5, active: true })
+    expect(state.status).toBe('idle')
+  })
+
+  it('sets and gets field values', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: 'Hello', count: 0, active: false })
+
+    store.getState().setFieldValue(['title'], 'World')
+    expect(store.getState().getFieldValue(['title'])).toBe('World')
+    expect(store.getState().values.title).toBe('World')
+  })
+
+  it('tracks dirty state', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: 'Hello', count: 0, active: false })
+
+    expect(store.getState().isDirty()).toBe(false)
+    expect(store.getState().isFieldDirty(['title'])).toBe(false)
+
+    store.getState().setFieldValue(['title'], 'Changed')
+    expect(store.getState().isDirty()).toBe(true)
+    expect(store.getState().isFieldDirty(['title'])).toBe(true)
+    expect(store.getState().isFieldDirty(['count'])).toBe(false)
+  })
+
+  it('tracks touched fields', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: '', count: 0, active: false })
+
+    expect(store.getState().touched.size).toBe(0)
+    store.getState().touchField(['title'])
+    expect(store.getState().touched.has('title')).toBe(true)
+  })
+
+  it('manages validation errors', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: '', count: 0, active: false })
+
+    store.getState().setFieldErrors(['title'], ['Required'])
+    expect(store.getState().errors['title']).toEqual(['Required'])
+
+    store.getState().setFieldErrors(['title'], [])
+    expect(store.getState().errors['title']).toBeUndefined()
+  })
+
+  it('clears all errors', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: '', count: 0, active: false })
+
+    store.getState().setFieldErrors(['title'], ['Required'])
+    store.getState().setFieldErrors(['count'], ['Must be positive'])
+    store.getState().clearErrors()
+    expect(store.getState().errors).toEqual({})
+  })
+
+  it('resets to initial values', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: 'Original', count: 0, active: false })
+
+    store.getState().setFieldValue(['title'], 'Modified')
+    store.getState().touchField(['title'])
+    store.getState().setFieldErrors(['title'], ['Error'])
+    store.getState().setStatus('error', 'Something went wrong')
+
+    store.getState().reset()
+    const state = store.getState()
+    expect(state.values.title).toBe('Original')
+    expect(state.touched.size).toBe(0)
+    expect(state.errors).toEqual({})
+    expect(state.status).toBe('idle')
+    expect(state.errorMessage).toBeUndefined()
+  })
+
+  it('handles nested paths', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: '', count: 0, active: false })
+
+    store.getState().setFieldValue(['nested', 'deep'], 'value')
+    expect(store.getState().getFieldValue(['nested', 'deep'])).toBe('value')
+  })
+
+  it('sets status with optional error message', () => {
+    const store = createFormStore()
+    store.getState().init(schema, { title: '', count: 0, active: false })
+
+    store.getState().setStatus('saving')
+    expect(store.getState().status).toBe('saving')
+
+    store.getState().setStatus('error', 'Network error')
+    expect(store.getState().status).toBe('error')
+    expect(store.getState().errorMessage).toBe('Network error')
+  })
+})

package/src/stores/form-store.ts

@@ -0,0 +1,298 @@
+import { produce, enableMapSet } from 'immer'
+
+enableMapSet()
+import { createStore } from 'zustand/vanilla'
+import type { FieldPath, FieldRecord } from '@setzkasten-cms/core'
+import { createCommandHistory, type Command, type CommandHistory } from '@setzkasten-cms/core'
+
+// ---------------------------------------------------------------------------
+// Path-based deep get/set utilities
+// ---------------------------------------------------------------------------
+
+function getIn(obj: unknown, path: FieldPath): unknown {
+  let current: unknown = obj
+  for (const key of path) {
+    if (current === null || current === undefined) return undefined
+    if (typeof current === 'object') {
+      current = (current as Record<string | number, unknown>)[key]
+    } else {
+      return undefined
+    }
+  }
+  return current
+}
+
+function setIn(obj: Record<string, unknown>, path: FieldPath, value: unknown): void {
+  if (path.length === 0) return
+
+  let current: Record<string | number, unknown> = obj
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i]!
+    const next = current[key]
+    if (next === null || next === undefined || typeof next !== 'object') {
+      const nextKey = path[i + 1]
+      current[key] = typeof nextKey === 'number' ? [] : {}
+    }
+    current = current[key] as Record<string | number, unknown>
+  }
+
+  const lastKey = path[path.length - 1]!
+  current[lastKey] = value
+}
+
+// ---------------------------------------------------------------------------
+// Form state
+// ---------------------------------------------------------------------------
+
+export interface FormState {
+  /** The schema this form is rendering */
+  schema: FieldRecord | null
+
+  /** Current form values (Immer-managed) */
+  values: Record<string, unknown>
+
+  /** Values at load time (for dirty checking) */
+  initialValues: Record<string, unknown>
+
+  /** Validation errors keyed by dot-path */
+  errors: Record<string, string[]>
+
+  /** Field paths the user has interacted with */
+  touched: Set<string>
+
+  /** Form lifecycle status */
+  status: 'idle' | 'loading' | 'saving' | 'error'
+
+  /** Error message when status is 'error' */
+  errorMessage?: string
+}
+
+export interface FormActions {
+  /** Initialize form with schema and values. If draftValues is provided, values starts as draft but initialValues stays as saved. */
+  init(schema: FieldRecord, values: Record<string, unknown>, draftValues?: Record<string, unknown>): void
+
+  /** Set a field value by path */
+  setFieldValue(path: FieldPath, value: unknown): void
+
+  /** Get a field value by path */
+  getFieldValue(path: FieldPath): unknown
+
+  /** Mark a field as touched */
+  touchField(path: FieldPath): void
+
+  /** Check if a specific field is dirty */
+  isFieldDirty(path: FieldPath): boolean
+
+  /** Check if any field is dirty */
+  isDirty(): boolean
+
+  /** Set validation errors for a field */
+  setFieldErrors(path: FieldPath, errors: string[]): void
+
+  /** Clear all validation errors */
+  clearErrors(): void
+
+  /** Set form status */
+  setStatus(status: FormState['status'], errorMessage?: string): void
+
+  /** Reset form to initial values */
+  reset(): void
+
+  /** Undo last change */
+  undo(): void
+
+  /** Redo last undone change */
+  redo(): void
+
+  /** Whether undo is available */
+  canUndo(): boolean
+
+  /** Whether redo is available */
+  canRedo(): boolean
+
+  /** Reset to initial values and clear history (Verwerfen) */
+  resetToInitial(): void
+}
+
+export type FormStore = FormState & FormActions
+
+function pathToKey(path: FieldPath): string {
+  return path.join('.')
+}
+
+/**
+ * Creates a Zustand vanilla store for form state.
+ * One store per open entry – not a singleton.
+ *
+ * Includes undo/redo via CommandHistory (snapshot-based, debounced).
+ */
+export function createFormStore() {
+  const history = createCommandHistory()
+  let snapshotTimer: ReturnType<typeof setTimeout> | null = null
+  let pendingSnapshot: Record<string, unknown> | null = null
+  // Flag to prevent recording undo/redo restores as new commands
+  let isRestoring = false
+
+  function flushSnapshot(store: { getState(): FormStore; setState(partial: Partial<FormState>): void }) {
+    if (!pendingSnapshot) return
+    const before = pendingSnapshot
+    const after = structuredClone(store.getState().values)
+    pendingSnapshot = null
+
+    // Don't create no-op commands
+    if (JSON.stringify(before) === JSON.stringify(after)) return
+
+    const command: Command = {
+      execute() {
+        isRestoring = true
+        store.setState({ values: structuredClone(after) })
+        isRestoring = false
+      },
+      undo() {
+        isRestoring = true
+        store.setState({ values: structuredClone(before) })
+        isRestoring = false
+      },
+      describe() {
+        return 'Field change'
+      },
+    }
+    // Push command – execute() is called but state is already `after`, so it's a no-op.
+    // This ensures redo() gets the real execute() (not an empty stub).
+    history.execute(command)
+  }
+
+  const store = createStore<FormStore>((set, get) => ({
+    // State
+    schema: null,
+    values: {},
+    initialValues: {},
+    errors: {},
+    touched: new Set<string>(),
+    status: 'idle',
+
+    // Actions
+    init(schema, values, draftValues) {
+      history.clear()
+      pendingSnapshot = null
+      if (snapshotTimer) clearTimeout(snapshotTimer)
+      set({
+        schema,
+        values: structuredClone(draftValues ?? values),
+        initialValues: structuredClone(values),
+        errors: {},
+        touched: new Set(),
+        status: 'idle',
+        errorMessage: undefined,
+      })
+    },
+
+    setFieldValue(path, value) {
+      if (!isRestoring) {
+        // Capture snapshot before change (debounced)
+        if (!pendingSnapshot) {
+          pendingSnapshot = structuredClone(get().values)
+        }
+        if (snapshotTimer) clearTimeout(snapshotTimer)
+        snapshotTimer = setTimeout(() => flushSnapshot(store), 500)
+      }
+
+      set(
+        produce((state: FormState) => {
+          setIn(state.values, path, value)
+        }),
+      )
+    },
+
+    getFieldValue(path) {
+      return getIn(get().values, path)
+    },
+
+    touchField(path) {
+      set(
+        produce((state: FormState) => {
+          state.touched.add(pathToKey(path))
+        }),
+      )
+    },
+
+    isFieldDirty(path) {
+      const current = getIn(get().values, path)
+      const initial = getIn(get().initialValues, path)
+      return JSON.stringify(current) !== JSON.stringify(initial)
+    },
+
+    isDirty() {
+      const { values, initialValues } = get()
+      return JSON.stringify(values) !== JSON.stringify(initialValues)
+    },
+
+    setFieldErrors(path, errors) {
+      set(
+        produce((state: FormState) => {
+          const key = pathToKey(path)
+          if (errors.length > 0) {
+            state.errors[key] = errors
+          } else {
+            delete state.errors[key]
+          }
+        }),
+      )
+    },
+
+    clearErrors() {
+      set({ errors: {} })
+    },
+
+    setStatus(status, errorMessage) {
+      set({ status, errorMessage })
+    },
+
+    reset() {
+      const { initialValues } = get()
+      set({
+        values: structuredClone(initialValues),
+        errors: {},
+        touched: new Set(),
+        status: 'idle',
+        errorMessage: undefined,
+      })
+    },
+
+    undo() {
+      // Flush any pending snapshot first so we can undo it
+      flushSnapshot(store)
+      history.undo()
+    },
+
+    redo() {
+      history.redo()
+    },
+
+    canUndo() {
+      return history.canUndo() || pendingSnapshot !== null
+    },
+
+    canRedo() {
+      return history.canRedo()
+    },
+
+    resetToInitial() {
+      const { initialValues } = get()
+      history.clear()
+      pendingSnapshot = null
+      if (snapshotTimer) clearTimeout(snapshotTimer)
+      isRestoring = true
+      set({
+        values: structuredClone(initialValues),
+        errors: {},
+        touched: new Set(),
+        status: 'idle',
+        errorMessage: undefined,
+      })
+      isRestoring = false
+    },
+  }))
+
+  return store
+}