@morphika/andami 0.5.0 → 0.5.2

package/components/builder/BlockCardIcons.tsx

@@ -1,227 +1,316 @@
-"use client";
-
-/**
- * Full-size block card icons (220×120) used in the Add Block modal.
- *
- * Visual language: soft grid background with a 24-rect brick overlay that
- * fades to #F4F4F4 on the right (matches the card's clean gray). 3D white
- * shapes with cool-blue bevel + vector drop shadow. Dashed blue (#4794E2)
- * construction guides on top.
- *
- * IDs are namespaced per icon (`tBlk`, `iBlk`, `igBlk`, `vBlk`, `sBlk`,
- * `bBlk`) so multiple cards can render side by side without filter /
- * gradient collisions.
- */
-
-import { Bg, BgDefs, ShadowFilter, VertBevel } from "./iconPrimitives";
-
-// ─────────────────────────────────────────────────────────────────────
-// Text
-// ─────────────────────────────────────────────────────────────────────
-export function TextBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="tBlk" />
-        <ShadowFilter id="shadTBlk" />
-        <linearGradient id="bevelATBlk" x1="61.7" y1="19.7" x2="61.7" y2="99.7" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stopColor="#FFFFFF" />
-          <stop offset="1" stopColor="#E6ECF6" />
-        </linearGradient>
-        <linearGradient id="bevelaTBlk" x1="125.3" y1="44.9" x2="125.2" y2="84.4" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stopColor="#FFFFFF" />
-          <stop offset="1" stopColor="#E6ECF6" />
-        </linearGradient>
-      </defs>
-      <Bg prefix="tBlk" />
-
-      {/* Uppercase A — 3D body with shadow */}
-      <g filter="url(#shadTBlk)">
-        <path fillRule="evenodd" clipRule="evenodd" fill="url(#bevelATBlk)" stroke="#C9D3E4" strokeWidth="0.7"
-              d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
-      </g>
-      {/* A dashed accent */}
-      <path fillRule="evenodd" clipRule="evenodd" fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
-            d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
-
-      {/* Lowercase a — 3D body with shadow */}
-      <g filter="url(#shadTBlk)">
-        <path fill="url(#bevelaTBlk)" stroke="#C9D3E4" strokeWidth="0.7"
-              d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
-      </g>
-      {/* a dashed accent (matches A) */}
-      <path fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
-            d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
-
-      {/* Right-side vertical bracket */}
-      <g fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10">
-        <line x1="159.7" y1="18.5" x2="159.7" y2="101.4" />
-        <line x1="153.4" y1="18.5" x2="166.1" y2="18.5" />
-        <line x1="153.4" y1="101.4" x2="166.1" y2="101.4" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Image
-// ─────────────────────────────────────────────────────────────────────
-export function ImageBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="iBlk" />
-        <ShadowFilter id="shadIBlk" />
-        <VertBevel id="bevelIBlk" />
-      </defs>
-      <Bg prefix="iBlk" />
-
-      <g filter="url(#shadIBlk)">
-        <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(#bevelIBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-      </g>
-      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
-            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
-      <ellipse cx="116.3" cy="41.3" rx="5.1" ry="5.1" fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" />
-      <path d="M37.1,79.6l20.3-23c1.4-1.5,3.7-1.6,5.2-0.1l11.6,11.7c1.4,1.4,3.6,1.4,5,0L89.5,58c1.2-1.2,3.1-1.4,4.5-0.4l31,21.5c2.9,1.9,1.5,6.5-2,6.5H39.7C36.7,85.5,35.1,81.9,37.1,79.6z"
-            fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" />
-      <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="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Image Grid
-// ─────────────────────────────────────────────────────────────────────
-export function ImageGridBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="igBlk" />
-        <ShadowFilter id="shadIGBlk" />
-        <VertBevel id="bevelIGBlk" />
-      </defs>
-      <Bg prefix="igBlk" />
-
-      <g filter="url(#shadIGBlk)">
-        <rect x="24" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-        <rect x="90" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-        <rect x="24" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-        <rect x="90" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-      </g>
-      <rect x="30" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
-      <rect x="96" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
-      <rect x="30" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
-      <rect x="96" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
-      <g fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3">
-        <rect x="24" y="26" width="58" height="34" rx="2" />
-        <rect x="90" y="26" width="58" height="34" rx="2" />
-        <rect x="24" y="68" width="58" height="34" rx="2" />
-        <rect x="90" y="68" width="58" height="34" rx="2" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Video
-// ─────────────────────────────────────────────────────────────────────
-export function VideoBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="vBlk" />
-        <ShadowFilter id="shadVBlk" />
-        <VertBevel id="bevelVBlk" />
-      </defs>
-      <Bg prefix="vBlk" />
-
-      <g filter="url(#shadVBlk)">
-        <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(#bevelVBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-      </g>
-      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
-            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
-      <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="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
-      <path d="M75.2,45.9l21.3,11.4c2.4,1.2,2.4,4.6,0,5.9L75.2,74.5c-2.3,1.2-4.9-0.5-4.9-2.9V48.8C70.3,46.3,73,44.6,75.2,45.9z"
-            fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Spacer (edge case — horizontal gradient, no shadow)
-// ─────────────────────────────────────────────────────────────────────
-export function SpacerBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="sBlk" />
-        <linearGradient id="bevelSBlk" x1="15" y1="59" x2="144.7" y2="59" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0" />
-          <stop offset="0.26" stopColor="#F2F5FA" />
-          <stop offset="0.79" stopColor="#F2F5FA" />
-          <stop offset="1" stopColor="#E6ECF6" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <Bg prefix="sBlk" />
-
-      {/* Main frame — no shadow (edge case: horizontal gradient fill) */}
-      <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(#bevelSBlk)" />
-
-      {/* Blue up/down arrows */}
-      <g fill="#4794E2">
-        <path d="M82.7,27v18.8h2V27l2,1.9c0.3,0.3,0.9,0.3,1.2,0l0.2-0.2c0.3-0.3,0.3-0.9,0-1.2l-3.7-3.6c-0.4-0.4-1-0.4-1.4,0l-3.7,3.6c-0.3,0.3-0.3,0.9,0,1.2l0.2,0.2c0.3,0.3,0.9,0.3,1.2,0L82.7,27z" />
-        <path d="M86.7,89.7l-2,2v-18c0-0.5-0.4-0.8-0.8-0.8h-0.3c-0.5,0-0.8,0.4-0.8,0.8v18l-2-2c-0.3-0.3-0.9-0.3-1.2,0l-0.2,0.2c-0.3,0.3-0.3,0.9,0,1.2l3.7,3.7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.7-3.7c0.3-0.3,0.3-0.9,0-1.2l-0.2-0.2C87.5,89.3,87,89.3,86.7,89.7z" />
-      </g>
-
-      {/* Dashed blue boundary lines */}
-      <line x1="22.1" y1="20.9" x2="146.5" y2="20.9" fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
-      <line x1="22.1" y1="99.2" x2="146.5" y2="99.2" fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Button
-// ─────────────────────────────────────────────────────────────────────
-export function ButtonBlockCardIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <BgDefs prefix="bBlk" />
-        <ShadowFilter id="shadBBlk" />
-        <VertBevel id="bevelBBlk" />
-      </defs>
-      <Bg prefix="bBlk" />
-
-      <g filter="url(#shadBBlk)">
-        <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
-              fill="url(#bevelBBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
-      </g>
-      <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
-            fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
-
-      {/* Cursor icon */}
-      <g transform="translate(-240 -432)">
-        <path fillRule="evenodd" clipRule="evenodd" fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10"
-              d="M353.1,513.5l8.2,8.2c0.9,0.9,2.5,0.9,3.4,0c0.9-0.9,2.3-2.3,3.1-3.1c0.5-0.5,0.7-1.1,0.7-1.7c0-0.6-0.3-1.3-0.7-1.7l-8.2-8.2l5.6-3.8c0.8-0.5,1.2-1.4,1-2.3c-0.1-0.9-0.8-1.7-1.6-2l-24.8-8.2c-0.9-0.3-1.8-0.1-2.5,0.6c-0.6,0.6-0.9,1.6-0.6,2.5l8.2,24.8c0.3,0.9,1.1,1.5,2,1.6c0.9,0.1,1.8-0.3,2.3-1L353.1,513.5z" />
-      </g>
-    </svg>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────
-// Lookup map
-// ─────────────────────────────────────────────────────────────────────
-export const BLOCK_CARD_ICONS: Record<string, React.FC> = {
-  textBlock: TextBlockCardIcon,
-  imageBlock: ImageBlockCardIcon,
-  imageGridBlock: ImageGridBlockCardIcon,
-  videoBlock: VideoBlockCardIcon,
-  spacerBlock: SpacerBlockCardIcon,
-  buttonBlock: ButtonBlockCardIcon,
-};
+"use client";
+
+/**
+ * Full-size block card icons (220×120) used in the Add Block modal.
+ *
+ * Visual language: soft grid background with a 24-rect brick overlay that
+ * fades to #F4F4F4 on the right (matches the card's clean gray). 3D white
+ * shapes with cool-blue bevel + vector drop shadow. Dashed blue (#3580f9)
+ * construction guides on top.
+ *
+ * IDs are namespaced per icon (`tBlk`, `iBlk`, `igBlk`, `vBlk`, `sBlk`,
+ * `bBlk`) so multiple cards can render side by side without filter /
+ * gradient collisions.
+ */
+
+import { Bg, BgDefs, ShadowFilter, VertBevel } from "./iconPrimitives";
+
+// ─────────────────────────────────────────────────────────────────────
+// Text
+// ─────────────────────────────────────────────────────────────────────
+export function TextBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="tBlk" />
+        <ShadowFilter id="shadTBlk" />
+        <linearGradient id="bevelATBlk" x1="61.7" y1="19.7" x2="61.7" y2="99.7" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" />
+          <stop offset="1" stopColor="#E6ECF6" />
+        </linearGradient>
+        <linearGradient id="bevelaTBlk" x1="125.3" y1="44.9" x2="125.2" y2="84.4" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" />
+          <stop offset="1" stopColor="#E6ECF6" />
+        </linearGradient>
+      </defs>
+      <Bg prefix="tBlk" />
+
+      {/* Uppercase A — 3D body with shadow */}
+      <g filter="url(#shadTBlk)">
+        <path fillRule="evenodd" clipRule="evenodd" fill="url(#bevelATBlk)" stroke="#C9D3E4" strokeWidth="0.7"
+              d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
+      </g>
+      {/* A dashed accent */}
+      <path fillRule="evenodd" clipRule="evenodd" fill="none" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
+            d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
+
+      {/* Lowercase a — 3D body with shadow */}
+      <g filter="url(#shadTBlk)">
+        <path fill="url(#bevelaTBlk)" stroke="#C9D3E4" strokeWidth="0.7"
+              d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
+      </g>
+      {/* a dashed accent (matches A) */}
+      <path fill="none" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
+            d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
+
+      {/* Right-side vertical bracket */}
+      <g fill="none" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10">
+        <line x1="159.7" y1="18.5" x2="159.7" y2="101.4" />
+        <line x1="153.4" y1="18.5" x2="166.1" y2="18.5" />
+        <line x1="153.4" y1="101.4" x2="166.1" y2="101.4" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Image
+// ─────────────────────────────────────────────────────────────────────
+export function ImageBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="iBlk" />
+        <ShadowFilter id="shadIBlk" />
+        <VertBevel id="bevelIBlk" />
+      </defs>
+      <Bg prefix="iBlk" />
+
+      <g filter="url(#shadIBlk)">
+        <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(#bevelIBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+      <ellipse cx="116.3" cy="41.3" rx="5.1" ry="5.1" fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" />
+      <path d="M37.1,79.6l20.3-23c1.4-1.5,3.7-1.6,5.2-0.1l11.6,11.7c1.4,1.4,3.6,1.4,5,0L89.5,58c1.2-1.2,3.1-1.4,4.5-0.4l31,21.5c2.9,1.9,1.5,6.5-2,6.5H39.7C36.7,85.5,35.1,81.9,37.1,79.6z"
+            fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10" />
+      <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="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Image Grid
+// ─────────────────────────────────────────────────────────────────────
+export function ImageGridBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="igBlk" />
+        <ShadowFilter id="shadIGBlk" />
+        <VertBevel id="bevelIGBlk" />
+      </defs>
+      <Bg prefix="igBlk" />
+
+      <g filter="url(#shadIGBlk)">
+        <rect x="24" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="90" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="24" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="90" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <rect x="30" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="96" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="30" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="96" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <g fill="none" stroke="#3580f9" strokeWidth="2" strokeDasharray="3,3">
+        <rect x="24" y="26" width="58" height="34" rx="2" />
+        <rect x="90" y="26" width="58" height="34" rx="2" />
+        <rect x="24" y="68" width="58" height="34" rx="2" />
+        <rect x="90" y="68" width="58" height="34" rx="2" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Video
+// ─────────────────────────────────────────────────────────────────────
+export function VideoBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="vBlk" />
+        <ShadowFilter id="shadVBlk" />
+        <VertBevel id="bevelVBlk" />
+      </defs>
+      <Bg prefix="vBlk" />
+
+      <g filter="url(#shadVBlk)">
+        <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(#bevelVBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+      <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="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+      <path d="M75.2,45.9l21.3,11.4c2.4,1.2,2.4,4.6,0,5.9L75.2,74.5c-2.3,1.2-4.9-0.5-4.9-2.9V48.8C70.3,46.3,73,44.6,75.2,45.9z"
+            fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Spacer (edge case — horizontal gradient, no shadow)
+// ─────────────────────────────────────────────────────────────────────
+export function SpacerBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="sBlk" />
+        <linearGradient id="bevelSBlk" x1="15" y1="59" x2="144.7" y2="59" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0" />
+          <stop offset="0.26" stopColor="#F2F5FA" />
+          <stop offset="0.79" stopColor="#F2F5FA" />
+          <stop offset="1" stopColor="#E6ECF6" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <Bg prefix="sBlk" />
+
+      {/* Main frame — no shadow (edge case: horizontal gradient fill) */}
+      <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(#bevelSBlk)" />
+
+      {/* Blue up/down arrows */}
+      <g fill="#3580f9">
+        <path d="M82.7,27v18.8h2V27l2,1.9c0.3,0.3,0.9,0.3,1.2,0l0.2-0.2c0.3-0.3,0.3-0.9,0-1.2l-3.7-3.6c-0.4-0.4-1-0.4-1.4,0l-3.7,3.6c-0.3,0.3-0.3,0.9,0,1.2l0.2,0.2c0.3,0.3,0.9,0.3,1.2,0L82.7,27z" />
+        <path d="M86.7,89.7l-2,2v-18c0-0.5-0.4-0.8-0.8-0.8h-0.3c-0.5,0-0.8,0.4-0.8,0.8v18l-2-2c-0.3-0.3-0.9-0.3-1.2,0l-0.2,0.2c-0.3,0.3-0.3,0.9,0,1.2l3.7,3.7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.7-3.7c0.3-0.3,0.3-0.9,0-1.2l-0.2-0.2C87.5,89.3,87,89.3,86.7,89.7z" />
+      </g>
+
+      {/* Dashed blue boundary lines */}
+      <line x1="22.1" y1="20.9" x2="146.5" y2="20.9" fill="none" stroke="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+      <line x1="22.1" y1="99.2" x2="146.5" y2="99.2" fill="none" stroke="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Button
+// ─────────────────────────────────────────────────────────────────────
+export function ButtonBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="bBlk" />
+        <ShadowFilter id="shadBBlk" />
+        <VertBevel id="bevelBBlk" />
+      </defs>
+      <Bg prefix="bBlk" />
+
+      <g filter="url(#shadBBlk)">
+        <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
+              fill="url(#bevelBBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
+            fill="none" stroke="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+
+      {/* Cursor icon */}
+      <g transform="translate(-240 -432)">
+        <path fillRule="evenodd" clipRule="evenodd" fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10"
+              d="M353.1,513.5l8.2,8.2c0.9,0.9,2.5,0.9,3.4,0c0.9-0.9,2.3-2.3,3.1-3.1c0.5-0.5,0.7-1.1,0.7-1.7c0-0.6-0.3-1.3-0.7-1.7l-8.2-8.2l5.6-3.8c0.8-0.5,1.2-1.4,1-2.3c-0.1-0.9-0.8-1.7-1.6-2l-24.8-8.2c-0.9-0.3-1.8-0.1-2.5,0.6c-0.6,0.6-0.9,1.6-0.6,2.5l8.2,24.8c0.3,0.9,1.1,1.5,2,1.6c0.9,0.1,1.8-0.3,2.3-1L353.1,513.5z" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Before / After
+// ─────────────────────────────────────────────────────────────────────
+export function BeforeAfterBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="baBlk" />
+        <ShadowFilter id="shadBABlk" />
+        <VertBevel id="bevelBABlk" />
+      </defs>
+      <Bg prefix="baBlk" />
+
+      {/* 3D frame body with vertical bevel + shadow */}
+      <g filter="url(#shadBABlk)">
+        <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(#bevelBABlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+
+      {/* Inner image-block background (right side — "after") */}
+      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+
+      {/* Sun + mountain silhouette (composes the "after" image) */}
+      <ellipse cx="116.3" cy="41.3" rx="5.1" ry="5.1" fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" />
+      <path d="M37.1,79.6l20.3-23c1.4-1.5,3.7-1.6,5.2-0.1l11.6,11.7c1.4,1.4,3.6,1.4,5,0L89.5,58c1.2-1.2,3.1-1.4,4.5-0.4l31,21.5c2.9,1.9,1.5,6.5-2,6.5H39.7C36.7,85.5,35.1,81.9,37.1,79.6z"
+            fill="#FFFFFF" stroke="#3580f9" strokeWidth="2" strokeMiterlimit="10" />
+
+      {/* Dashed frame outline */}
+      <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="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+
+      {/* "Before" half — gray panel clipped by the diagonal slider */}
+      <path d="M101.6,25.3H31.5c-0.8,0-1.4,0.6-1.4,1.6v64.4c0,0.9,0.7,1.6,1.4,1.6h30.4L101.6,25.3z"
+            fill="#E0E0E0" stroke="#D8D8D8" strokeWidth="0.5" />
+
+      {/* Before-side mountain silhouette */}
+      <path d="M75.9,69.1c-0.6-0.2-1.2-0.5-1.7-0.9L62.6,56.5c-1.5-1.5-3.8-1.4-5.2,0.1l-20.3,23c-2,2.3-0.4,5.9,2.6,6h26.5L75.9,69.1z"
+            fill="#FFFFFF" stroke="#B2B2B2" strokeWidth="2" strokeMiterlimit="10" />
+
+      {/* Diagonal slider line */}
+      <line x1="111" y1="8.4" x2="51.6" y2="110.1" stroke="#3580f9" strokeWidth="3" strokeLinecap="round" strokeMiterlimit="10" fill="none" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Audio
+// ─────────────────────────────────────────────────────────────────────
+export function AudioBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="aBlk" />
+        <ShadowFilter id="shadABlk" />
+        <VertBevel id="bevelABlk" />
+      </defs>
+      <Bg prefix="aBlk" />
+
+      {/* Pill-shaped frame body with vertical bevel + shadow */}
+      <g filter="url(#shadABlk)">
+        <path d="M120.1,84.3H46.9c-14.2,0-25.6-11.5-25.6-25.6v0c0-14.2,11.5-25.6,25.6-25.6h73.2c14.2,0,25.6,11.5,25.6,25.6v0C145.7,72.8,134.2,84.3,120.1,84.3z"
+              fill="url(#bevelABlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+
+      {/* Inner pill panel */}
+      <path d="M120.3,79.3H46.6C35.2,79.3,26,70.1,26,58.7v0c0-11.4,9.2-20.6,20.6-20.6h73.6c11.4,0,20.6,9.2,20.6,20.6v0C140.8,70.1,131.6,79.3,120.3,79.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+
+      {/* Waveform bars — positions from block_audio.svg mockup (tall, short, short, tall, short) */}
+      <path d="M73.9,43.1c-1.1,0-1.9,0.9-1.9,1.9v27.2c0,1.1,0.9,1.9,1.9,1.9c1.1,0,1.9-0.9,1.9-1.9V45.1C75.8,44,74.9,43.1,73.9,43.1z" fill="#3580f9" />
+      <path d="M86.9,49.2c-1.1,0-1.9,0.9-1.9,1.9v15.2c0,1.1,0.9,1.9,1.9,1.9c1.1,0,1.9-0.9,1.9-1.9V51.1C88.9,50,88,49.2,86.9,49.2z" fill="#3580f9" />
+      <path d="M98.3,49.2c-1.1,0-1.9,0.9-1.9,1.9v15.2c0,1.1,0.9,1.9,1.9,1.9c1.1,0,1.9-0.9,1.9-1.9V51.1C100.2,50,99.3,49.2,98.3,49.2z" fill="#3580f9" />
+      <path d="M109.5,43.1c-1.1,0-1.9,0.9-1.9,1.9v27.2c0,1.1,0.9,1.9,1.9,1.9c1.1,0,1.9-0.9,1.9-1.9V45.1C111.4,44,110.5,43.1,109.5,43.1z" fill="#3580f9" />
+      <path d="M121.1,49.2c-1.1,0-1.9,0.9-1.9,1.9v15.2c0,1.1,0.9,1.9,1.9,1.9c1.1,0,1.9-0.9,1.9-1.9V51.1C123,50,122.2,49.2,121.1,49.2z" fill="#3580f9" />
+
+      {/* Play button — rounded triangle */}
+      <path d="M42.3,59.6v-7.7c0-1.7,1.9-2.8,3.4-2l6.7,3.8l6.7,3.8c1.5,0.9,1.5,3.1,0,3.9l-6.7,3.8l-6.7,3.8c-1.5,0.9-3.4-0.2-3.4-2V59.6z"
+            fill="#3580f9" />
+
+      {/* Dashed frame outline — matches the pill frame */}
+      <path d="M120.1,84.3H46.9c-14.2,0-25.6-11.5-25.6-25.6v0c0-14.2,11.5-25.6,25.6-25.6h73.2c14.2,0,25.6,11.5,25.6,25.6v0C145.7,72.8,134.2,84.3,120.1,84.3z"
+            fill="none" stroke="#3580f9" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Lookup map
+// ─────────────────────────────────────────────────────────────────────
+export const BLOCK_CARD_ICONS: Record<string, React.FC> = {
+  textBlock: TextBlockCardIcon,
+  imageBlock: ImageBlockCardIcon,
+  imageGridBlock: ImageGridBlockCardIcon,
+  videoBlock: VideoBlockCardIcon,
+  spacerBlock: SpacerBlockCardIcon,
+  buttonBlock: ButtonBlockCardIcon,
+  beforeAfterBlock: BeforeAfterBlockCardIcon,
+  audioBlock: AudioBlockCardIcon,
+};

package/components/builder/BlockTypePicker.tsx

@@ -19,6 +19,8 @@ const BLOCK_LABELS: Record<string, { label: string; description: string }> = {
   videoBlock:             { label: "Video", description: "Vimeo, YouTube or MP4 file" },
   spacerBlock:            { label: "Spacer", description: "Customizable vertical spacing" },
   buttonBlock:            { label: "Button", description: "Call-to-action button (CTA)" },
+  beforeAfterBlock:       { label: "Before / After", description: "Drag-slider comparison between two images or videos" },
+  audioBlock:             { label: "Audio", description: "Minimal audio player with cover art and metadata" },
   projectGridBlock:       { label: "Project Grid", description: "Staggered project showcase grid" },
 };
 
@@ -73,7 +75,7 @@ function BlockCard({
         aria-hidden="true"
         className="absolute inset-0 rounded-2xl pointer-events-none"
         style={{
-          boxShadow: isHovered ? "inset 0 0 0 2px #4794E2" : "inset 0 0 0 2px transparent",
+          boxShadow: isHovered ? "inset 0 0 0 2px #3580f9" : "inset 0 0 0 2px transparent",
           transition: "box-shadow 160ms ease",
         }}
       />