@morphika/andami 0.5.0 → 0.5.2

package/components/builder/SectionCardIcons.tsx

@@ -1,320 +1,421 @@
-"use client";
-
-/**
- * Full-size section card icons (220×120) used in the Add Section modal.
- *
- * Same visual language as `BlockCardIcons.tsx` but violet-tinted to
- * differentiate sections from blocks:
- *   - accent:        #7500D5 (block equivalent: #4794E2)
- *   - ghost fill:    #E8DFF2 (block equivalent: #DDE6F5)
- *   - neutral stroke:#D6C9E2 (block equivalent: #C9D3E4)
- *   - bevel end:     #EBEAEF (block equivalent: #E6ECF6)
- *
- * IDs are namespaced per icon (`seSec`, `scSec`, `spgSec`, `spSec`, `sccSec`,
- * `ssSec`) so multiple cards can render side by side without collisions.
- */
-
-import { Bg, BgDefs, ShadowFilter, VertBevel } from "./iconPrimitives";
-
-// Section-specific colour tokens
-const ACCENT = "#7500D5";
-const GHOST = "#E8DFF2";
-const NEUTRAL_STROKE = "#D6C9E2";
-const BEVEL_END = "#EBEAEF";
-
-// ─────────────────────────────────────────────────────────────────────
-// Empty Section — frame + 4 ghost columns
-// ─────────────────────────────────────────────────────────────────────
-export function EmptySectionV2CardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="seSec" />
-        <ShadowFilter id="shadSeSec" />
-        <VertBevel id="bevelSeSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="seSec" />
-
-      <g filter="url(#shadSeSec)">
-        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-              fill="url(#bevelSeSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <g fill={GHOST}>
-        <path d="M51.3,24.9H33.4c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C53.8,26.1,52.6,24.9,51.3,24.9z" />
-        <path d="M78.3,24.9H60.4c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C80.8,26.1,79.7,24.9,78.3,24.9z" />
-        <path d="M105.1,24.9H87.2c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C107.6,26.1,106.5,24.9,105.1,24.9z" />
-        <path d="M132.2,24.9h-17.9c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C134.7,26.1,133.6,24.9,132.2,24.9z" />
-      </g>
-      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Cover Section — frame + vertical + horizontal dimension arrows
-// ─────────────────────────────────────────────────────────────────────
-export function CoverSectionCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="scSec" />
-        <ShadowFilter id="shadScSec" />
-        <VertBevel id="bevelScSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="scSec" />
-
-      <g filter="url(#shadScSec)">
-        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-              fill="url(#bevelScSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3" />
-
-      {/* Vertical height arrow */}
-      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
-        <line x1="82.4" y1="30.1" x2="82.4" y2="88.8" />
-        <polygon points="82.4,23 78.4,33 82.4,30.6 86.5,33" />
-        <polygon points="82.4,95.9 78.4,85.9 82.4,88.3 86.5,85.9" />
-      </g>
-
-      {/* Horizontal width arrow */}
-      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
-        <line x1="127.9" y1="59.4" x2="34.5" y2="59.4" />
-        <polygon points="135.4,59.4 125.4,55.4 127.8,59.4 125.4,63.5" />
-        <polygon points="29.4,59.4 39.4,55.4 37,59.4 39.4,63.5" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Project Grid — 5 masonry tiles
-// ─────────────────────────────────────────────────────────────────────
-export function ProjectGridCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="spgSec" />
-        <ShadowFilter id="shadSpgSec" />
-        <VertBevel id="tileBevelSpgSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="spgSec" />
-
-      {/* 5 masonry tiles with shadow */}
-      <g filter="url(#shadSpgSec)">
-        <path d="M25.8,19h30.8c1,0,1.8,0.8,1.8,1.8v76.9c0,1-0.8,1.8-1.8,1.8H25.8c-1,0-1.8-0.8-1.8-1.8V20.8C24,19.8,24.8,19,25.8,19z"
-              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
-        <path d="M67.5,19h30.8c1,0,1.8,0.8,1.8,1.8v38.4c0,1-0.8,1.8-1.8,1.8H67.5c-1,0-1.8-0.8-1.8-1.8V20.8C65.6,19.8,66.5,19,67.5,19z"
-              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
-        <path d="M109.1,19h30.8c1,0,1.8,0.8,1.8,1.8v53.1c0,1-0.8,1.8-1.8,1.8h-30.8c-1,0-1.8-0.8-1.8-1.8V20.8C107.3,19.8,108.1,19,109.1,19z"
-              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
-        <path d="M66.8,67h30.8c1,0,1.8,0.8,1.8,1.8v29.3c0,1-0.8,1.8-1.8,1.8H66.8c-1,0-1.8-0.8-1.8-1.8V68.8C65,67.8,65.8,67,66.8,67z"
-              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
-        <path d="M139.6,99.7h-30.3c-1.2,0-2.1-0.9-2.1-2.1V81.4c0-1.2,0.9-2.1,2.1-2.1h30.3c1.2,0,2.1,0.9,2.1,2.1v16.2C141.6,98.8,140.7,99.7,139.6,99.7z"
-              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
-      </g>
-
-      {/* Inner ghost content */}
-      <g fill={GHOST}>
-        <path d="M28.7,22.6h25c0.6,0,1.1,0.5,1.1,1.1v54.5c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C27.7,23.1,28.1,22.6,28.7,22.6z" />
-        <path d="M70.4,22.6h25c0.6,0,1.1,0.5,1.1,1.1v23.4c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C69.3,23.1,69.7,22.6,70.4,22.6z" />
-        <path d="M112,22.6h25c0.6,0,1.1,0.5,1.1,1.1v38.1c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C110.9,23.1,111.3,22.6,112,22.6z" />
-        <path d="M69.7,70.7h25c0.6,0,1.1,0.5,1.1,1.1v17.9c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V71.8C68.6,71.2,69.2,70.7,69.7,70.7z" />
-        <path d="M137.5,96.2h-25.7c-0.7,0-1.4-0.6-1.4-1.4V84c0-0.7,0.6-1.4,1.4-1.4h25.7c0.7,0,1.4,0.6,1.4,1.4v10.8C138.7,95.6,138.2,96.2,137.5,96.2z" />
-        <path d="M28.6,83h18.1c0.5,0,0.9,0.4,0.9,0.9v0.9c0,0.5-0.4,0.9-0.9,0.9H28.6c-0.5,0-0.9-0.4-0.9-0.9v-0.9C27.7,83.4,28,83,28.6,83z" />
-        <path d="M28.6,88.5h10.9c0.5,0,0.9,0.4,0.9,0.9v0.9c0,0.5-0.4,0.9-0.9,0.9H28.6c-0.5,0-0.9-0.4-0.9-0.9v-0.9C27.7,88.9,28,88.5,28.6,88.5z" />
-      </g>
-
-      {/* Dashed violet outlines on all tiles */}
-      <g fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3">
-        <path d="M25.8,19h30.8c1,0,1.8,0.8,1.8,1.8v76.9c0,1-0.8,1.8-1.8,1.8H25.8c-1,0-1.8-0.8-1.8-1.8V20.8C24,19.8,24.8,19,25.8,19z" />
-        <path d="M67.5,19h30.8c1,0,1.8,0.8,1.8,1.8v38.4c0,1-0.8,1.8-1.8,1.8H67.5c-1,0-1.8-0.8-1.8-1.8V20.8C65.6,19.8,66.5,19,67.5,19z" />
-        <path d="M109.1,19h30.8c1,0,1.8,0.8,1.8,1.8v53.1c0,1-0.8,1.8-1.8,1.8h-30.8c-1,0-1.8-0.8-1.8-1.8V20.8C107.3,19.8,108.1,19,109.1,19z" />
-        <path d="M66.8,67h30.8c1,0,1.8,0.8,1.8,1.8v29.3c0,1-0.8,1.8-1.8,1.8H66.8c-1,0-1.8-0.8-1.8-1.8V68.8C65,67.8,65.8,67,66.8,67z" />
-        <path d="M139.6,99.7h-30.3c-1.2,0-2.1-0.9-2.1-2.1V81.4c0-1.2,0.9-2.1,2.1-2.1h30.3c1.2,0,2.1,0.9,2.1,2.1v16.2C141.6,98.8,140.7,99.7,139.6,99.7z" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Parallax Group — 3 stacked slides with image content
-// ─────────────────────────────────────────────────────────────────────
-export function ParallaxGroupCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="spSec" />
-        <ShadowFilter id="shadSpSec" />
-        <VertBevel id="slideBevelSpSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="spSec" />
-
-      {/* Slide 1 (back/smallest) */}
-      <g filter="url(#shadSpSec)">
-        <path d="M62.1,18.7H105c0.5,0,0.9,0.3,0.9,0.7v19.5c0,0.4-0.4,0.7-0.9,0.7H62.1c-0.5,0-0.9-0.3-0.9-0.7V19.4C61.2,19,61.6,18.7,62.1,18.7z"
-              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M66.8,22.6h33.5c0.2,0,0.5,0.1,0.5,0.3v12.4c0,0.2-0.2,0.3-0.5,0.3H66.8c-0.2,0-0.5-0.1-0.5-0.3V22.9C66.3,22.7,66.5,22.6,66.8,22.6z"
-            fill={GHOST} />
-      <ellipse cx="95.2" cy="26.5" rx="1.5" ry="1.5" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M69.1,32.7l3.9-4.2c0.3-0.3,0.7-0.3,1,0l2.2,2.1c0.3,0.3,0.7,0.3,1,0l2-1.9c0.2-0.2,0.6-0.3,0.9-0.1l6,3.9c0.6,0.3,0.3,1.2-0.4,1.2H69.6C69.1,33.8,68.7,33.1,69.1,32.7z"
-            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M62.6,18.7h41.8c0.5,0,0.9,0.3,0.9,0.7v19.5c0,0.4-0.4,0.7-0.9,0.7H62.6c-0.5,0-0.9-0.3-0.9-0.7V19.4C61.8,19,62.1,18.7,62.6,18.7z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
-
-      {/* Slide 2 (middle) */}
-      <g filter="url(#shadSpSec)">
-        <path d="M49.6,34h67.9c0.8,0,1.4,0.5,1.4,1.1v30.8c0,0.6-0.7,1.1-1.4,1.1H49.6c-0.8,0-1.4-0.5-1.4-1.1V35.1C48.2,34.5,48.8,34,49.6,34z"
-              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M55.7,39.4h55.7c0.4,0,0.8,0.2,0.8,0.5v21.7c0,0.3-0.3,0.5-0.8,0.5H55.7c-0.4,0-0.8-0.2-0.8-0.5V39.9C55,39.6,55.3,39.4,55.7,39.4z"
-            fill={GHOST} />
-      <ellipse cx="102.2" cy="44.3" rx="2.4" ry="2.4" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M60.3,56.6l8.7-9.8c0.6-0.6,1.6-0.7,2.2,0l5,5c0.6,0.6,1.5,0.6,2.1,0l4.4-4.4c0.5-0.5,1.3-0.6,1.9-0.2l13.3,9.2c1.2,0.8,0.6,2.8-0.9,2.8H61.4C60.1,59.1,59.4,57.5,60.3,56.6z"
-            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M50.4,34h66.3c0.8,0,1.4,0.5,1.4,1.1v30.8c0,0.6-0.6,1.1-1.4,1.1H50.4c-0.8,0-1.4-0.5-1.4-1.1V35.1C49.1,34.5,49.6,34,50.4,34z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
-
-      {/* Slide 3 (front/largest) */}
-      <g filter="url(#shadSpSec)">
-        <path d="M34,51.6h99c1.1,0,2,0.7,2,1.6v45c0,0.9-1,1.6-2,1.6H34c-1.1-0.1-2-0.8-2-1.6v-45C32,52.3,32.9,51.6,34,51.6z"
-              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M41.3,58.1h84.5c0.6,0,1.1,0.4,1.1,0.8v33.5c0,0.5-0.5,0.8-1.1,0.8H41.3c-0.6,0-1.1-0.4-1.1-0.8V58.9C40.2,58.4,40.7,58.1,41.3,58.1z"
-            fill={GHOST} />
-      <ellipse cx="110.8" cy="66.7" rx="3.5" ry="3.5" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M47.6,84.9l12.7-14.4c0.9-0.9,2.3-1,3.2-0.1l7.2,7.3c0.9,0.9,2.2,0.9,3.1,0l6.4-6.4c0.7-0.7,1.9-0.9,2.8-0.2l19.3,13.4c1.8,1.2,0.9,4.1-1.2,4.1h-52C47.4,88.6,46.4,86.3,47.6,84.9z"
-            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M35.2,51.6h96.6c1.1,0,2,0.7,2,1.6v45c0,0.9-0.9,1.6-2,1.6H35.2c-1.1-0.1-2-0.8-2-1.6v-45C33.2,52.3,34.1,51.6,35.2,51.6z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
-
-      {/* Scroll arrow on the right */}
-      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
-        <line x1="150.1" y1="17.6" x2="150.1" y2="88.3" />
-        <polygon points="150.1,96.8 145.3,84.8 150.1,87.7 155,84.8" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Create Custom Section — frame + circle + plus
-// ─────────────────────────────────────────────────────────────────────
-export function CreateCustomSectionCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="sccSec" />
-        <ShadowFilter id="shadSccSec" />
-        <VertBevel id="bevelSccSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="sccSec" />
-
-      <g filter="url(#shadSccSec)">
-        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-              fill="url(#bevelSccSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
-
-      <circle cx="82.8" cy="59.2" r="16.9" fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
-      <line x1="82.8" y1="50.2" x2="82.8" y2="67.7" fill="none" stroke={ACCENT} strokeWidth="3" strokeLinecap="round" strokeMiterlimit="10" />
-      <line x1="74" y1="58.9" x2="91.5" y2="58.9" fill="none" stroke={ACCENT} strokeWidth="3" strokeLinecap="round" strokeMiterlimit="10" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Saved Custom Section — frame + save/download icon
-// ─────────────────────────────────────────────────────────────────────
-export function SavedSectionCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="ssSec" />
-        <ShadowFilter id="shadSsSec" />
-        <VertBevel id="bevelSsSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="ssSec" />
-
-      <g filter="url(#shadSsSec)">
-        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-              fill="url(#bevelSsSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
-            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
-
-      {/* Save/download icon */}
-      <path fill={ACCENT}
-            d="M69.4,39.5c-0.7,0-1.2,0.5-1.2,1.2v34.2c0,0.7,0.5,1.2,1.2,1.2h28.5c0.7,0,1.2-0.5,1.2-1.2V49.7c0-0.3-0.1-0.6-0.4-0.8l-9.1-9.1h0c-0.2-0.2-0.5-0.3-0.8-0.3L69.4,39.5z M70.6,41.9h17.8l8.3,8.4v23.5H70.6V41.9z M83.7,47.6c-0.7,0-1.2,0.5-1.2,1.2v11.5l-2-2h0C80.3,58.1,80,58,79.6,58c-0.3,0-0.6,0.1-0.9,0.4c-0.5,0.5-0.5,1.2,0,1.7l4,4c0.2,0.2,0.4,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l4-4c0.5-0.5,0.5-1.2,0-1.7c-0.5-0.5-1.2-0.5-1.7,0l-2,2V48.8C84.9,48.2,84.3,47.6,83.7,47.6L83.7,47.6z M78.1,65.5c-0.7,0-1.2,0.5-1.2,1.2c0,0.7,0.5,1.2,1.2,1.2h11.2c0.7,0,1.2-0.5,1.2-1.2c0-0.7-0.5-1.2-1.2-1.2H78.1z" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Project Carousel — 3 horizontal cards with navigation arrows
-// ─────────────────────────────────────────────────────────────────────
-export function ProjectCarouselCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="pcarSec" />
-        <ShadowFilter id="shadPcarSec" />
-        <VertBevel id="cardBevelPcarSec" endColor={BEVEL_END} />
-      </defs>
-      <Bg prefix="pcarSec" />
-
-      {/* 3 cards with shadow — center one is taller (featured) */}
-      <g filter="url(#shadPcarSec)">
-        {/* Card 1 (left) */}
-        <path d="M25.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z"
-              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-        {/* Card 2 (center, featured) */}
-        <path d="M62,24.7h39.5c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z"
-              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-        {/* Card 3 (right) */}
-        <path d="M108.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z"
-              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
-      </g>
-
-      {/* Ghost content areas (image placeholders inside each card) */}
-      <g fill={GHOST}>
-        <path d="M28.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5H28.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C27.8,33.4,27.9,33.2,28.1,33.2z" />
-        <path d="M65.4,28.9h32.8c0.2,0,0.4,0.3,0.4,0.7V57c0,0.4-0.2,0.7-0.4,0.7H65.4c-0.2,0-0.4-0.3-0.4-0.7V29.5C65,29.1,65.1,28.9,65.4,28.9z" />
-        <path d="M111.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5h-24.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C110.8,33.4,111,33.2,111.1,33.2z" />
-      </g>
-
-      {/* Dashed violet outlines on all 3 cards */}
-      <g fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3">
-        <path d="M25.7,30.1H55c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3H25.7c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z" />
-        <path d="M62,24.7h39.9c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z" />
-        <path d="M108.7,30.1H138c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29.3c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z" />
-      </g>
-
-      {/* Navigation arrows at the bottom — hint at horizontal swipe */}
-      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
-        {/* Right arrow (pointing right) */}
-        <line x1="103" y1="88.8" x2="136" y2="88.8" />
-        <polygon points="139.9,88.8 134.4,91 135.7,88.8 134.4,86.5" />
-        {/* Left arrow (pointing left) */}
-        <line x1="63.6" y1="88.8" x2="30.6" y2="88.8" />
-        <polygon points="26.6,88.8 32.2,86.5 30.8,88.8 32.2,91" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Lookup map for the Add Section modal
-// ─────────────────────────────────────────────────────────────────────
-export const SECTION_CARD_ICONS: Record<string, React.FC> = {
-  "empty-v2": EmptySectionV2CardIcon,
-  coverSection: CoverSectionCardIcon,
-  projectGridBlock: ProjectGridCardIcon,
-  projectCarouselBlock: ProjectCarouselCardIcon,
-  parallaxGroup: ParallaxGroupCardIcon,
-  createCustom: CreateCustomSectionCardIcon,
-  savedCustom: SavedSectionCardIcon,
-};
+"use client";
+
+/**
+ * Full-size section card icons (220×120) used in the Add Section modal.
+ *
+ * Same visual language as `BlockCardIcons.tsx` but violet-tinted to
+ * differentiate sections from blocks:
+ *   - accent:        #7500D5 (block equivalent: #3580f9)
+ *   - ghost fill:    #E8DFF2 (block equivalent: #DDE6F5)
+ *   - neutral stroke:#D6C9E2 (block equivalent: #C9D3E4)
+ *   - bevel end:     #EBEAEF (block equivalent: #E6ECF6)
+ *
+ * IDs are namespaced per icon (`seSec`, `scSec`, `spgSec`, `spSec`, `sccSec`,
+ * `ssSec`) so multiple cards can render side by side without collisions.
+ */
+
+import { Bg, BgDefs, ShadowFilter, VertBevel } from "./iconPrimitives";
+
+// Section-specific colour tokens
+const ACCENT = "#7500D5";
+const GHOST = "#E8DFF2";
+const NEUTRAL_STROKE = "#D6C9E2";
+const BEVEL_END = "#EBEAEF";
+
+// ─────────────────────────────────────────────────────────────────────
+// Empty Section — frame + 4 ghost columns
+// ─────────────────────────────────────────────────────────────────────
+export function EmptySectionV2CardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="seSec" />
+        <ShadowFilter id="shadSeSec" />
+        <VertBevel id="bevelSeSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="seSec" />
+
+      <g filter="url(#shadSeSec)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelSeSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <g fill={GHOST}>
+        <path d="M51.3,24.9H33.4c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C53.8,26.1,52.6,24.9,51.3,24.9z" />
+        <path d="M78.3,24.9H60.4c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C80.8,26.1,79.7,24.9,78.3,24.9z" />
+        <path d="M105.1,24.9H87.2c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C107.6,26.1,106.5,24.9,105.1,24.9z" />
+        <path d="M132.2,24.9h-17.9c-1.4,0-2.5,1.1-2.5,2.5v63.3c0,1.4,1.1,2.5,2.5,2.5h17.9c1.4,0,2.5-1.1,2.5-2.5V27.4C134.7,26.1,133.6,24.9,132.2,24.9z" />
+      </g>
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Cover Section — frame + vertical + horizontal dimension arrows
+// ─────────────────────────────────────────────────────────────────────
+export function CoverSectionCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="scSec" />
+        <ShadowFilter id="shadScSec" />
+        <VertBevel id="bevelScSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="scSec" />
+
+      <g filter="url(#shadScSec)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelScSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3" />
+
+      {/* Vertical height arrow */}
+      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
+        <line x1="82.4" y1="30.1" x2="82.4" y2="88.8" />
+        <polygon points="82.4,23 78.4,33 82.4,30.6 86.5,33" />
+        <polygon points="82.4,95.9 78.4,85.9 82.4,88.3 86.5,85.9" />
+      </g>
+
+      {/* Horizontal width arrow */}
+      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
+        <line x1="127.9" y1="59.4" x2="34.5" y2="59.4" />
+        <polygon points="135.4,59.4 125.4,55.4 127.8,59.4 125.4,63.5" />
+        <polygon points="29.4,59.4 39.4,55.4 37,59.4 39.4,63.5" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Project Grid — 5 masonry tiles
+// ─────────────────────────────────────────────────────────────────────
+export function ProjectGridCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="spgSec" />
+        <ShadowFilter id="shadSpgSec" />
+        <VertBevel id="tileBevelSpgSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="spgSec" />
+
+      {/* 5 masonry tiles with shadow */}
+      <g filter="url(#shadSpgSec)">
+        <path d="M25.8,19h30.8c1,0,1.8,0.8,1.8,1.8v76.9c0,1-0.8,1.8-1.8,1.8H25.8c-1,0-1.8-0.8-1.8-1.8V20.8C24,19.8,24.8,19,25.8,19z"
+              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
+        <path d="M67.5,19h30.8c1,0,1.8,0.8,1.8,1.8v38.4c0,1-0.8,1.8-1.8,1.8H67.5c-1,0-1.8-0.8-1.8-1.8V20.8C65.6,19.8,66.5,19,67.5,19z"
+              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
+        <path d="M109.1,19h30.8c1,0,1.8,0.8,1.8,1.8v53.1c0,1-0.8,1.8-1.8,1.8h-30.8c-1,0-1.8-0.8-1.8-1.8V20.8C107.3,19.8,108.1,19,109.1,19z"
+              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
+        <path d="M66.8,67h30.8c1,0,1.8,0.8,1.8,1.8v29.3c0,1-0.8,1.8-1.8,1.8H66.8c-1,0-1.8-0.8-1.8-1.8V68.8C65,67.8,65.8,67,66.8,67z"
+              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
+        <path d="M139.6,99.7h-30.3c-1.2,0-2.1-0.9-2.1-2.1V81.4c0-1.2,0.9-2.1,2.1-2.1h30.3c1.2,0,2.1,0.9,2.1,2.1v16.2C141.6,98.8,140.7,99.7,139.6,99.7z"
+              fill="url(#tileBevelSpgSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.6" />
+      </g>
+
+      {/* Inner ghost content */}
+      <g fill={GHOST}>
+        <path d="M28.7,22.6h25c0.6,0,1.1,0.5,1.1,1.1v54.5c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C27.7,23.1,28.1,22.6,28.7,22.6z" />
+        <path d="M70.4,22.6h25c0.6,0,1.1,0.5,1.1,1.1v23.4c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C69.3,23.1,69.7,22.6,70.4,22.6z" />
+        <path d="M112,22.6h25c0.6,0,1.1,0.5,1.1,1.1v38.1c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V23.7C110.9,23.1,111.3,22.6,112,22.6z" />
+        <path d="M69.7,70.7h25c0.6,0,1.1,0.5,1.1,1.1v17.9c0,0.6-0.5,1.1-1.1,1.1h-25c-0.6,0-1.1-0.5-1.1-1.1V71.8C68.6,71.2,69.2,70.7,69.7,70.7z" />
+        <path d="M137.5,96.2h-25.7c-0.7,0-1.4-0.6-1.4-1.4V84c0-0.7,0.6-1.4,1.4-1.4h25.7c0.7,0,1.4,0.6,1.4,1.4v10.8C138.7,95.6,138.2,96.2,137.5,96.2z" />
+        <path d="M28.6,83h18.1c0.5,0,0.9,0.4,0.9,0.9v0.9c0,0.5-0.4,0.9-0.9,0.9H28.6c-0.5,0-0.9-0.4-0.9-0.9v-0.9C27.7,83.4,28,83,28.6,83z" />
+        <path d="M28.6,88.5h10.9c0.5,0,0.9,0.4,0.9,0.9v0.9c0,0.5-0.4,0.9-0.9,0.9H28.6c-0.5,0-0.9-0.4-0.9-0.9v-0.9C27.7,88.9,28,88.5,28.6,88.5z" />
+      </g>
+
+      {/* Dashed violet outlines on all tiles */}
+      <g fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3">
+        <path d="M25.8,19h30.8c1,0,1.8,0.8,1.8,1.8v76.9c0,1-0.8,1.8-1.8,1.8H25.8c-1,0-1.8-0.8-1.8-1.8V20.8C24,19.8,24.8,19,25.8,19z" />
+        <path d="M67.5,19h30.8c1,0,1.8,0.8,1.8,1.8v38.4c0,1-0.8,1.8-1.8,1.8H67.5c-1,0-1.8-0.8-1.8-1.8V20.8C65.6,19.8,66.5,19,67.5,19z" />
+        <path d="M109.1,19h30.8c1,0,1.8,0.8,1.8,1.8v53.1c0,1-0.8,1.8-1.8,1.8h-30.8c-1,0-1.8-0.8-1.8-1.8V20.8C107.3,19.8,108.1,19,109.1,19z" />
+        <path d="M66.8,67h30.8c1,0,1.8,0.8,1.8,1.8v29.3c0,1-0.8,1.8-1.8,1.8H66.8c-1,0-1.8-0.8-1.8-1.8V68.8C65,67.8,65.8,67,66.8,67z" />
+        <path d="M139.6,99.7h-30.3c-1.2,0-2.1-0.9-2.1-2.1V81.4c0-1.2,0.9-2.1,2.1-2.1h30.3c1.2,0,2.1,0.9,2.1,2.1v16.2C141.6,98.8,140.7,99.7,139.6,99.7z" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Parallax Group — 3 stacked slides with image content
+// ─────────────────────────────────────────────────────────────────────
+export function ParallaxGroupCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="spSec" />
+        <ShadowFilter id="shadSpSec" />
+        <VertBevel id="slideBevelSpSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="spSec" />
+
+      {/* Slide 1 (back/smallest) */}
+      <g filter="url(#shadSpSec)">
+        <path d="M62.1,18.7H105c0.5,0,0.9,0.3,0.9,0.7v19.5c0,0.4-0.4,0.7-0.9,0.7H62.1c-0.5,0-0.9-0.3-0.9-0.7V19.4C61.2,19,61.6,18.7,62.1,18.7z"
+              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M66.8,22.6h33.5c0.2,0,0.5,0.1,0.5,0.3v12.4c0,0.2-0.2,0.3-0.5,0.3H66.8c-0.2,0-0.5-0.1-0.5-0.3V22.9C66.3,22.7,66.5,22.6,66.8,22.6z"
+            fill={GHOST} />
+      <ellipse cx="95.2" cy="26.5" rx="1.5" ry="1.5" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M69.1,32.7l3.9-4.2c0.3-0.3,0.7-0.3,1,0l2.2,2.1c0.3,0.3,0.7,0.3,1,0l2-1.9c0.2-0.2,0.6-0.3,0.9-0.1l6,3.9c0.6,0.3,0.3,1.2-0.4,1.2H69.6C69.1,33.8,68.7,33.1,69.1,32.7z"
+            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M62.6,18.7h41.8c0.5,0,0.9,0.3,0.9,0.7v19.5c0,0.4-0.4,0.7-0.9,0.7H62.6c-0.5,0-0.9-0.3-0.9-0.7V19.4C61.8,19,62.1,18.7,62.6,18.7z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Slide 2 (middle) */}
+      <g filter="url(#shadSpSec)">
+        <path d="M49.6,34h67.9c0.8,0,1.4,0.5,1.4,1.1v30.8c0,0.6-0.7,1.1-1.4,1.1H49.6c-0.8,0-1.4-0.5-1.4-1.1V35.1C48.2,34.5,48.8,34,49.6,34z"
+              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M55.7,39.4h55.7c0.4,0,0.8,0.2,0.8,0.5v21.7c0,0.3-0.3,0.5-0.8,0.5H55.7c-0.4,0-0.8-0.2-0.8-0.5V39.9C55,39.6,55.3,39.4,55.7,39.4z"
+            fill={GHOST} />
+      <ellipse cx="102.2" cy="44.3" rx="2.4" ry="2.4" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M60.3,56.6l8.7-9.8c0.6-0.6,1.6-0.7,2.2,0l5,5c0.6,0.6,1.5,0.6,2.1,0l4.4-4.4c0.5-0.5,1.3-0.6,1.9-0.2l13.3,9.2c1.2,0.8,0.6,2.8-0.9,2.8H61.4C60.1,59.1,59.4,57.5,60.3,56.6z"
+            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M50.4,34h66.3c0.8,0,1.4,0.5,1.4,1.1v30.8c0,0.6-0.6,1.1-1.4,1.1H50.4c-0.8,0-1.4-0.5-1.4-1.1V35.1C49.1,34.5,49.6,34,50.4,34z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Slide 3 (front/largest) */}
+      <g filter="url(#shadSpSec)">
+        <path d="M34,51.6h99c1.1,0,2,0.7,2,1.6v45c0,0.9-1,1.6-2,1.6H34c-1.1-0.1-2-0.8-2-1.6v-45C32,52.3,32.9,51.6,34,51.6z"
+              fill="url(#slideBevelSpSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M41.3,58.1h84.5c0.6,0,1.1,0.4,1.1,0.8v33.5c0,0.5-0.5,0.8-1.1,0.8H41.3c-0.6,0-1.1-0.4-1.1-0.8V58.9C40.2,58.4,40.7,58.1,41.3,58.1z"
+            fill={GHOST} />
+      <ellipse cx="110.8" cy="66.7" rx="3.5" ry="3.5" fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M47.6,84.9l12.7-14.4c0.9-0.9,2.3-1,3.2-0.1l7.2,7.3c0.9,0.9,2.2,0.9,3.1,0l6.4-6.4c0.7-0.7,1.9-0.9,2.8-0.2l19.3,13.4c1.8,1.2,0.9,4.1-1.2,4.1h-52C47.4,88.6,46.4,86.3,47.6,84.9z"
+            fill="#FFFFFF" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M35.2,51.6h96.6c1.1,0,2,0.7,2,1.6v45c0,0.9-0.9,1.6-2,1.6H35.2c-1.1-0.1-2-0.8-2-1.6v-45C33.2,52.3,34.1,51.6,35.2,51.6z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Scroll arrow on the right */}
+      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
+        <line x1="150.1" y1="17.6" x2="150.1" y2="88.3" />
+        <polygon points="150.1,96.8 145.3,84.8 150.1,87.7 155,84.8" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Create Custom Section — frame + circle + plus
+// ─────────────────────────────────────────────────────────────────────
+export function CreateCustomSectionCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="sccSec" />
+        <ShadowFilter id="shadSccSec" />
+        <VertBevel id="bevelSccSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="sccSec" />
+
+      <g filter="url(#shadSccSec)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelSccSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      <circle cx="82.8" cy="59.2" r="16.9" fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" />
+      <line x1="82.8" y1="50.2" x2="82.8" y2="67.7" fill="none" stroke={ACCENT} strokeWidth="3" strokeLinecap="round" strokeMiterlimit="10" />
+      <line x1="74" y1="58.9" x2="91.5" y2="58.9" fill="none" stroke={ACCENT} strokeWidth="3" strokeLinecap="round" strokeMiterlimit="10" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Saved Custom Section — frame + save/download icon
+// ─────────────────────────────────────────────────────────────────────
+export function SavedSectionCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="ssSec" />
+        <ShadowFilter id="shadSsSec" />
+        <VertBevel id="bevelSsSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="ssSec" />
+
+      <g filter="url(#shadSsSec)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelSsSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Save/download icon */}
+      <path fill={ACCENT}
+            d="M69.4,39.5c-0.7,0-1.2,0.5-1.2,1.2v34.2c0,0.7,0.5,1.2,1.2,1.2h28.5c0.7,0,1.2-0.5,1.2-1.2V49.7c0-0.3-0.1-0.6-0.4-0.8l-9.1-9.1h0c-0.2-0.2-0.5-0.3-0.8-0.3L69.4,39.5z M70.6,41.9h17.8l8.3,8.4v23.5H70.6V41.9z M83.7,47.6c-0.7,0-1.2,0.5-1.2,1.2v11.5l-2-2h0C80.3,58.1,80,58,79.6,58c-0.3,0-0.6,0.1-0.9,0.4c-0.5,0.5-0.5,1.2,0,1.7l4,4c0.2,0.2,0.4,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l4-4c0.5-0.5,0.5-1.2,0-1.7c-0.5-0.5-1.2-0.5-1.7,0l-2,2V48.8C84.9,48.2,84.3,47.6,83.7,47.6L83.7,47.6z M78.1,65.5c-0.7,0-1.2,0.5-1.2,1.2c0,0.7,0.5,1.2,1.2,1.2h11.2c0.7,0,1.2-0.5,1.2-1.2c0-0.7-0.5-1.2-1.2-1.2H78.1z" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Project Carousel — 3 horizontal cards with navigation arrows
+// ─────────────────────────────────────────────────────────────────────
+export function ProjectCarouselCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="pcarSec" />
+        <ShadowFilter id="shadPcarSec" />
+        <VertBevel id="cardBevelPcarSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="pcarSec" />
+
+      {/* 3 cards with shadow — center one is taller (featured) */}
+      <g filter="url(#shadPcarSec)">
+        {/* Card 1 (left) */}
+        <path d="M25.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+        {/* Card 2 (center, featured) */}
+        <path d="M62,24.7h39.5c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+        {/* Card 3 (right) */}
+        <path d="M108.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+
+      {/* Ghost content areas (image placeholders inside each card) */}
+      <g fill={GHOST}>
+        <path d="M28.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5H28.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C27.8,33.4,27.9,33.2,28.1,33.2z" />
+        <path d="M65.4,28.9h32.8c0.2,0,0.4,0.3,0.4,0.7V57c0,0.4-0.2,0.7-0.4,0.7H65.4c-0.2,0-0.4-0.3-0.4-0.7V29.5C65,29.1,65.1,28.9,65.4,28.9z" />
+        <path d="M111.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5h-24.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C110.8,33.4,111,33.2,111.1,33.2z" />
+      </g>
+
+      {/* Dashed violet outlines on all 3 cards */}
+      <g fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3">
+        <path d="M25.7,30.1H55c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3H25.7c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z" />
+        <path d="M62,24.7h39.9c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z" />
+        <path d="M108.7,30.1H138c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29.3c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z" />
+      </g>
+
+      {/* Navigation arrows at the bottom — hint at horizontal swipe */}
+      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
+        {/* Right arrow (pointing right) */}
+        <line x1="103" y1="88.8" x2="136" y2="88.8" />
+        <polygon points="139.9,88.8 134.4,91 135.7,88.8 134.4,86.5" />
+        {/* Left arrow (pointing left) */}
+        <line x1="63.6" y1="88.8" x2="30.6" y2="88.8" />
+        <polygon points="26.6,88.8 32.2,86.5 30.8,88.8 32.2,91" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Marquee — featured "Aa" card centered, two partial cards fading off
+// the left/right edges to suggest horizontal scroll, plus bidirectional
+// arrows. Preserves the coordinates from the user-provided mockup
+// (`docs/mockups/icons-v2/section-marquee.svg`) and adds the shadow the
+// mockup was missing via the shared `ShadowFilter`.
+// ─────────────────────────────────────────────────────────────────────
+export function MarqueeCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="mqSec" />
+        <ShadowFilter id="shadMqSec" />
+        <VertBevel id="bevelMqSec" endColor={BEVEL_END} />
+
+        {/* Left partial card — transparent at the off-screen edge,
+            opaque where it meets the featured card. */}
+        <linearGradient id="mqSecLFill" x1="-40.3" x2="34" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0" />
+          <stop offset="1" stopColor={BEVEL_END} />
+        </linearGradient>
+        <linearGradient id="mqSecLStroke" x1="-42.1" x2="35.9" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.514" stopColor={NEUTRAL_STROKE} stopOpacity="0" />
+          <stop offset="1" stopColor={NEUTRAL_STROKE} />
+        </linearGradient>
+        <linearGradient id="mqSecLGhost" x1="-35.8" x2="29.7" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.7172" stopColor={GHOST} stopOpacity="0" />
+          <stop offset="1" stopColor={GHOST} />
+        </linearGradient>
+        <linearGradient id="mqSecLDash" x1="-42.66" x2="37.14" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.7328" stopColor={ACCENT} stopOpacity="0" />
+          <stop offset="1" stopColor={ACCENT} />
+        </linearGradient>
+
+        {/* Right partial card — mirrored: opaque where it meets the
+            featured card, transparent at the off-screen edge. */}
+        <linearGradient id="mqSecRFill" x1="208.6" x2="134.3" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0" />
+          <stop offset="1" stopColor={BEVEL_END} />
+        </linearGradient>
+        <linearGradient id="mqSecRStroke" x1="210.4" x2="132.4" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.514" stopColor={NEUTRAL_STROKE} stopOpacity="0" />
+          <stop offset="1" stopColor={NEUTRAL_STROKE} />
+        </linearGradient>
+        <linearGradient id="mqSecRGhost" x1="204.1" x2="138.6" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.7172" stopColor={GHOST} stopOpacity="0" />
+          <stop offset="1" stopColor={GHOST} />
+        </linearGradient>
+        <linearGradient id="mqSecRDash" x1="211" x2="131.2" y1="0" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0.7328" stopColor={ACCENT} stopOpacity="0" />
+          <stop offset="1" stopColor={ACCENT} />
+        </linearGradient>
+      </defs>
+      <Bg prefix="mqSec" />
+
+      {/* Left partial card */}
+      <path d="M-40.3,27.4h74.3c0.8,0,1.5,0.7,1.5,1.6v45c0,0.9-0.8,1.6-1.5,1.6h-74.3c-0.8-0.1-1.5-0.8-1.5-1.6V29C-41.8,28.1-41.1,27.4-40.3,27.4z"
+            fill="url(#mqSecLFill)" stroke="url(#mqSecLStroke)" strokeWidth="0.7" />
+      <path d="M-35,33.9h63.8c0.5,0,0.8,0.4,0.8,0.8v33.5c0,0.5-0.4,0.8-0.8,0.8H-35c-0.5,0-0.8-0.4-0.8-0.8V34.7C-35.8,34.2-35.4,33.9-35,33.9z"
+            fill="url(#mqSecLGhost)" />
+      <path d="M-40.1,27.4h74.7c0.9,0,1.5,0.7,1.5,1.6v45c0,0.9-0.7,1.6-1.5,1.6h-74.7c-0.9-0.1-1.5-0.8-1.5-1.6V29C-41.7,28.1-41,27.4-40.1,27.4z"
+            fill="none" stroke="url(#mqSecLDash)" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Right partial card */}
+      <path d="M206.7,75.6h-74.3c-0.8,0-1.5-0.7-1.5-1.6V29c0-0.9,0.8-1.6,1.5-1.6h74.3c0.8,0.1,1.5,0.8,1.5,1.6v45C208.2,74.9,207.5,75.6,206.7,75.6z"
+            fill="url(#mqSecRFill)" stroke="url(#mqSecRStroke)" strokeWidth="0.7" />
+      <path d="M201.4,69.1h-63.8c-0.5,0-0.8-0.4-0.8-0.8V34.8c0-0.5,0.4-0.8,0.8-0.8h63.8c0.5,0,0.8,0.4,0.8,0.8v33.5C202.2,68.8,201.9,69.1,201.4,69.1z"
+            fill="url(#mqSecRGhost)" />
+      <path d="M206.6,75.6h-74.7c-0.9,0-1.5-0.7-1.5-1.6V29c0-0.9,0.7-1.6,1.5-1.6h74.7c0.9,0.1,1.5,0.8,1.5,1.6v45C208.1,74.9,207.4,75.6,206.6,75.6z"
+            fill="none" stroke="url(#mqSecRDash)" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Featured center card (shadowed) */}
+      <g filter="url(#shadMqSec)">
+        <path d="M46.3,26.5h74.3c0.8,0,1.5,0.7,1.5,1.6v45c0,0.9-0.8,1.6-1.5,1.6H46.3c-0.8-0.1-1.5-0.8-1.5-1.6v-45C44.8,27.2,45.5,26.5,46.3,26.5z"
+              fill="url(#bevelMqSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+      <path d="M51.6,33h63.8c0.5,0,0.8,0.4,0.8,0.8v33.5c0,0.5-0.4,0.8-0.8,0.8H51.6c-0.5,0-0.8-0.4-0.8-0.8V33.8C50.8,33.3,51.2,33,51.6,33z"
+            fill={GHOST} />
+
+      {/* "Aa" glyphs */}
+      <path fillRule="evenodd" clipRule="evenodd" fill={ACCENT}
+            d="M84,62.5h-6.1l-1-4.4h-6.2l-1,4.4h-6l6.9-26h6.6L84,62.5z M75.7,53.5c-0.9-3.9-1.6-7.6-2-11h-0.1c-0.5,3.6-1.1,7.3-2,11H75.7z" />
+      <path fill={ACCENT}
+            d="M97.8,62.5l-0.2-2h-0.1c-0.9,1.2-2.6,2.4-4.8,2.4c-3.2,0-4.8-2.3-4.8-4.5c0-3.8,3.4-5.9,9.5-5.9v-0.3c0-1.3-0.4-3.7-3.6-3.7c-1.5,0-3,0.4-4.1,1.2L89,47.8c1.3-0.9,3.2-1.4,5.2-1.4c4.8,0,6,3.3,6,6.5v5.9c0,1.4,0.1,2.7,0.3,3.8L97.8,62.5L97.8,62.5z M97.4,54.5c-3.1-0.1-6.7,0.5-6.7,3.6c0,1.9,1.2,2.8,2.7,2.8c2,0,3.4-1.3,3.8-2.7c0.1-0.3,0.2-0.6,0.2-0.9V54.5z" />
+
+      {/* Featured card dashed violet border */}
+      <path d="M46.5,26.5h74.7c0.9,0,1.5,0.7,1.5,1.6v45c0,0.9-0.7,1.6-1.5,1.6H46.5c-0.9-0.1-1.5-0.8-1.5-1.6v-45C44.9,27.2,45.6,26.5,46.5,26.5z"
+            fill="none" stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" />
+
+      {/* Bidirectional horizontal-scroll arrows */}
+      <g fill={ACCENT} stroke={ACCENT} strokeWidth="2" strokeMiterlimit="10">
+        <line x1="93.2" y1="87.4" x2="139.9" y2="87.4" />
+        <polygon points="145.5,87.4 137.6,90.6 139.5,87.4 137.6,84.2" />
+        <line x1="77.1" y1="87.5" x2="30.5" y2="87.5" />
+        <polygon points="24.9,87.5 32.8,84.4 30.9,87.5 32.8,90.8" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Lookup map for the Add Section modal
+// ─────────────────────────────────────────────────────────────────────
+export const SECTION_CARD_ICONS: Record<string, React.FC> = {
+  "empty-v2": EmptySectionV2CardIcon,
+  coverSection: CoverSectionCardIcon,
+  projectGridBlock: ProjectGridCardIcon,
+  projectCarouselBlock: ProjectCarouselCardIcon,
+  marqueeBlock: MarqueeCardIcon,
+  parallaxGroup: ParallaxGroupCardIcon,
+  createCustom: CreateCustomSectionCardIcon,
+  savedCustom: SavedSectionCardIcon,
+};