@morphika/andami 0.4.2 → 0.5.1

package/components/builder/ColumnDragOverlay.tsx

@@ -7,16 +7,29 @@ import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanit
 import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
 import { BUILDER_BLUE } from "../../lib/builder/constants";
 
+/** Color used when the current drop target is invalid (cross-section
+ * swap, or a target that is not V2/Cover). Red 500 with compatible
+ * translucent tints for the overlay chrome. */
+const INVALID_RED = "#ef4444";
+const INVALID_RED_RGB = "239, 68, 68";
+
 interface ColumnDragOverlayProps {
   sectionKey: string;
   columnKey: string;
   position: { x: number; y: number };
+  /**
+   * Whether the current drop target under the cursor is a valid drop.
+   * - true  (or no target): render in blue (default).
+   * - false: render in red to signal "drop here won't execute".
+   */
+  isValidDrop?: boolean;
 }
 
 const ColumnDragOverlay = memo(function ColumnDragOverlay({
   sectionKey,
   columnKey,
   position,
+  isValidDrop = true,
 }: ColumnDragOverlayProps) {
   const rows = useBuilderStore((s) => s.rows);
   const item = rows.find((r) => r._key === sectionKey);
@@ -44,6 +57,10 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
 
   const blockCount = (col.blocks || []).length;
 
+  // Pick accent based on drop validity.
+  const accentColor = isValidDrop ? BUILDER_BLUE : INVALID_RED;
+  const accentRgb = isValidDrop ? "71, 148, 226" : INVALID_RED_RGB;
+
   const overlay = (
     <div
       style={{
@@ -53,18 +70,20 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
         transform: "translate(-50%, -50%)",
         pointerEvents: "none",
         zIndex: 99999,
+        transition: "filter 120ms ease",
       }}
     >
       <div
         style={{
           width: 180,
           minHeight: 80,
-          background: "rgba(71, 148, 226, 0.08)",
+          background: `rgba(${accentRgb}, 0.08)`,
           backdropFilter: "blur(8px)",
           opacity: 0.85,
           borderRadius: 8,
-          border: `2px solid ${BUILDER_BLUE}`,
-          boxShadow: "0 8px 32px rgba(71, 148, 226, 0.3)",
+          border: `2px solid ${accentColor}`,
+          boxShadow: `0 8px 32px rgba(${accentRgb}, 0.3)`,
+          transition: "border-color 120ms ease, background 120ms ease, box-shadow 120ms ease",
         }}
       >
         {/* Column header badge */}
@@ -74,17 +93,25 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
             alignItems: "center",
             gap: 8,
             padding: "8px 12px",
-            borderBottom: "1px solid rgba(71, 148, 226, 0.2)",
+            borderBottom: `1px solid rgba(${accentRgb}, 0.2)`,
           }}
         >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill={BUILDER_BLUE}>
-            <circle cx="3" cy="3" r="1" />
-            <circle cx="7" cy="3" r="1" />
-            <circle cx="3" cy="7" r="1" />
-            <circle cx="7" cy="7" r="1" />
-          </svg>
+          {isValidDrop ? (
+            <svg width="10" height="10" viewBox="0 0 10 10" fill={accentColor}>
+              <circle cx="3" cy="3" r="1" />
+              <circle cx="7" cy="3" r="1" />
+              <circle cx="3" cy="7" r="1" />
+              <circle cx="7" cy="7" r="1" />
+            </svg>
+          ) : (
+            // "Blocked" icon when invalid — slashed circle
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="6.5" stroke={accentColor} strokeWidth="1.5" />
+              <line x1="3.5" y1="12.5" x2="12.5" y2="3.5" stroke={accentColor} strokeWidth="1.5" />
+            </svg>
+          )}
           <span style={{ fontSize: 12, color: "white", fontWeight: 500 }}>
-            Column {col.span}/{gridColumns}
+            {isValidDrop ? `Column ${col.span}/${gridColumns}` : "Cannot drop here"}
           </span>
         </div>
         {/* Block count indicators */}

package/components/builder/CoverSectionCanvas.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
-import type { CoverSection, CoverRow, PageSectionV2 } from "../../lib/sanity/types";
+import type { CoverSection, CoverRow, PageSectionV2, ColumnOverride } from "../../lib/sanity/types";
 import type { DeviceViewport } from "../../lib/builder/types";
 import SectionV2Canvas from "./SectionV2Canvas";
 import CoverRowResizeHandle from "./CoverRowResizeHandle";
@@ -84,9 +84,37 @@ export default function CoverSectionCanvas({
   const virtualSectionsPerRow = useMemo(() => {
     return effectiveRows.map((row, rowIndex) => {
       const rowNumber = rowIndex + 1;
+      const rowColumnKeys = new Set(
+        section.columns.filter((c) => c.grid_row === rowNumber).map((c) => c._key),
+      );
       const rowColumns = section.columns
         .filter((c) => c.grid_row === rowNumber)
         .map((c) => ({ ...c, grid_row: 1 }));
+
+      // Project the Cover's responsive overrides into this row's virtual section.
+      // Only keep column overrides whose `_key` belongs to this row, and remap their
+      // `grid_row` from the Cover's actual row number back to 1 (the virtual row).
+      // Without this, SectionV2Canvas calls `getEffectiveColumnsV2` against the virtual
+      // section and never sees the overrides — tablet/phone view falls back to the
+      // desktop layout even when overrides exist.
+      const projectOverridesForRow = (
+        overrides: ColumnOverride[] | undefined,
+      ): ColumnOverride[] | undefined => {
+        if (!overrides) return undefined;
+        const filtered = overrides
+          .filter((o) => rowColumnKeys.has(o._key))
+          .map((o) =>
+            o.grid_row !== undefined ? { ...o, grid_row: 1 } : o,
+          );
+        return filtered.length ? filtered : undefined;
+      };
+
+      const virtualResponsive: PageSectionV2["responsive"] = {};
+      const tabletCols = projectOverridesForRow(section.responsive?.tablet?.columns);
+      const phoneCols = projectOverridesForRow(section.responsive?.phone?.columns);
+      if (tabletCols) virtualResponsive.tablet = { columns: tabletCols };
+      if (phoneCols) virtualResponsive.phone = { columns: phoneCols };
+
       const virtualSection: PageSectionV2 = {
         _type: "pageSectionV2",
         _key: section._key,
@@ -98,11 +126,70 @@ export default function CoverSectionCanvas({
           col_gap: section.settings.col_gap ?? 20,
           row_gap: section.settings.row_gap ?? 20,
         },
+        ...(Object.keys(virtualResponsive).length > 0
+          ? { responsive: virtualResponsive }
+          : {}),
       };
       return { row, rowNumber, virtualSection };
     });
   }, [effectiveRows, section]);
 
+  // Custom responsive updater for virtual per-row sections. Takes the responsive
+  // object that SectionV2Canvas built (with `grid_row: 1` for this row's columns
+  // and keys limited to this row) and merges it back into the Cover's flat
+  // column override list: remaps `grid_row: 1` back to `rowNumber`, preserves
+  // overrides for other rows, and preserves `cover_rows` + `settings` at the
+  // responsive level which are invisible to SectionV2Canvas.
+  const handleVirtualRowResponsiveUpdate = useCallback(
+    (rowNumber: number) =>
+      (_sectionKey: string, incoming: PageSectionV2["responsive"]): void => {
+        const rowColumnKeys = new Set(
+          section.columns.filter((c) => c.grid_row === rowNumber).map((c) => c._key),
+        );
+
+        const merged: CoverSection["responsive"] = {};
+
+        (["tablet", "phone"] as const).forEach((vp) => {
+          const existingVp = section.responsive?.[vp];
+          const incomingVp = incoming?.[vp];
+
+          // Columns for OTHER rows from the Cover's existing responsive stay as-is.
+          const otherRowOverrides = (existingVp?.columns || []).filter(
+            (o) => !rowColumnKeys.has(o._key),
+          );
+
+          // Columns for THIS row come from the incoming virtual-section responsive,
+          // with grid_row remapped 1 → rowNumber.
+          const thisRowOverrides = (incomingVp?.columns || []).map((o) =>
+            o.grid_row !== undefined ? { ...o, grid_row: rowNumber } : o,
+          );
+
+          const mergedCols = [...otherRowOverrides, ...thisRowOverrides];
+
+          const vpOverride: NonNullable<CoverSection["responsive"]>[typeof vp] = {};
+          if (mergedCols.length > 0) vpOverride.columns = mergedCols;
+          // Preserve cover_rows + settings that the virtual section never sees.
+          if (existingVp?.cover_rows) vpOverride.cover_rows = existingVp.cover_rows;
+          if (existingVp?.settings) vpOverride.settings = existingVp.settings;
+
+          if (Object.keys(vpOverride).length > 0) {
+            merged[vp] = vpOverride;
+          }
+        });
+
+        const finalResponsive = Object.keys(merged).length > 0 ? merged : undefined;
+        // CoverSection and PageSectionV2 share the same `updateSectionV2Responsive`
+        // store action (it writes to any section by _key); the runtime shapes align
+        // on `{ tablet?, phone? }` — the extra `cover_rows` field on CoverSection
+        // is carried through without touching the V2-shaped write path.
+        store.updateSectionV2Responsive(
+          section._key,
+          finalResponsive as PageSectionV2["responsive"],
+        );
+      },
+    [section, store],
+  );
+
   return (
     <div
       className="relative"
@@ -219,6 +306,7 @@ export default function CoverSectionCanvas({
                       onAddBlockTarget={onAddBlockTarget}
                       fillHeight
                       gridRowOffset={rowNumber - 1}
+                      onUpdateResponsive={handleVirtualRowResponsiveUpdate(rowNumber)}
                     />
                   </div>
                 ) : (

package/components/builder/InsertionLines.tsx

@@ -30,6 +30,11 @@ interface InsertionLinesProps {
   colGap: number;
   sectionKey: string;
   dropTarget: DropTarget | null;
+  /** Offset added to grid_row in emitted `data-insert-row` attributes —
+   * required when this SectionV2Canvas is a virtual per-row view inside
+   * a CoverSection (rows are remapped to 1 for rendering; the real
+   * grid_row must be recovered for the DnD hit-test). Default 0. */
+  gridRowOffset?: number;
 }
 
 export const InsertionLines = memo(function InsertionLines({
@@ -40,6 +45,7 @@ export const InsertionLines = memo(function InsertionLines({
   colGap,
   sectionKey,
   dropTarget,
+  gridRowOffset = 0,
 }: InsertionLinesProps) {
   // Compute insertion points between adjacent columns (no gap between them)
   // Exclude the currently dragged column from consideration
@@ -124,7 +130,9 @@ export const InsertionLines = memo(function InsertionLines({
             <div
               data-col-v2-insert=""
               data-section-key={sectionKey}
-              data-insert-row={pt.row}
+              // Absolute grid_row (including Cover row offset) — see
+              // SectionV2Canvas's data-gap-row comment for rationale.
+              data-insert-row={pt.row + gridRowOffset}
               data-insert-col={pt.gridColumn}
               data-insert-left-key={pt.leftColKey}
               data-insert-right-key={pt.rightColKey}

package/components/builder/SectionV2Canvas.tsx

@@ -27,6 +27,13 @@ interface SectionV2CanvasProps {
   fillHeight?: boolean;
   /** Offset added to grid_row when adding columns via gaps (used by cover sections where columns are normalized to grid_row 1) */
   gridRowOffset?: number;
+  /**
+   * Optional override for the responsive-update action. When provided, used instead of the
+   * store's `updateSectionV2Responsive`. Used by CoverSectionCanvas to intercept writes from
+   * virtual per-row sections and merge them back into the Cover's flat column list (remapping
+   * `grid_row: 1` back to the row's real number and preserving overrides for other rows).
+   */
+  onUpdateResponsive?: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void;
 }
 
 export default function SectionV2Canvas({
@@ -34,6 +41,7 @@ export default function SectionV2Canvas({
   onAddBlockTarget,
   fillHeight,
   gridRowOffset = 0,
+  onUpdateResponsive,
 }: SectionV2CanvasProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
@@ -44,7 +52,8 @@ export default function SectionV2Canvas({
   const deleteColumnV2 = useBuilderStore((s) => s.deleteColumnV2);
   const resizeColumnV2 = useBuilderStore((s) => s.resizeColumnV2);
   const resizeColumnV2Left = useBuilderStore((s) => s.resizeColumnV2Left);
-  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const storeUpdateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const updateSectionV2Responsive = onUpdateResponsive ?? storeUpdateSectionV2Responsive;
   const selectColumnV2 = useBuilderStore((s) => s.selectColumnV2);
   const selectBlock = useBuilderStore((s) => s.selectBlock);
   const deleteBlock = useBuilderStore((s) => s.deleteBlock);
@@ -69,8 +78,13 @@ export default function SectionV2Canvas({
     startDrag,
   } = useColumnDragContext();
 
-  // Only show insertion lines if the drag originates from THIS section
-  const showInsertionLines = isColDragActive && draggingSectionKey === section._key;
+  // Show insertion lines + highlighted gaps:
+  //   - While dragging, in the section the drag ORIGINATED from (source feedback)
+  //   - While dragging, in ANY section the cursor is currently over (target feedback
+  //     for cross-section drops — the user needs a visible drop zone in the target).
+  const showInsertionLines =
+    isColDragActive &&
+    (draggingSectionKey === section._key || isSectionHovered);
 
   // When drag ends (isColDragActive becomes false), reset hover state so it
   // doesn't stay stuck true if the pointer ended outside the grid.
@@ -148,7 +162,10 @@ export default function SectionV2Canvas({
       style={{
         display: "grid",
         gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-        ...(fillHeight ? { gridTemplateRows: "1fr" } : {}),
+        // `minmax(0, 1fr)` lets the row shrink below intrinsic content min-size
+        // (gaps' minHeight, empty-column wrappers), which is required in Cover
+        // sections where the row has a strict proportional height.
+        ...(fillHeight ? { gridTemplateRows: "minmax(0, 1fr)" } : {}),
         columnGap: `${colGap}px`,
         rowGap: `${rowGap}px`,
         position: "relative",
@@ -232,6 +249,7 @@ export default function SectionV2Canvas({
             }
             onResizeRight={handleResizeRight}
             onResizeLeft={handleResizeLeft}
+            fillHeight={fillHeight}
           >
             {(col.blocks || []).map((block, blockIdx) => (
               <SortableBlock
@@ -267,7 +285,11 @@ export default function SectionV2Canvas({
               key={`gap-${gap.grid_row}-${gap.grid_column}`}
               data-col-v2-gap=""
               data-section-key={section._key}
-              data-gap-row={gap.grid_row}
+              // Absolute grid_row (including Cover row offset) — used by the
+              // DnD hit-test. Without the offset, Cover drops in row 2/3 would
+              // collapse to row 1. The `onClick` below applies the same offset
+              // to keep "+ Add Column" consistent with drag drops.
+              data-gap-row={gap.grid_row + gridRowOffset}
               data-gap-col={gap.grid_column}
               data-gap-span={gap.span}
               onClick={(e) => {
@@ -277,7 +299,10 @@ export default function SectionV2Canvas({
               style={{
                 gridColumn: `${gap.grid_column} / span ${gap.span}`,
                 gridRow: gap.grid_row,
-                minHeight: 70,
+                // In fillHeight (Cover), the row has a strict proportional
+                // height — don't let the gap force a minimum that would push
+                // content past the row boundary.
+                minHeight: fillHeight ? 0 : 70,
               }}
               className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
                 isGapTarget
@@ -304,6 +329,7 @@ export default function SectionV2Canvas({
           colGap={colGap}
           sectionKey={section._key}
           dropTarget={dropTarget}
+          gridRowOffset={gridRowOffset}
         />
       )}
     </div>

package/components/builder/SectionV2Column.tsx

@@ -131,6 +131,9 @@ interface SectionV2ColumnProps {
   onAddBlock: (insertIndex?: number) => void;
   onResizeRight: (columnKey: string, startX: number, startSpan: number, containerEl: HTMLElement) => void;
   onResizeLeft: (columnKey: string, startX: number, startGridCol: number, startSpan: number, containerEl: HTMLElement) => void;
+  /** When true, the column lives in a Cover row with strict proportional height —
+   * empty-state minHeight is relaxed so the column doesn't overflow its row. */
+  fillHeight?: boolean;
   children: ReactNode;
 }
 
@@ -152,6 +155,7 @@ export default function SectionV2Column({
   onAddBlock,
   onResizeRight,
   onResizeLeft,
+  fillHeight = false,
   children,
 }: SectionV2ColumnProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
@@ -453,7 +457,7 @@ export default function SectionV2Column({
           /* Empty column: show + Add Block (flex-1 stretches in fillHeight cover sections) */
           <div
             className="relative flex items-center justify-center flex-1"
-            style={{ minHeight: 80, padding: "16px 12px" }}
+            style={{ minHeight: fillHeight ? 0 : 80, padding: "16px 12px" }}
           >
             <button
               onClick={handleAddBlockEmpty}

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

@@ -4,7 +4,7 @@ import { useState, useMemo, useCallback, useRef, useEffect, Fragment } from "rea
 import type { RegisteredAsset } from "../../../lib/sanity/types";
 import { VirtualAssetGrid } from "../VirtualAssetGrid";
 import type { UploadingFile } from "./types";
-import { formatFileSize, isImageType, isVideoType, isFontType, buildFolderTree } from "./helpers";
+import { formatFileSize, isImageType, isVideoType, isAudioType, isFontType, buildFolderTree } from "./helpers";
 import { FolderTreeItem } from "./FolderTreeItem";
 import { VideoThumbnail } from "./VideoThumbnail";
 import { FileLightbox } from "./FileLightbox";
@@ -34,7 +34,7 @@ export function R2BrowserContent({
   setSelectedAsset: (a: RegisteredAsset | null) => void;
   onRetry: () => void;
   onDoubleClick?: (asset: RegisteredAsset) => void;
-  filterType?: "image" | "video" | "all";
+  filterType?: "image" | "video" | "audio" | "all";
   multiSelect?: boolean;
   selectedAssets?: RegisteredAsset[];
   setSelectedAssets?: (assets: RegisteredAsset[]) => void;
@@ -99,6 +99,7 @@ export function R2BrowserContent({
 
     if (filterType === "image") filtered = filtered.filter((a) => isImageType(a.extension));
     else if (filterType === "video") filtered = filtered.filter((a) => isVideoType(a.extension));
+    else if (filterType === "audio") filtered = filtered.filter((a) => isAudioType(a.extension));
 
     if (searchQuery.trim()) {
       const q = searchQuery.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
@@ -106,8 +107,12 @@ export function R2BrowserContent({
         (a) => {
           const nameNorm = a.filename.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
           const pathNorm = a.path.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
-          return a.filename !== ".folder" && (nameNorm.includes(q) || pathNorm.includes(q)) &&
-            (filterType === "all" || (filterType === "image" ? isImageType(a.extension) : isVideoType(a.extension)));
+          const matchesType =
+            filterType === "all" ||
+            (filterType === "image" && isImageType(a.extension)) ||
+            (filterType === "video" && isVideoType(a.extension)) ||
+            (filterType === "audio" && isAudioType(a.extension));
+          return a.filename !== ".folder" && (nameNorm.includes(q) || pathNorm.includes(q)) && matchesType;
         }
       );
     }
@@ -185,6 +190,18 @@ export function R2BrowserContent({
       );
     }
 
+    if (isAudioType(asset.extension)) {
+      return (
+        <div className="w-full h-full flex items-center justify-center bg-neutral-50">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-300">
+            <path d="M9 18V5l12-2v13" />
+            <circle cx="6" cy="18" r="3" />
+            <circle cx="18" cy="16" r="3" />
+          </svg>
+        </div>
+      );
+    }
+
     return (
       <div className="w-full h-full flex items-center justify-center bg-neutral-50">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-300">
@@ -208,7 +225,7 @@ export function R2BrowserContent({
         ref={ops.fileInputRef}
         type="file"
         multiple
-        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime"
+        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime,audio/mpeg,audio/wav,audio/ogg,audio/mp4,audio/aac,audio/flac"
         className="hidden"
         onChange={dnd.handleFileInputChange}
       />
@@ -227,7 +244,7 @@ export function R2BrowserContent({
             <p className="text-sm font-medium text-[#076bff]">
               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</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>
             <p className="text-xs text-neutral-400">Maximum file size: 500 MB</p>
           </div>
         </div>

package/components/builder/asset-browser/helpers.ts

@@ -62,6 +62,10 @@ export function isVideoType(ext: string): boolean {
   return ["mp4", "webm", "mov"].includes(ext);
 }
 
+export function isAudioType(ext: string): boolean {
+  return ["mp3", "wav", "ogg", "m4a", "aac", "flac"].includes(ext);
+}
+
 export function isFontType(ext: string): boolean {
   return ["otf", "ttf", "woff", "woff2"].includes(ext);
 }

package/components/builder/asset-browser/types.ts

@@ -17,6 +17,7 @@ export const MAX_UPLOAD_SIZE = 500 * 1024 * 1024; // 500 MB per file
 export const ALLOWED_EXTENSIONS = new Set([
   "jpg", "jpeg", "png", "webp", "gif", "svg",
   "mp4", "webm", "mov",
+  "mp3", "wav", "ogg", "m4a", "aac", "flac",
 ]);
 
 // ============================================
@@ -27,7 +28,7 @@ export interface AssetBrowserProps {
   open: boolean;
   onSelect: (path: string) => void;
   onClose: () => void;
-  filterType?: "image" | "video" | "all";
+  filterType?: "image" | "video" | "audio" | "all";
   /** Enable multi-select mode: user can pick multiple assets at once */
   multiSelect?: boolean;
   /** Called with all selected paths when multiSelect is true */

package/components/builder/blockStyles.tsx

@@ -20,6 +20,8 @@ import {
   VideoBlockCardIcon,
   SpacerBlockCardIcon,
   ButtonBlockCardIcon,
+  BeforeAfterBlockCardIcon,
+  AudioBlockCardIcon,
 } from "./BlockCardIcons";
 import {
   CoverSectionCardIcon,
@@ -39,6 +41,8 @@ export const BLOCK_GRADIENTS: Record<string, string> = {
   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%)",
@@ -83,6 +87,12 @@ export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
 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) ──
 
@@ -162,6 +172,8 @@ export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>>
   videoBlock: VideoBlockIcon,
   spacerBlock: SpacerBlockIcon,
   buttonBlock: ButtonBlockIcon,
+  beforeAfterBlock: BeforeAfterBlockIcon,
+  audioBlock: AudioBlockIcon,
   projectGridBlock: ProjectGridBlockIcon,
   projectCarouselBlock: ProjectCarouselBlockIcon,
   parallaxGroup: ParallaxGroupIcon,