@morphika/andami 0.2.26 → 0.3.1

package/components/builder/SortableRow.tsx

@@ -8,11 +8,12 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { DEFAULT_GRID_WIDTH } from "../../lib/builder/constants";
 import { DEVICE_HEIGHTS, isSectionBlockSection } from "../../lib/builder/types";
 import type { ReactNode } from "react";
-import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, CoverSection } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { getRowLayoutStyles } from "../../lib/builder/layout-styles";
 import { normalizeMinHeight } from "../../lib/builder/utils";
 import { getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
+import { formatRowPercent } from "../../lib/builder/format";
 
 /**
  * Convert vh-based CSS values to pixels using the simulated device viewport height.
@@ -40,6 +41,9 @@ function getSectionLabel(item: ContentItem): string | null {
   if (isParallaxGroup(item)) {
     return "Parallax Showcase";
   }
+  if (isCoverSection(item)) {
+    return "Cover Section";
+  }
   if (isPageSectionV2(item)) {
     const section = item as PageSectionV2;
     if (isSectionBlockSection(section)) {
@@ -52,6 +56,7 @@ function getSectionLabel(item: ContentItem): string | null {
   return null;
 }
 
+
 interface SortableRowProps {
   rowKey: string;
   row: ContentItem;
@@ -90,6 +95,13 @@ export default function SortableRow({
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
   const activeViewport = useBuilderStore((s) => s.activeViewport);
   const customSectionCache = useBuilderStore((s) => s._customSectionCache);
+  const addCoverRow = useBuilderStore((s) => s.addCoverRow);
+  const removeCoverRow = useBuilderStore((s) => s.removeCoverRow);
+  const addParallaxSlide = useBuilderStore((s) => s.addParallaxSlide);
+  const removeParallaxSlide = useBuilderStore((s) => s.removeParallaxSlide);
+  const moveParallaxSlide = useBuilderStore((s) => s.moveParallaxSlide);
+  const selectRow = useBuilderStore((s) => s.selectRow);
+  const selectedRowKey = useBuilderStore((s) => s.selectedRowKey);
   const [isHovered, setIsHovered] = useState(false);
   const {
     attributes,
@@ -236,20 +248,20 @@ export default function SortableRow({
         style={{
           inset: `${-Math.max(2, Math.min(5, 3 / canvasZoom))}px`,
           ...(isSelected
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px #93278f` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px #7500d5` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(147, 39, 143, 0.4)` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(117, 0, 213, 0.4)` }
             : {}),
         }}
       />
 
-      {/* Section toolbar — wide pill aligned top-left outside the row */}
+      {/* Section toolbar — floating pill aligned top-left outside the row (8px gap) */}
       <div
         className={`absolute top-0 left-0 z-[5] flex flex-col items-stretch transition-opacity ${
           showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
         style={{
-          transform: `translateX(-100%) scale(${Math.min(1.5, 1 / canvasZoom)})`,
+          transform: `translateX(calc(-100% - 8px)) scale(${Math.min(1.5, 1 / canvasZoom)})`,
           transformOrigin: "top right",
           width: "90px",
         }}
@@ -264,18 +276,16 @@ export default function SortableRow({
       >
         {/* Main toolbar — drag + actions */}
         <div
-          className="flex flex-col items-stretch rounded-l-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
+          className="flex flex-col items-stretch rounded-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
           style={{
-            background: "linear-gradient(170deg, rgba(38,38,48,0.97) 0%, rgba(28,28,36,0.98) 100%)",
-            boxShadow: "0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06)",
-            border: "1px solid rgba(255,255,255,0.06)",
-            borderRight: "none",
+            background: "#e0daff",
+            border: "1px solid #7500d5",
           }}
           {...attributes}
           {...listeners}
         >
           {/* Section label — shows specific type for page sections */}
-          <span className="text-[11px] select-none leading-tight pointer-events-none font-medium tracking-wide" style={{ color: "rgba(200,160,220,0.9)" }}>
+          <span className="text-[11px] select-none leading-tight pointer-events-none font-medium tracking-wide" style={{ color: "#7500d5" }}>
             {sectionLabel || "Section"}
           </span>
 
@@ -284,7 +294,10 @@ export default function SortableRow({
             <button
               onClick={(e) => { e.stopPropagation(); onDuplicate(); }}
               onPointerDown={(e) => e.stopPropagation()}
-              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors"
+              className="flex items-center justify-center text-[12px] transition-colors"
+              style={{ color: "rgba(117, 0, 213, 0.6)" }}
+              onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
+              onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
               title="Duplicate section"
               aria-label="Duplicate section"
             >
@@ -294,7 +307,10 @@ export default function SortableRow({
               onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isFirst}
-              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              style={{ color: "rgba(117, 0, 213, 0.6)" }}
+              onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+              onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
               title="Move up"
               aria-label="Move section up"
             >
@@ -304,7 +320,10 @@ export default function SortableRow({
               onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isLast}
-              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              style={{ color: "rgba(117, 0, 213, 0.6)" }}
+              onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+              onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
               title="Move down"
               aria-label="Move section down"
             >
@@ -317,11 +336,14 @@ export default function SortableRow({
             <button
               onClick={(e) => { e.stopPropagation(); onAddColumn(); }}
               onPointerDown={(e) => e.stopPropagation()}
-              className="flex items-center gap-1 text-[11px] text-white/50 hover:text-white/85 transition-colors py-0.5"
+              className="flex items-center gap-1 text-[11px] transition-colors py-0.5"
+              style={{ color: "rgba(117, 0, 213, 0.6)" }}
+              onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
+              onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
               title={`Add ${addColumnLabel.toLowerCase()}`}
               aria-label={`Add ${addColumnLabel.toLowerCase()}`}
             >
-              <span className="text-white/30">+</span> {addColumnLabel}
+              <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> {addColumnLabel}
             </button>
           )}
 
@@ -329,13 +351,179 @@ export default function SortableRow({
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(); }}
             onPointerDown={(e) => e.stopPropagation()}
-            className="flex items-center gap-1 text-[11px] text-white/50 hover:text-red-300 transition-colors py-0.5"
+            className="flex items-center gap-1 text-[11px] transition-colors py-0.5"
+            style={{ color: "rgba(117, 0, 213, 0.6)" }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
             title="Delete section"
             aria-label="Delete section"
           >
-            <span className="text-white/30">-</span> Delete
+            <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>-</span> Delete
           </button>
         </div>
+
+        {/* Cover rows pill — replaces the former top "Cover Section" banner.
+            Lists each row with its height percent + remove button, plus a
+            "+ Row" action at the bottom. Only rendered for Cover sections. */}
+        {isCoverSection(row) && (() => {
+          const coverSection = row as CoverSection;
+          const coverRows = coverSection.cover_rows || [];
+          const canAddRow = coverRows.length < 5;
+          const canRemoveRow = coverRows.length > 1;
+          return (
+            <div
+              className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
+              style={{
+                background: "#e0daff",
+                border: "1px solid #7500d5",
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {coverRows.map((r) => (
+                <div key={r._key} className="flex items-center justify-between gap-1 py-0.5">
+                  <span className="text-[11px] font-medium" style={{ color: "#7500d5" }}>
+                    {formatRowPercent(r.height_percent)}% Row
+                  </span>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (canRemoveRow) removeCoverRow(coverSection._key, r._key);
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    disabled={!canRemoveRow}
+                    className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                    style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                    onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+                    onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                    title={canRemoveRow ? "Remove row" : "Cover must have at least 1 row"}
+                    aria-label="Remove row"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+
+              {/* + Row */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (canAddRow) addCoverRow(coverSection._key);
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                disabled={!canAddRow}
+                className="flex items-center gap-1 text-[11px] transition-colors py-0.5 disabled:opacity-30 disabled:cursor-not-allowed"
+                style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+                onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                title={canAddRow ? "Add row" : "Cover supports up to 5 rows"}
+                aria-label="Add row"
+              >
+                <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> Row
+              </button>
+            </div>
+          );
+        })()}
+
+        {/* Parallax slides pill — replaces the former group banner + per-slide
+            headers + bottom "+ Add Slide" button. Lists each slide with
+            click-to-select, reorder arrows, delete, and a "+ Slide" action. */}
+        {isParallaxGroup(row) && (() => {
+          const parallaxGroup = row as ParallaxGroup;
+          const slides = parallaxGroup.slides || [];
+          const canRemoveSlide = slides.length > 1;
+          return (
+            <div
+              className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
+              style={{
+                background: "#e0daff",
+                border: "1px solid #7500d5",
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {slides.map((slide, idx) => {
+                const isActive = selectedRowKey === slide._key;
+                return (
+                  <div
+                    key={slide._key}
+                    onClick={(e) => { e.stopPropagation(); selectRow(slide._key); }}
+                    className="flex items-center justify-between gap-1 py-0.5 px-1 -mx-1 rounded cursor-pointer transition-colors"
+                    style={{ background: isActive ? "rgba(117, 0, 213, 0.15)" : "transparent" }}
+                    onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "rgba(117, 0, 213, 0.08)"; }}
+                    onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "transparent"; }}
+                  >
+                    <span className="text-[11px] font-medium" style={{ color: "#7500d5" }}>
+                      Slide {idx + 1}
+                    </span>
+                    <div className="flex items-center gap-0.5">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (idx > 0) moveParallaxSlide(parallaxGroup._key, slide._key, "up");
+                        }}
+                        onPointerDown={(e) => e.stopPropagation()}
+                        disabled={idx === 0}
+                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                        onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+                        onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                        title="Move slide up"
+                        aria-label="Move slide up"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (idx < slides.length - 1) moveParallaxSlide(parallaxGroup._key, slide._key, "down");
+                        }}
+                        onPointerDown={(e) => e.stopPropagation()}
+                        disabled={idx === slides.length - 1}
+                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                        onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+                        onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                        title="Move slide down"
+                        aria-label="Move slide down"
+                      >
+                        ↓
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (canRemoveSlide) removeParallaxSlide(parallaxGroup._key, slide._key);
+                        }}
+                        onPointerDown={(e) => e.stopPropagation()}
+                        disabled={!canRemoveSlide}
+                        className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                        onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
+                        onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                        title={canRemoveSlide ? "Remove slide" : "Parallax must have at least 1 slide"}
+                        aria-label="Remove slide"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+
+              {/* + Slide */}
+              <button
+                onClick={(e) => { e.stopPropagation(); addParallaxSlide(parallaxGroup._key); }}
+                onPointerDown={(e) => e.stopPropagation()}
+                className="flex items-center gap-1 text-[11px] transition-colors py-0.5 mt-0.5"
+                style={{ color: "rgba(117, 0, 213, 0.6)" }}
+                onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
+                title="Add slide"
+                aria-label="Add slide"
+              >
+                <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> Slide
+              </button>
+            </div>
+          );
+        })()}
       </div>
 
       {/* Row bg color indicator */}

package/components/builder/blockStyles.tsx

@@ -3,8 +3,32 @@
 /**
  * Shared block visual styles — gradients and SVG icon components.
  * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
+ *
+ * The compact block/section icons exported here are thin wrappers that render
+ * the full card icons (`BlockCardIcons.tsx` / `SectionCardIcons.tsx`) at a
+ * smaller size. This keeps iconography 100% consistent between the modal
+ * cards and the settings panel header — same visual, just scaled.
+ *
+ * `size` represents the HEIGHT in pixels. Width is derived from the
+ * card icon's 220×120 aspect ratio (≈ height × 1.833).
  */
 
+import {
+  TextBlockCardIcon,
+  ImageBlockCardIcon,
+  ImageGridBlockCardIcon,
+  VideoBlockCardIcon,
+  SpacerBlockCardIcon,
+  ButtonBlockCardIcon,
+} from "./BlockCardIcons";
+import {
+  CoverSectionCardIcon,
+  EmptySectionV2CardIcon,
+  ParallaxGroupCardIcon,
+  ProjectGridCardIcon,
+  SavedSectionCardIcon,
+} from "./SectionCardIcons";
+
 // ── Gradient backgrounds per block type ──
 
 export const BLOCK_GRADIENTS: Record<string, string> = {
@@ -24,170 +48,51 @@ export const BLOCK_GRADIENTS: Record<string, string> = {
   page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
 };
 
-// ── SVG Icon Components ──
+// ── Compact wrappers that render the full card icon at a smaller size ──
+//
+// Card icons are 220×120 (landscape ≈11:6). `size` here is the HEIGHT in px;
+// width is derived automatically to preserve aspect.
 
-export function TextBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="tGrad" x1="10" y1="2" x2="30" y2="38">
-          <stop offset="0%" stopColor="#a08ee0" />
-          <stop offset="100%" stopColor="#7060b8" />
-        </linearGradient>
-        <filter id="textDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor="rgba(80,40,140,0.3)" />
-        </filter>
-      </defs>
-      <path d="M 6,5 L 34,5 L 34,8 L 33,9.5 L 23,9.5 L 23,33 L 26.5,33 L 28,34.5 L 28,37 L 12,37 L 12,34.5 L 13.5,33 L 17,33 L 17,9.5 L 7,9.5 L 6,8 Z" fill="url(#tGrad)" filter="url(#textDrop)" />
-      <path d="M 6,5 L 8,3 L 14,3 L 14,5 Z" fill="url(#tGrad)" opacity="0.85" />
-      <path d="M 34,5 L 32,3 L 26,3 L 26,5 Z" fill="url(#tGrad)" opacity="0.85" />
-      <path d="M 12,37 L 13,38.5 L 18,38.5 L 17,37 Z" fill="url(#tGrad)" opacity="0.8" />
-      <path d="M 28,37 L 27,38.5 L 22,38.5 L 23,37 Z" fill="url(#tGrad)" opacity="0.8" />
-      <path d="M 6,5 L 34,5 L 34,6.5 L 6,6.5 Z" fill="white" opacity="0.22" />
-      <path d="M 17,9.5 L 19,9.5 L 19,33 L 17,33 Z" fill="white" opacity="0.12" />
-    </svg>
-  );
+const ASPECT = 220 / 120;
+
+function scaleToHeight(size: number): React.CSSProperties {
+  return {
+    width: Math.round(size * ASPECT),
+    height: size,
+    display: "inline-block",
+    flexShrink: 0,
+  };
 }
 
+export function TextBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><TextBlockCardIcon /></span>;
+}
 export function ImageBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="mtnBack" x1="10" y1="8" x2="30" y2="32">
-          <stop offset="0%" stopColor="#6abf6a" />
-          <stop offset="100%" stopColor="#3d9e3d" />
-        </linearGradient>
-        <linearGradient id="mtnFront" x1="5" y1="12" x2="25" y2="34">
-          <stop offset="0%" stopColor="#4da84d" />
-          <stop offset="100%" stopColor="#2d7e2d" />
-        </linearGradient>
-        <filter id="mtnDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
-        </filter>
-      </defs>
-      <polygon points="20,6 35,32 5,32" fill="url(#mtnBack)" filter="url(#mtnDrop)" />
-      <polygon points="20,6 24,13 16,13" fill="white" opacity="0.5" />
-      <polygon points="12,14 26,32 -2,32" fill="url(#mtnFront)" filter="url(#mtnDrop)" />
-      <polygon points="12,14 15,19 9,19" fill="white" opacity="0.45" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><ImageBlockCardIcon /></span>;
 }
-
 export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="gridFill" x1="0" y1="0" x2="40" y2="40">
-          <stop offset="0%" stopColor="#6ea8e8" />
-          <stop offset="100%" stopColor="#4080c8" />
-        </linearGradient>
-        <filter id="gridDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
-        </filter>
-      </defs>
-      <rect x="4" y="4" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.85" filter="url(#gridDrop)" />
-      <rect x="22" y="4" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.65" filter="url(#gridDrop)" />
-      <rect x="4" y="22" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.55" filter="url(#gridDrop)" />
-      <rect x="22" y="22" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.75" filter="url(#gridDrop)" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><ImageGridBlockCardIcon /></span>;
 }
-
 export function VideoBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="playGrad" x1="12" y1="8" x2="32" y2="32">
-          <stop offset="0%" stopColor="#f06060" />
-          <stop offset="100%" stopColor="#d83838" />
-        </linearGradient>
-        <filter id="playDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="2" floodColor="rgba(200,50,50,0.3)" />
-        </filter>
-      </defs>
-      <path d="M12,6 L34,20 L12,34 Z" fill="url(#playGrad)" filter="url(#playDrop)" />
-      <path d="M12,6 L34,20 L12,20 Z" fill="white" opacity="0.15" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><VideoBlockCardIcon /></span>;
 }
-
 export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <filter id="spacerDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.1)" />
-        </filter>
-      </defs>
-      <path d="M20,4 L27,13 L23,13 L23,17 L17,17 L17,13 L13,13 Z" fill="#9898b8" opacity="0.7" filter="url(#spacerDrop)" />
-      <path d="M20,36 L27,27 L23,27 L23,23 L17,23 L17,27 L13,27 Z" fill="#9898b8" opacity="0.7" filter="url(#spacerDrop)" />
-      <line x1="8" y1="20" x2="32" y2="20" stroke="#b0b0c8" strokeWidth="1.5" strokeDasharray="3 2" opacity="0.5" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><SpacerBlockCardIcon /></span>;
 }
-
 export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="toggleGrad" x1="0" y1="10" x2="40" y2="30">
-          <stop offset="0%" stopColor="#3cc87c" />
-          <stop offset="100%" stopColor="#28a85c" />
-        </linearGradient>
-        <filter id="toggleDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
-        </filter>
-        <filter id="knobDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.2)" />
-        </filter>
-      </defs>
-      <rect x="3" y="11" width="34" height="18" rx="9" fill="url(#toggleGrad)" filter="url(#toggleDrop)" />
-      <rect x="3" y="11" width="34" height="9" rx="9" fill="white" opacity="0.12" />
-      <circle cx="28" cy="20" r="7" fill="white" filter="url(#knobDrop)" />
-      <circle cx="27" cy="18.5" r="2.5" fill="white" opacity="0.5" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><ButtonBlockCardIcon /></span>;
 }
 
-// ── Non-block context icons ──
+// ── Non-block context icons (compact wrappers of the section card icons) ──
 
 export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="csSettingsGrad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor="#0d9488" />
-          <stop offset="100%" stopColor="#0f766e" />
-        </linearGradient>
-      </defs>
-      <rect x="3" y="3" width="34" height="34" rx="6" fill="url(#csSettingsGrad)" opacity="0.12" />
-      <rect x="3" y="3" width="34" height="34" rx="6" stroke="url(#csSettingsGrad)" strokeWidth="1.5" fill="none" opacity="0.4" />
-      <rect x="7" y="7" width="26" height="16" rx="2" fill="url(#csSettingsGrad)" opacity="0.2" />
-      <rect x="7" y="25" width="26" height="8" rx="2" fill="url(#csSettingsGrad)" opacity="0.35" />
-      <line x1="9" y1="24" x2="31" y2="24" stroke="#0d9488" strokeWidth="1" opacity="0.4" strokeDasharray="2 2" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><CoverSectionCardIcon /></span>;
 }
 
+/** Plain V2 section (row-level) — uses the Empty Section card icon so the
+ *  settings panel matches the Add Section modal iconography. */
 export function RowIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="rowGrad" x1="4" y1="4" x2="36" y2="36">
-          <stop offset="0%" stopColor="#8888b0" />
-          <stop offset="100%" stopColor="#6868a0" />
-        </linearGradient>
-        <filter id="rowDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
-        </filter>
-      </defs>
-      <rect x="3" y="10" width="34" height="6" rx="2" fill="url(#rowGrad)" opacity="0.6" filter="url(#rowDrop)" />
-      <rect x="3" y="20" width="15" height="10" rx="2" fill="url(#rowGrad)" opacity="0.85" filter="url(#rowDrop)" />
-      <rect x="22" y="20" width="15" height="10" rx="2" fill="url(#rowGrad)" opacity="0.85" filter="url(#rowDrop)" />
-      <rect x="3" y="20" width="15" height="4" rx="2" fill="white" opacity="0.15" />
-      <rect x="22" y="20" width="15" height="4" rx="2" fill="white" opacity="0.15" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><EmptySectionV2CardIcon /></span>;
 }
 
 export function ColumnIcon({ size = 28 }: { size?: number }) {
@@ -234,47 +139,15 @@ export function PageIcon({ size = 28 }: { size?: number }) {
 // ── Lookup maps ──
 
 export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="pgGrad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor="#d4880a" />
-          <stop offset="100%" stopColor="#b06e08" />
-        </linearGradient>
-      </defs>
-      <rect x="3" y="3" width="34" height="14" rx="2" fill="url(#pgGrad)" opacity="0.9" />
-      <rect x="3" y="21" width="16" height="16" rx="2" fill="url(#pgGrad)" opacity="0.7" />
-      <rect x="22" y="21" width="15" height="16" rx="2" fill="url(#pgGrad)" opacity="0.5" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
 }
 
 export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="pxGrad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor="#9060d8" />
-          <stop offset="100%" stopColor="#7040b8" />
-        </linearGradient>
-      </defs>
-      <rect x="3" y="3" width="34" height="10" rx="2" fill="url(#pxGrad)" opacity="0.9" />
-      <rect x="3" y="16" width="34" height="10" rx="2" fill="url(#pxGrad)" opacity="0.6" />
-      <rect x="3" y="29" width="34" height="8" rx="2" fill="url(#pxGrad)" opacity="0.35" />
-      <path d="M18 6 L24 8 L18 10 Z" fill="white" opacity="0.5" />
-      <path d="M18 19 L24 21 L18 23 Z" fill="white" opacity="0.5" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
 }
 
 export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <rect x="3" y="6" width="34" height="28" rx="4" stroke="#8b5cf6" strokeWidth="2" fill="none" opacity="0.7" />
-      <path d="M16 17a3 3 0 0 0 4.5.32l1.8-1.8a3 3 0 0 0-4.24-4.24l-1.03 1.03" stroke="#8b5cf6" strokeWidth="1.8" strokeLinecap="round" fill="none" />
-      <path d="M24 23a3 3 0 0 0-4.5-.32l-1.8 1.8a3 3 0 0 0 4.24 4.24l1.03-1.03" stroke="#8b5cf6" strokeWidth="1.8" strokeLinecap="round" fill="none" />
-    </svg>
-  );
+  return <span style={scaleToHeight(size)}><SavedSectionCardIcon /></span>;
 }
 
 export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {