@morphika/andami 0.5.2 → 0.5.4

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: [],
+        };
       });
     },
 
@@ -541,6 +591,27 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       });
     },
 
+    // Update desktop-level column layout fields (spacing/background/border).
+    // Undefined values in `updates` clear that field.
+    updateColumnV2Layout: (sectionKey, colKey, updates) => {
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => ({
+          ...section,
+          columns: section.columns.map((col) => {
+            if (col._key !== colKey) return col;
+            const merged = { ...col, ...updates };
+            for (const [k, v] of Object.entries(updates)) {
+              if (v === undefined) delete (merged as Record<string, unknown>)[k];
+            }
+            return merged;
+          }),
+        }));
+        return { rows, isDirty: true };
+      });
+    },
+
     // ---- Custom Section Instance operations (Session 108) ----
 
     addCustomSectionInstance: (
@@ -549,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(),
@@ -570,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: [],
+        };
       });
     },
 
@@ -578,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
@@ -586,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: [],
       }));
     },
 
@@ -611,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)
@@ -625,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: [],
       }));
     },
 
@@ -640,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;
@@ -655,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) => {
@@ -673,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: [],
+            }
+          : {};
       });
     },
 
@@ -682,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) => {
@@ -697,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: [],
+            }
+          : {};
       });
     },
 
@@ -706,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;
@@ -719,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: [],
       }));
     },
 
@@ -728,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/builder/types-slices.ts

@@ -31,6 +31,7 @@ import type {
   PageSectionV2,
   SectionV2Settings,
   SectionV2Preset,
+  SectionColumn,
   PageMetadata,
   ColorField,
   CoverSection,
@@ -168,6 +169,19 @@ export interface SectionSliceActions {
     colKey: string,
     config: import("../../lib/animation/enter-types").EnterAnimationConfig | undefined,
   ) => void;
+  /** Update desktop-level layout fields on a V2/cover/parallax-slide column.
+   *  Columns only support background + border — spacing belongs to the
+   *  section (row_gap/col_gap) or to block-level padding. */
+  updateColumnV2Layout: (
+    sectionKey: string,
+    colKey: string,
+    updates: Partial<Pick<
+      SectionColumn,
+      | "background_color" | "background_opacity" | "background_image"
+      | "background_size" | "background_position" | "background_repeat"
+      | "border_color" | "border_width" | "border_style" | "border_sides" | "border_radius"
+    >>,
+  ) => void;
 
   /** Select a V2 column — sets selectedRowKey + selectedColumnKey. */
   selectColumnV2: (sectionKey: string | null, columnKey: string | null) => void;

package/lib/sanity/queries.ts

@@ -20,6 +20,18 @@ const blockExpansion = `
       grid_row,
       span,
       enter_animation,
+      // Column-level background + border (Session 184)
+      background_color,
+      background_opacity,
+      background_image,
+      background_size,
+      background_position,
+      background_repeat,
+      border_color,
+      border_width,
+      border_style,
+      border_sides,
+      border_radius,
       blocks[] {
         _type,
         _key,
@@ -60,6 +72,18 @@ const blockExpansion = `
         grid_column,
         grid_row,
         span,
+        // Column-level background + border (Session 184)
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -429,6 +453,18 @@ export const customSectionBySlugQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -456,6 +492,18 @@ export const customSectionByIdQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,

package/lib/sanity/types.ts

@@ -559,6 +559,20 @@ export interface SectionColumn {
   blocks: ContentBlock[];   // same block types as today
   // NEW (Session 116) — column-level enter animation for 4-level cascade
   enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  // Column-level layout — desktop-only for now. Background + border only
+  // (no spacing — section row_gap/col_gap + block padding cover that).
+  // Viewport overrides are TBD: the current ColumnOverride type is position-only.
+  background_color?: string;
+  background_opacity?: number;
+  background_image?: string;
+  background_size?: string;
+  background_position?: string;
+  background_repeat?: string;
+  border_color?: string;
+  border_width?: string;
+  border_style?: string;
+  border_sides?: string;
+  border_radius?: string;
 }
 
 export interface ColumnOverride {

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.2";
+export const ANDAMI_VERSION = "0.5.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -193,7 +193,6 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "archiver": "^7.0.1",
     "@aws-sdk/client-s3": "^3.1021.0",
     "@aws-sdk/s3-request-presigner": "^3.1021.0",
     "@dnd-kit/core": "^6.3.1",
@@ -210,10 +209,11 @@
     "@tiptap/starter-kit": "^2.12.0",
     "@types/archiver": "^6.0.3",
     "@types/unzipper": "^0.10.10",
+    "archiver": "^7.0.1",
     "jszip": "^3.10.1",
-    "next-sanity": "^12.1.5",
+    "next-sanity": "^12.3.0",
     "ogl": "^1.0.8",
-    "sanity": "^5.17.1",
+    "sanity": "^5.21.0",
     "unzipper": "^0.12.3",
     "zustand": "^5.0.12"
   },
@@ -228,10 +228,12 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
+    "framer-motion": "^12.38.0",
     "jsdom": "^26.1.0",
-    "next": "16.2.1",
+    "next": "^16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "styled-components": "^6.4.0",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.1.2"