@morphika/andami 0.4.2 → 0.5.1

package/components/blocks/AudioBlockRenderer.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AudioBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry } from "../../lib/asset-retry";
+
+/**
+ * AudioBlockRenderer — minimal custom audio player.
+ *
+ * Layout: optional cover art + (title / artist) + play button + progress bar + time.
+ * Accent color applies to the play button background and progress fill.
+ * Uses the HTML5 Audio element via a ref; progress + duration driven by
+ * timeupdate / loadedmetadata events.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || seconds < 0) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export default function AudioBlockRenderer({ block }: { block: AudioBlock }) {
+  const resolveAsset = useAssetUrl();
+
+  const src = resolveAsset(block.asset_path);
+  const coverSrc = block.cover_path ? resolveAsset(block.cover_path) : null;
+  const accent = block.accent_color || "#4794E2";
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "contained"] || widthStyleMap.contained);
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : "12px";
+
+  const autoplay = block.autoplay === true;
+  const loop = block.loop === true;
+  const initialMuted = block.muted === true;
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const progressRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(0);
+  const [muted, setMuted] = useState<boolean>(initialMuted);
+
+  useEffect(() => {
+    const a = audioRef.current;
+    if (!a) return;
+    const onTime = () => setCurrentTime(a.currentTime);
+    const onMeta = () => setDuration(a.duration || 0);
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => setIsPlaying(false);
+    a.addEventListener("timeupdate", onTime);
+    a.addEventListener("loadedmetadata", onMeta);
+    a.addEventListener("durationchange", onMeta);
+    a.addEventListener("play", onPlay);
+    a.addEventListener("pause", onPause);
+    a.addEventListener("ended", onEnded);
+    return () => {
+      a.removeEventListener("timeupdate", onTime);
+      a.removeEventListener("loadedmetadata", onMeta);
+      a.removeEventListener("durationchange", onMeta);
+      a.removeEventListener("play", onPlay);
+      a.removeEventListener("pause", onPause);
+      a.removeEventListener("ended", onEnded);
+    };
+  }, []);
+
+  const togglePlay = useCallback(() => {
+    const a = audioRef.current;
+    if (!a) return;
+    if (a.paused) {
+      a.play().catch(() => { /* autoplay/permission rejection — leave paused */ });
+    } else {
+      a.pause();
+    }
+  }, []);
+
+  const seekFromEvent = useCallback((clientX: number) => {
+    const el = progressRef.current;
+    const a = audioRef.current;
+    if (!el || !a || !duration) return;
+    const rect = el.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    a.currentTime = pct * duration;
+    setCurrentTime(a.currentTime);
+  }, [duration]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+    seekFromEvent(e.clientX);
+  }, [seekFromEvent]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    seekFromEvent(e.clientX);
+  }, [seekFromEvent]);
+
+  const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = false;
+    (e.target as Element).releasePointerCapture?.(e.pointerId);
+  }, []);
+
+  const progressPct = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  const containerStyle: React.CSSProperties = {
+    ...widthStyle,
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "12px 16px",
+    background: "#fafafa",
+    border: "1px solid #ececec",
+    borderRadius,
+    boxShadow: block.shadow ? "0 8px 24px -12px rgba(0,0,0,0.25)" : undefined,
+    overflow: "hidden",
+  };
+
+  const hasMetaText = !!(block.title || block.artist);
+
+  return (
+    <div style={containerStyle}>
+      <audio
+        ref={audioRef}
+        src={src}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        preload="metadata"
+      />
+
+      {coverSrc && (
+        <div style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 8, overflow: "hidden", background: "#eee" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={coverSrc}
+            alt={block.alt || block.title || "Audio cover"}
+            onError={handleImageRetry}
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={togglePlay}
+        aria-label={isPlaying ? "Pause" : "Play"}
+        style={{
+          width: 40,
+          height: 40,
+          flexShrink: 0,
+          borderRadius: "50%",
+          border: "none",
+          background: accent,
+          color: "#fff",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 0,
+        }}
+      >
+        {isPlaying ? (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+            <rect x="6" y="5" width="4" height="14" rx="1" />
+            <rect x="14" y="5" width="4" height="14" rx="1" />
+          </svg>
+        ) : (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden style={{ marginLeft: 2 }}>
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        )}
+      </button>
+
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        {hasMetaText && (
+          <div style={{ display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }}>
+            {block.title && (
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#111", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.title}
+              </span>
+            )}
+            {block.artist && (
+              <span style={{ fontSize: 12, color: "#777", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.artist}
+              </span>
+            )}
+          </div>
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div
+            ref={progressRef}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+            role="slider"
+            aria-label="Playback position"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(progressPct)}
+            style={{
+              flex: 1,
+              height: 4,
+              background: "#e5e5e5",
+              borderRadius: 999,
+              position: "relative",
+              cursor: "pointer",
+              touchAction: "none",
+            }}
+          >
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                width: `${progressPct}%`,
+                background: accent,
+                borderRadius: 999,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: `${progressPct}%`,
+                width: 10,
+                height: 10,
+                marginTop: -5,
+                marginLeft: -5,
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: `0 0 0 2px ${accent}`,
+              }}
+            />
+          </div>
+          <span style={{ fontSize: 11, color: "#777", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
+            {formatTime(currentTime)} / {formatTime(duration)}
+          </span>
+          <button
+            type="button"
+            onClick={() => setMuted((m) => !m)}
+            aria-label={muted ? "Unmute" : "Mute"}
+            style={{
+              width: 24,
+              height: 24,
+              flexShrink: 0,
+              border: "none",
+              background: "transparent",
+              color: "#777",
+              cursor: "pointer",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {muted ? (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                <line x1="23" y1="9" x2="17" y2="15" />
+                <line x1="17" y1="9" x2="23" y2="15" />
+              </svg>
+            ) : (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/blocks/BeforeAfterBlockRenderer.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { BeforeAfterBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
+
+/**
+ * BeforeAfterBlockRenderer — drag-slider comparator between two media assets.
+ *
+ * Supports image↔image, image↔video, video↔image, video↔video.
+ * Orientation is horizontal (left=before, right=after) or vertical
+ * (top=before, bottom=after). The "after" side is the one revealed as the
+ * user drags — clipped to the percentage the handle sits at.
+ *
+ * Interaction: drag-only (pointer events, works with touch via pointerType).
+ * Keyboard: left/right (or up/down in vertical mode) nudge the handle by 2%,
+ * shift+arrow by 10%. Home/End jump to 0/100.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+const aspectMap: Record<string, string | undefined> = {
+  auto: undefined,
+  "16:9": "16/9",
+  "4:3": "4/3",
+  "1:1": "1/1",
+  "21:9": "21/9",
+};
+
+function clamp(n: number, lo = 0, hi = 100): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+function BeforeAfterMedia({
+  type,
+  src,
+  alt,
+  autoplay,
+  loop,
+  muted,
+}: {
+  type: "image" | "video";
+  src: string;
+  alt: string;
+  autoplay: boolean;
+  loop: boolean;
+  muted: boolean;
+}) {
+  const commonStyle: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    userSelect: "none",
+    pointerEvents: "none",
+  };
+  if (type === "video") {
+    return (
+      <video
+        src={src}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        playsInline
+        preload={autoplay ? "auto" : "metadata"}
+        onError={handleVideoRetry}
+        style={commonStyle}
+      />
+    );
+  }
+  return (
+    /* eslint-disable-next-line @next/next/no-img-element */
+    <img
+      src={src}
+      alt={alt}
+      loading="lazy"
+      decoding="async"
+      draggable={false}
+      onError={handleImageRetry}
+      style={commonStyle}
+    />
+  );
+}
+
+export default function BeforeAfterBlockRenderer({ block }: { block: BeforeAfterBlock }) {
+  const resolveAsset = useAssetUrl();
+
+  const beforeType = block.before_media_type ?? "image";
+  const afterType = block.after_media_type ?? "image";
+  const orientation = block.orientation ?? "horizontal";
+  const initial = clamp(block.initial_position ?? 50);
+  const handleColor = block.handle_color || "#FFFFFF";
+
+  const beforeSrc = resolveAsset(block.before_asset_path);
+  const afterSrc = resolveAsset(block.after_asset_path);
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const aspect = isFill ? undefined : aspectMap[block.aspect_ratio ?? "16:9"] ?? "16/9";
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState<number>(initial);
+  const draggingRef = useRef(false);
+
+  const autoplay = block.video_autoplay !== false;
+  const loop = block.video_loop !== false;
+  const muted = block.video_muted !== false;
+
+  const updateFromEvent = useCallback((clientX: number, clientY: number) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = orientation === "horizontal"
+      ? ((clientX - rect.left) / rect.width) * 100
+      : ((clientY - rect.top) / rect.height) * 100;
+    setPosition(clamp(pct));
+  }, [orientation]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+    updateFromEvent(e.clientX, e.clientY);
+  }, [updateFromEvent]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    updateFromEvent(e.clientX, e.clientY);
+  }, [updateFromEvent]);
+
+  const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = false;
+    (e.target as Element).releasePointerCapture?.(e.pointerId);
+  }, []);
+
+  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 10 : 2;
+    const isHoriz = orientation === "horizontal";
+    if ((isHoriz && e.key === "ArrowLeft") || (!isHoriz && e.key === "ArrowUp")) {
+      e.preventDefault();
+      setPosition((p) => clamp(p - step));
+    } else if ((isHoriz && e.key === "ArrowRight") || (!isHoriz && e.key === "ArrowDown")) {
+      e.preventDefault();
+      setPosition((p) => clamp(p + step));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setPosition(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setPosition(100);
+    }
+  }, [orientation]);
+
+  useEffect(() => {
+    setPosition(initial);
+  }, [initial]);
+
+  const afterClip = orientation === "horizontal"
+    ? `inset(0 0 0 ${position}%)`
+    : `inset(${position}% 0 0 0)`;
+
+  const handleWrapperStyle: React.CSSProperties = orientation === "horizontal"
+    ? {
+        position: "absolute",
+        top: 0, bottom: 0,
+        left: `${position}%`,
+        width: 2,
+        transform: "translateX(-1px)",
+        background: handleColor,
+        pointerEvents: "none",
+      }
+    : {
+        position: "absolute",
+        left: 0, right: 0,
+        top: `${position}%`,
+        height: 2,
+        transform: "translateY(-1px)",
+        background: handleColor,
+        pointerEvents: "none",
+      };
+
+  const knobStyle: React.CSSProperties = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 40,
+    height: 40,
+    borderRadius: "50%",
+    background: handleColor,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+  };
+
+  const frameStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden", touchAction: "none", cursor: orientation === "horizontal" ? "ew-resize" : "ns-resize" }
+    : { position: "relative", ...widthStyle, aspectRatio: aspect, borderRadius, overflow: "hidden", touchAction: "none", cursor: orientation === "horizontal" ? "ew-resize" : "ns-resize" };
+
+  const shadowClass = block.shadow ? "shadow-lg" : "";
+
+  // Arrow icon inside the knob — points along the slider axis
+  const ArrowIcon = orientation === "horizontal" ? (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M5 4 L1 9 L5 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M13 4 L17 9 L13 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ) : (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M4 5 L9 1 L14 5" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 13 L9 17 L14 13" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      role="slider"
+      aria-label="Before / after comparison"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(position)}
+      aria-orientation={orientation}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onKeyDown={onKeyDown}
+      className={shadowClass}
+      style={frameStyle}
+    >
+      {/* Before layer — full frame */}
+      <div style={{ position: "absolute", inset: 0 }}>
+        <BeforeAfterMedia
+          type={beforeType}
+          src={beforeSrc}
+          alt={block.before_alt || ""}
+          autoplay={autoplay}
+          loop={loop}
+          muted={muted}
+        />
+      </div>
+
+      {/* After layer — clipped by slider position */}
+      <div style={{ position: "absolute", inset: 0, clipPath: afterClip, WebkitClipPath: afterClip }}>
+        <BeforeAfterMedia
+          type={afterType}
+          src={afterSrc}
+          alt={block.after_alt || ""}
+          autoplay={autoplay}
+          loop={loop}
+          muted={muted}
+        />
+      </div>
+
+      {/* Divider line + knob */}
+      <div style={handleWrapperStyle}>
+        <div style={knobStyle}>{ArrowIcon}</div>
+      </div>
+    </div>
+  );
+}

package/components/builder/BlockCardIcons.tsx

@@ -214,6 +214,93 @@ export function ButtonBlockCardIcon() {
   );
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// 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="#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" />
+
+      {/* 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="#4794E2" 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="#4794E2" 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="#4794E2" />
+      <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="#4794E2" />
+      <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="#4794E2" />
+      <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="#4794E2" />
+      <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="#4794E2" />
+
+      {/* 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="#4794E2" />
+
+      {/* 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="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────
 // Lookup map
 // ─────────────────────────────────────────────────────────────────────
@@ -224,4 +311,6 @@ export const BLOCK_CARD_ICONS: Record<string, React.FC> = {
   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" },
 };
 

package/components/builder/ColumnDragContext.tsx

@@ -32,6 +32,11 @@ export function ColumnDragProvider({ children }: ColumnDragProviderProps) {
             sectionKey={columnDrag.draggedSectionKey}
             columnKey={columnDrag.draggedColumnKey}
             position={columnDrag.overlayPosition}
+            // If hovering over a target, use its validity; if no target
+            // (empty space), stay in default (valid) state.
+            isValidDrop={
+              columnDrag.dropTarget ? columnDrag.dropTarget.isValid : true
+            }
           />
         )}
     </ColumnDragContext.Provider>