@morphika/andami 0.4.0 → 0.4.2

package/lib/builder/defaults.ts

@@ -4,6 +4,12 @@ import { generateKey } from "./utils";
 import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
 import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
 
+// Side-effect import: populates the block registry with all built-in block
+// types so `createDefaultBlock` can delegate to each registration's
+// `defaultFactory`. See `./block-registry.ts` for the stability contract.
+import "./block-registrations";
+import { getBlockRegistration } from "./block-registry";
+
 // ============================================
 // Parallax slide defaults (Session 128)
 // ============================================
@@ -116,109 +122,23 @@ export const DEFAULT_TYPEWRITER_CONFIG: Required<TypewriterConfig> = {
 
 /**
  * Create a new block with sensible defaults for the given block type.
+ *
+ * Session 181 (C): switched from a giant switch-case to a registry lookup.
+ * Each block type now declares its default shape in
+ * `./block-registrations.ts` via the `defaultFactory` field. The
+ * registration module is loaded eagerly here (side-effect import) so the
+ * registry is populated before any `createDefaultBlock` call.
+ *
+ * Unknown block types fall back to the minimal `{ _type, _key }` shape —
+ * same behavior as the previous switch-case's `default` branch.
  */
 export function createDefaultBlock(blockType: BlockType): ContentBlock {
-  const _key = generateKey();
-
-  switch (blockType) {
-    case "textBlock":
-      return {
-        _type: "textBlock",
-        _key,
-        text: [],
-        style: { fontSize: 14, alignment: "left", fontWeight: "400" },
-      };
-    case "imageBlock":
-      return {
-        _type: "imageBlock",
-        _key,
-        asset_path: "",
-        alt: "",
-        width: "full",
-        aspect_ratio: "auto",
-        lazy: true,
-        shadow: false,
-        border_radius: "",
-      };
-    case "imageGridBlock":
-      return {
-        _type: "imageGridBlock",
-        _key,
-        images: [],
-        h_gutter: 10,
-        v_gutter: 10,
-        images_per_row: 2,
-        random_grid: "disabled",
-        random_seed: 1,
-        lightbox: false,
-        object_fit: "cover",
-      };
-    case "videoBlock":
-      return {
-        _type: "videoBlock",
-        _key,
-        video_type: "vimeo",
-        url_or_path: "",
-        autoplay: false,
-        loop: false,
-        muted: true,
-        controls: true,
-        aspect_ratio: "16:9",
-      };
-    case "spacerBlock":
-      return {
-        _type: "spacerBlock",
-        _key,
-        height: "medium",
-      };
-    case "buttonBlock":
-      return {
-        _type: "buttonBlock",
-        _key,
-        text: "Button",
-        url: "#",
-        style: "primary",
-        size: "medium",
-      };
-    case "projectGridBlock":
-      return {
-        _type: "projectGridBlock",
-        _key,
-        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: [],
-      };
-    case "projectCarouselBlock":
-      return {
-        _type: "projectCarouselBlock",
-        _key,
-        source_mode: "auto_latest",
-        max_projects: 8,
-        exclude_current: true,
-        cards_per_view_desktop: 3.5,
-        cards_per_view_tablet: 2.2,
-        cards_per_view_phone: 1.2,
-        gap: 16,
-        aspect_ratio: "4/3",
-        show_title: true,
-        show_subtitle: false,
-        border_radius: 0,
-        hover_effect: "scale",
-        video_mode: "off",
-        show_arrows: true,
-        show_dots: false,
-        snap_scroll: true,
-      };
-    default:
-      return {
-        _type: blockType,
-        _key,
-      } as ContentBlock;
+  const registration = getBlockRegistration(blockType);
+  if (registration) {
+    return registration.defaultFactory(generateKey());
   }
+  return {
+    _type: blockType,
+    _key: generateKey(),
+  } as ContentBlock;
 }

package/lib/builder/store-blocks.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState } from "./types";
+import type { BuilderStore, BuilderState, BlockSliceActions } from "./types";
 import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup, CoverSection } from "../../lib/sanity/types";
 import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { createDefaultBlock } from "./defaults";
@@ -47,7 +47,7 @@ function applyBlockUpdate(
   });
 }
 
-export function createBlockActions(set: StoreSet, get: StoreGet) {
+export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActions {
   return {
     // ---- Block operations ----
 

package/lib/builder/store-canvas.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState, CanvasTool, DeviceViewport, PageSettings } from "./types";
+import type { BuilderStore, BuilderState, CanvasTool, DeviceViewport, PageSettings, CanvasSliceActions } 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";
@@ -11,7 +11,7 @@ type StoreSet = (
 ) => void;
 type StoreGet = () => BuilderStore;
 
-export function createCanvasActions(set: StoreSet, get: StoreGet) {
+export function createCanvasActions(set: StoreSet, get: StoreGet): CanvasSliceActions {
   return {
     // ---- Editor mode ----
 

package/lib/builder/store-cover.ts

@@ -9,7 +9,7 @@
  * Session 176: Cover Sections — Phase 3 (Store).
  */
 
-import type { BuilderState } from "./types";
+import type { BuilderState, CoverSliceActions } from "./types";
 import type {
   ContentItem,
   CoverSection,
@@ -79,7 +79,7 @@ function updateCoverInRows(
   });
 }
 
-export function createCoverActions(set: StoreSet, get: StoreGet) {
+export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActions {
   return {
     addCoverSection: (afterRowKey?: string | null): void => {
       get()._pushSnapshot();

package/lib/builder/store-helpers.ts

@@ -16,6 +16,7 @@ import type {
   SectionColumn,
   SectionV2Preset,
   CoverSection,
+  CoverSectionResponsiveOverride,
 } from "../../lib/sanity/types";
 import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { columnsFromPreset, detectPreset } from "./cascade";
@@ -480,6 +481,25 @@ export function updateSectionAtPath(
     return rows.map((item, i) => {
       if (i !== path.index || !isCoverSection(item)) return item;
       const cover = item as CoverSection;
+
+      // Passthrough of `responsive.tablet/phone.columns` only — V2 operations
+      // (column DnD, resize) read and write this field, and its shape
+      // (`ColumnOverride[]`) is identical between V2 and Cover. We do NOT
+      // expose Cover-specific fields (`cover_rows`, Cover `settings`) to the
+      // updater via virtualSection.responsive — those stay on the cover
+      // unchanged. This keeps the virtualSection's shape a true V2.
+      const virtualResponsive: PageSectionV2["responsive"] =
+        cover.responsive?.tablet?.columns || cover.responsive?.phone?.columns
+          ? {
+              ...(cover.responsive.tablet?.columns
+                ? { tablet: { columns: cover.responsive.tablet.columns } }
+                : {}),
+              ...(cover.responsive.phone?.columns
+                ? { phone: { columns: cover.responsive.phone.columns } }
+                : {}),
+            }
+          : undefined;
+
       const virtualSection: PageSectionV2 = {
         _type: "pageSectionV2",
         _key: cover._key,
@@ -497,11 +517,34 @@ export function updateSectionAtPath(
           enter_animation: cover.settings.enter_animation,
           stagger: cover.settings.stagger,
         },
+        responsive: virtualResponsive,
       };
       const updated = updater(virtualSection);
+
+      // Merge updated `responsive.columns` back into cover.responsive,
+      // preserving `cover_rows` and Cover-specific `settings` per viewport.
+      const mergedResponsive: CoverSection["responsive"] = {};
+      for (const vp of ["tablet", "phone"] as const) {
+        const existing: CoverSectionResponsiveOverride = {
+          ...(cover.responsive?.[vp] || {}),
+        };
+        const updatedCols = updated.responsive?.[vp]?.columns;
+        if (updatedCols === undefined) {
+          delete existing.columns;
+        } else {
+          existing.columns = updatedCols;
+        }
+        if (existing.columns || existing.cover_rows || existing.settings) {
+          mergedResponsive[vp] = existing;
+        }
+      }
+
       return {
         ...cover,
         columns: updated.columns,
+        responsive: Object.keys(mergedResponsive).length
+          ? mergedResponsive
+          : undefined,
         settings: {
           ...cover.settings,
           grid_columns: updated.settings.grid_columns,

package/lib/builder/store-sections.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState, BlockType } from "./types";
+import type { BuilderStore, BuilderState, BlockType, SectionSliceActions } from "./types";
 import type {
   ContentBlock,
   ContentItem,
@@ -45,7 +45,7 @@ type StoreSet = (
 ) => void;
 type StoreGet = () => BuilderStore;
 
-export function createSectionActions(set: StoreSet, get: StoreGet) {
+export function createSectionActions(set: StoreSet, get: StoreGet): SectionSliceActions {
   return {
     // ---- Section operations ----
 

package/lib/builder/types-slices.ts

@@ -0,0 +1,387 @@
+// ============================================
+// Builder Store — Slice Types
+// ============================================
+// The builder store is composed of 7 logical slices. Each slice owns a
+// subset of the state and a subset of the actions. `BuilderState` and
+// `BuilderActions` in `./types.ts` are declared as intersections of
+// these slices, so the runtime shape stays flat — no `state.blocks.rows`
+// indirection. The split is purely a type-level organization.
+//
+// Slice owners (who writes what):
+// - MetaSlice        : page identity, draft/publish, dirty/saving flags
+// - SectionSlice     : rows (ContentItem[]), section editor mode, custom section cache, parallax groups
+// - BlockSlice       : block CRUD + debounced update (writes rows, too)
+// - CanvasSlice      : canvas viewport, preview mode, page/grid settings
+// - CoverSlice       : cover-section-specific row + background + settings ops
+// - SelectionSlice   : selection keys, color picker preview
+// - HistorySlice     : undo/redo + snapshot push
+//
+// Cross-slice writes are legitimate (e.g. deleteBlock clears selectedBlockKey).
+// Fase 1 does NOT narrow the `set` signature — that is Fase 2, when the
+// runtime shape is actually split into nested slice objects.
+//
+// Session 183 (Fase 1 / Nivel A).
+// ============================================
+
+import type {
+  Page,
+  PageType,
+  ContentBlock,
+  ContentItem,
+  PageSectionV2,
+  SectionV2Settings,
+  SectionV2Preset,
+  PageMetadata,
+  ColorField,
+  CoverSection,
+  CoverSectionSettings,
+  CoverRow,
+} from "../../lib/sanity/types";
+import type { BlockType } from "./types";
+import type { PageSettings, GridSettings, CanvasTool, DeviceViewport } from "./types";
+
+// ============================================
+// MetaSlice — page identity and persistence flags
+// ============================================
+
+export interface MetaSliceState {
+  pageId: string | null;
+  pageTitle: string;
+  pageSlug: string;
+  /** The slug as loaded from Sanity — used for API calls even if slug is edited. */
+  _originalSlug: string;
+  pageType: PageType;
+  metadata: PageMetadata;
+  publishedAt: string | null;
+  draftMode: boolean;
+
+  isDirty: boolean;
+  isSaving: boolean;
+  saveError: string | null;
+  lastSavedAt: string | null;
+}
+
+export interface MetaSliceActions {
+  setPageTitle: (title: string) => void;
+  setPageSlug: (slug: string) => void;
+  setMetadata: (metadata: Partial<PageMetadata>) => void;
+  setDraftMode: (draft: boolean) => void;
+  publishPage: () => void;
+  unpublishPage: () => void;
+
+  loadFromDocument: (doc: Page) => void;
+  save: () => Promise<void>;
+  reset: () => void;
+
+  markDirty: () => void;
+  markClean: () => void;
+}
+
+export type MetaSlice = MetaSliceState & MetaSliceActions;
+
+// ============================================
+// SectionSlice — content rows + section editor + custom sections + parallax
+// ============================================
+
+export interface SectionSliceState {
+  /** Content rows: V2 sections, custom section instances, parallax groups, cover sections. */
+  rows: ContentItem[];
+
+  /** Cache of fetched custom section base settings, keyed by custom_section_id. */
+  _customSectionCache: Record<string, SectionV2Settings>;
+
+  /** Counter incremented after a custom section is saved — triggers refetch in consumers. */
+  _customSectionRefetchTick: number;
+}
+
+export interface SectionSliceActions {
+  // Section-level (top-level row) operations
+  addSection: (
+    blockType: "projectGridBlock" | "projectCarouselBlock",
+    afterRowKey?: string | null,
+  ) => void;
+  reorderRows: (fromIndex: number, toIndex: number) => void;
+  deleteSection: (sectionKey: string) => void;
+  duplicateSection: (sectionKey: string) => void;
+
+  // V2 section operations
+  addSectionV2: (preset: SectionV2Preset, afterRowKey?: string | null) => void;
+  addColumnV2: (sectionKey: string, gridRow: number, gridColumn: number, span: number) => void;
+  deleteColumnV2: (sectionKey: string, columnKey: string) => void;
+  resizeColumnV2: (sectionKey: string, columnKey: string, newSpan: number) => void;
+  resizeColumnV2Left: (sectionKey: string, columnKey: string, newGridColumn: number) => void;
+  moveColumnV2: (
+    sectionKey: string,
+    columnKey: string,
+    targetRow: number,
+    targetColumn: number,
+  ) => void;
+  swapColumnV2: (sectionKey: string, draggedKey: string, targetKey: string) => void;
+  moveColumnToGapV2: (
+    sectionKey: string,
+    columnKey: string,
+    targetRow: number,
+    targetColumn: number,
+    targetSpan: number,
+  ) => void;
+  applyPresetV2: (sectionKey: string, preset: SectionV2Preset) => void;
+  updateSectionV2Settings: (sectionKey: string, settings: Partial<SectionV2Settings>) => void;
+  updateSectionV2Responsive: (
+    sectionKey: string,
+    responsive: PageSectionV2["responsive"],
+  ) => void;
+  addBlockV2: (
+    sectionKey: string,
+    columnKey: string,
+    blockType: BlockType,
+    insertIndex?: number,
+  ) => void;
+  updateColumnEnterAnimation: (
+    sectionKey: string,
+    colKey: string,
+    config: import("../../lib/animation/enter-types").EnterAnimationConfig | undefined,
+  ) => void;
+
+  /** Select a V2 column — sets selectedRowKey + selectedColumnKey. */
+  selectColumnV2: (sectionKey: string | null, columnKey: string | null) => void;
+
+  // Custom section instance operations (reference lifecycle on the page)
+  addCustomSectionInstance: (
+    id: string,
+    slug: string,
+    title: string,
+    afterRowKey?: string | null,
+  ) => void;
+  detachCustomSectionInstance: (instanceKey: string, sectionData: PageSectionV2) => void;
+  updateCustomSectionInstanceTitle: (instanceKey: string, newTitle: string) => void;
+  updateCustomSectionInstanceSettings: (
+    instanceKey: string,
+    updates: Partial<SectionV2Settings>,
+  ) => void;
+  cacheCustomSectionSettings: (sectionId: string, settings: SectionV2Settings) => void;
+
+  // Parallax Group operations (Session 123)
+  addParallaxGroup: (afterRowKey?: string | null) => void;
+  addParallaxSlide: (groupKey: string) => void;
+  removeParallaxSlide: (groupKey: string, slideKey: string) => void;
+  moveParallaxSlide: (groupKey: string, slideKey: string, direction: "up" | "down") => void;
+  updateParallaxSlideBackground: (
+    groupKey: string,
+    slideKey: string,
+    fields: Partial<import("../../lib/sanity/types").ParallaxSlideV2>,
+  ) => void;
+  updateParallaxGroupSettings: (
+    groupKey: string,
+    fields: Partial<
+      Pick<
+        import("../../lib/sanity/types").ParallaxGroup,
+        "transition_effect" | "snap_enabled" | "parallax_intensity"
+      >
+    >,
+  ) => void;
+}
+
+export type SectionSlice = SectionSliceState & SectionSliceActions;
+
+// ============================================
+// BlockSlice — block CRUD (no exclusive state; writes rows)
+// ============================================
+
+// Block slice has no exclusive state — all block data lives inside `rows`
+// (owned by SectionSlice). Block operations legitimately write to rows and
+// to selection keys (e.g. deleteBlock clears selectedBlockKey).
+
+export interface BlockSliceActions {
+  updateBlock: (blockKey: string, updates: Partial<ContentBlock>) => void;
+  deleteBlock: (blockKey: string) => void;
+  duplicateBlock: (blockKey: string) => void;
+  moveBlock: (
+    blockKey: string,
+    targetSectionKey: string,
+    targetColumnKey: string,
+    toIndex: number,
+  ) => void;
+  reorderBlocks: (
+    sectionKey: string,
+    columnKey: string,
+    fromIndex: number,
+    toIndex: number,
+  ) => void;
+  /** Debounced block update — batches keystrokes, does not push history per call. */
+  updateBlockDebounced: (blockKey: string, updates: Partial<ContentBlock>) => void;
+}
+
+export type BlockSlice = BlockSliceActions;
+
+// ============================================
+// CanvasSlice — viewport, preview mode, page + grid settings
+// ============================================
+
+export interface CanvasSliceState {
+  // Editor mode
+  previewMode: boolean;
+
+  // Custom section editor mode (Session 107) — the canvas swaps its
+  // rows between the current page and the custom section being edited,
+  // so this is modelled as a canvas concern.
+  editorMode: "page" | "customSection";
+  customSectionSlug: string | null;
+  customSectionTitle: string | null;
+  /** Stashed page state while editing a custom section */
+  savedPageState: { rows: ContentItem[]; selectedKey: string | null } | null;
+
+  // Page-level settings (global per page, persisted to Sanity)
+  pageSettings: PageSettings;
+
+  // Grid settings (from Customize — ephemeral, NOT saved per page)
+  gridSettings: GridSettings;
+
+  // Canvas viewport state (ephemeral)
+  canvasZoom: number;
+  canvasPanX: number;
+  canvasPanY: number;
+  canvasTool: CanvasTool;
+  activeViewport: DeviceViewport;
+
+  // BUG-014 fix: Track whether the Sanity document had page_settings.
+  // When true, applyGlobalStyles() won't overwrite user-chosen colors.
+  _hasDocumentPageSettings: boolean;
+}
+
+export interface CanvasSliceActions {
+  togglePreviewMode: () => void;
+  setPreviewMode: (preview: boolean) => void;
+
+  // Custom section editor mode (Session 107)
+  /** Enter section editor mode — stashes current page rows, replaces with a single V2 section */
+  enterSectionEditor: (
+    slug: string | null,
+    title: string | null,
+    sectionData: PageSectionV2 | null,
+  ) => void;
+  /** Exit section editor mode — restores page rows from stash. Pass wasSaved=true to mark page dirty. */
+  exitSectionEditor: (wasSaved?: boolean) => void;
+  /** Save the custom section being edited, then exit editor mode.
+   *  Returns { id, slug, title } on success (for instance insertion after creation). */
+  saveSectionEditor: (
+    title: string,
+  ) => Promise<{ id: string; slug: string; title: string } | null>;
+
+  updatePageSettings: (settings: Partial<PageSettings>) => void;
+  applyGlobalStyles: () => Promise<void>;
+
+  setCanvasZoom: (zoom: number) => void;
+  setCanvasPan: (x: number, y: number) => void;
+  setCanvasTool: (tool: CanvasTool) => void;
+  setActiveViewport: (viewport: DeviceViewport) => void;
+  zoomToFit: (viewportWidth: number, viewportHeight: number) => void;
+  zoomToPoint: (newZoom: number, cursorX: number, cursorY: number) => void;
+  zoomToFrame: (
+    device: DeviceViewport,
+    viewportWidth: number,
+    viewportHeight: number,
+  ) => void;
+}
+
+export type CanvasSlice = CanvasSliceState & CanvasSliceActions;
+
+// ============================================
+// CoverSlice — cover-section-specific row + background + settings ops
+// ============================================
+
+// Cover slice has no exclusive state — cover sections live inside `rows`
+// (SectionSlice). Column/block ops within cover sections reuse V2 actions
+// via findSectionPath() which supports cover sections.
+
+export interface CoverSliceActions {
+  addCoverSection: (afterRowKey?: string | null) => void;
+  addCoverRow: (sectionKey: string) => void;
+  removeCoverRow: (sectionKey: string, rowKey: string) => void;
+  resizeCoverRow: (
+    sectionKey: string,
+    handleIndex: number,
+    deltaPercent: number,
+    startAbove: number,
+    startBelow: number,
+  ) => void;
+  updateCoverRowAlign: (
+    sectionKey: string,
+    rowKey: string,
+    align: CoverRow["vertical_align"],
+  ) => void;
+  updateCoverBackground: (
+    sectionKey: string,
+    fields: Partial<
+      Pick<
+        CoverSection,
+        | "background_type"
+        | "background_color"
+        | "background_image"
+        | "background_video"
+        | "background_position"
+        | "background_size"
+        | "background_overlay_color"
+        | "background_overlay_opacity"
+        | "nav_color"
+      >
+    >,
+  ) => void;
+  updateCoverSettings: (sectionKey: string, settings: Partial<CoverSectionSettings>) => void;
+  updateCoverHeight: (sectionKey: string, height: CoverSection["height"]) => void;
+}
+
+export type CoverSlice = CoverSliceActions;
+
+// ============================================
+// SelectionSlice — selection keys + color picker preview
+// ============================================
+
+export interface SelectionSliceState {
+  selectedRowKey: string | null;
+  selectedColumnKey: string | null;
+  selectedBlockKey: string | null;
+  /** Sub-selection: which project card is selected within a ProjectGrid block */
+  selectedProjectCardKey: string | null;
+
+  /** Live preview overlay from color picker — shown on canvas without persisting to Sanity.
+   *  Set while user is dragging in the color picker; cleared on close. */
+  colorPickerPreview: {
+    blockKey?: string;
+    sectionKey?: string;
+    field: string;
+    value: ColorField;
+  } | null;
+}
+
+export interface SelectionSliceActions {
+  selectRow: (key: string | null) => void;
+  selectColumn: (rowKey: string | null, colKey: string | null) => void;
+  selectBlock: (key: string | null) => void;
+  selectProjectCard: (key: string | null) => void;
+  clearSelection: () => void;
+
+  setColorPickerPreview: (preview: SelectionSliceState["colorPickerPreview"]) => void;
+  clearColorPickerPreview: () => void;
+}
+
+export type SelectionSlice = SelectionSliceState & SelectionSliceActions;
+
+// ============================================
+// HistorySlice — undo/redo + snapshot push
+// ============================================
+
+export interface HistorySliceState {
+  _history: import("./history").HistorySnapshot[];
+  _future: import("./history").HistorySnapshot[];
+}
+
+export interface HistorySliceActions {
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  /** Push a snapshot before a mutation (called internally by block/section mutations). */
+  _pushSnapshot: () => void;
+}
+
+export type HistorySlice = HistorySliceState & HistorySliceActions;