@morphika/andami 0.1.9 → 0.2.0

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: "break-word", wordBreak: "break-word", 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}

package/components/builder/SortableBlock.tsx

@@ -109,7 +109,7 @@ export default function SortableBlock({
       style={style}
       className={`relative transition-[opacity,box-shadow] ${
         isDragging
-          ? "ring-2 ring-[#e28b00] ring-offset-1 ring-offset-transparent rounded"
+          ? "ring-2 ring-[#0d9668] ring-offset-1 ring-offset-transparent rounded"
           : ""
       }`}
       onClick={(e) => {
@@ -129,7 +129,7 @@ export default function SortableBlock({
           isSelected
             ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px ${BUILDER_ORANGE}` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(226, 139, 0, 0.4)` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(13, 150, 104, 0.4)` }
             : undefined
         }
       />
@@ -149,7 +149,7 @@ export default function SortableBlock({
           className="flex items-center gap-1.5"
           style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "top center" }}
         >
-        <div className="flex items-center bg-[#e28b00] rounded shadow-lg overflow-hidden">
+        <div className="flex items-center bg-[#0d9668] rounded shadow-lg overflow-hidden">
           {/* Move up arrow */}
           <button
             onClick={() => canMoveUp && reorderBlocks(rowKey, colKey, blockIndex, blockIndex - 1)}

package/components/builder/SortableRow.tsx

@@ -8,11 +8,11 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { DEFAULT_GRID_WIDTH } from "../../lib/builder/constants";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import type { ReactNode } from "react";
-import type { ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
 import { getRowLayoutStyles } from "../../lib/builder/layout-styles";
 import { normalizeMinHeight } from "../../lib/builder/utils";
-import { getSectionV2SettingValue, getRowSettingValue } from "./settings-panel/responsive-helpers";
+import { getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 
 /**
  * Convert vh-based CSS values to pixels using the simulated device viewport height.
@@ -29,14 +29,8 @@ function vhToBuilderPx(value: string | undefined, deviceHeight: number): string
   return value;
 }
 
-/** Section type labels */
-const SECTION_TYPE_LABELS: Record<string, string> = {
-  projectGrid: "Project Grid",
-};
-
 /**
  * Get the section label for a content item.
- * For PageSections: uses section_type directly (no structural inference).
  * For PageSectionV2: returns "Section".
  */
 function getSectionLabel(item: ContentItem): string | null {
@@ -49,9 +43,6 @@ function getSectionLabel(item: ContentItem): string | null {
   if (isPageSectionV2(item)) {
     return "Section";
   }
-  if (isPageSection(item)) {
-    return SECTION_TYPE_LABELS[item.section_type] || "Section";
-  }
   return null;
 }
 
@@ -108,9 +99,8 @@ export default function SortableRow({
     zIndex: isDragging ? 50 : undefined,
   };
 
-  // Determine if this is a PageSection, PageSectionV2, or a Row
+  // Determine if this is a PageSectionV2
   const isV2Section = isPageSectionV2(row);
-  const isSection = isPageSection(row);
   const sectionLabel = getSectionLabel(row);
 
   // For sections: use section settings — viewport-aware for both V1 and V2 sections
@@ -133,17 +123,6 @@ export default function SortableRow({
       return merged;
     }
 
-    if (isSection) {
-      const ps = row as PageSection;
-      const base = ps.settings || {};
-      // BUG-013 continuation: Merge responsive overrides for V1 PageSections too
-      const merged: Record<string, unknown> = { ...base };
-      for (const key of overridableKeys) {
-        merged[key] = getRowSettingValue(ps, activeViewport, key, (base as Record<string, unknown>)[key]);
-      }
-      return merged;
-    }
-
     // CustomSectionInstance: merge base section settings from cache + per-instance overrides
     // Then apply viewport-aware responsive resolution (same pattern as V2 sections)
     if (isCustomSectionInstance(row)) {
@@ -169,7 +148,7 @@ export default function SortableRow({
     }
 
     return {};
-  }, [isV2Section, isSection, row, activeViewport, customSectionCache]);
+  }, [isV2Section, row, activeViewport, customSectionCache]);
 
   const bgColor = (resolvedSettings as Record<string, unknown>).background_color as string || "transparent";
 
@@ -187,7 +166,7 @@ export default function SortableRow({
   const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown> || {});
 
   const showToolbar = isSelected || isHovered;
-  const coverRow = isSection ? true : false;
+  const coverRow = false;
 
   // ---- Preview Mode: clean rendering with row styles applied ----
   if (previewMode) {

package/components/builder/editors/ButtonBlockEditor.tsx

@@ -3,6 +3,11 @@
 import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { ButtonBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  ContentIcon,
+  StyleIcon,
+  OptionsIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -61,7 +66,7 @@ export default function ButtonBlockEditor({ block }: Props) {
     <>
       <ViewportBadge />
 
-      <SettingsSection title="Content" defaultOpen>
+      <SettingsSection title="Content" defaultOpen icon={<ContentIcon />}>
         <SettingsField label="Button Text">
           <input
             type="text"
@@ -84,7 +89,7 @@ export default function ButtonBlockEditor({ block }: Props) {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Style">
+      <SettingsSection title="Style" icon={<StyleIcon />}>
         <SettingsField label="Variant">
           <div className="flex gap-1">
             {(["primary", "secondary", "outline", "text"] as const).map(
@@ -152,7 +157,7 @@ export default function ButtonBlockEditor({ block }: Props) {
         </ResponsiveField>
       </SettingsSection>
 
-      <SettingsSection title="Options">
+      <SettingsSection title="Options" icon={<OptionsIcon />}>
         <StyledCheckbox
           label="Open in new tab"
           checked={block.target || false}