@morphika/andami 0.5.1 → 0.5.2

package/components/builder/VirtualAssetGrid.tsx

@@ -315,7 +315,7 @@ function AssetGridItem({
       onContextMenu={onContextMenu ? (e) => onContextMenu(e, asset) : undefined}
       className={`relative flex flex-col rounded-lg overflow-hidden transition-all ${
         isSelected
-          ? "ring-2 ring-[#076bff] ring-offset-2 shadow-lg"
+          ? "ring-2 ring-[#3580f9] ring-offset-2 shadow-lg"
           : "hover:shadow-md"
       }`}
     >
@@ -323,7 +323,7 @@ function AssetGridItem({
       {multiSelect && (
         <div
           className={`absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded flex items-center justify-center text-white text-[10px] font-bold transition-colors ${
-            isSelected ? "bg-[#076bff]" : "bg-black/30 border border-white/50"
+            isSelected ? "bg-[#3580f9]" : "bg-black/30 border border-white/50"
           }`}
         >
           {isSelected && (

package/components/builder/asset-browser/R2BrowserContent.tsx

@@ -232,16 +232,16 @@ export function R2BrowserContent({
 
       {/* Drag & drop overlay */}
       {dnd.dragOver && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#076bff]/10 border-2 border-dashed border-[#076bff] rounded-lg backdrop-blur-[2px]">
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#3580f9]/10 border-2 border-dashed border-[#3580f9] rounded-lg backdrop-blur-[2px]">
           <div className="flex flex-col items-center gap-3">
-            <div className="w-16 h-16 rounded-full bg-[#076bff]/10 flex items-center justify-center">
+            <div className="w-16 h-16 rounded-full bg-[#3580f9]/10 flex items-center justify-center">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={ADMIN_ACCENT} strokeWidth="1.5">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="17 8 12 3 7 8" />
                 <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
             </div>
-            <p className="text-sm font-medium text-[#076bff]">
+            <p className="text-sm font-medium text-[#3580f9]">
               Drop files or folders here{currentFolder ? ` to ${currentFolder}` : ""}
             </p>
             <p className="text-xs text-neutral-500">Supported formats: JPG, PNG, WebP, GIF, SVG, MP4, WebM, MOV, MP3, WAV, OGG, M4A, AAC, FLAC</p>
@@ -301,7 +301,7 @@ export function R2BrowserContent({
             <button
               onClick={() => ops.fileInputRef.current?.click()}
               disabled={uploading.some((u) => u.status === "uploading" || u.status === "registering")}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-[#076bff] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#076bff]/90 transition-colors disabled:opacity-50"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[#3580f9] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#3580f9]/90 transition-colors disabled:opacity-50"
               title={`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}
               type="button"
             >
@@ -327,7 +327,7 @@ export function R2BrowserContent({
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                   </button>
                 ) : (
-                  <div className="w-3.5 h-3.5 border-2 border-[#076bff] border-t-transparent rounded-full animate-spin" />
+                  <div className="w-3.5 h-3.5 border-2 border-[#3580f9] border-t-transparent rounded-full animate-spin" />
                 )}
                 <span className="text-[11px] text-neutral-600 truncate flex-1 min-w-0">
                   {u.file.name}
@@ -336,7 +336,7 @@ export function R2BrowserContent({
                 </span>
                 {(u.status === "uploading" || u.status === "registering") && (
                   <div className="w-24 h-1.5 bg-neutral-200 rounded-full overflow-hidden">
-                    <div className="h-full bg-[#076bff] rounded-full transition-all duration-300" style={{ width: `${u.progress}%` }} />
+                    <div className="h-full bg-[#3580f9] rounded-full transition-all duration-300" style={{ width: `${u.progress}%` }} />
                   </div>
                 )}
                 <span className="text-[10px] text-neutral-400 tabular-nums">{formatFileSize(u.file.size)}</span>
@@ -356,7 +356,7 @@ export function R2BrowserContent({
           {error && (
             <div className="flex flex-col items-center justify-center h-40 gap-3 px-8">
               <span className="text-xs text-red-500 text-center max-w-md leading-relaxed">{error}</span>
-              <button onClick={onRetry} className="text-xs text-[#076bff] hover:underline">Retry</button>
+              <button onClick={onRetry} className="text-xs text-[#3580f9] hover:underline">Retry</button>
             </div>
           )}
 
@@ -372,9 +372,9 @@ export function R2BrowserContent({
                     ref={newFolderInputRef}
                     type="text" value={ops.newFolderName} onChange={(e) => ops.setNewFolderName(e.target.value)}
                     onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleCreateFolder(); if (e.key === "Escape") ops.cancelNewFolderInput(); }}
-                    placeholder="Folder name..." className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                    placeholder="Folder name..." className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#3580f9]"
                   />
-                  <button onClick={ops.handleCreateFolder} disabled={!ops.newFolderName.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Create</button>
+                  <button onClick={ops.handleCreateFolder} disabled={!ops.newFolderName.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#3580f9] text-white disabled:opacity-50" type="button">Create</button>
                   <button onClick={ops.cancelNewFolderInput} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
                 </div>
               )}
@@ -387,9 +387,9 @@ export function R2BrowserContent({
                     ref={renameInputRef}
                     type="text" value={ops.renameValue} onChange={(e) => ops.setRenameValue(e.target.value)}
                     onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleRename(); if (e.key === "Escape") ops.cancelRename(); }}
-                    className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                    className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#3580f9]"
                   />
-                  <button onClick={ops.handleRename} disabled={!ops.renameValue.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Rename</button>
+                  <button onClick={ops.handleRename} disabled={!ops.renameValue.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#3580f9] text-white disabled:opacity-50" type="button">Rename</button>
                   <button onClick={ops.cancelRename} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
                 </div>
               )}

package/components/builder/blockStyles.tsx

@@ -1,185 +1,192 @@
-"use client";
-
-/**
- * Shared block visual styles — gradients and SVG icon components.
- * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
- *
- * The compact block/section icons exported here are thin wrappers that render
- * the full card icons (`BlockCardIcons.tsx` / `SectionCardIcons.tsx`) at a
- * smaller size. This keeps iconography 100% consistent between the modal
- * cards and the settings panel header — same visual, just scaled.
- *
- * `size` represents the HEIGHT in pixels. Width is derived from the
- * card icon's 220×120 aspect ratio (≈ height × 1.833).
- */
-
-import {
-  TextBlockCardIcon,
-  ImageBlockCardIcon,
-  ImageGridBlockCardIcon,
-  VideoBlockCardIcon,
-  SpacerBlockCardIcon,
-  ButtonBlockCardIcon,
-  BeforeAfterBlockCardIcon,
-  AudioBlockCardIcon,
-} from "./BlockCardIcons";
-import {
-  CoverSectionCardIcon,
-  EmptySectionV2CardIcon,
-  ParallaxGroupCardIcon,
-  ProjectCarouselCardIcon,
-  ProjectGridCardIcon,
-  SavedSectionCardIcon,
-} from "./SectionCardIcons";
-
-// ── Gradient backgrounds per block type ──
-
-export const BLOCK_GRADIENTS: Record<string, string> = {
-  textBlock:      "linear-gradient(135deg, #c9b8ff 0%, #8eb5ff 50%, #b8d4ff 100%)",
-  imageBlock:     "linear-gradient(135deg, #b8ffb8 0%, #d4ffa8 50%, #f0ffc0 100%)",
-  imageGridBlock: "linear-gradient(135deg, #a8c8ff 0%, #c0d8ff 50%, #d8e8ff 100%)",
-  videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
-  spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
-  buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
-  beforeAfterBlock: "linear-gradient(135deg, #d8d8e8 0%, #a8c8ff 50%, #b8ffe0 100%)",
-  audioBlock:     "linear-gradient(135deg, #a8c8ff 0%, #d8c0ff 50%, #e0b8ff 100%)",
-  projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
-  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
-  parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
-  customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
-  // Non-block contexts
-  row:            "linear-gradient(135deg, #e0e0f0 0%, #d0d8e8 50%, #c8d0e0 100%)",
-  column:         "linear-gradient(135deg, #d8e8f8 0%, #c8ddf0 50%, #b8d0e8 100%)",
-  page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
-};
-
-// ── Compact wrappers that render the full card icon at a smaller size ──
-//
-// Card icons are 220×120 (landscape ≈11:6). `size` here is the HEIGHT in px;
-// width is derived automatically to preserve aspect.
-
-const ASPECT = 220 / 120;
-
-function scaleToHeight(size: number): React.CSSProperties {
-  return {
-    width: Math.round(size * ASPECT),
-    height: size,
-    display: "inline-block",
-    flexShrink: 0,
-  };
-}
-
-export function TextBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><TextBlockCardIcon /></span>;
-}
-export function ImageBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ImageBlockCardIcon /></span>;
-}
-export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ImageGridBlockCardIcon /></span>;
-}
-export function VideoBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><VideoBlockCardIcon /></span>;
-}
-export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><SpacerBlockCardIcon /></span>;
-}
-export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ButtonBlockCardIcon /></span>;
-}
-export function BeforeAfterBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><BeforeAfterBlockCardIcon /></span>;
-}
-export function AudioBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><AudioBlockCardIcon /></span>;
-}
-
-// ── Non-block context icons (compact wrappers of the section card icons) ──
-
-export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><CoverSectionCardIcon /></span>;
-}
-
-/** Plain V2 section (row-level) — uses the Empty Section card icon so the
- *  settings panel matches the Add Section modal iconography. */
-export function RowIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><EmptySectionV2CardIcon /></span>;
-}
-
-export function ColumnIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="colGrad" x1="4" y1="4" x2="36" y2="36">
-          <stop offset="0%" stopColor="#6090c8" />
-          <stop offset="100%" stopColor="#4878b8" />
-        </linearGradient>
-        <filter id="colDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
-        </filter>
-      </defs>
-      <rect x="6" y="4" width="10" height="32" rx="3" fill="url(#colGrad)" opacity="0.9" filter="url(#colDrop)" />
-      <rect x="6" y="4" width="10" height="10" rx="3" fill="white" opacity="0.18" />
-      <rect x="20" y="4" width="14" height="32" rx="3" fill="url(#colGrad)" opacity="0.55" filter="url(#colDrop)" />
-      <rect x="20" y="4" width="14" height="10" rx="3" fill="white" opacity="0.12" />
-    </svg>
-  );
-}
-
-export function PageIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="pageGrad" x1="8" y1="2" x2="32" y2="38">
-          <stop offset="0%" stopColor="#c8a870" />
-          <stop offset="100%" stopColor="#a88850" />
-        </linearGradient>
-        <filter id="pageDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
-        </filter>
-      </defs>
-      <rect x="8" y="3" width="24" height="34" rx="3" fill="url(#pageGrad)" filter="url(#pageDrop)" />
-      <rect x="8" y="3" width="24" height="10" rx="3" fill="white" opacity="0.2" />
-      <rect x="12" y="17" width="16" height="2" rx="1" fill="white" opacity="0.35" />
-      <rect x="12" y="22" width="12" height="2" rx="1" fill="white" opacity="0.25" />
-      <rect x="12" y="27" width="14" height="2" rx="1" fill="white" opacity="0.2" />
-    </svg>
-  );
-}
-
-// ── Lookup maps ──
-
-export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
-}
-
-export function ProjectCarouselBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ProjectCarouselCardIcon /></span>;
-}
-
-export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
-}
-
-export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><SavedSectionCardIcon /></span>;
-}
-
-export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
-  textBlock: TextBlockIcon,
-  imageBlock: ImageBlockIcon,
-  imageGridBlock: ImageGridBlockIcon,
-  videoBlock: VideoBlockIcon,
-  spacerBlock: SpacerBlockIcon,
-  buttonBlock: ButtonBlockIcon,
-  beforeAfterBlock: BeforeAfterBlockIcon,
-  audioBlock: AudioBlockIcon,
-  projectGridBlock: ProjectGridBlockIcon,
-  projectCarouselBlock: ProjectCarouselBlockIcon,
-  parallaxGroup: ParallaxGroupIcon,
-  coverSection: CoverSectionSettingsIcon,
-  customSectionInstance: CustomSectionInstanceIcon,
-  row: RowIcon,
-  column: ColumnIcon,
-  page: PageIcon,
-};
+"use client";
+
+/**
+ * Shared block visual styles — gradients and SVG icon components.
+ * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
+ *
+ * The compact block/section icons exported here are thin wrappers that render
+ * the full card icons (`BlockCardIcons.tsx` / `SectionCardIcons.tsx`) at a
+ * smaller size. This keeps iconography 100% consistent between the modal
+ * cards and the settings panel header — same visual, just scaled.
+ *
+ * `size` represents the HEIGHT in pixels. Width is derived from the
+ * card icon's 220×120 aspect ratio (≈ height × 1.833).
+ */
+
+import {
+  TextBlockCardIcon,
+  ImageBlockCardIcon,
+  ImageGridBlockCardIcon,
+  VideoBlockCardIcon,
+  SpacerBlockCardIcon,
+  ButtonBlockCardIcon,
+  BeforeAfterBlockCardIcon,
+  AudioBlockCardIcon,
+} from "./BlockCardIcons";
+import {
+  CoverSectionCardIcon,
+  EmptySectionV2CardIcon,
+  MarqueeCardIcon,
+  ParallaxGroupCardIcon,
+  ProjectCarouselCardIcon,
+  ProjectGridCardIcon,
+  SavedSectionCardIcon,
+} from "./SectionCardIcons";
+
+// ── Gradient backgrounds per block type ──
+
+export const BLOCK_GRADIENTS: Record<string, string> = {
+  textBlock:      "linear-gradient(135deg, #c9b8ff 0%, #8eb5ff 50%, #b8d4ff 100%)",
+  imageBlock:     "linear-gradient(135deg, #b8ffb8 0%, #d4ffa8 50%, #f0ffc0 100%)",
+  imageGridBlock: "linear-gradient(135deg, #a8c8ff 0%, #c0d8ff 50%, #d8e8ff 100%)",
+  videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
+  spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
+  buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
+  beforeAfterBlock: "linear-gradient(135deg, #d8d8e8 0%, #a8c8ff 50%, #b8ffe0 100%)",
+  audioBlock:     "linear-gradient(135deg, #a8c8ff 0%, #d8c0ff 50%, #e0b8ff 100%)",
+  projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
+  marqueeBlock:   "linear-gradient(135deg, #e0c8ff 0%, #c8b0ff 50%, #b8a0ff 100%)",
+  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
+  parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
+  customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
+  // Non-block contexts
+  row:            "linear-gradient(135deg, #e0e0f0 0%, #d0d8e8 50%, #c8d0e0 100%)",
+  column:         "linear-gradient(135deg, #d8e8f8 0%, #c8ddf0 50%, #b8d0e8 100%)",
+  page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
+};
+
+// ── Compact wrappers that render the full card icon at a smaller size ──
+//
+// Card icons are 220×120 (landscape ≈11:6). `size` here is the HEIGHT in px;
+// width is derived automatically to preserve aspect.
+
+const ASPECT = 220 / 120;
+
+function scaleToHeight(size: number): React.CSSProperties {
+  return {
+    width: Math.round(size * ASPECT),
+    height: size,
+    display: "inline-block",
+    flexShrink: 0,
+  };
+}
+
+export function TextBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><TextBlockCardIcon /></span>;
+}
+export function ImageBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ImageBlockCardIcon /></span>;
+}
+export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ImageGridBlockCardIcon /></span>;
+}
+export function VideoBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><VideoBlockCardIcon /></span>;
+}
+export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><SpacerBlockCardIcon /></span>;
+}
+export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ButtonBlockCardIcon /></span>;
+}
+export function BeforeAfterBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><BeforeAfterBlockCardIcon /></span>;
+}
+export function AudioBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><AudioBlockCardIcon /></span>;
+}
+
+// ── Non-block context icons (compact wrappers of the section card icons) ──
+
+export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><CoverSectionCardIcon /></span>;
+}
+
+/** Plain V2 section (row-level) — uses the Empty Section card icon so the
+ *  settings panel matches the Add Section modal iconography. */
+export function RowIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><EmptySectionV2CardIcon /></span>;
+}
+
+export function ColumnIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="colGrad" x1="4" y1="4" x2="36" y2="36">
+          <stop offset="0%" stopColor="#6090c8" />
+          <stop offset="100%" stopColor="#4878b8" />
+        </linearGradient>
+        <filter id="colDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
+        </filter>
+      </defs>
+      <rect x="6" y="4" width="10" height="32" rx="3" fill="url(#colGrad)" opacity="0.9" filter="url(#colDrop)" />
+      <rect x="6" y="4" width="10" height="10" rx="3" fill="white" opacity="0.18" />
+      <rect x="20" y="4" width="14" height="32" rx="3" fill="url(#colGrad)" opacity="0.55" filter="url(#colDrop)" />
+      <rect x="20" y="4" width="14" height="10" rx="3" fill="white" opacity="0.12" />
+    </svg>
+  );
+}
+
+export function PageIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="pageGrad" x1="8" y1="2" x2="32" y2="38">
+          <stop offset="0%" stopColor="#c8a870" />
+          <stop offset="100%" stopColor="#a88850" />
+        </linearGradient>
+        <filter id="pageDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
+        </filter>
+      </defs>
+      <rect x="8" y="3" width="24" height="34" rx="3" fill="url(#pageGrad)" filter="url(#pageDrop)" />
+      <rect x="8" y="3" width="24" height="10" rx="3" fill="white" opacity="0.2" />
+      <rect x="12" y="17" width="16" height="2" rx="1" fill="white" opacity="0.35" />
+      <rect x="12" y="22" width="12" height="2" rx="1" fill="white" opacity="0.25" />
+      <rect x="12" y="27" width="14" height="2" rx="1" fill="white" opacity="0.2" />
+    </svg>
+  );
+}
+
+// ── Lookup maps ──
+
+export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
+}
+
+export function ProjectCarouselBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ProjectCarouselCardIcon /></span>;
+}
+
+export function MarqueeBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><MarqueeCardIcon /></span>;
+}
+
+export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
+}
+
+export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><SavedSectionCardIcon /></span>;
+}
+
+export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
+  textBlock: TextBlockIcon,
+  imageBlock: ImageBlockIcon,
+  imageGridBlock: ImageGridBlockIcon,
+  videoBlock: VideoBlockIcon,
+  spacerBlock: SpacerBlockIcon,
+  buttonBlock: ButtonBlockIcon,
+  beforeAfterBlock: BeforeAfterBlockIcon,
+  audioBlock: AudioBlockIcon,
+  projectGridBlock: ProjectGridBlockIcon,
+  projectCarouselBlock: ProjectCarouselBlockIcon,
+  marqueeBlock: MarqueeBlockIcon,
+  parallaxGroup: ParallaxGroupIcon,
+  coverSection: CoverSectionSettingsIcon,
+  customSectionInstance: CustomSectionInstanceIcon,
+  row: RowIcon,
+  column: ColumnIcon,
+  page: PageIcon,
+};