@morphika/andami 0.2.26 → 0.3.1

package/components/builder/ParallaxGroupCanvas.tsx

@@ -3,8 +3,6 @@
 import { useBuilderStore } from "../../lib/builder/store";
 import type { ParallaxGroup, ParallaxSlideV2, PageSectionV2 } from "../../lib/sanity/types";
 import SectionV2Canvas from "./SectionV2Canvas";
-import ParallaxSlideHeader from "./ParallaxSlideHeader";
-import { BUILDER_GREEN, BUILDER_VIOLET } from "../../lib/builder/constants";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { useAssetUrl } from "../../lib/contexts/AssetContext";
 
@@ -12,12 +10,13 @@ import { useAssetUrl } from "../../lib/contexts/AssetContext";
  * ParallaxGroupCanvas — renders a ParallaxGroup in the builder canvas.
  *
  * Each slide is displayed as a stacked section with:
- *   - ParallaxSlideHeader (index, bg indicator, reorder, delete)
  *   - SectionV2Canvas (full V2 grid editor reuse)
  *   - Faint background preview when a bg image is set
  *   - Empty state message when slide has no background and no content blocks
  *
- * An "Add Slide" button appears at the bottom.
+ * Slide-level chrome (select, reorder, delete) + "+ Slide" live in the side
+ * pill rendered by SortableRow. The old per-slide header component and the
+ * bottom "Add Slide" button were removed to reduce canvas clutter.
  *
  * Session 123: Parallax V2 Phase 2
  * Session 127: Phase 5 — empty state, slide counter badge, smooth reorder
@@ -41,9 +40,7 @@ export default function ParallaxGroupCanvas({
   group,
   onAddBlockTarget,
 }: ParallaxGroupCanvasProps) {
-  const store = useBuilderStore();
-  const selectedRowKey = store.selectedRowKey;
-  const activeViewport = store.activeViewport || "desktop";
+  const activeViewport = useBuilderStore((s) => s.activeViewport) || "desktop";
   const slidePreviewHeight = DEVICE_HEIGHTS[activeViewport];
   const assetUrl = useAssetUrl();
 
@@ -56,40 +53,8 @@ export default function ParallaxGroupCanvas({
         overflow: "visible",
       }}
     >
-      {/* Group header */}
-      <div
-        className="flex items-center gap-2 px-3 py-2 cursor-pointer"
-        style={{
-          background: selectedRowKey === group._key
-            ? "linear-gradient(135deg, #e8deff 0%, #ddd0ff 100%)"
-            : "linear-gradient(135deg, #f3f0ff 0%, #ede5ff 100%)",
-          borderBottom: "1px solid rgba(139, 92, 246, 0.15)",
-          borderRadius: "12px 12px 0 0",
-        }}
-        onClick={(e) => {
-          e.stopPropagation();
-          store.selectRow(group._key);
-        }}
-      >
-        <span className="text-[11px] font-semibold text-[#8b5cf6]">
-          ▽ Parallax Showcase
-        </span>
-        {/* Slide counter badge */}
-        <span
-          className="inline-flex items-center justify-center rounded-full text-[9px] font-bold text-white min-w-[18px] h-[18px] px-1"
-          style={{ background: BUILDER_VIOLET }}
-        >
-          {group.slides.length}
-        </span>
-        <div className="flex-1" />
-        <span className="text-[9px] text-neutral-400 uppercase tracking-wider">
-          {group.transition_effect}
-        </span>
-      </div>
-
-      {/* Slides — CSS transition for smooth reorder */}
+      {/* Slides — group header removed; slide management lives in the section pill (SortableRow). */}
       {group.slides.map((slide, slideIndex) => {
-        const isSlideSelected = selectedRowKey === slide._key;
         const bgImagePath = slide.background_type === "image" && slide.background_image
           ? assetUrl(slide.background_image)
           : null;
@@ -118,15 +83,8 @@ export default function ParallaxGroupCanvas({
               transition: "opacity 0.2s ease",
             }}
           >
-            {/* Slide header */}
-            <ParallaxSlideHeader
-              slide={slide}
-              slideIndex={slideIndex}
-              totalSlides={group.slides.length}
-              groupKey={group._key}
-              isSelected={isSlideSelected}
-              onSelect={() => store.selectRow(slide._key)}
-            />
+            {/* Slide header removed — slide selection / delete / reorder
+                moved to the side pill (SortableRow). */}
 
             {/* Slide content with optional background preview — 100vh equivalent */}
             <div className="relative" style={{ minHeight: slidePreviewHeight }}>
@@ -166,10 +124,11 @@ export default function ParallaxGroupCanvas({
                 />
               )}
 
-              {/* Empty state message */}
+              {/* Empty state message — anchored to the top so it doesn't
+                  collide with the centered "+ Add Block" pill on hover. */}
               {slideEmpty && (
                 <div
-                  className="absolute inset-0 flex items-center justify-center pointer-events-none"
+                  className="absolute inset-0 flex items-start justify-center pt-3 pointer-events-none"
                   style={{ zIndex: 5 }}
                 >
                   <div className="text-center px-6 py-4 rounded-lg" style={{ background: "rgba(139, 92, 246, 0.06)" }}>
@@ -203,26 +162,8 @@ export default function ParallaxGroupCanvas({
         );
       })}
 
-      {/* Add Slide button */}
-      <div
-        className="flex justify-center py-3"
-        style={{
-          background: "linear-gradient(135deg, #f9f7ff 0%, #f3f0ff 100%)",
-          borderTop: "1px solid rgba(139, 92, 246, 0.1)",
-          borderRadius: "0 0 12px 12px",
-        }}
-      >
-        <button
-          className="flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-[11px] font-medium text-white transition-colors hover:opacity-90"
-          style={{ background: BUILDER_GREEN }}
-          onClick={(e) => {
-            e.stopPropagation();
-            store.addParallaxSlide(group._key);
-          }}
-        >
-          <span className="text-sm leading-none">+</span> Add Slide
-        </button>
-      </div>
+      {/* Add Slide button removed — adding slides is now done from the
+          section pill (SortableRow). */}
     </div>
   );
 }

package/components/builder/SectionCardIcons.tsx

@@ -0,0 +1,266 @@
+"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>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Lookup map for the Add Section modal
+// ─────────────────────────────────────────────────────────────────────
+export const SECTION_CARD_ICONS: Record<string, React.FC> = {
+  "empty-v2": EmptySectionV2CardIcon,
+  coverSection: CoverSectionCardIcon,
+  projectGridBlock: ProjectGridCardIcon,
+  parallaxGroup: ParallaxGroupCardIcon,
+  createCustom: CreateCustomSectionCardIcon,
+  savedCustom: SavedSectionCardIcon,
+};

package/components/builder/SectionEditorBar.tsx

@@ -119,13 +119,12 @@ export default function SectionEditorBar({ onSaveComplete }: SectionEditorBarPro
   return (
     <>
       <div
-        className="flex items-center justify-between px-4 py-2 border-b border-[#2a2a2a]"
+        className="grid grid-cols-[1fr_auto_1fr] items-center px-4 py-2 border-b border-[#2a2a2a]"
         style={{ backgroundColor: "#1a1a1a" }}
       >
-        {/* Left: breadcrumbs + section name input */}
-        <div className="flex items-center gap-3">
-          {/* Breadcrumbs */}
-          <div className="flex items-center gap-1.5 text-xs mr-1">
+        {/* LEFT — breadcrumbs */}
+        <div className="flex items-center gap-3 justify-self-start">
+          <div className="flex items-center gap-1.5 text-xs">
             <a
               href={parentListUrl}
               className="text-[#666] hover:text-[#aaa] transition-colors cursor-pointer"
@@ -145,24 +144,30 @@ export default function SectionEditorBar({ onSaveComplete }: SectionEditorBarPro
               {isEditing ? "Edit Section" : "New Section"}
             </span>
           </div>
-
           <div className="w-px h-4 bg-[#3a3a3a]" />
+        </div>
 
+        {/* CENTER — section name input (identity of the thing being edited) */}
+        <div className="flex items-center justify-self-center">
           <input
             ref={inputRef}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="Section name..."
-            className="bg-[#2a2a2a] text-white text-sm px-3 py-1.5 rounded border border-[#3a3a3a] focus:border-[#076bff] focus:outline-none w-64 transition-colors"
+            className="bg-[#2a2a2a] text-white text-sm px-3 py-1.5 rounded border border-[#3a3a3a] focus:border-[#076bff] focus:outline-none w-64 transition-colors text-center"
           />
         </div>
 
-        {/* Right: actions */}
-        <div className="flex items-center gap-2">
-          {saveError && (
-            <span className="text-xs text-red-400 mr-2">{saveError}</span>
-          )}
+        {/* RIGHT — notification slot + actions */}
+        <div className="flex items-center gap-2 justify-self-end">
+          {/* Notification slot: save error takes precedence over unsaved-changes */}
+          {saveError ? (
+            <span className="text-xs text-red-400 mr-1">{saveError}</span>
+          ) : isDirty ? (
+            <span className="text-xs text-amber-400 animate-pulse mr-1">Unsaved changes</span>
+          ) : null}
+
           {/* Delete button — only for existing sections */}
           {isEditing && (
             <button