@morphika/andami 0.1.2

package/lib/builder/store-blocks.ts

@@ -0,0 +1,193 @@
+import type { BuilderStore, BuilderState } from "./types";
+import type { ContentBlock, ContentItem, PageSection, PageSectionV2, ParallaxGroup, SectionBlock } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
+import { createDefaultBlock } from "./defaults";
+import { generateKey } from "./utils";
+import { findSectionPath, updateSectionAtPath, moveBlockInState } from "./store-helpers";
+
+type StoreSet = (
+  partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
+) => void;
+type StoreGet = () => BuilderStore;
+
+export function createBlockActions(set: StoreSet, get: StoreGet) {
+  return {
+    // ---- Block operations ----
+
+    updateBlock: (blockKey: string, updates: Partial<ContentBlock>): void => {
+      // Snapshot is NOT pushed here to avoid polluting undo history on every keystroke.
+      const updateColumns = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
+        cols.map((col) => ({
+          ...col,
+          blocks: col.blocks.map((b) =>
+            b._key === blockKey ? ({ ...b, ...updates } as ContentBlock) : b
+          ),
+        }));
+
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (isPageSection(item)) {
+            const block = item.block[0];
+            if (block && block._key === blockKey) {
+              return { ...item, block: [{ ...block, ...updates } as SectionBlock] };
+            }
+            return item;
+          }
+          if (isPageSectionV2(item)) {
+            return { ...item, columns: updateColumns(item.columns) };
+          }
+          if (isParallaxGroup(item)) {
+            return {
+              ...item,
+              slides: (item as ParallaxGroup).slides.map((slide) => ({
+                ...slide,
+                columns: updateColumns(slide.columns),
+              })),
+            } as ContentItem;
+          }
+          return item;
+        }),
+        isDirty: true,
+      }));
+    },
+
+    deleteBlock: (blockKey: string): void => {
+      get()._pushSnapshot();
+      const filterBlocks = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
+        cols.map((c) => ({ ...c, blocks: c.blocks.filter((b) => b._key !== blockKey) }));
+
+      set((state) => {
+        // Handle PageSection: delete the entire section if its block is being deleted
+        const updatedRows = state.rows.filter((item) => {
+          if (isPageSection(item)) {
+            const block = item.block[0];
+            return !(block && block._key === blockKey);
+          }
+          return true;
+        });
+
+        // Handle V2 Sections + ParallaxGroup slides
+        const finalRows = updatedRows.map((item) => {
+          if (isPageSectionV2(item)) {
+            return { ...item, columns: filterBlocks(item.columns) } as ContentItem;
+          }
+          if (isParallaxGroup(item)) {
+            return {
+              ...item,
+              slides: (item as ParallaxGroup).slides.map((slide) => ({
+                ...slide,
+                columns: filterBlocks(slide.columns),
+              })),
+            } as ContentItem;
+          }
+          return item;
+        });
+
+        return {
+          rows: finalRows,
+          selectedBlockKey: state.selectedBlockKey === blockKey ? null : state.selectedBlockKey,
+          isDirty: true,
+        };
+      });
+    },
+
+    duplicateBlock: (blockKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => {
+        const newKey = generateKey();
+        const dupInColumns = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
+          cols.map((col) => {
+            const idx = col.blocks.findIndex((b) => b._key === blockKey);
+            if (idx === -1) return col;
+            const original = col.blocks[idx];
+            const clone = { ...JSON.parse(JSON.stringify(original)), _key: newKey } as ContentBlock;
+            const blocks = [...col.blocks];
+            blocks.splice(idx + 1, 0, clone);
+            return { ...col, blocks };
+          });
+
+        const rows = state.rows.map((item) => {
+          if (isPageSectionV2(item)) {
+            return { ...item, columns: dupInColumns(item.columns) } as ContentItem;
+          }
+          if (isParallaxGroup(item)) {
+            return {
+              ...item,
+              slides: (item as ParallaxGroup).slides.map((slide) => ({
+                ...slide,
+                columns: dupInColumns(slide.columns),
+              })),
+            } as ContentItem;
+          }
+          return item;
+        });
+        return { rows, selectedBlockKey: newKey, isDirty: true };
+      });
+    },
+
+    moveBlock: (blockKey: string, targetSectionKey: string, targetColumnKey: string, toIndex: number): void => {
+      const result = moveBlockInState(get().rows, blockKey, targetSectionKey, targetColumnKey, toIndex);
+      if (!result) return;
+
+      get()._pushSnapshot();
+      set({ rows: result.rows, isDirty: true });
+    },
+
+    reorderBlocks: (sectionKey: string, columnKey: string, fromIndex: number, toIndex: number): void => {
+      get()._pushSnapshot();
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => ({
+          ...section,
+          columns: section.columns.map((c) => {
+            if (c._key !== columnKey) return c;
+            const blocks = [...c.blocks];
+            const [moved] = blocks.splice(fromIndex, 1);
+            blocks.splice(toIndex, 0, moved);
+            return { ...c, blocks };
+          }),
+        }));
+        return { rows, isDirty: true };
+      });
+    },
+
+    // ---- Debounced block update (no undo snapshot per keystroke) ----
+
+    updateBlockDebounced: (blockKey: string, updates: Partial<ContentBlock>): void => {
+      const updateColumns = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
+        cols.map((col) => ({
+          ...col,
+          blocks: col.blocks.map((b) =>
+            b._key === blockKey ? ({ ...b, ...updates } as ContentBlock) : b
+          ),
+        }));
+
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (isPageSection(item)) {
+            const block = item.block[0];
+            if (block && block._key === blockKey) {
+              return { ...item, block: [{ ...block, ...updates } as SectionBlock] };
+            }
+            return item;
+          }
+          if (isPageSectionV2(item)) {
+            return { ...item, columns: updateColumns(item.columns) };
+          }
+          if (isParallaxGroup(item)) {
+            return {
+              ...item,
+              slides: (item as ParallaxGroup).slides.map((slide) => ({
+                ...slide,
+                columns: updateColumns(slide.columns),
+              })),
+            } as ContentItem;
+          }
+          return item;
+        }),
+        isDirty: true,
+      }));
+    },
+  };
+}

package/lib/builder/store-canvas.ts

@@ -0,0 +1,319 @@
+import type { BuilderStore, BuilderState, CanvasTool, DeviceViewport, PageSettings } from "./types";
+import { DEFAULT_PAGE_SETTINGS, DEFAULT_GRID_SETTINGS, DEVICE_WIDTHS } from "./types";
+import type { PageSectionV2 } from "../../lib/sanity/types";
+import { isPageSectionV2 } from "../../lib/sanity/types";
+import { generateKey } from "./utils";
+import { csrfHeaders } from "../../lib/csrf-client";
+import { revalidateSite } from "../../lib/revalidate";
+
+type StoreSet = (
+  partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
+) => void;
+type StoreGet = () => BuilderStore;
+
+export function createCanvasActions(set: StoreSet, get: StoreGet) {
+  return {
+    // ---- Editor mode ----
+
+    togglePreviewMode: () =>
+      set((state) => ({
+        previewMode: !state.previewMode,
+        // Clear selection when entering preview mode
+        // BUG-001 fix: state.previewMode is the value BEFORE toggle, so when it's false
+        // we're about to enter preview → clear selection
+        ...(!state.previewMode
+          ? {
+              selectedRowKey: null,
+              selectedColumnKey: null,
+              selectedBlockKey: null,
+            }
+          : {}),
+      })),
+
+    setPreviewMode: (preview: boolean) =>
+      set({
+        previewMode: preview,
+        ...(preview
+          ? { selectedRowKey: null, selectedColumnKey: null, selectedBlockKey: null }
+          : {}),
+      }),
+
+    // ---- Custom Section Editor Mode (Session 107) ----
+
+    enterSectionEditor: (slug: string | null, title: string | null, sectionData: PageSectionV2 | null): void => {
+      const state = get();
+      // Stash current page rows and selection
+      const savedPageState = {
+        rows: state.rows,
+        selectedKey: state.selectedRowKey,
+      };
+
+      // Build the single section for the editor
+      const editorSection: PageSectionV2 = sectionData || {
+        _type: "pageSectionV2",
+        _key: generateKey(),
+        section_type: "empty-v2",
+        columns: [],
+        settings: {
+          preset: "full",
+          grid_columns: 12,
+          col_gap: 20,
+          row_gap: 20,
+        },
+      };
+
+      set({
+        editorMode: "customSection",
+        customSectionSlug: slug,
+        customSectionTitle: title,
+        savedPageState,
+        rows: [editorSection],
+        selectedRowKey: null,
+        selectedColumnKey: null,
+        selectedBlockKey: null,
+        selectedProjectCardKey: null,
+        // Reset history for the editor session
+        _history: [],
+        _future: [],
+      });
+    },
+
+    exitSectionEditor: (wasSaved?: boolean): void => {
+      const state = get();
+      const savedPageState = state.savedPageState;
+      set({
+        editorMode: "page",
+        customSectionSlug: null,
+        customSectionTitle: null,
+        savedPageState: null,
+        rows: savedPageState?.rows || [],
+        selectedRowKey: savedPageState?.selectedKey || null,
+        selectedColumnKey: null,
+        selectedBlockKey: null,
+        selectedProjectCardKey: null,
+        // m1 fix: only mark page dirty if the section was actually saved (Session 110)
+        isDirty: wasSaved ? true : state.isDirty,
+        // Reset history back to page context
+        _history: [],
+        _future: [],
+      });
+    },
+
+    saveSectionEditor: async (title: string): Promise<{ id: string; slug: string; title: string } | null> => {
+      const state = get();
+      if (state.editorMode !== "customSection" || state.rows.length === 0) {
+        return null;
+      }
+
+      // Serialize the single V2 section from rows[0]
+      const sectionItem = state.rows[0];
+      if (!isPageSectionV2(sectionItem)) {
+        return null;
+      }
+
+      // Build the section data using the serializer's stateToDocument approach
+      // We need to strip the section from the full document format
+      const sectionData = structuredClone(sectionItem);
+
+      const slug = state.customSectionSlug;
+      const isCreating = !slug;
+
+      try {
+        set({ isSaving: true, saveError: null });
+
+        if (isCreating) {
+          // Generate slug from title
+          const newSlug = title
+            .toLowerCase()
+            .trim()
+            .replace(/[^\w\s-]/g, "")
+            .replace(/[\s_]+/g, "-")
+            .replace(/-+/g, "-")
+            .replace(/^-|-$/g, "");
+
+          const res = await fetch("/api/admin/custom-sections", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              ...csrfHeaders(),
+            },
+            body: JSON.stringify({
+              title,
+              slug: newSlug,
+              section: sectionData,
+            }),
+          });
+
+          if (!res.ok) {
+            const data = await res.json().catch(() => ({ error: "Failed to create" }));
+            throw new Error(data.error || `Create failed (${res.status})`);
+          }
+
+          const data = await res.json();
+          set({ isSaving: false });
+
+          // Exit editor mode — wasSaved=true to mark page dirty
+          get().exitSectionEditor(true);
+
+          return {
+            id: data.section._id,
+            slug: newSlug,
+            title,
+          };
+        } else {
+          // Update existing
+          const res = await fetch(`/api/admin/custom-sections/${slug}`, {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              ...csrfHeaders(),
+            },
+            body: JSON.stringify({
+              title,
+              section: sectionData,
+            }),
+          });
+
+          if (!res.ok) {
+            const data = await res.json().catch(() => ({ error: "Failed to save" }));
+            throw new Error(data.error || `Save failed (${res.status})`);
+          }
+
+          set({ isSaving: false });
+
+          // Exit editor mode — wasSaved=true to mark page dirty
+          get().exitSectionEditor(true);
+
+          return {
+            id: "", // ID not needed for update flow
+            slug,
+            title,
+          };
+        }
+      } catch (err) {
+        set({
+          isSaving: false,
+          saveError: err instanceof Error ? err.message : "Save failed",
+        });
+        return null;
+      }
+    },
+
+    // ---- Page-level settings ----
+
+    updatePageSettings: (settings: Partial<PageSettings>) =>
+      set((state) => ({
+        pageSettings: { ...state.pageSettings, ...settings },
+        isDirty: true,
+      })),
+
+    /** Apply global styles as page defaults (called on page load, doesn't mark dirty).
+     *  Only fills in colors when the page doesn't have its own saved values —
+     *  page-specific colors always win over global defaults.
+     *
+     *  BUG-014 fix: Uses _hasDocumentPageSettings flag (set by serializer) instead
+     *  of comparing against magic color values. This correctly handles the case where
+     *  a user explicitly chose white (#ffffff) or black (#000000) as their page color. */
+    applyGlobalStyles: async () => {
+      try {
+        const res = await fetch("/api/styles");
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data?.styles) return;
+        const { colors, grid } = data.styles;
+        set((state) => {
+          // BUG-014 fix: If the Sanity document had page_settings saved,
+          // the user intentionally set these colors — don't overwrite them.
+          const hasOwnColors = state._hasDocumentPageSettings;
+
+          return {
+            pageSettings: {
+              ...state.pageSettings,
+              ...(colors && !hasOwnColors
+                ? {
+                    background_color: colors.background || state.pageSettings.background_color,
+                    text_color: colors.text || state.pageSettings.text_color,
+                  }
+                : {}),
+            },
+            ...(grid
+              ? {
+                  gridSettings: {
+                    width: grid.width || DEFAULT_GRID_SETTINGS.width,
+                    outer_padding: grid.outer_padding || DEFAULT_GRID_SETTINGS.outer_padding,
+                    gutter_desktop: grid.gutter_desktop || DEFAULT_GRID_SETTINGS.gutter_desktop,
+                    gutter_responsive:
+                      grid.gutter_responsive || DEFAULT_GRID_SETTINGS.gutter_responsive,
+                    gutter_phone: grid.gutter_phone || DEFAULT_GRID_SETTINGS.gutter_phone,
+                  },
+                }
+              : {}),
+          };
+        });
+      } catch {
+        // Silently fail — defaults work fine
+      }
+    },
+
+    // ---- Canvas ----
+
+    setCanvasZoom: (zoom: number) =>
+      set({ canvasZoom: Math.min(2, Math.max(0.1, zoom)) }),
+
+    setCanvasPan: (x: number, y: number) =>
+      set({ canvasPanX: x, canvasPanY: y }),
+
+    setCanvasTool: (tool: CanvasTool) =>
+      set({ canvasTool: tool }),
+
+    setActiveViewport: (viewport: DeviceViewport) =>
+      set({ activeViewport: viewport }),
+
+    zoomToFit: (viewportWidth: number, viewportHeight: number): void => {
+      // Phase 2: fit all 3 device frames (Desktop + Tablet + Phone)
+      const frameGap = 80;
+      const totalContentWidth =
+        DEVICE_WIDTHS.desktop + frameGap + DEVICE_WIDTHS.tablet + frameGap + DEVICE_WIDTHS.phone;
+      const padding = 120; // px padding around all frames
+      const fitZoom = Math.min(
+        (viewportWidth - padding) / totalContentWidth,
+        1.0 // don't zoom above 100% for fit
+      );
+      const clampedZoom = Math.min(1.0, Math.max(0.1, fitZoom));
+      // Center all frames horizontally
+      const scaledWidth = totalContentWidth * clampedZoom;
+      const panX = (viewportWidth - scaledWidth) / 2;
+      const panY = 40; // small top padding
+      set({ canvasZoom: clampedZoom, canvasPanX: panX, canvasPanY: panY });
+    },
+
+    zoomToPoint: (newZoom: number, cursorX: number, cursorY: number): void => {
+      const { canvasZoom: oldZoom, canvasPanX: panX, canvasPanY: panY } = get();
+      const clampedZoom = Math.min(2, Math.max(0.1, newZoom));
+      // Point in canvas space before zoom
+      const canvasX = (cursorX - panX) / oldZoom;
+      const canvasY = (cursorY - panY) / oldZoom;
+      // New pan to keep same point under cursor
+      const newPanX = cursorX - canvasX * clampedZoom;
+      const newPanY = cursorY - canvasY * clampedZoom;
+      set({ canvasZoom: clampedZoom, canvasPanX: newPanX, canvasPanY: newPanY });
+    },
+
+    zoomToFrame: (device: DeviceViewport, viewportWidth: number, viewportHeight: number): void => {
+      // Calculate the X offset of the target frame in canvas space
+      const frameGap = 80;
+      const order: DeviceViewport[] = ["desktop", "tablet", "phone"];
+      let frameX = 0;
+      for (const d of order) {
+        if (d === device) break;
+        frameX += DEVICE_WIDTHS[d] + frameGap;
+      }
+      const frameWidth = DEVICE_WIDTHS[device];
+      // Zoom to 100% and center the frame in the viewport
+      const zoom = 1.0;
+      const panX = (viewportWidth - frameWidth * zoom) / 2 - frameX * zoom;
+      const panY = 40;
+      set({ canvasZoom: zoom, canvasPanX: panX, canvasPanY: panY });
+    },
+  };
+}