@morphika/andami 0.1.2

package/lib/builder/defaults.ts

@@ -0,0 +1,182 @@
+import type { ContentBlock, ParallaxSlideV2, SectionV2Settings } from "../../lib/sanity/types";
+import type { BlockType } from "./types";
+import { generateKey } from "./utils";
+import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
+import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
+
+// ============================================
+// Parallax slide defaults (Session 128)
+// ============================================
+
+/** Default section settings for a new parallax slide */
+export const DEFAULT_PARALLAX_SLIDE_SETTINGS: SectionV2Settings = {
+  preset: "full",
+  grid_columns: 12,
+  col_gap: 20,
+  row_gap: 20,
+  spacing_top: "0",
+  spacing_bottom: "0",
+};
+
+/** Create a new empty parallax slide with default values */
+export function createDefaultParallaxSlide(): 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: { ...DEFAULT_PARALLAX_SLIDE_SETTINGS },
+  };
+}
+
+// ============================================
+// Default animation configs per block type (Session 117)
+// ============================================
+
+/**
+ * Default enter animation configs per block type.
+ * Returns undefined for block types with no block-specific enter animation.
+ * Generic cascade (page → section → column) applies when block has no specific config.
+ */
+export function getDefaultEnterAnimation(_blockType: BlockType): EnterAnimationConfig | undefined {
+  // No defaults — blocks start with no block-specific enter animation.
+  // They inherit from the generic cascade (column → section → page).
+  // Users opt-in via the Animation tab in the builder.
+  return undefined;
+}
+
+/**
+ * Default hover effect configs per block type.
+ * Returns undefined for block types with no hover effects.
+ */
+export function getDefaultHoverEffect(_blockType: BlockType): HoverEffectConfig | undefined {
+  // No defaults — blocks start with no hover effect.
+  // Users opt-in via the Animation tab in the builder.
+  return undefined;
+}
+
+/**
+ * Default typewriter config (for textBlock when enter preset is "typewriter").
+ */
+export const DEFAULT_TYPEWRITER_CONFIG: Required<TypewriterConfig> = {
+  speed: 40,
+  mode: "character",
+};
+
+/**
+ * Create a new block with sensible defaults for the given block type.
+ */
+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 "coverBlock":
+      return {
+        _type: "coverBlock",
+        _key,
+        headline: "",
+        subheadline: "",
+        media_type: "image",
+        media_path: "",
+        background_size: "cover",
+        background_position: "center center",
+        background_repeat: "no-repeat",
+        overlay: "dark",
+        overlay_opacity: 50,
+        content_align_h: "center",
+        content_align_v: "center",
+        content_max_width: "800px",
+        height: "100vh",
+        mobile_height: "same",
+        text_color: "#ffffff",
+        show_scroll_indicator: false,
+      };
+    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: [],
+      };
+    default:
+      return {
+        _type: blockType,
+        _key,
+      } as ContentBlock;
+  }
+}

package/lib/builder/history.ts

@@ -0,0 +1,48 @@
+// ============================================
+// Undo/Redo History for Builder Store
+// ============================================
+// Custom Zustand middleware that captures snapshots of rows + pageSettings state.
+// Stores up to MAX_HISTORY snapshots for undo, and a separate redo stack.
+//
+// BUG-010 fix (Session 78): Snapshots now include pageSettings alongside rows
+// so that undo/redo correctly reverts page-level changes (colors, nav_color, animations).
+
+import type { ContentItem } from "../../lib/sanity/types";
+import type { PageSettings } from "./types";
+
+export const MAX_HISTORY = 50;
+
+/** A single snapshot captures both content rows and page-level settings. */
+export interface HistorySnapshot {
+  rows: ContentItem[];
+  pageSettings: PageSettings;
+}
+
+export interface HistoryState {
+  /** Past snapshots (for undo). Last element = most recent past state. */
+  _history: HistorySnapshot[];
+  /** Future snapshots (for redo). Last element = next redo. */
+  _future: HistorySnapshot[];
+  /** Whether we're currently applying undo/redo (skip snapshot). */
+  _isTimeTraveling: boolean;
+}
+
+export const initialHistoryState: HistoryState = {
+  _history: [],
+  _future: [],
+  _isTimeTraveling: false,
+};
+
+/**
+ * Push a snapshot onto the history stack.
+ */
+export function pushSnapshot(
+  history: HistorySnapshot[],
+  snapshot: HistorySnapshot
+): HistorySnapshot[] {
+  const next = [...history, structuredClone(snapshot)];
+  if (next.length > MAX_HISTORY) {
+    next.shift();
+  }
+  return next;
+}

package/lib/builder/index.ts

@@ -0,0 +1,21 @@
+export { useBuilderStore } from "./store";
+export { stateToDocument, documentToState } from "./serializer";
+export { createDefaultBlock } from "./defaults";
+export { generateKey } from "./utils";
+export {
+  moveBlockInState,
+  resizeColumnV2LeftInState,
+  addSectionV2InState,
+  moveColumnV2InState,
+} from "./store-helpers";
+export { BLOCK_TYPE_REGISTRY, ALL_BLOCK_INFO, SECTION_TYPE_REGISTRY, isSectionBlockType } from "./types";
+export type {
+  BuilderStore,
+  BuilderState,
+  BuilderActions,
+  BlockType,
+  BlockTypeInfo,
+  SectionType,
+  SectionTypeInfo,
+  SectionBlockType,
+} from "./types";

package/lib/builder/layout-styles.ts

@@ -0,0 +1,344 @@
+/**
+ * Shared layout style helpers for row and block rendering.
+ *
+ * Converts layout properties (spacing, background, offset, border)
+ * into React.CSSProperties objects. Used by:
+ *   - RowRenderer (public site)
+ *   - SortableRow (builder active frame)
+ *   - ReadOnlyFrame (builder read-only frames)
+ *   - BlockRenderer (public site — block wrapper)
+ *   - BlockLivePreview (builder — block wrapper)
+ */
+
+import type { BlockLayout } from "../../lib/sanity/types";
+import { hexToRgba } from "../../lib/color-utils";
+
+/** Row-level settings shape (section settings, V2 settings, etc.) */
+type RowSettings = LayoutProps & { padding?: string };
+
+/**
+ * Common layout shape — both RowSettings and BlockLayout share these fields.
+ */
+type LayoutProps = {
+  spacing_top?: string;
+  spacing_right?: string;
+  spacing_bottom?: string;
+  spacing_left?: string;
+  background_color?: string;
+  background_opacity?: number;
+  background_image?: string;
+  background_size?: string;
+  background_position?: string;
+  background_repeat?: string;
+  offset_top?: string;
+  offset_right?: string;
+  offset_bottom?: string;
+  offset_left?: string;
+  border_color?: string;
+  border_width?: string;
+  border_style?: string;
+  border_sides?: string;
+  border_radius?: string;
+};
+
+/**
+ * Convert a TRBL px string value to a CSS px string.
+ * Returns undefined if value is falsy or "0".
+ */
+function px(value?: string): string | undefined {
+  if (!value || value === "0") return undefined;
+  return `${value}px`;
+}
+
+/**
+ * Legacy padding enum → px mapping. Kept for backward-compat with rows
+ * that still use the old `padding` enum but haven't been migrated to TRBL yet.
+ */
+const LEGACY_PADDING_PX: Record<string, string> = {
+  none: "0",
+  small: "16",
+  medium: "32",
+  large: "64",
+  xlarge: "96",
+};
+
+/**
+ * Build spacing (padding) styles from fine-grained TRBL values.
+ * Always uses TRBL values as the source of truth.
+ * If no TRBL is set, falls back to resolving the legacy padding enum to TRBL.
+ */
+export function getSpacingStyles(s: LayoutProps & { padding?: string }): React.CSSProperties {
+  // If explicit TRBL values exist, use them directly
+  if (hasCustomSpacing(s)) {
+    return {
+      paddingTop: px(s.spacing_top),
+      paddingRight: px(s.spacing_right),
+      paddingBottom: px(s.spacing_bottom),
+      paddingLeft: px(s.spacing_left),
+    };
+  }
+
+  // Migrate legacy padding enum → TRBL (top + bottom only)
+  const legacyPx = LEGACY_PADDING_PX[(s as RowSettings).padding || "none"] || "0";
+  if (legacyPx === "0") return {};
+  return {
+    paddingTop: `${legacyPx}px`,
+    paddingBottom: `${legacyPx}px`,
+  };
+}
+
+/**
+ * Check whether the layout has custom TRBL spacing set.
+ * When true (on rows), the old enum-based padding should be skipped.
+ */
+export function hasCustomSpacing(s: LayoutProps): boolean {
+  return !!(
+    (s.spacing_top && s.spacing_top !== "0") ||
+    (s.spacing_right && s.spacing_right !== "0") ||
+    (s.spacing_bottom && s.spacing_bottom !== "0") ||
+    (s.spacing_left && s.spacing_left !== "0")
+  );
+}
+
+/**
+ * Build background styles (color w/ opacity + background image).
+ * Returns styles that layer image behind/over the color.
+ */
+export function getBackgroundStyles(
+  s: LayoutProps,
+  assetBaseUrl?: string
+): React.CSSProperties {
+  const styles: React.CSSProperties = {};
+
+  // Background color + opacity
+  if (s.background_color && s.background_color !== "transparent") {
+    const opacity = s.background_opacity ?? 100;
+    if (opacity < 100) {
+      styles.backgroundColor = hexToRgba(s.background_color, opacity / 100);
+    } else {
+      styles.backgroundColor = s.background_color;
+    }
+  }
+
+  // Background image
+  if (s.background_image) {
+    const imgUrl = assetBaseUrl
+      ? `${assetBaseUrl.replace(/\/$/, "")}/${s.background_image}`
+      : s.background_image;
+    styles.backgroundImage = `url(${imgUrl})`;
+    styles.backgroundSize = s.background_size || "cover";
+    styles.backgroundPosition = s.background_position || "center center";
+    styles.backgroundRepeat = s.background_repeat || "no-repeat";
+  }
+
+  return styles;
+}
+
+/**
+ * Build offset (margin) styles from TRBL values.
+ */
+export function getOffsetStyles(s: LayoutProps): React.CSSProperties {
+  const hasOffset =
+    (s.offset_top && s.offset_top !== "0") ||
+    (s.offset_right && s.offset_right !== "0") ||
+    (s.offset_bottom && s.offset_bottom !== "0") ||
+    (s.offset_left && s.offset_left !== "0");
+
+  if (!hasOffset) return {};
+
+  return {
+    marginTop: px(s.offset_top),
+    marginRight: px(s.offset_right),
+    marginBottom: px(s.offset_bottom),
+    marginLeft: px(s.offset_left),
+  };
+}
+
+/**
+ * Build border styles from color/width/style/sides/radius.
+ * `border_sides` controls which sides get the border:
+ *   "all" (default), "top", "right", "bottom", "left", "top-bottom", "left-right"
+ */
+export function getBorderStyles(s: LayoutProps): React.CSSProperties {
+  const styles: React.CSSProperties = {};
+
+  const bw = parseInt(s.border_width || "0");
+  const bs = s.border_style || "none";
+
+  if (bw > 0 && bs !== "none") {
+    const bc = s.border_color || "#000000";
+    const sides = s.border_sides || "all";
+    const borderValue = `${bw}px ${bs} ${bc}`;
+
+    switch (sides) {
+      case "top":
+        styles.borderTop = borderValue;
+        break;
+      case "right":
+        styles.borderRight = borderValue;
+        break;
+      case "bottom":
+        styles.borderBottom = borderValue;
+        break;
+      case "left":
+        styles.borderLeft = borderValue;
+        break;
+      case "top-bottom":
+        styles.borderTop = borderValue;
+        styles.borderBottom = borderValue;
+        break;
+      case "left-right":
+        styles.borderLeft = borderValue;
+        styles.borderRight = borderValue;
+        break;
+      default: // "all"
+        styles.border = borderValue;
+        break;
+    }
+  }
+
+  const br = parseInt(s.border_radius || "0");
+  if (br > 0) {
+    styles.borderRadius = `${br}px`;
+  }
+
+  return styles;
+}
+
+/**
+ * Build ALL layout styles — works for both Row settings and Block layout.
+ */
+export function getRowLayoutStyles(
+  s: RowSettings,
+  assetBaseUrl?: string
+): React.CSSProperties {
+  return {
+    ...getBackgroundStyles(s, assetBaseUrl),
+    ...getOffsetStyles(s),
+    ...getBorderStyles(s),
+    ...getSpacingStyles(s),
+  };
+}
+
+/**
+ * Build ALL layout styles for a block's layout object.
+ */
+export function getBlockLayoutStyles(
+  layout?: BlockLayout,
+  assetBaseUrl?: string
+): React.CSSProperties {
+  if (!layout) return {};
+  return {
+    ...getBackgroundStyles(layout, assetBaseUrl),
+    ...getOffsetStyles(layout),
+    ...getBorderStyles(layout),
+    ...getSpacingStyles(layout),
+  };
+}
+
+/**
+ * Get alignment styles for a block within its column.
+ *
+ * Horizontal: uses `alignSelf` on the block (column is flex-col).
+ *
+ * NOTE: Vertical alignment is NOT handled here. It's applied as `justify-content`
+ * on the column flex container (in RowRenderer, SectionV2Renderer, SectionV2Column).
+ * Per-block margin-auto caused interactions between siblings — changing one block's
+ * alignment shifted others. Column-level justify-content groups all blocks together.
+ *
+ * Returns empty object if no alignment is set or everything is default (left).
+ */
+export function getBlockAlignmentStyles(layout?: BlockLayout): React.CSSProperties {
+  if (!layout) return {};
+  const styles: React.CSSProperties = {};
+
+  // Horizontal alignment → align-self within flex-col parent
+  if (layout.align_h === "center") {
+    styles.alignSelf = "center";
+  } else if (layout.align_h === "right") {
+    styles.alignSelf = "flex-end";
+  }
+  // "left" = flex-start = default, no style needed
+
+  return styles;
+}
+
+/**
+ * Check if a block has horizontal alignment set (non-default).
+ */
+export function hasBlockAlignment(layout?: BlockLayout): boolean {
+  if (!layout) return false;
+  return !!layout.align_h && layout.align_h !== "left";
+}
+
+/**
+ * Compute the column-level `justifyContent` from block vertical alignment settings.
+ *
+ * Scans all blocks in a column and derives the column's justify-content:
+ * - Any block has "bottom" → flex-end (all blocks grouped at bottom)
+ * - Any block has "center" → center (all blocks grouped in center)
+ * - Otherwise → flex-start (default, top)
+ *
+ * Priority: bottom > center > top (if mixed, bottom wins).
+ */
+export function getColumnVerticalAlign(blocks: Array<{ layout?: BlockLayout }>): string | undefined {
+  let hasBottom = false;
+  let hasCenter = false;
+
+  for (const block of blocks) {
+    const layout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+    if (!layout) continue;
+    if (layout.align_v === "bottom") hasBottom = true;
+    if (layout.align_v === "center") hasCenter = true;
+  }
+
+  if (hasBottom) return "flex-end";
+  if (hasCenter) return "center";
+  return undefined; // default (flex-start)
+}
+
+/**
+ * Check if a block has any layout styles set.
+ */
+export function hasBlockLayout(layout?: BlockLayout): boolean {
+  if (!layout) return false;
+  return Object.values(layout).some((v) => v !== undefined && v !== "" && v !== "0" && v !== 0 && v !== 100);
+}
+
+/**
+ * Resolve effective TRBL spacing for a row, accounting for the legacy padding enum.
+ *
+ * When a row has the old `padding` enum set (e.g. "medium") but no explicit TRBL
+ * spacing, this function converts the enum to concrete px values.
+ * Used by the SettingsPanel to show the user what padding is actually active.
+ */
+export function resolveEffectiveSpacing(s: RowSettings): {
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+} {
+  // If explicit TRBL spacing is set, use it directly
+  if (hasCustomSpacing(s)) {
+    return {
+      top: s.spacing_top || "0",
+      right: s.spacing_right || "0",
+      bottom: s.spacing_bottom || "0",
+      left: s.spacing_left || "0",
+    };
+  }
+
+  // Otherwise, derive from the legacy padding enum (default "none" = 0)
+  const legacyPx = LEGACY_PADDING_PX[s.padding || "none"] || "0";
+  return {
+    top: legacyPx,
+    right: "0",
+    bottom: legacyPx,
+    left: "0",
+  };
+}
+
+// ---- Helpers ----
+
+// Re-export hexToRgba for backward compatibility (imported at top from @/lib/color-utils)
+export { hexToRgba };