@morphika/andami 0.5.3 → 0.5.5

package/lib/builder/store-sections.ts

@@ -41,6 +41,7 @@ import {
   moveColumnBetweenSectionsInState,
   swapColumnsBetweenSectionsInState,
 } from "./store-helpers";
+import { pushSnapshot } from "./history";
 
 type StoreSet = (
   partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
@@ -60,7 +61,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
      * the data migration in Session 165.
      */
     addSection: (blockType: SectionBlockType, afterRowKey?: string | null): void => {
-      get()._pushSnapshot();
       const block = createDefaultBlock(blockType);
       const gridColumns = 12;
 
@@ -99,22 +99,31 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
         } else {
           rows.push(newSection);
         }
-        return { rows, isDirty: true, selectedRowKey: newSection._key };
+        return {
+          rows,
+          isDirty: true,
+          selectedRowKey: newSection._key,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
     reorderRows: (fromIndex: number, toIndex: number): void => {
-      get()._pushSnapshot();
       set((state) => {
         const rows = [...state.rows];
         const [moved] = rows.splice(fromIndex, 1);
         rows.splice(toIndex, 0, moved);
-        return { rows, isDirty: true };
+        return {
+          rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
     deleteSection: (sectionKey: string): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.filter((item) => item._key !== sectionKey),
         selectedRowKey:
@@ -124,11 +133,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
         selectedBlockKey:
           state.selectedRowKey === sectionKey ? null : state.selectedBlockKey,
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
     duplicateSection: (sectionKey: string): void => {
-      get()._pushSnapshot();
       set((state) => {
         const idx = state.rows.findIndex((item) => item._key === sectionKey);
         if (idx === -1) return state;
@@ -173,6 +183,8 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
           selectedColumnKey: null,
           selectedBlockKey: null,
           isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
         };
       });
     },
@@ -180,15 +192,19 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
     // ---- V2 Section operations ----
 
     addSectionV2: (preset: SectionV2Preset, afterRowKey?: string | null): void => {
-      get()._pushSnapshot();
-
-      const result = addSectionV2InState(get().rows, preset, afterRowKey);
-      set({ rows: result.rows, isDirty: true, selectedRowKey: result.newSectionKey });
+      set((state) => {
+        const result = addSectionV2InState(state.rows, preset, afterRowKey);
+        return {
+          rows: result.rows,
+          isDirty: true,
+          selectedRowKey: result.newSectionKey,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
+      });
     },
 
     addColumnV2: (sectionKey: string, gridRow: number, gridColumn: number, span: number): void => {
-      get()._pushSnapshot();
-
       set((state) => {
         const path = findSectionPath(state.rows, sectionKey);
         if (!path) return state;
@@ -216,13 +232,16 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             settings: { ...section.settings, preset: newPreset },
           };
         });
-        return { rows, isDirty: true };
+        return {
+          rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
     deleteColumnV2: (sectionKey: string, columnKey: string): void => {
-      get()._pushSnapshot();
-
       set((state) => {
         const path = findSectionPath(state.rows, sectionKey);
         if (!path) return state;
@@ -251,13 +270,13 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
           selectedColumnKey:
             state.selectedColumnKey === columnKey ? null : state.selectedColumnKey,
           isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
         };
       });
     },
 
     resizeColumnV2: (sectionKey: string, columnKey: string, newSpan: number): void => {
-      get()._pushSnapshot();
-
       set((state) => {
         const path = findSectionPath(state.rows, sectionKey);
         if (!path) return state;
@@ -282,7 +301,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             settings: { ...section.settings, preset: newPreset },
           };
         });
-        return { rows, isDirty: true };
+        return {
+          rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
@@ -295,8 +319,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return; // Blocked by cascade or section not found
 
-      get()._pushSnapshot();
-      set({ rows: result.rows, isDirty: true });
+      set((state) => ({
+        rows: result.rows,
+        isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     moveColumnV2: (sectionKey: string, columnKey: string, targetRow: number, targetColumn: number): void => {
@@ -309,8 +337,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return;
 
-      get()._pushSnapshot();
-      set({ rows: result.rows, isDirty: true });
+      set((state) => ({
+        rows: result.rows,
+        isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     swapColumnV2: (sectionKey: string, draggedKey: string, targetKey: string): void => {
@@ -322,8 +354,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return;
 
-      get()._pushSnapshot();
-      set({ rows: result.rows, isDirty: true });
+      set((state) => ({
+        rows: result.rows,
+        isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     moveColumnToGapV2: (sectionKey: string, columnKey: string, targetRow: number, targetColumn: number, targetSpan: number): void => {
@@ -337,8 +373,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return;
 
-      get()._pushSnapshot();
-      set({ rows: result.rows, isDirty: true });
+      set((state) => ({
+        rows: result.rows,
+        isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     moveColumnBetweenSections: (
@@ -360,16 +400,17 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return;
 
-      get()._pushSnapshot();
       // Clear any selection referencing the moved column in its old section —
       // the column key remains but the "selected section" context has changed.
-      set({
+      set((state) => ({
         rows: result.rows,
         isDirty: true,
         selectedColumnKey: columnKey,
         selectedRowKey: targetSectionKey,
         selectedBlockKey: null,
-      });
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     swapColumnsBetweenSections: (
@@ -387,23 +428,22 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       );
       if (!result) return;
 
-      get()._pushSnapshot();
       // After swap: the dragged column now lives in the target section.
       // Select it there (match mental model: "I just put this column here").
-      set({
+      set((state) => ({
         rows: result.rows,
         isDirty: true,
         selectedColumnKey: sourceColumnKey,
         selectedRowKey: targetSectionKey,
         selectedBlockKey: null,
-      });
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
+      }));
     },
 
     applyPresetV2: (sectionKey: string, preset: SectionV2Preset): void => {
       if (preset === "custom") return;
 
-      get()._pushSnapshot();
-
       set((state) => {
         const path = findSectionPath(state.rows, sectionKey);
         if (!path) return state;
@@ -424,7 +464,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             settings: { ...section.settings, preset },
           };
         });
-        return { rows, isDirty: true };
+        return {
+          rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
@@ -492,7 +537,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
     },
 
     addBlockV2: (sectionKey: string, columnKey: string, blockType: BlockType, insertIndex?: number): void => {
-      get()._pushSnapshot();
       const newBlock = createDefaultBlock(blockType);
 
       set((state) => {
@@ -514,7 +558,13 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             return { ...col, blocks: [...col.blocks, newBlock] };
           }),
         }));
-        return { rows, selectedBlockKey: newBlock._key, isDirty: true };
+        return {
+          rows,
+          selectedBlockKey: newBlock._key,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
@@ -570,7 +620,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       title: string,
       afterRowKey?: string | null
     ) => {
-      get()._pushSnapshot();
       const instance: CustomSectionInstance = {
         _type: "customSectionInstance",
         _key: generateKey(),
@@ -591,7 +640,13 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
         } else {
           rows.push(instance);
         }
-        return { rows, isDirty: true, selectedRowKey: instance._key };
+        return {
+          rows,
+          isDirty: true,
+          selectedRowKey: instance._key,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
@@ -599,7 +654,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       instanceKey: string,
       sectionData: PageSectionV2
     ) => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.map((item) =>
           item._key === instanceKey
@@ -607,6 +661,8 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             : item
         ),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
@@ -632,7 +688,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       instanceKey: string,
       updates: Partial<SectionV2Settings>
     ) => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.map((item) =>
           item._key === instanceKey && isCustomSectionInstance(item)
@@ -646,6 +701,8 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             : item
         ),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
@@ -661,13 +718,19 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
     // ---- Parallax Group operations (Session 123) ----
 
     addParallaxGroup: (afterRowKey?: string | null): void => {
-      get()._pushSnapshot();
-      const result = addParallaxGroupInState(get().rows, afterRowKey);
-      set({ rows: result.rows, isDirty: true, selectedRowKey: result.newGroupKey });
+      set((state) => {
+        const result = addParallaxGroupInState(state.rows, afterRowKey);
+        return {
+          rows: result.rows,
+          isDirty: true,
+          selectedRowKey: result.newGroupKey,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
+      });
     },
 
     addParallaxSlide: (groupKey: string): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.map((item) => {
           if (item._key !== groupKey || !isParallaxGroup(item)) return item;
@@ -676,11 +739,12 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
           return { ...group, slides: [...group.slides, newSlide] } as ContentItem;
         }),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
     removeParallaxSlide: (groupKey: string, slideKey: string): void => {
-      get()._pushSnapshot();
       set((state) => {
         let changed = false;
         const rows = state.rows.map((item) => {
@@ -694,7 +758,14 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
             slides: group.slides.filter((s) => s._key !== slideKey),
           } as ContentItem;
         });
-        return changed ? { rows, isDirty: true } : {};
+        return changed
+          ? {
+              rows,
+              isDirty: true,
+              _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+              _future: [],
+            }
+          : {};
       });
     },
 
@@ -703,7 +774,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       slideKey: string,
       direction: "up" | "down"
     ) => {
-      get()._pushSnapshot();
       set((state) => {
         let changed = false;
         const rows = state.rows.map((item) => {
@@ -718,7 +788,14 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
           changed = true;
           return { ...group, slides } as ContentItem;
         });
-        return changed ? { rows, isDirty: true } : {};
+        return changed
+          ? {
+              rows,
+              isDirty: true,
+              _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+              _future: [],
+            }
+          : {};
       });
     },
 
@@ -727,7 +804,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       slideKey: string,
       fields: Partial<ParallaxSlideV2>
     ) => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.map((item) => {
           if (item._key !== groupKey || !isParallaxGroup(item)) return item;
@@ -740,6 +816,8 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
           } as ContentItem;
         }),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
@@ -749,13 +827,14 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
         Pick<ParallaxGroup, "transition_effect" | "snap_enabled" | "parallax_intensity">
       >
     ) => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: state.rows.map((item) => {
           if (item._key !== groupKey || !isParallaxGroup(item)) return item;
           return { ...item, ...fields } as ContentItem;
         }),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
   };

package/lib/toast/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Public toast API.
+ *
+ * Usage:
+ *   import { toast } from "@morphika/andami/lib/toast";
+ *   toast.success("Saved");
+ *   toast.error("Upload failed");
+ *   toast.info("Processing…");
+ *   toast("Plain message");
+ *
+ * The `<ToastStack />` component (exported from `components/ui/ToastStack.tsx`)
+ * must be mounted somewhere in the tree — it's already included in the admin
+ * layout provided by the framework.
+ */
+
+import { useToastStore, type ToastKind } from "./store";
+
+/** Default auto-dismiss durations per kind (ms). */
+const DEFAULT_DURATIONS: Record<ToastKind, number> = {
+  default: 4000,
+  success: 4000,
+  info: 4000,
+  error: 6000,
+};
+
+interface ToastOptions {
+  /** Auto-dismiss after N ms. Pass `null` to keep the toast until dismissed manually. */
+  duration?: number | null;
+}
+
+function emit(message: string, kind: ToastKind, options?: ToastOptions): string {
+  const duration =
+    options?.duration === undefined ? DEFAULT_DURATIONS[kind] : options.duration;
+  return useToastStore.getState().push(message, kind, duration);
+}
+
+interface ToastFn {
+  (message: string, options?: ToastOptions): string;
+  success: (message: string, options?: ToastOptions) => string;
+  error: (message: string, options?: ToastOptions) => string;
+  info: (message: string, options?: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+const toastFn = ((message: string, options?: ToastOptions) => emit(message, "default", options)) as ToastFn;
+toastFn.success = (message, options) => emit(message, "success", options);
+toastFn.error = (message, options) => emit(message, "error", options);
+toastFn.info = (message, options) => emit(message, "info", options);
+toastFn.dismiss = (id) => useToastStore.getState().dismiss(id);
+toastFn.clear = () => useToastStore.getState().clear();
+
+export const toast = toastFn;
+
+export { useToastStore } from "./store";
+export type { Toast, ToastKind } from "./store";

package/lib/toast/store.ts

@@ -0,0 +1,56 @@
+/**
+ * Toast notification store — transient messages shown bottom-right of the admin.
+ *
+ * Independent Zustand store (not merged with the builder store) because toasts
+ * are cross-cutting: anything that mutates state or calls an API might want to
+ * surface feedback, and pulling that into the builder store would bloat it.
+ *
+ * Imperative API (see `index.ts`) mirrors conventions from `sonner` / `react-hot-toast`:
+ *   toast.success("Saved"); toast.error("Failed"); toast.info("Hello");
+ *
+ * The `<ToastStack />` component subscribes to `toasts` and renders them.
+ */
+"use client";
+
+import { create } from "zustand";
+
+export type ToastKind = "default" | "success" | "error" | "info";
+
+export interface Toast {
+  id: string;
+  message: string;
+  kind: ToastKind;
+  /** ms before auto-dismiss. `null` = never auto-dismiss. */
+  duration: number | null;
+  createdAt: number;
+}
+
+interface ToastStore {
+  toasts: Toast[];
+  push: (message: string, kind: ToastKind, duration: number | null) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+/** Max simultaneous toasts — oldest is dropped when exceeded. */
+const MAX_VISIBLE = 5;
+
+export const useToastStore = create<ToastStore>((set) => ({
+  toasts: [],
+  push: (message, kind, duration) => {
+    const id =
+      typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : `t${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    set((state) => {
+      const next = [...state.toasts, { id, message, kind, duration, createdAt: Date.now() }];
+      // Cap queue — drop oldest when exceeded
+      return { toasts: next.slice(-MAX_VISIBLE) };
+    });
+    return id;
+  },
+  dismiss: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+  },
+  clear: () => set({ toasts: [] }),
+}));

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.5.3";
+export const ANDAMI_VERSION = "0.5.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -103,6 +103,8 @@
     "./lib/logger": "./lib/logger.ts",
     "./lib/audit": "./lib/audit.ts",
     "./lib/revalidate": "./lib/revalidate.ts",
+    "./lib/toast": "./lib/toast/index.ts",
+    "./lib/toast/store": "./lib/toast/store.ts",
     "./lib/color-utils": "./lib/color-utils.ts",
     "./lib/format-utils": "./lib/format-utils.ts",
     "./lib/utils": "./lib/utils.ts",