@morphika/andami 0.1.8 → 0.1.10

package/components/builder/settings-panel/index.ts

@@ -17,3 +17,9 @@ export { SectionV2AnimationTab } from "./SectionV2AnimationTab";
 export { default as ColumnV2Settings } from "./ColumnV2Settings";
 export { default as ParallaxSlideSettings } from "./ParallaxSlideSettings";
 export { default as ParallaxGroupSettings } from "./ParallaxGroupSettings";
+export { useSettingsPanelSelection } from "./useSettingsPanelSelection";
+export type { SelectedBlockInfo, SelectedParallaxSlideInfo } from "./useSettingsPanelSelection";
+export { AnimationTab, getBlockHoverEffect } from "./AnimationTab";
+export { ColumnV2AnimationTab } from "./ColumnV2AnimationTab";
+export { CardEntranceSection, ENTRANCE_PRESETS, CARD_ENTRANCE_SELECT_CLASS, CARD_ENTRANCE_SLIDER_CLASS } from "./CardEntranceSection";
+export { CustomSectionSettings } from "./CustomSectionSettings";

package/components/builder/settings-panel/useSettingsPanelSelection.ts

@@ -0,0 +1,184 @@
+/**
+ * useSettingsPanelSelection — Custom hook that resolves the current builder
+ * selection into strongly-typed values for SettingsPanel routing.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { ALL_BLOCK_INFO } from "../../../lib/builder/types";
+import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "../blockStyles";
+import type {
+  ContentBlock,
+  ContentItem,
+  PageSection,
+  PageSectionV2,
+  CustomSectionInstance,
+  ParallaxGroup,
+  ParallaxSlideV2,
+  SectionColumn,
+} from "../../../lib/sanity/types";
+import {
+  isPageSection,
+  isPageSectionV2,
+  isCustomSectionInstance,
+  isParallaxGroup,
+} from "../../../lib/sanity/types";
+
+export interface SelectedBlockInfo {
+  block: ContentBlock;
+  rowKey: string;
+  colKey: string;
+  isSection: boolean;
+}
+
+export interface SelectedParallaxSlideInfo {
+  group: ParallaxGroup;
+  slide: ParallaxSlideV2;
+  virtualSection: PageSectionV2;
+}
+
+export function useSettingsPanelSelection() {
+  const store = useBuilderStore();
+
+  // Find selected elements — handle page sections, V2 sections, and parallax groups/slides
+  const selectedItem: ContentItem | undefined = store.rows.find((r) => r._key === store.selectedRowKey);
+  const selectedSection: PageSection | null = selectedItem && isPageSection(selectedItem) ? selectedItem : null;
+  const selectedSectionV2: PageSectionV2 | null = selectedItem && isPageSectionV2(selectedItem) ? selectedItem : null;
+  const selectedCustomSectionInstance: CustomSectionInstance | null = selectedItem && isCustomSectionInstance(selectedItem) ? selectedItem as CustomSectionInstance : null;
+
+  // Parallax detection: group selected directly, or slide selected (search inside groups)
+  const selectedParallaxGroup: ParallaxGroup | null = selectedItem && isParallaxGroup(selectedItem) ? selectedItem as ParallaxGroup : null;
+  const selectedParallaxSlide: SelectedParallaxSlideInfo | null = (() => {
+    if (!store.selectedRowKey) return null;
+    for (const item of store.rows) {
+      if (!isParallaxGroup(item)) continue;
+      const group = item as ParallaxGroup;
+      const slide = group.slides.find((s) => s._key === store.selectedRowKey);
+      if (slide) {
+        // Create a virtual PageSectionV2 for the slide so we can delegate to SectionV2Settings etc.
+        const virtualSection: PageSectionV2 = {
+          _type: "pageSectionV2",
+          _key: slide._key,
+          section_type: "empty-v2",
+          columns: slide.columns,
+          settings: slide.section_settings,
+        };
+        return { group, slide, virtualSection };
+      }
+    }
+    return null;
+  })();
+
+  // V2 column: when a V2 section (or parallax slide) is selected and a column key is set
+  const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || null;
+  const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && store.selectedColumnKey
+    ? effectiveSectionV2.columns.find((c) => c._key === store.selectedColumnKey) || null
+    : null;
+
+  // For PageSections, the "block" is section.block[0] — selected automatically
+  const selectedBlock: SelectedBlockInfo | null = (() => {
+    // If a PageSection is selected, its block is the section block
+    if (selectedSection) {
+      const block = selectedSection.block[0];
+      if (block) return { block, rowKey: selectedSection._key, colKey: "", isSection: true };
+      return null;
+    }
+    // Regular block search inside rows, V2 sections, and parallax slides
+    if (!store.selectedBlockKey) return null;
+    for (const item of store.rows) {
+      // V2 sections: search inside columns
+      if (isPageSectionV2(item)) {
+        for (const col of (item as PageSectionV2).columns || []) {
+          const block = (col.blocks || []).find(
+            (b) => b._key === store.selectedBlockKey
+          );
+          if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
+        }
+      }
+      // Parallax groups: search inside slide columns
+      if (isParallaxGroup(item)) {
+        const group = item as ParallaxGroup;
+        for (const slide of group.slides) {
+          for (const col of slide.columns || []) {
+            const block = (col.blocks || []).find(
+              (b) => b._key === store.selectedBlockKey
+            );
+            if (block) return { block, rowKey: slide._key, colKey: col._key, isSection: false };
+          }
+        }
+      }
+    }
+    return null;
+  })();
+
+  // Derive the panel title + icon from what's selected
+  const blockInfo = selectedBlock
+    ? ALL_BLOCK_INFO.find((b) => b.type === selectedBlock.block._type)
+    : null;
+
+  // BUG-V2-003 fix: Block selection takes priority over V2 column/section
+  const panelTitle = selectedBlock
+    ? blockInfo?.label || selectedBlock.block._type
+    : selectedColumnV2
+    ? "Column"
+    : selectedParallaxSlide
+    ? `Slide ${selectedParallaxSlide.group.slides.findIndex((s) => s._key === selectedParallaxSlide.slide._key) + 1}`
+    : selectedParallaxGroup
+    ? "Parallax Showcase"
+    : selectedCustomSectionInstance
+    ? (selectedCustomSectionInstance.custom_section_title || "Saved Section")
+    : selectedSectionV2
+    ? "Section"
+    : selectedSection
+    ? (selectedSection.section_type === "projectGrid" ? "Project Grid" : "Parallax Section")
+    : "Page";
+
+  // Resolve gradient + icon component for the header
+  const headerStyleKey = selectedBlock
+    ? selectedBlock.block._type
+    : selectedColumnV2
+    ? "column"
+    : (selectedParallaxSlide || selectedParallaxGroup)
+    ? "parallaxGroup"
+    : selectedCustomSectionInstance
+    ? "customSectionInstance"
+    : selectedSectionV2
+    ? "row"
+    : selectedSection
+    ? (selectedSection.block[0]?._type || "row")
+    : "page";
+  const headerGradient = BLOCK_GRADIENTS[headerStyleKey] || BLOCK_GRADIENTS.page;
+  const HeaderIconComponent = BLOCK_ICON_COMPONENTS[headerStyleKey];
+
+  const hasSelection = !!(store.selectedRowKey || store.selectedColumnKey || store.selectedBlockKey);
+  // V2 columns: show Settings + Animation tabs (not Layout) — but NOT when a block inside the column is selected
+  const isColumnOnly = !!(selectedColumnV2 && !selectedBlock);
+  // Parallax group header: show Settings + Animation (no Layout)
+  const isParallaxGroupOnly = !!(selectedParallaxGroup && !selectedParallaxSlide && !selectedBlock);
+  // Custom section instance: show all 3 tabs (Settings with Edit/Detach, Layout, Animation)
+  const isCustomSectionOnly = !!(selectedCustomSectionInstance && !selectedBlock);
+  // Page level: nothing selected — show Settings + SEO + Animation (no Layout)
+  const isPageLevel = !hasSelection;
+
+  return {
+    selectedItem,
+    selectedSection,
+    selectedSectionV2,
+    selectedCustomSectionInstance,
+    selectedParallaxGroup,
+    selectedParallaxSlide,
+    effectiveSectionV2,
+    selectedColumnV2,
+    selectedBlock,
+    panelTitle,
+    headerStyleKey,
+    headerGradient,
+    HeaderIconComponent,
+    hasSelection,
+    isColumnOnly,
+    isParallaxGroupOnly,
+    isCustomSectionOnly,
+    isPageLevel,
+  };
+}

package/components/ui/Navbar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useId, useMemo } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import type { NavItem, NavDesign, NavEntrancePreset, MobileNavDesign } from "../../lib/sanity/types";
+import type { NavItem, NavDesign, NavEntrancePreset, NavDesignResponsiveOverride, MobileNavDesign } from "../../lib/sanity/types";
 import { useNavColor } from "../../lib/contexts/NavColorContext";
 import { useNavAnimation } from "../../lib/contexts/NavAnimationContext";
 import { usePageExit } from "../../lib/contexts/PageExitContext";
@@ -23,6 +23,79 @@ const colorMap: Record<string, string> = {
   white: "text-brand-text",
 };
 
+// ============================================
+// Responsive CSS custom properties generator
+// ============================================
+
+/** Breakpoints matching the builder's responsive system */
+const NAV_BREAKPOINTS = { tablet: 1024, phone: 640 } as const;
+
+/** Generates a <style> block with CSS custom properties for responsive nav overrides.
+ *  Desktop values are set on the scoping selector; tablet/phone overrides via media queries.
+ *  Returns empty string if no responsive overrides exist. */
+function buildResponsiveNavCSS(design: NavDesign | undefined, scopeSelector: string): string {
+  if (!design) return "";
+
+  // Desktop (base) custom properties
+  const vars: Record<string, string> = {
+    "--nav-font-size": `${design.font_size ?? 14}px`,
+    "--nav-font-weight": design.font_weight || "400",
+    "--nav-text-transform": design.text_transform || "uppercase",
+    "--nav-text-align": design.text_align || "left",
+    "--nav-vertical-align": (() => {
+      const v = design.vertical_align || "top";
+      return v === "bottom" ? "end" : v === "middle" ? "center" : "start";
+    })(),
+    "--nav-items-justify": (() => {
+      const a = design.text_align || "left";
+      return a === "center" ? "center" : a === "right" ? "flex-end" : "flex-start";
+    })(),
+    "--nav-padding-h": `${design.padding_h ?? 24}px`,
+    "--nav-padding-v": `${design.padding_v ?? 27}px`,
+    "--nav-margin-h": `${design.margin_h ?? 0}px`,
+    "--nav-margin-v": `${design.margin_v ?? 0}px`,
+    "--nav-items-gap": `${design.items_gap ?? 32}px`,
+  };
+
+  const responsive = design.responsive;
+  if (!responsive) {
+    // No responsive overrides — still emit base vars for consistency
+    const baseLines = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+    return `${scopeSelector}{${baseLines}}`;
+  }
+
+  // Build media query blocks for tablet and phone
+  const mqBlocks: string[] = [];
+  for (const [viewport, bp] of [["tablet", NAV_BREAKPOINTS.tablet], ["phone", NAV_BREAKPOINTS.phone]] as const) {
+    const overrides = responsive[viewport] as NavDesignResponsiveOverride | undefined;
+    if (!overrides) continue;
+    const ovLines: string[] = [];
+    if (overrides.font_size != null) ovLines.push(`--nav-font-size:${overrides.font_size}px`);
+    if (overrides.font_weight != null) ovLines.push(`--nav-font-weight:${overrides.font_weight}`);
+    if (overrides.text_transform != null) ovLines.push(`--nav-text-transform:${overrides.text_transform}`);
+    if (overrides.text_align != null) {
+      ovLines.push(`--nav-text-align:${overrides.text_align}`);
+      const j = overrides.text_align === "center" ? "center" : overrides.text_align === "right" ? "flex-end" : "flex-start";
+      ovLines.push(`--nav-items-justify:${j}`);
+    }
+    if (overrides.vertical_align != null) {
+      const v = overrides.vertical_align === "bottom" ? "end" : overrides.vertical_align === "middle" ? "center" : "start";
+      ovLines.push(`--nav-vertical-align:${v}`);
+    }
+    if (overrides.padding_h != null) ovLines.push(`--nav-padding-h:${overrides.padding_h}px`);
+    if (overrides.padding_v != null) ovLines.push(`--nav-padding-v:${overrides.padding_v}px`);
+    if (overrides.margin_h != null) ovLines.push(`--nav-margin-h:${overrides.margin_h}px`);
+    if (overrides.margin_v != null) ovLines.push(`--nav-margin-v:${overrides.margin_v}px`);
+    if (overrides.items_gap != null) ovLines.push(`--nav-items-gap:${overrides.items_gap}px`);
+    if (ovLines.length > 0) {
+      mqBlocks.push(`@media(max-width:${bp}px){${scopeSelector}{${ovLines.join(";")}}}`);
+    }
+  }
+
+  const baseLines = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+  return `${scopeSelector}{${baseLines}}${mqBlocks.join("")}`;
+}
+
 // ============================================
 // NavLink — shared link component (eliminates duplication)
 // ============================================
@@ -181,6 +254,18 @@ export default function Navbar({
   // Map vertical_align to CSS align-items value for the grid container
   const gridAlignItems = verticalAlign === "bottom" ? "end" : verticalAlign === "middle" ? "center" : "start";
 
+  // ── Responsive CSS custom properties (Session 164) ──
+  // Uses a stable ID scoped to the nav element. CSS vars + media queries
+  // ensure zero-flash SSR: the correct values apply before hydration.
+  const hasResponsive = !!(design?.responsive?.tablet || design?.responsive?.phone);
+  const reactId = useId();
+  const navScopeId = `nav-${reactId.replace(/:/g, "")}`;
+  const responsiveCSS = useMemo(
+    () => hasResponsive ? buildResponsiveNavCSS(design, `[data-nav-scope="${navScopeId}"]`) : "",
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasResponsive, design?.responsive, navScopeId, fontSize, fontWeight, textTransformVal, textAlignVal, paddingH, paddingV, marginH, marginV, itemsGap, verticalAlign],
+  );
+
   // ── Mobile menu resolved values (Session 158) ──
   // Mobile styles are independent from page-level NavColorContext overrides.
   // They fall back to desktop design values when not explicitly set.
@@ -374,13 +459,23 @@ export default function Navbar({
   // When using hex color, we must set `color: inherit` on links because browser
   // user-agent stylesheet sets `a { color: ... }` which overrides CSS inheritance.
   const linkClassName = `tracking-normal ${textColorClass} transition-colors duration-200 hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`;
-  const linkStyle: React.CSSProperties = {
-    fontSize: `${fontSize}px`,
-    fontWeight: fontWeight as React.CSSProperties["fontWeight"],
-    textTransform: textTransformVal as React.CSSProperties["textTransform"],
-    fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
-    ...(isHexColor ? { color: "inherit" } : {}),
-  };
+  // When responsive overrides exist, link styles reference CSS custom properties
+  // so they respond to media queries without JS. Otherwise use direct values.
+  const linkStyle: React.CSSProperties = hasResponsive
+    ? {
+        fontSize: "var(--nav-font-size)",
+        fontWeight: "var(--nav-font-weight)" as React.CSSProperties["fontWeight"],
+        textTransform: "var(--nav-text-transform)" as React.CSSProperties["textTransform"],
+        fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
+        ...(isHexColor ? { color: "inherit" } : {}),
+      }
+    : {
+        fontSize: `${fontSize}px`,
+        fontWeight: fontWeight as React.CSSProperties["fontWeight"],
+        textTransform: textTransformVal as React.CSSProperties["textTransform"],
+        fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
+        ...(isHexColor ? { color: "inherit" } : {}),
+      };
 
   return (
     <>
@@ -388,6 +483,7 @@ export default function Navbar({
       <nav
         role="navigation"
         aria-label="Main navigation"
+        data-nav-scope={navScopeId}
         className={`${positionClass} top-0 left-0 right-0 z-50 transition-transform duration-300 ease-in-out ${
           shouldHide ? "-translate-y-full" : "translate-y-0"
         }`}
@@ -397,14 +493,21 @@ export default function Navbar({
         style={{
           ...navBgStyle,
           ...textColorStyle,
-          ...(marginH > 0 || marginV > 0
+          ...(hasResponsive
             ? {
-                left: `${marginH}px`,
-                right: `${marginH}px`,
-                top: `${marginV}px`,
-                borderRadius: "8px",
+                left: "var(--nav-margin-h)",
+                right: "var(--nav-margin-h)",
+                top: "var(--nav-margin-v)",
+                ...(marginH > 0 || marginV > 0 ? { borderRadius: "8px" } : {}),
               }
-            : {}),
+            : marginH > 0 || marginV > 0
+              ? {
+                  left: `${marginH}px`,
+                  right: `${marginH}px`,
+                  top: `${marginV}px`,
+                  borderRadius: "8px",
+                }
+              : {}),
           // CSS custom properties for animation duration
           ...(entrancePreset && !entranceStagger ? {
             "--nav-entrance-duration": `${entranceDuration}ms`,
@@ -412,21 +515,39 @@ export default function Navbar({
           } as React.CSSProperties : {}),
         }}
       >
+        {/* Responsive nav CSS custom properties + media queries */}
+        {responsiveCSS && (
+          <style dangerouslySetInnerHTML={{ __html: responsiveCSS }} />
+        )}
         {/* Desktop: 12-column grid constrained to --grid-width */}
         <div
           className="hidden lg:grid"
-          style={{
-            gridTemplateColumns: "repeat(12, 1fr)",
-            maxWidth: "var(--grid-width, 1445px)",
-            marginLeft: "auto",
-            marginRight: "auto",
-            paddingLeft: `${paddingH}px`,
-            paddingRight: `${paddingH}px`,
-            paddingTop: `${paddingV}px`,
-            paddingBottom: `${paddingV}px`,
-            alignItems: gridAlignItems,
-            columnGap: `${itemsGap}px`,
-          }}
+          style={hasResponsive
+            ? {
+                gridTemplateColumns: "repeat(12, 1fr)",
+                maxWidth: "var(--grid-width, 1445px)",
+                marginLeft: "auto",
+                marginRight: "auto",
+                paddingLeft: "var(--nav-padding-h)",
+                paddingRight: "var(--nav-padding-h)",
+                paddingTop: "var(--nav-padding-v)",
+                paddingBottom: "var(--nav-padding-v)",
+                alignItems: "var(--nav-vertical-align)" as React.CSSProperties["alignItems"],
+                columnGap: "var(--nav-items-gap)",
+              }
+            : {
+                gridTemplateColumns: "repeat(12, 1fr)",
+                maxWidth: "var(--grid-width, 1445px)",
+                marginLeft: "auto",
+                marginRight: "auto",
+                paddingLeft: `${paddingH}px`,
+                paddingRight: `${paddingH}px`,
+                paddingTop: `${paddingV}px`,
+                paddingBottom: `${paddingV}px`,
+                alignItems: gridAlignItems,
+                columnGap: `${itemsGap}px`,
+              }
+          }
         >
           {/* Logo */}
           <div
@@ -480,7 +601,7 @@ export default function Navbar({
                 gridColumn: `${item.grid_column} / span ${item.column_span || 1}`,
                 gridRow: 1,
                 display: "flex",
-                justifyContent: itemsJustify,
+                justifyContent: hasResponsive ? "var(--nav-items-justify)" as React.CSSProperties["justifyContent"] : itemsJustify,
                 alignItems: "center",
                 minWidth: 0,
                 overflow: "hidden",
@@ -518,9 +639,9 @@ export default function Navbar({
               style={{
                 gridColumn: `${logoCols + 1} / -1`,
                 display: "flex",
-                justifyContent: itemsJustify,
+                justifyContent: hasResponsive ? "var(--nav-items-justify)" as React.CSSProperties["justifyContent"] : itemsJustify,
                 alignItems: "center",
-                gap: `${design?.items_gap ?? 32}px`,
+                gap: hasResponsive ? "var(--nav-items-gap)" : `${design?.items_gap ?? 32}px`,
               }}
             >
               {unplacedItems.map((item) => (

package/lib/builder/serializer/migrations.ts

@@ -0,0 +1,107 @@
+/**
+ * V1 → V2 migration utilities for content blocks.
+ *
+ * Extracted from serializer.ts in Session 162.
+ */
+
+// ============================================
+// Project Grid v1 → v2 Migration (Session 105)
+// ============================================
+
+/** Map v1 string gap values to pixel numbers */
+export const GAP_V1_MAP: Record<string, number> = {
+  small: 8,
+  medium: 16,
+  large: 32,
+  xlarge: 48,
+};
+
+/**
+ * Detect and migrate a v1 projectGridBlock to v2 format.
+ * v1 is identified by the presence of `grid_layout` (string field).
+ * v2 is identified by the presence of `columns` (number field).
+ * If already v2 or not a projectGridBlock, returns as-is.
+ */
+export function migrateProjectGridV1ToV2(block: Record<string, unknown>): void {
+  if (block._type !== "projectGridBlock") return;
+
+  // Already v2: has `columns` as a number
+  if (typeof block.columns === "number") return;
+
+  // Not v1 either (fresh block without grid_layout) — apply defaults
+  if (!block.grid_layout && typeof block.columns !== "number") {
+    block.columns = 3;
+    block.aspect_ratios = ["16/9"];
+    block.gap_v = 16;
+    block.gap_h = 16;
+    block.hover_effect = block.hover_effect || "scale";
+    block.show_subtitle = block.show_subtitle ?? true;
+    block.border_radius = 0;
+    block.video_mode = "off";
+    return;
+  }
+
+  // ─── v1 → v2 migration ───
+
+  // columns: columns_desktop → columns (clamp 1–6)
+  const colDesktop = typeof block.columns_desktop === "number" ? block.columns_desktop : 2;
+  block.columns = Math.max(1, Math.min(6, colDesktop));
+
+  // gap: string → gap_v + gap_h (both same value)
+  const gapStr = typeof block.gap === "string" ? block.gap : "large";
+  const gapPx = GAP_V1_MAP[gapStr] ?? 32;
+  block.gap_v = gapPx;
+  block.gap_h = gapPx;
+
+  // card_aspect_ratio → aspect_ratios
+  const oldRatio = typeof block.card_aspect_ratio === "string" ? block.card_aspect_ratio : "16/9";
+  if (oldRatio === "random") {
+    block.aspect_ratios = ["16/9", "1/1", "9/16"];
+  } else {
+    block.aspect_ratios = [oldRatio];
+  }
+
+  // hover_effect: "overlay" → "scale", rest 1:1
+  const oldHover = typeof block.hover_effect === "string" ? block.hover_effect : "overlay";
+  if (oldHover === "overlay") {
+    block.hover_effect = "scale";
+  }
+  // "scale" and "none" pass through
+
+  // border_radius: string → number
+  const oldRadius = block.card_border_radius;
+  block.border_radius = typeof oldRadius === "string" ? (parseInt(oldRadius, 10) || 0) : 0;
+
+  // video: video_autoloop + video_hover → video_mode
+  if (block.video_autoloop === true) {
+    block.video_mode = "autoloop";
+  } else if (block.video_hover === true) {
+    block.video_mode = "hover";
+  } else {
+    block.video_mode = "off";
+  }
+
+  // show_subtitle: direct copy (default true)
+  block.show_subtitle = block.show_subtitle ?? true;
+
+  // ─── Clean up v1 fields (not needed in builder state) ───
+  delete block.grid_layout;
+  delete block.gap;
+  delete block.auto_columns;
+  delete block.card_size;
+  delete block.columns_desktop;
+  delete block.card_aspect_ratio;
+  delete block.card_border_radius;
+  delete block.video_hover;
+  delete block.video_autoloop;
+}
+
+/**
+ * Normalize animation fields on a block during read.
+ * Post-migration (Session 122): only new fields exist in Sanity.
+ * This is a no-op now but kept as a hook point for future needs.
+ */
+export function normalizeBlockAnimationFields(_block: Record<string, unknown>): void {
+  // No-op: migration completed in Session 122.
+  // All documents now use enter_animation / hover_effect directly.
+}