@morphika/andami 0.1.10 → 0.2.1

package/app/admin/pages/[slug]/page.tsx

@@ -18,8 +18,8 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import type { Page, PageSection, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../../lib/sanity/types";
+import type { Page, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallexGroup } from "../../../../lib/sanity/types";
 import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
 import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
 import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
@@ -665,10 +665,8 @@ export default function PageEditorPage() {
                   >
                     {store.rows.map((item, rowIndex) => {
                       const isV2Section = isPageSectionV2(item);
-                      const isSection = isPageSection(item);
                       const isInstance = isCustomSectionInstance(item);
-                      const isParallax = isParallaxGroup(item);
-                      const section = isSection ? (item as PageSection) : null;
+                      const isParallax = isParallexGroup(item);
                       const v2Section = isV2Section ? (item as PageSectionV2) : null;
 
                       // Custom Section Instance — rendered directly without SortableRow chrome
@@ -770,8 +768,6 @@ export default function PageEditorPage() {
                               section={v2Section}
                               onAddBlockTarget={handleAddBlockTargetV2}
                             />
-                          ) : isSection && section?.block?.[0] ? (
-                            <BlockLivePreview block={section.block[0]} viewport={store.activeViewport} />
                           ) : null}
                         </SortableRow>
                       );

package/app/api/admin/pages/[slug]/route.ts

@@ -18,7 +18,7 @@ interface RawNavItem {
 // ─── Helpers ──────────────────────────────────────────────────────────────
 
 /** Validate basic row→column→block structure before deeper sanitization.
- *  Supports both Row (columns→blocks) and PageSection (_type: "pageSection", block array).
+ *  Supports PageSectionV2, ParallaxGroup, and CustomSectionInstance.
  */
 function validateBlockStructure(rows: unknown[]): { valid: boolean; error?: string } {
   if (!Array.isArray(rows)) return { valid: false, error: "content_rows must be an array" };
@@ -43,20 +43,6 @@ function validateBlockStructure(rows: unknown[]): { valid: boolean; error?: stri
       continue;
     }
 
-    // PageSection: validate block array instead of columns
-    if (r._type === "pageSection") {
-      if (!Array.isArray(r.block)) return { valid: false, error: `Section ${i}: block must be an array` };
-      const blocks = r.block as unknown[];
-      for (let k = 0; k < blocks.length; k++) {
-        const block = blocks[k];
-        if (!block || typeof block !== "object") return { valid: false, error: `Section ${i}, block ${k}: must be an object` };
-        const b = block as Record<string, unknown>;
-        if (typeof b._key !== "string" || !b._key) return { valid: false, error: `Section ${i}, block ${k}: missing _key` };
-        if (typeof b._type !== "string" || !b._type) return { valid: false, error: `Section ${i}, block ${k}: missing _type` };
-      }
-      continue;
-    }
-
     // ParallaxGroup: validate slides array with columns→blocks inside each slide (Session 127)
     if (r._type === "parallaxGroup") {
       if (!Array.isArray(r.slides)) return { valid: false, error: `ParallaxGroup ${i}: slides must be an array` };
@@ -167,7 +153,7 @@ function sanitizeColumnsBlocks(columns: unknown[]): { valid: boolean; error?: st
 }
 
 /** Recursively sanitize URLs and asset paths in block content.
- *  Supports Row (columns→blocks), PageSection (block array), and ParallaxGroup (slides→columns→blocks).
+ *  Supports PageSectionV2 (columns→blocks) and ParallaxGroup (slides→columns→blocks).
  */
 function sanitizeBlockContent(rows: unknown[]): { valid: boolean; error?: string } {
   if (!Array.isArray(rows)) return { valid: true };
@@ -176,18 +162,6 @@ function sanitizeBlockContent(rows: unknown[]): { valid: boolean; error?: string
     if (!row || typeof row !== "object") continue;
     const rowRecord = row as Record<string, unknown>;
 
-    // PageSection: sanitize block array directly
-    if (rowRecord._type === "pageSection") {
-      const sectionBlocks = rowRecord.block;
-      if (!Array.isArray(sectionBlocks)) continue;
-      for (const block of sectionBlocks) {
-        if (!block || typeof block !== "object") continue;
-        const result = sanitizeSingleBlock(block as Record<string, unknown>);
-        if (!result.valid) return result;
-      }
-      continue;
-    }
-
     // ParallaxGroup: sanitize blocks inside each slide's columns (Session 127)
     if (rowRecord._type === "parallaxGroup") {
       const slides = rowRecord.slides;

package/app/api/admin/settings/route.ts

@@ -16,6 +16,23 @@ import { logger } from "../../../../lib/logger";
 
 const SETTINGS_ID = "siteSettings";
 
+/** Sanitize a per-viewport responsive override object for nav_design.
+ *  Only allows the known overridable fields with proper type/range checks. */
+function sanitizeNavResponsiveOverride(o: Record<string, unknown>) {
+  const result: Record<string, unknown> = {};
+  if (typeof o.font_size === "number") result.font_size = Math.max(8, Math.min(48, o.font_size));
+  if (typeof o.font_weight === "string") result.font_weight = o.font_weight.slice(0, 10);
+  if (typeof o.text_align === "string" && ["left", "center", "right"].includes(o.text_align)) result.text_align = o.text_align;
+  if (typeof o.vertical_align === "string" && ["top", "middle", "bottom"].includes(o.vertical_align)) result.vertical_align = o.vertical_align;
+  if (typeof o.text_transform === "string" && ["none", "uppercase", "lowercase", "capitalize"].includes(o.text_transform)) result.text_transform = o.text_transform;
+  if (typeof o.padding_h === "number") result.padding_h = Math.max(0, Math.min(200, o.padding_h));
+  if (typeof o.padding_v === "number") result.padding_v = Math.max(0, Math.min(200, o.padding_v));
+  if (typeof o.margin_h === "number") result.margin_h = Math.max(0, Math.min(200, o.margin_h));
+  if (typeof o.margin_v === "number") result.margin_v = Math.max(0, Math.min(200, o.margin_v));
+  if (typeof o.items_gap === "number") result.items_gap = Math.max(0, Math.min(200, o.items_gap));
+  return result;
+}
+
 export async function GET() {
   const authenticated = await isAdminAuthenticated();
   if (!authenticated) {
@@ -221,6 +238,19 @@ export async function POST(request: NextRequest) {
             entrance_delay: typeof nd.entrance_delay === "number" ? Math.max(0, Math.min(5000, nd.entrance_delay)) : 0,
             entrance_stagger: !!nd.entrance_stagger,
             entrance_stagger_delay: typeof nd.entrance_stagger_delay === "number" ? Math.max(20, Math.min(500, nd.entrance_stagger_delay)) : 80,
+            // ── Responsive overrides (tablet / phone) ──
+            ...(nd.responsive && typeof nd.responsive === "object"
+              ? {
+                  responsive: {
+                    ...(nd.responsive.tablet && typeof nd.responsive.tablet === "object"
+                      ? { tablet: sanitizeNavResponsiveOverride(nd.responsive.tablet) }
+                      : {}),
+                    ...(nd.responsive.phone && typeof nd.responsive.phone === "object"
+                      ? { phone: sanitizeNavResponsiveOverride(nd.responsive.phone) }
+                      : {}),
+                  },
+                }
+              : {}),
           },
         };
         break;

package/components/blocks/EnterAnimationWrapper.tsx

@@ -31,6 +31,12 @@ interface EnterAnimationWrapperProps {
   staggerIndex?: number;
   /** Stagger delay in ms (multiplied by staggerIndex) */
   staggerDelay?: number;
+  /**
+   * When true, the animation is triggered immediately by the parent
+   * instead of using a per-element IntersectionObserver.
+   * Used by ProjectGridBlock to fire all card animations at once.
+   */
+  forceEnter?: boolean;
 }
 
 /**
@@ -54,6 +60,7 @@ export default function EnterAnimationWrapper({
   style,
   staggerIndex,
   staggerDelay,
+  forceEnter,
 }: EnterAnimationWrapperProps) {
   const { preset, duration, delay, easing } = config;
 
@@ -66,8 +73,18 @@ export default function EnterAnimationWrapper({
   // Get keyframe data for initial hidden state
   const keyframes = getEnterKeyframes(preset);
 
-  // ── IntersectionObserver: above-the-fold detection + scroll reveal ──
+  // ── forceEnter: parent controls when animation fires ──
   useEffect(() => {
+    if (forceEnter && !hasEntered) {
+      setHasEntered(true);
+    }
+  }, [forceEnter, hasEntered]);
+
+  // ── IntersectionObserver: self-managed trigger (used when forceEnter is not set) ──
+  useEffect(() => {
+    // Skip per-element observer when parent controls the trigger
+    if (forceEnter !== undefined) return;
+
     const el = ref.current;
     if (!el || hasEntered) return;
 
@@ -80,8 +97,6 @@ export default function EnterAnimationWrapper({
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
-          // Whether above-the-fold (already visible on mount) or below-the-fold
-          // (scrolled into view), behavior is the same: play animation once.
           setHasEntered(true);
           observer.disconnect();
         }
@@ -91,7 +106,7 @@ export default function EnterAnimationWrapper({
 
     observer.observe(el);
     return () => observer.disconnect();
-  }, [hasEntered]);
+  }, [hasEntered, forceEnter]);
 
   // If preset is "none" or has no keyframes (typewriter), just render children
   if (preset === "none" || !keyframes) {

package/components/blocks/PageRenderer.tsx

@@ -1,6 +1,5 @@
-import type { Page, ContentBlock, ContentItem, PageSection, PageSectionV2, SectionColumn, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
-import SectionRenderer from "./SectionRenderer";
+import type { Page, ContentBlock, ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
 import SectionV2Renderer from "./SectionV2Renderer";
 import CustomSectionInstanceRenderer from "./CustomSectionInstanceRenderer";
 import ParallaxGroupRenderer from "./ParallaxGroupRenderer";
@@ -34,16 +33,6 @@ function getBlockImagePath(block: ContentBlock): string | null {
 
 function findFirstImagePath(items: ContentItem[]): string | null {
   for (const item of items) {
-    if (isPageSection(item)) {
-      // Check inside PageSection blocks for image/cover blocks
-      const section = item as PageSection;
-      const sectionBlock = Array.isArray(section.block) ? section.block[0] : undefined;
-      if (sectionBlock) {
-        const path = getBlockImagePath(sectionBlock as unknown as ContentBlock);
-        if (path) return path;
-      }
-      continue;
-    }
     if (isParallaxGroup(item)) {
       // Check first slide's background image for preloading
       const group = item as ParallaxGroup;
@@ -134,8 +123,6 @@ export default function PageRenderer({ page }: { page: Page }) {
             ? <ParallaxGroupRenderer key={item._key} group={item as ParallaxGroup} pageEnterAnimation={pageEnterAnimation} />
             : isPageSectionV2(item)
             ? <SectionV2Renderer key={item._key} section={item as PageSectionV2} pageEnterAnimation={pageEnterAnimation} />
-            : isPageSection(item)
-            ? <SectionRenderer key={item._key} section={item as PageSection} pageEnterAnimation={pageEnterAnimation} />
             : null
         )}
       </article>

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -62,8 +62,6 @@ export default function ProjectGridBlockRenderer({
   const viewport = useViewport();
   const containerRef = useRef<HTMLDivElement>(null);
   const roRef = useRef<ResizeObserver | null>(null);
-  /** Container top offset at first measure — for above-the-fold detection */
-  const containerTopRef = useRef<number | null>(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const [resolvedProjects, setResolvedProjects] = useState<ResolvedProject[]>([]);
   // BLK-005: Track fetch errors so we can provide user feedback
@@ -85,10 +83,6 @@ export default function ProjectGridBlockRenderer({
         const w = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
         if (w > 0) setContainerWidth(w);
       }
-      // Capture container top on first observation (for above-the-fold detection)
-      if (containerTopRef.current === null) {
-        containerTopRef.current = node.getBoundingClientRect().top;
-      }
     });
     roRef.current = ro;
     ro.observe(node);
@@ -227,39 +221,44 @@ export default function ProjectGridBlockRenderer({
       }
     : undefined;
 
-  // ─── Determine which cards are above the fold (visible without scrolling) ───
-  // Only these cards get the entrance animation. Cards below the fold
-  // render immediately visible to avoid empty gaps while scrolling.
-  const aboveFoldKeys = useMemo(() => {
-    if (!entranceEnabled || masonry.items.length === 0) return new Set<string>();
-
-    const containerTop = containerTopRef.current ?? 0;
-    const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 900;
-    // How much vertical space is available below the container's top edge
-    const cutoff = viewportHeight - containerTop;
-
-    const keys = new Set<string>();
-    for (const item of masonry.items) {
-      // Card is above the fold if its top edge starts within the viewport
-      if (item.y < cutoff) {
-        keys.add(item.key);
-      }
+  // ─── Grid-level entrance trigger ───
+  // A single IntersectionObserver on the grid container fires all card
+  // animations at once (with stagger). No per-card observer needed.
+  const [gridVisible, setGridVisible] = useState(false);
+
+  useEffect(() => {
+    if (!entranceEnabled || gridVisible) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    // Respect prefers-reduced-motion
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setGridVisible(true);
+      return;
     }
-    return keys;
-  }, [entranceEnabled, masonry.items]);
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setGridVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.05 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [entranceEnabled, gridVisible]);
 
   // ─── Compute stagger indices sorted by vertical position ───
   // Cards at similar y positions (within half of gapV) share the same rank.
-  // Only computed for above-the-fold cards.
+  // Computed for ALL cards so the entire grid animates in together.
   const staggerIndices = useMemo(() => {
     if (!entranceEnabled || masonry.items.length === 0) return new Map<string, number>();
 
-    // Only stagger above-the-fold cards
-    const aboveFold = masonry.items.filter((item) => aboveFoldKeys.has(item.key));
-    if (aboveFold.length === 0) return new Map<string, number>();
-
     // Sort items by y, then by x for tie-breaking
-    const sorted = [...aboveFold].sort((a, b) => a.y - b.y || a.x - b.x);
+    const sorted = [...masonry.items].sort((a, b) => a.y - b.y || a.x - b.x);
     const indices = new Map<string, number>();
     let rank = 0;
     let prevY = -Infinity;
@@ -273,7 +272,7 @@ export default function ProjectGridBlockRenderer({
       indices.set(item.key, rank);
     }
     return indices;
-  }, [entranceEnabled, masonry.items, aboveFoldKeys, gapV]);
+  }, [entranceEnabled, masonry.items, gapV]);
 
   if (resolvedProjects.length === 0) {
     // BLK-005: Show subtle error message if fetch failed (not just empty data)
@@ -321,12 +320,10 @@ export default function ProjectGridBlockRenderer({
             />
           );
 
-          const isAboveFold = aboveFoldKeys.has(item.key);
-
           return (
             <div
               key={item.key}
-              data-card-entrance={entranceEnabled && isAboveFold ? "" : undefined}
+              data-card-entrance={entranceEnabled ? "" : undefined}
               style={{
                 position: "absolute",
                 left: item.x,
@@ -335,11 +332,12 @@ export default function ProjectGridBlockRenderer({
                 height: item.height,
               }}
             >
-              {entranceEnabled && entranceAnimConfig && isAboveFold ? (
+              {entranceEnabled && entranceAnimConfig ? (
                 <EnterAnimationWrapper
                   config={entranceAnimConfig}
                   staggerIndex={staggerIndices.get(item.key) ?? 0}
                   staggerDelay={entranceStaggerDelay}
+                  forceEnter={gridVisible}
                   style={{ width: "100%", height: "100%" }}
                 >
                   {card}

package/components/blocks/TextBlockRenderer.tsx

@@ -87,7 +87,7 @@ export default function TextBlockRenderer({ block }: { block: TextBlock }) {
   return (
     <div
       className={`${className} space-y-[0.75em]`}
-      style={{ overflowWrap: "anywhere", wordBreak: "normal", minWidth: 0, ...style }}
+      style={{ overflowWrap: "break-word", wordBreak: "normal", minWidth: 0, ...style }}
     >
       <PortableText value={block.text} />
     </div>

package/components/builder/DndWrapper.tsx

@@ -100,22 +100,6 @@ const RowDragOverlay = memo(function RowDragOverlay({ rowKey }: { rowKey: string
     );
   }
 
-  // PageSection
-  if ((item as { _type?: string })._type === "pageSection") {
-    const section = item as import("../../lib/sanity/types").PageSection;
-    const label = section.section_type === "projectGrid"
-      ? "Project Grid"
-      : "Section";
-    return (
-      <div className="rounded border border-[#93278f] bg-[#1a1a1a]/90 px-4 py-3 shadow-lg shadow-[#93278f]/20 backdrop-blur-sm">
-        <div className="flex items-center gap-2">
-          <span className="text-[#93278f]">⠿</span>
-          <span className="text-xs text-white">{label}</span>
-        </div>
-      </div>
-    );
-  }
-
   return null;
 });
 
@@ -140,7 +124,7 @@ const BlockDragOverlay = memo(function BlockDragOverlay({ blockKey, rowKey }: {
   }
   if (!item) return null;
 
-  // Handle V2 sections, PageSections, and virtual sections from parallax slides
+  // Handle V2 sections and virtual sections from parallax slides
   let block: import("../../lib/sanity/types").ContentBlock | undefined;
   if (isPageSectionV2(item)) {
     const v2Section = item as PageSectionV2;
@@ -148,18 +132,12 @@ const BlockDragOverlay = memo(function BlockDragOverlay({ blockKey, rowKey }: {
       const found = (col.blocks || []).find((b) => b._key === blockKey);
       if (found) { block = found; break; }
     }
-  } else if ((item as { _type?: string })._type === "pageSection") {
-    const section = item as import("../../lib/sanity/types").PageSection;
-    const sBlock = Array.isArray(section.block) ? section.block[0] : undefined;
-    if (sBlock && sBlock._key === blockKey) {
-      block = sBlock as import("../../lib/sanity/types").ContentBlock;
-    }
   }
 
   if (!block) return null;
   const info = ALL_BLOCK_INFO.find((b) => b.type === block!._type);
   return (
-    <div className="rounded border border-[#e28b00] bg-[#e28b00]/10 px-3 py-2 shadow-lg shadow-[#e28b00]/20 backdrop-blur-sm">
+    <div className="rounded border border-[#0d9668] bg-[#0d9668]/10 px-3 py-2 shadow-lg shadow-[#0d9668]/20 backdrop-blur-sm">
       <div className="flex items-center gap-2">
         <span className="text-xs">{info?.icon || "▪"}</span>
         <span className="text-xs text-white">{info?.label || block._type}</span>

package/components/builder/InsertionLines.tsx

@@ -3,7 +3,7 @@
 import { useMemo, memo } from "react";
 import type { CascadeColumn } from "../../lib/builder/cascade-helpers";
 import type { DropTarget } from "./hooks/useColumnDrag";
-import { BUILDER_GREEN } from "../../lib/builder/constants";
+import { BUILDER_BLUE } from "../../lib/builder/constants";
 
 // ============================================
 // InsertionLines — Visual insertion indicators between adjacent columns
@@ -137,7 +137,7 @@ export const InsertionLines = memo(function InsertionLines({
                 pointerEvents: "auto",
               }}
             >
-              {/* Visual insertion line — green when active */}
+              {/* Visual insertion line — blue when active */}
               <div
                 style={{
                   position: "absolute",
@@ -146,7 +146,7 @@ export const InsertionLines = memo(function InsertionLines({
                   bottom: 4,
                   width: isActive ? 4 : 0,
                   transform: "translateX(-50%)",
-                  background: BUILDER_GREEN,
+                  background: BUILDER_BLUE,
                   borderRadius: 2,
                   transition: "width 100ms ease-out, opacity 100ms ease-out",
                   opacity: isActive ? 1 : 0,
@@ -163,9 +163,9 @@ export const InsertionLines = memo(function InsertionLines({
                     width: 14,
                     height: 14,
                     borderRadius: "50%",
-                    background: BUILDER_GREEN,
+                    background: BUILDER_BLUE,
                     border: "2px solid white",
-                    boxShadow: "0 1px 4px rgba(34, 197, 94, 0.4)",
+                    boxShadow: "0 1px 4px rgba(7, 107, 255, 0.4)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",

package/components/builder/ReadOnlyFrame.tsx

@@ -18,16 +18,15 @@
 
 import { memo, useMemo, useState, useEffect } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
-import { DEFAULT_GRID_WIDTH } from "../../lib/builder/constants";
 import type { DeviceViewport } from "../../lib/builder/types";
-import type { ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallexGroup } from "../../lib/sanity/types";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
-import { getEffectiveColumnsV2, getSectionV2SettingValue, getRowSettingValue } from "./settings-panel/responsive-helpers";
+import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import BlockLivePreview from "./BlockLivePreview";
-import { getRowLayoutStyles, getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
 
-// Shared list of layout keys that support responsive overrides (V1 + V2)
+// Layout keys that support responsive overrides for V2 sections
 const OVERRIDABLE_KEYS = [
   "spacing_top", "spacing_right", "spacing_bottom", "spacing_left",
   "offset_top", "offset_right", "offset_bottom", "offset_left",
@@ -35,43 +34,6 @@ const OVERRIDABLE_KEYS = [
   "border_color", "border_width", "border_style", "border_sides", "border_radius",
 ] as const;
 
-// ============================================
-// Memoized per-section renderer — renders PageSection block directly
-// ============================================
-
-interface ReadOnlySectionProps {
-  section: PageSection;
-  viewport: DeviceViewport;
-}
-
-const ReadOnlySection = memo(function ReadOnlySection({ section, viewport }: ReadOnlySectionProps) {
-  const block = section.block?.[0];
-  if (!block) return null;
-
-  const base = section.settings || {};
-  // Merge responsive overrides for V1 PageSection (same approach as V2)
-  const resolvedSettings = useMemo(() => {
-    const merged: Record<string, unknown> = { ...base };
-    for (const key of OVERRIDABLE_KEYS) {
-      merged[key] = getRowSettingValue(section, viewport, key, (base as Record<string, unknown>)[key]);
-    }
-    return merged;
-  }, [section, viewport, base]);
-  const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown>);
-
-  const sectionStyle: React.CSSProperties = {
-    ...layoutStyles,
-    contentVisibility: "auto",
-    containIntrinsicSize: "auto 200px",
-  };
-
-  return (
-    <div style={sectionStyle}>
-      <BlockLivePreview block={block} viewport={viewport} />
-    </div>
-  );
-});
-
 // ============================================
 // Memoized per-section V2 renderer — renders PageSectionV2 grid
 // BUG-V2-005 fix: V2 sections were not rendered in inactive device frames.
@@ -404,12 +366,6 @@ export default function ReadOnlyFrame({ viewport }: ReadOnlyFrameProps) {
             section={item as PageSectionV2}
             viewport={viewport}
           />
-        ) : isPageSection(item) ? (
-          <ReadOnlySection
-            key={item._key}
-            section={item as PageSection}
-            viewport={viewport}
-          />
         ) : null
       )}
     </div>

package/components/builder/SectionV2Canvas.tsx

@@ -277,9 +277,9 @@ export default function SectionV2Canvas({
               }}
               className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
                 isGapTarget
-                  ? "border-green-500 text-green-500 bg-green-500/10 opacity-100"
+                  ? "border-blue-500 text-blue-500 bg-blue-500/10 opacity-100"
                   : showAsDropTarget
-                  ? "border-green-500/40 text-green-500/60 bg-green-500/5 opacity-100"
+                  ? "border-blue-500/40 text-blue-500/60 bg-blue-500/5 opacity-100"
                   : isSectionHovered
                   ? "border-[#076bff]/25 text-[#076bff]/50 hover:text-[#076bff] hover:border-[#076bff]/60 hover:bg-[#076bff]/5 opacity-100"
                   : "border-transparent text-transparent opacity-0 pointer-events-none"

package/components/builder/SectionV2Column.tsx

@@ -10,7 +10,7 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { makeBlockId, makeColumnDroppableId } from "./DndWrapper";
 import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanity/types";
 import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
-import { BUILDER_BLUE, BUILDER_GREEN } from "../../lib/builder/constants";
+import { BUILDER_BLUE } from "../../lib/builder/constants";
 
 // ============================================
 // SectionV2Column — Individual column in a V2 section grid
@@ -266,7 +266,7 @@ export default function SectionV2Column({
         style={{
           transition: "box-shadow 150ms, border 150ms",
           ...(isSwapTarget
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_GREEN}`, background: "rgba(34, 197, 94, 0.08)" }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(7, 107, 255, 0.08)" }
             : isBlockOver
             ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
             : isSelected
@@ -450,9 +450,9 @@ export default function SectionV2Column({
               aria-label="Add block to empty column"
               className={`w-full py-2 rounded-lg text-xs font-medium transition-all flex items-center justify-center ${
                 showChrome
-                  ? "bg-[#e28b00] text-white hover:bg-[#c67a00] shadow-sm opacity-100"
+                  ? "bg-[#0d9668] text-white hover:bg-[#0a7d56] shadow-sm opacity-100"
                   : showFaintOutline
-                  ? "bg-[#e28b00]/30 text-white/50 opacity-40"
+                  ? "bg-[#0d9668]/30 text-white/50 opacity-40"
                   : "bg-transparent text-transparent opacity-0 pointer-events-none"
               }`}
               style={{ pointerEvents: showChrome || showFaintOutline ? "auto" : "none" }}
@@ -476,7 +476,7 @@ export default function SectionV2Column({
           <button
             onClick={handleAddBlockBelow}
             aria-label="Add block below existing blocks"
-            className="w-full py-1.5 text-[11px] font-medium rounded bg-[#e28b00] text-white hover:bg-[#c67a00] transition-all shadow-sm"
+            className="w-full py-1.5 text-[11px] font-medium rounded bg-[#0d9668] text-white hover:bg-[#0a7d56] transition-all shadow-sm"
             style={{ pointerEvents: showChrome ? "auto" : "none" }}
           >
             + Add Block

package/components/builder/SettingsPanel.tsx

@@ -27,7 +27,6 @@ import { AnimationTab } from "./settings-panel/AnimationTab";
 import { ColumnV2AnimationTab } from "./settings-panel/ColumnV2AnimationTab";
 import { CustomSectionSettings } from "./settings-panel/CustomSectionSettings";
 import {
-  LayoutTab,
   BlockLayoutTab,
   PageSettings,
   PageSeoSettings,
@@ -48,7 +47,6 @@ export default function SettingsPanel() {
 
   const sel = useSettingsPanelSelection();
   const {
-    selectedSection,
     selectedSectionV2,
     selectedCustomSectionInstance,
     selectedParallaxGroup,
@@ -354,14 +352,9 @@ export default function SettingsPanel() {
         ) : activeTab === "animation" ? (
           <AnimationTab
             selectedBlock={selectedBlock}
-            selectedSection={selectedSection}
           />
         ) : activeTab === "layout" ? (
           (() => {
-            // PageSection: show section layout settings (spacing, background, border)
-            if (selectedSection) {
-              return <LayoutTab section={selectedSection} sectionKey={selectedSection._key} />;
-            }
             if (selectedBlock && !selectedBlock.isSection) {
               return <BlockLayoutTab block={selectedBlock.block} />;
             }
@@ -377,11 +370,6 @@ export default function SettingsPanel() {
           })()
         ) : activeTab === "seo" ? (
           <PageSeoSettings />
-        ) : selectedSection ? (
-          // PageSection selected → show the section block's settings directly
-          <BlockSettings
-            block={selectedSection.block[0]}
-          />
         ) : selectedBlock ? (
           <BlockSettings
             block={selectedBlock.block}