@morphika/andami 0.1.9 → 0.2.0

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/constants.ts

@@ -57,11 +57,12 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
 //
 //   BLUE    (#076bff) — Columns: outlines, resize handles, drag grip,
 //                        span badge, column selection/hover chrome.
-//   ORANGE  (#e28b00) — Blocks: "+ Add Block" buttons, block toolbar
+//   GREEN-B (#0d9668) — Blocks: "+ Add Block" buttons, block toolbar
 //                        pill, block selection ring, block-level actions.
-//   GREEN   (#22c55e) — Drop zones: gap drop targets during drag,
+//   BLUE    (#076bff) — Drop zones: gap drop targets during drag,
 //                        insertion lines, "Drop Here" labels, swap target
-//                        highlight (green border + tinted background).
+//                        highlight (blue border + tinted background).
+//                        (Merged with column color for coherence.)
 //   VIOLET  (#8b5cf6) — Custom sections: saved section cards, custom
 //                        section instance badges, section editor chrome,
 //                        "Create New" custom section button.
@@ -72,7 +73,7 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
 // while a delete button on a block toolbar is ORANGE.
 
 export const BUILDER_BLUE = "#076bff";       // Columns
-export const BUILDER_ORANGE = "#e28b00";     // Blocks
+export const BUILDER_ORANGE = "#0d9668";     // Blocks (emerald — was orange #e28b00)
 export const BUILDER_GREEN = "#22c55e";      // Drop zones
 export const BUILDER_VIOLET = "#8b5cf6";     // Custom sections
 

package/lib/builder/serializer/normalizers.ts

@@ -5,7 +5,7 @@
  * Extracted from serializer.ts in Session 162.
  */
 
-import type { Page, ContentBlock, ContentItem, PageSection, PageSectionV2, SectionBlock, SectionColumn, SectionV2Settings, CustomSectionInstance, ParallaxGroup } from "../../../lib/sanity/types";
+import type { Page, ContentBlock, ContentItem, PageSectionV2, SectionColumn, SectionV2Settings, CustomSectionInstance, ParallaxGroup } from "../../../lib/sanity/types";
 import type { BuilderState, PageSettings } from "../types";
 import { generateKey } from "../utils";
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_GRID_WIDTH } from "../constants";
@@ -18,39 +18,6 @@ import { migrateProjectGridV1ToV2, normalizeBlockAnimationFields } from "./migra
 // Section Normalizers
 // ============================================
 
-export function normalizePageSection(section: Partial<PageSection> & { _key: string }): PageSection {
-  const ensuredBlock = ensureKeys((section.block || []) as SectionBlock[]) as (SectionBlock & { _key: string })[];
-  const ensuredBlockType = ensuredBlock[0]?._type || "projectGridBlock";
-  // BUG-022 fix: Preserve the original section_type even if unknown.
-  // Only default when the field is missing entirely (new sections).
-  const sectionType = section.section_type || (SECTION_TYPE_MAP[ensuredBlockType] || "projectGrid");
-
-  // Warn on unknown types but don't override — future types should survive round-trips
-  if (!Object.values(SECTION_TYPE_MAP).includes(sectionType)) {
-    console.warn(`[Serializer] Unknown section_type: ${sectionType} — preserving as-is`);
-  }
-
-  // Auto-migrate projectGridBlock v1 → v2
-  if (ensuredBlock[0]) {
-    migrateProjectGridV1ToV2(ensuredBlock[0] as unknown as Record<string, unknown>);
-  }
-
-  // Session 117: Migrate animation fields on section blocks
-  if (ensuredBlock[0]) {
-    normalizeBlockAnimationFields(ensuredBlock[0] as unknown as Record<string, unknown>);
-  }
-
-  return {
-    _type: "pageSection",
-    _key: section._key,
-    section_type: sectionType as import("../../../lib/sanity/types").PageSectionType,
-    block: [ensuredBlock[0] || { _type: ensuredBlockType, _key: generateKey() }] as [SectionBlock],
-    settings: section.settings || {},
-    // BUG-013 fix: preserve responsive overrides for sections
-    ...(section.responsive ? { responsive: section.responsive } : {}),
-  };
-}
-
 /**
  * Normalize a PageSectionV2 from Sanity data into the builder's shape.
  * Ensures all columns have _keys, validates grid positions, and fills defaults.
@@ -177,14 +144,9 @@ export function normalizeParallaxGroup(group: Partial<ParallaxGroup> & { _key: s
 }
 
 /**
- * Normalize a content item (PageSection, PageSectionV2, ParallaxGroup, etc.).
+ * Normalize a content item (PageSectionV2, ParallaxGroup, CustomSectionInstance, etc.).
  */
 export function migrateContentItem(item: Record<string, unknown>): ContentItem {
-  // PageSection — normalize and return
-  if (item._type === "pageSection") {
-    return normalizePageSection(item as unknown as Partial<PageSection> & { _key: string });
-  }
-
   // PageSectionV2 — normalize and return
   if (item._type === "pageSectionV2") {
     return normalizePageSectionV2(item as unknown as Partial<PageSectionV2> & { _key: string });

package/lib/builder/serializer/serializers.ts

@@ -5,8 +5,8 @@
  * Extracted from serializer.ts in Session 162.
  */
 
-import type { ContentBlock, ContentItem, PageSection, PageSectionV2, ParallaxGroup } from "../../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup } from "../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../lib/sanity/types";
 import type { BuilderState } from "../types";
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR } from "../constants";
 
@@ -67,74 +67,6 @@ function serializeBlock(block: ContentBlock): ContentBlock {
   return serialized;
 }
 
-// ============================================
-// Section Serialization
-// ============================================
-
-/**
- * Normalize section responsive overrides for serialization (save path).
- * Strips undefined/null/empty string values and removes empty viewport objects.
- */
-function normalizeSectionResponsiveForSerialize(
-  responsive: PageSection["responsive"] | undefined
-): PageSection["responsive"] | undefined {
-  if (!responsive) return undefined;
-
-  const result: NonNullable<PageSection["responsive"]> = {};
-
-  for (const vp of ["tablet", "phone"] as const) {
-    const overrides = responsive[vp];
-    if (!overrides || typeof overrides !== "object") continue;
-
-    const cleaned: Record<string, unknown> = {};
-    for (const [key, val] of Object.entries(overrides)) {
-      if (val === undefined || val === null) continue;
-      if (typeof val === "string" && val.trim() === "") continue;
-      cleaned[key] = val;
-    }
-
-    if (Object.keys(cleaned).length > 0) {
-      result[vp] = cleaned as typeof result[typeof vp];
-    }
-  }
-
-  return Object.keys(result).length > 0 ? result : undefined;
-}
-
-function serializePageSection(section: PageSection): Record<string, unknown> {
-  const s = section.settings;
-  return {
-    _key: section._key,
-    _type: "pageSection",
-    section_type: section.section_type,
-    block: (section.block || []).map((b) => serializeBlock(b as ContentBlock)),
-    // BUG-013 fix: persist responsive overrides for sections (normalized: strips empty values)
-    responsive: normalizeSectionResponsiveForSerialize(section.responsive),
-    settings: s ? stripUndefined({
-      background_color: s.background_color,
-      background_opacity: s.background_opacity,
-      background_image: s.background_image,
-      background_size: s.background_size,
-      background_position: s.background_position,
-      background_repeat: s.background_repeat,
-      spacing_top: s.spacing_top,
-      spacing_right: s.spacing_right,
-      spacing_bottom: s.spacing_bottom,
-      spacing_left: s.spacing_left,
-      offset_top: s.offset_top,
-      offset_right: s.offset_right,
-      offset_bottom: s.offset_bottom,
-      offset_left: s.offset_left,
-      border_color: s.border_color,
-      border_width: s.border_width,
-      border_style: s.border_style,
-      border_sides: s.border_sides,
-      border_radius: s.border_radius,
-      enter_animation: s.enter_animation,
-    }) : undefined,
-  };
-}
-
 /**
  * Normalize V2 section responsive overrides for serialization.
  */
@@ -283,12 +215,9 @@ function serializeParallaxGroup(group: ParallaxGroup): Record<string, unknown> {
 // ============================================
 
 /**
- * Serialize a content item (PageSection or PageSectionV2) for Sanity.
+ * Serialize a content item for Sanity.
  */
 function serializeContentItem(item: ContentItem): Record<string, unknown> {
-  if (isPageSection(item)) {
-    return serializePageSection(item);
-  }
   if (isPageSectionV2(item)) {
     return serializePageSectionV2(item);
   }

package/lib/builder/store-blocks.ts

@@ -1,6 +1,6 @@
 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 type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
 import { createDefaultBlock } from "./defaults";
 import { generateKey } from "./utils";
 import { findSectionPath, updateSectionAtPath, moveBlockInState } from "./store-helpers";
@@ -27,13 +27,6 @@ function applyBlockUpdate(
     }));
 
   return 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) };
     }
@@ -68,17 +61,8 @@ export function createBlockActions(set: StoreSet, get: StoreGet) {
         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) => {
+        const finalRows = state.rows.map((item) => {
           if (isPageSectionV2(item)) {
             return { ...item, columns: filterBlocks(item.columns) } as ContentItem;
           }

package/lib/builder/store-helpers.ts

@@ -16,7 +16,7 @@ import type {
   SectionColumn,
   SectionV2Preset,
 } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
 import { columnsFromPreset, detectPreset } from "./cascade";
 import { resizeColumnLeft as cascadeResizeLeft, moveColumn as cascadeMoveColumn, type ResizeLeftResult } from "./cascade";
 import { applyBlocksToColumns, toCascadeColumns, type CascadeColumn } from "./cascade-helpers";
@@ -62,7 +62,7 @@ export function moveBlockInState(
 
   // Pass 1: find and remove block from its current section (V2 + parallax slides)
   // RC-006 fix: Early-exit once block is found, consistent with selectBlock()
-  // search pattern. Also searches PageSection V1 for completeness.
+  // search pattern.
   let rowsAfterRemove = rows;
   for (let i = 0; i < rows.length; i++) {
     const item = rows[i];

package/lib/builder/store-sections.ts

@@ -2,11 +2,8 @@ import type { BuilderStore, BuilderState, BlockType } from "./types";
 import type {
   ContentBlock,
   ContentItem,
-  PageSection,
   PageSectionV2,
   SectionV2Settings,
-  SectionSettings,
-  SectionBlock,
   CustomSectionInstance,
   ParallaxGroup,
   ParallaxSlideV2,
@@ -14,7 +11,6 @@ import type {
   EnterAnimationConfig,
 } from "../../lib/sanity/types";
 import {
-  isPageSection,
   isPageSectionV2,
   isCustomSectionInstance,
   isParallaxGroup,
@@ -52,20 +48,36 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
     // ---- Section operations ----
 
     /**
-     * Add a "Page Section" — creates a first-class PageSection entity
-     * with a pre-populated section block (projectGridBlock).
-     * No row/column wrapper — direct page-level section.
+     * Add a Project Grid section — creates a PageSectionV2 with a single
+     * full-width column (span 12) containing a pre-populated projectGridBlock.
+     *
+     * Session 164: Migrated from V1 (PageSection) to V2 (PageSectionV2).
+     * Existing V1 pages still work — V1 update/delete actions are kept until
+     * the data migration in Session 165.
      */
     addSection: (blockType: "projectGridBlock", afterRowKey?: string | null): void => {
       get()._pushSnapshot();
-      const block = createDefaultBlock(blockType) as SectionBlock;
-      const newSection: PageSection = {
-        _type: "pageSection",
+      const block = createDefaultBlock(blockType);
+      const gridColumns = 12;
+
+      const newSection: PageSectionV2 = {
+        _type: "pageSectionV2",
         _key: generateKey(),
-        section_type: "projectGrid",
-        block: [block],
-        // BUG-011 fix: default spacing to match addRow() defaults
+        section_type: "empty-v2",
+        columns: [
+          {
+            _key: generateKey(),
+            grid_column: 1,
+            grid_row: 1,
+            span: gridColumns,
+            blocks: [block],
+          },
+        ],
         settings: {
+          preset: "full",
+          grid_columns: gridColumns,
+          col_gap: 20,
+          row_gap: 20,
           spacing_top: "32",
           spacing_bottom: "32",
         },
@@ -97,50 +109,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
       });
     },
 
-    updateSectionSettings: (
-      sectionKey: string,
-      settings: Partial<SectionSettings>
-    ): void => {
-      set((state) => ({
-        rows: state.rows.map((item) =>
-          item._key === sectionKey && isPageSection(item)
-            ? { ...item, settings: { ...item.settings, ...settings } }
-            : item
-        ),
-        isDirty: true,
-      }));
-    },
-
-    /** BUG-013 fix: Update responsive overrides for a PageSection */
-    updateSectionResponsive: (
-      sectionKey: string,
-      responsive: PageSection["responsive"]
-    ): void => {
-      set((state) => ({
-        rows: state.rows.map((item) =>
-          item._key === sectionKey && isPageSection(item)
-            ? { ...item, responsive }
-            : item
-        ),
-        isDirty: true,
-      }));
-    },
-
-    updateSectionBlock: (sectionKey: string, updates: Partial<ContentBlock>): void => {
-      set((state) => ({
-        rows: state.rows.map((item) => {
-          if (item._key !== sectionKey || !isPageSection(item)) return item;
-          const block = item.block[0];
-          if (!block) return item;
-          return {
-            ...item,
-            block: [{ ...block, ...updates } as SectionBlock],
-          };
-        }),
-        isDirty: true,
-      }));
-    },
-
     deleteSection: (sectionKey: string): void => {
       get()._pushSnapshot();
       set((state) => ({
@@ -165,13 +133,7 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
         const clone = JSON.parse(JSON.stringify(original)) as ContentItem;
         clone._key = generateKey();
         // Re-key internal structures
-        if (isPageSection(clone)) {
-          if (clone.block.length > 0) {
-            clone.block = [
-              { ...clone.block[0], _key: generateKey() },
-            ] as [SectionBlock];
-          }
-        } else if (isPageSectionV2(clone)) {
+        if (isPageSectionV2(clone)) {
           (clone as PageSectionV2).columns = (clone as PageSectionV2).columns.map(
             (col) => ({
               ...col,

package/lib/builder/store.ts

@@ -3,8 +3,8 @@ import type { BuilderStore, BuilderState, BlockType, PageSettings, CanvasTool, D
 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 type { ContentBlock, ContentItem, PageSectionV2, SectionV2Settings, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
 import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
 import { MAX_HISTORY, pushSnapshot } from "./history";
 import {
@@ -48,10 +48,7 @@ function getBlockParentCache(rows: ContentItem[]): Map<string, BlockParent> {
 
   const cache = new Map<string, BlockParent>();
   for (const item of rows) {
-    if (isPageSection(item)) {
-      const sBlock = Array.isArray(item.block) ? item.block[0] : undefined;
-      if (sBlock) cache.set(sBlock._key, { rowKey: item._key, colKey: null });
-    } else if (isPageSectionV2(item)) {
+    if (isPageSectionV2(item)) {
       const v2 = item as PageSectionV2;
       for (const col of v2.columns) {
         for (const b of col.blocks) {