@morphika/webframe 0.1.0

package/lib/builder/store.ts

@@ -0,0 +1,333 @@
+import { create } from "zustand";
+import type { BuilderStore, BuilderState, BlockType, PageSettings, CanvasTool, DeviceViewport, GridSettings } from "./types";
+import { DEFAULT_PAGE_SETTINGS, DEFAULT_GRID_SETTINGS, DEVICE_WIDTHS } from "./types";
+import { stateToDocument, documentToState } from "./serializer";
+import { generateKey } from "./utils";
+import type { ContentBlock, ContentItem, PageSection, PageSectionV2, SectionV2Settings, SectionSettings, SectionBlock, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
+import { MAX_HISTORY, pushSnapshot } from "./history";
+import {
+  computeCascade,
+  detectPreset,
+  columnsFromPreset,
+  addColumn as cascadeAddColumn,
+  deleteColumn as cascadeDeleteColumn,
+  resizeColumn as cascadeResizeColumn,
+} from "./cascade";
+import { applyBlocksToColumns, toCascadeColumns } from "./cascade-helpers";
+import {
+  moveBlockInState,
+  resizeColumnV2LeftInState,
+  addSectionV2InState,
+  moveColumnV2InState,
+  swapColumnV2InState,
+  moveColumnToGapV2InState,
+  addParallaxGroupInState,
+  findSectionPath,
+  getSectionFromPath,
+  updateSectionAtPath,
+} from "./store-helpers";
+import { csrfHeaders } from "../../lib/csrf-client";
+import { revalidateSite } from "../../lib/revalidate";
+import { createSectionActions } from "./store-sections";
+import { createBlockActions } from "./store-blocks";
+import { createCanvasActions } from "./store-canvas";
+
+// ============================================
+// Initial State
+// ============================================
+
+const initialState: BuilderState = {
+  pageId: null,
+  pageTitle: "",
+  pageSlug: "",
+  _originalSlug: "",
+  pageType: "page",
+  metadata: {},
+  publishedAt: null,
+  draftMode: true,
+
+  rows: [],
+  _customSectionCache: {},
+
+  selectedRowKey: null,
+  selectedColumnKey: null,
+  selectedBlockKey: null,
+  selectedProjectCardKey: null,
+
+  isDirty: false,
+  isSaving: false,
+  saveError: null,
+  lastSavedAt: null,
+
+  // Editor mode
+  previewMode: false,
+
+  // Custom section editor mode (Session 107)
+  editorMode: "page" as const,
+  customSectionSlug: null,
+  customSectionTitle: null,
+  savedPageState: null,
+
+  // Page-level settings
+  pageSettings: { ...DEFAULT_PAGE_SETTINGS },
+
+  // Grid settings (from Customize)
+  gridSettings: { ...DEFAULT_GRID_SETTINGS },
+
+  // Canvas (ephemeral)
+  canvasZoom: 1,
+  canvasPanX: 0,
+  canvasPanY: 0,
+  canvasTool: "select",
+  activeViewport: "desktop",
+
+  // BUG-014: track whether document had page_settings
+  _hasDocumentPageSettings: false,
+
+  // History
+  _history: [],
+  _future: [],
+  _isTimeTraveling: false,
+};
+
+// ============================================
+// Store
+// ============================================
+
+export const useBuilderStore = create<BuilderStore>((set, get) => ({
+  ...initialState,
+
+  // ---- Internal: push snapshot before mutations ----
+
+  // BUG-010 fix: Snapshots now include pageSettings alongside rows
+  _pushSnapshot: () => {
+    const state = get();
+    set({
+      _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+      _future: [], // new mutation clears redo stack
+    });
+  },
+
+  // ---- History (Undo/Redo) ----
+
+  canUndo: () => get()._history.length > 0,
+  canRedo: () => get()._future.length > 0,
+
+  undo: () => {
+    const state = get();
+    if (state._history.length === 0) return;
+    const history = [...state._history];
+    const previous = history.pop()!;
+    set({
+      _history: history,
+      _future: [...state._future, structuredClone({ rows: state.rows, pageSettings: state.pageSettings })],
+      rows: previous.rows,
+      pageSettings: previous.pageSettings,
+      isDirty: true,
+      selectedRowKey: null,
+      selectedColumnKey: null,
+      selectedBlockKey: null,
+    });
+  },
+
+  redo: () => {
+    const state = get();
+    if (state._future.length === 0) return;
+    const future = [...state._future];
+    const next = future.pop()!;
+    set({
+      _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+      _future: future,
+      rows: next.rows,
+      pageSettings: next.pageSettings,
+      isDirty: true,
+      selectedRowKey: null,
+      selectedColumnKey: null,
+      selectedBlockKey: null,
+    });
+  },
+
+  // ---- Page metadata ----
+
+  setPageTitle: (title: string) =>
+    set({ pageTitle: title, isDirty: true }),
+
+  setPageSlug: (slug: string) =>
+    set({ pageSlug: slug, isDirty: true }),
+
+  setMetadata: (metadata: Partial<PageMetadata>) =>
+    set((state) => ({
+      metadata: { ...state.metadata, ...metadata },
+      isDirty: true,
+    })),
+
+  setDraftMode: (draft: boolean) =>
+    set({ draftMode: draft, isDirty: true }),
+
+  publishPage: () =>
+    set({ draftMode: false, publishedAt: new Date().toISOString(), isDirty: true }),
+
+  unpublishPage: () =>
+    set({ draftMode: true, publishedAt: null, isDirty: true }),
+
+  // ---- Selection ----
+
+  selectRow: (key) =>
+    set({ selectedRowKey: key, selectedColumnKey: null, selectedBlockKey: null }),
+
+  selectColumn: (rowKey, colKey) =>
+    set({ selectedRowKey: rowKey, selectedColumnKey: colKey, selectedBlockKey: null }),
+
+  selectBlock: (key) => {
+    if (!key) {
+      set({ selectedBlockKey: null });
+      return;
+    }
+    // BUG-002 fix: resolve parent row and column keys so SettingsPanel
+    // and keyboard shortcuts always have consistent selection state.
+    const state = get();
+    let parentRowKey: string | null = null;
+    let parentColKey: string | null = null;
+
+    const searchColumns = (columns: import("@/lib/sanity/types").SectionColumn[], rowKey: string): boolean => {
+      for (const col of columns) {
+        if (col.blocks.some((b) => b._key === key)) {
+          parentRowKey = rowKey;
+          parentColKey = col._key;
+          return true;
+        }
+      }
+      return false;
+    };
+
+    for (const item of state.rows) {
+      if (isPageSection(item)) {
+        const sBlock = Array.isArray(item.block) ? item.block[0] : undefined;
+        if (sBlock && sBlock._key === key) {
+          parentRowKey = item._key;
+          break;
+        }
+      } else if (isPageSectionV2(item)) {
+        if (searchColumns(item.columns, item._key)) break;
+      } else if (isParallaxGroup(item)) {
+        const group = item as ParallaxGroup;
+        let found = false;
+        for (const slide of group.slides) {
+          // For parallax slides, the "row key" is the slide key (used as sectionKey)
+          if (searchColumns(slide.columns, slide._key)) {
+            found = true;
+            break;
+          }
+        }
+        if (found) break;
+      }
+    }
+    set({
+      selectedBlockKey: key,
+      selectedRowKey: parentRowKey,
+      selectedColumnKey: parentColKey,
+      selectedProjectCardKey: null,
+    });
+  },
+
+  selectProjectCard: (key) => set({ selectedProjectCardKey: key }),
+
+  clearSelection: () =>
+    set({ selectedRowKey: null, selectedColumnKey: null, selectedBlockKey: null, selectedProjectCardKey: null }),
+
+  // ---- Persistence ----
+
+  loadFromDocument: (doc) => {
+    const state = documentToState(doc);
+    set({
+      ...state,
+      _originalSlug: state.pageSlug, // Remember the slug from Sanity for API calls
+      isDirty: false,
+      isSaving: false,
+      saveError: null,
+      selectedRowKey: null,
+      selectedColumnKey: null,
+      selectedBlockKey: null,
+      selectedProjectCardKey: null,
+      // Reset history on document load
+      _history: [],
+      _future: [],
+      _isTimeTraveling: false,
+    });
+  },
+
+  save: async () => {
+    let state = get();
+    if (!state.pageId) {
+      set({ saveError: "No page loaded" });
+      return;
+    }
+    // Prevent saving with empty slug — auto-generate from title as fallback
+    if (!state.pageSlug.trim()) {
+      const autoSlug = state.pageTitle
+        .toLowerCase().trim()
+        .replace(/[^\w\s-]/g, "")
+        .replace(/[\s_]+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "");
+      if (autoSlug) {
+        set({ pageSlug: autoSlug });
+      } else {
+        set({ saveError: "Slug cannot be empty — please set a title or slug" });
+        return;
+      }
+    }
+    set({ isSaving: true, saveError: null });
+    // Re-read state after potential slug auto-generation to avoid stale data
+    state = get();
+    try {
+      const document = stateToDocument(state);
+      // Use the original slug (as loaded from Sanity) for the API endpoint,
+      // since that's how the API finds the document. If the user edited the
+      // slug, it will be updated in the document body.
+      const res = await fetch(`/api/admin/pages/${state._originalSlug}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...csrfHeaders(),
+        },
+        body: JSON.stringify(document),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Save failed" }));
+        throw new Error(data.error || `Save failed (${res.status})`);
+      }
+      set({
+        isSaving: false,
+        isDirty: false,
+        lastSavedAt: new Date().toISOString(),
+        _originalSlug: get().pageSlug, // Update original slug after successful save
+      });
+      // Revalidate public site so page changes appear immediately
+      const slug = get().pageSlug;
+      const pageType = get().pageType;
+      const publicPath = pageType === "project" ? `/work/${slug}` : `/${slug}`;
+      revalidateSite(slug ? [publicPath] : undefined);
+    } catch (err) {
+      set({
+        isSaving: false,
+        saveError: err instanceof Error ? err.message : "Save failed",
+      });
+    }
+  },
+
+  reset: () => set(initialState),
+
+  // ---- Dirty tracking ----
+
+  markDirty: () => set({ isDirty: true }),
+  markClean: () => set({ isDirty: false }),
+
+  // ---- Spread in action groups ----
+
+  ...createSectionActions(set, get),
+  ...createBlockActions(set, get),
+  ...createCanvasActions(set, get),
+}));

package/lib/builder/templates.ts

@@ -0,0 +1,297 @@
+// ============================================
+// Page Templates — Predefined page structures
+// ============================================
+// Each template defines a set of pre-built rows/columns/blocks
+// that get injected as content_rows when creating a new page.
+//
+// BUG-004 fix (Session 78): Templates now create first-class PageSection
+// objects for section blocks instead of the old matryoshka format.
+
+import type { ContentBlock, ContentItem, PageSection, PageSectionV2, SectionBlock, SectionColumn, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { generateKey } from "./utils";
+
+// ============================================
+// Template Types
+// ============================================
+
+export interface PageTemplate {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  label: string;
+  /** Short description shown under the label */
+  description: string;
+  /** Icon character or emoji for the card */
+  icon: string;
+  /** Suggested page_type ("page" | "project") */
+  pageType?: "page" | "project";
+  /** SVG preview (optional, rendered as mini wireframe in the picker) */
+  preview?: TemplateSectionPreview[];
+  /** Factory function — returns fresh content items (sections) with unique keys each time */
+  buildRows: () => ContentItem[];
+}
+
+/** Lightweight wireframe section descriptor for visual preview */
+export interface TemplateSectionPreview {
+  /** e.g. "cover", "text", "image", "grid", "spacer", "columns", "parallax" */
+  type: string;
+  /** Relative height hint (1 = standard row height) */
+  height?: number;
+}
+
+// ============================================
+// Blank Template (always first)
+// ============================================
+
+const blankTemplate: PageTemplate = {
+  id: "blank",
+  label: "Blank Page",
+  description: "Start from scratch with an empty canvas",
+  icon: "◻",
+  preview: [],
+  buildRows: () => [],
+};
+
+// ============================================
+// Helper: create a block with a fresh key
+// ============================================
+
+function makeBlock(partial: Record<string, unknown> & { _type: string; _key?: string }): ContentBlock {
+  return { ...partial, _key: partial._key || generateKey() } as ContentBlock;
+}
+
+/** Create a V2 section with a single full-width column containing the given blocks */
+function makeV2Section(blocks: ContentBlock[], settings?: Partial<PageSectionV2["settings"]>): PageSectionV2 {
+  const col: SectionColumn = {
+    _key: generateKey(),
+    grid_column: 1,
+    grid_row: 1,
+    span: 12,
+    blocks,
+  };
+  return {
+    _type: "pageSectionV2",
+    _key: generateKey(),
+    section_type: "empty-v2" as const,
+    columns: [col],
+    settings: {
+      preset: "full" as const,
+      grid_columns: 12,
+      col_gap: 16,
+      row_gap: 16,
+      ...(settings || {}),
+    },
+  };
+}
+
+/**
+ * Create a first-class PageSection with a section block.
+ * BUG-004 fix: replaces the old pattern of wrapping section blocks in makeRow().
+ */
+function makeSection(
+  blockType: "projectGridBlock",
+  blockDefaults: Record<string, unknown>,
+): PageSection {
+  const block = makeBlock({ _type: blockType, ...blockDefaults }) as SectionBlock;
+  return {
+    _type: "pageSection",
+    _key: generateKey(),
+    section_type: "projectGrid" as import("@/lib/sanity/types").PageSectionType,
+    block: [block] as [SectionBlock],
+    settings: {
+      spacing_top: "32",
+      spacing_bottom: "32",
+    },
+  };
+}
+
+// ============================================
+// Template: Project Grid (staggered project showcase)
+// ============================================
+
+const projectGridTemplate: PageTemplate = {
+  id: "project-grid",
+  label: "Project Grid",
+  description: "Staggered project showcase with configurable layouts",
+  icon: "⬡",
+  preview: [
+    { type: "spacer", height: 0.5 },
+    { type: "text", height: 0.5 },
+    { type: "spacer", height: 0.3 },
+    { type: "cover", height: 2 },
+    { type: "columns", height: 1.5 },
+    { type: "cover", height: 2 },
+    { type: "columns", height: 1.5 },
+  ],
+  buildRows: () => [
+    // Section 1: Top spacer
+    makeV2Section([makeBlock({ _type: "spacerBlock", height: "large" })]),
+    // Section 2: Optional intro text
+    makeV2Section([
+      makeBlock({
+        _type: "textBlock",
+        text: [],
+        style: { fontSize: 20, alignment: "left", fontWeight: "400" },
+      }),
+    ]),
+    // Section 3: Spacer
+    makeV2Section([makeBlock({ _type: "spacerBlock", height: "medium" })]),
+    // Section 4: Project Grid (first-class PageSection)
+    makeSection("projectGridBlock", {
+      columns: 3,
+      aspect_ratios: ["16/9"],
+      gap_v: 16,
+      gap_h: 16,
+      hover_effect: "scale",
+      show_subtitle: true,
+      border_radius: 0,
+      video_mode: "off",
+      projects: [],
+    }),
+    // Section 5: Bottom spacer
+    makeV2Section([makeBlock({ _type: "spacerBlock", height: "xlarge" })]),
+  ],
+};
+
+// ============================================
+// Helper: create a ParallaxSlide with defaults
+// ============================================
+
+function makeParallaxSlide(overrides?: Partial<ParallaxSlideV2>): ParallaxSlideV2 {
+  return {
+    _key: generateKey(),
+    _type: "parallaxSlide",
+    background_type: "image",
+    background_position: "center center",
+    background_overlay_color: "#000000",
+    background_overlay_opacity: 0,
+    columns: [{
+      _key: generateKey(),
+      grid_column: 1,
+      grid_row: 1,
+      span: 12,
+      blocks: [],
+    }],
+    section_settings: {
+      preset: "full",
+      grid_columns: 12,
+      col_gap: 20,
+      row_gap: 20,
+      spacing_top: "0",
+      spacing_bottom: "0",
+    },
+    ...overrides,
+  };
+}
+
+// ============================================
+// Template: Parallax Home (full-screen slide showcase)
+// ============================================
+
+const parallaxHomeTemplate: PageTemplate = {
+  id: "parallax-home",
+  label: "Parallax Home",
+  description: "Full-screen slides with parallax backgrounds",
+  icon: "▽",
+  preview: [
+    { type: "parallax", height: 3 },
+    { type: "spacer", height: 0.3 },
+  ],
+  buildRows: () => {
+    // Slide 1: hero — single centered column with a text block placeholder
+    const slide1 = makeParallaxSlide({
+      columns: [{
+        _key: generateKey(),
+        grid_column: 3,
+        grid_row: 1,
+        span: 8,
+        blocks: [
+          makeBlock({
+            _type: "textBlock",
+            text: [],
+            style: { fontSize: 48, alignment: "center", fontWeight: "700" },
+          }),
+        ],
+      }],
+      section_settings: {
+        preset: "full",
+        grid_columns: 12,
+        col_gap: 20,
+        row_gap: 20,
+        spacing_top: "0",
+        spacing_bottom: "0",
+      },
+      background_overlay_opacity: 30,
+    });
+
+    // Slide 2: content — two columns (6/6)
+    const slide2 = makeParallaxSlide({
+      columns: [
+        {
+          _key: generateKey(),
+          grid_column: 1,
+          grid_row: 1,
+          span: 6,
+          blocks: [
+            makeBlock({
+              _type: "textBlock",
+              text: [],
+              style: { fontSize: 24, alignment: "left", fontWeight: "500" },
+            }),
+          ],
+        },
+        {
+          _key: generateKey(),
+          grid_column: 7,
+          grid_row: 1,
+          span: 6,
+          blocks: [],
+        },
+      ],
+      section_settings: {
+        preset: "halves",
+        grid_columns: 12,
+        col_gap: 20,
+        row_gap: 20,
+        spacing_top: "0",
+        spacing_bottom: "0",
+      },
+      background_overlay_opacity: 20,
+    });
+
+    // Slide 3: minimal — single full-width column
+    const slide3 = makeParallaxSlide({
+      background_overlay_opacity: 15,
+    });
+
+    const parallaxGroup: ParallaxGroup = {
+      _type: "parallaxGroup",
+      _key: generateKey(),
+      slides: [slide1, slide2, slide3],
+      transition_effect: "parallax",
+      snap_enabled: true,
+      parallax_intensity: 0.4,
+    };
+
+    return [parallaxGroup];
+  },
+};
+
+// ============================================
+// Template Registry
+// ============================================
+// Order matters — this is the display order in the picker.
+// "blank" is always first.
+
+export const PAGE_TEMPLATES: PageTemplate[] = [
+  blankTemplate,
+  projectGridTemplate,
+  parallaxHomeTemplate,
+];
+
+/**
+ * Get a template by ID. Returns undefined if not found.
+ */
+export function getTemplate(id: string): PageTemplate | undefined {
+  return PAGE_TEMPLATES.find((t) => t.id === id);
+}