@morphika/andami 0.5.0 → 0.5.1

package/components/builder/editors/BeforeAfterBlockEditor.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { BeforeAfterBlock, ContentBlock } from "../../../lib/sanity/types";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { resolveColorHex } from "../../../lib/color-utils";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+  PlaybackIcon,
+  OptionsIcon,
+} from "./section-icons";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+  AssetPathInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+  SELECT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: BeforeAfterBlock;
+}
+
+export default function BeforeAfterBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const paletteSwatches = usePaletteSwatches();
+
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  const update = (updates: Partial<BeforeAfterBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<BeforeAfterBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const beforeType = block.before_media_type || "image";
+  const afterType = block.after_media_type || "image";
+
+  const effectiveWidth = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "width", block.width || "full"
+  );
+  const effectiveAspect = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "aspect_ratio", block.aspect_ratio || "16:9"
+  );
+  const effectiveOrientation = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "orientation", block.orientation || "horizontal"
+  );
+
+  const eitherIsVideo = beforeType === "video" || afterType === "video";
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* ── Before source ── */}
+      <SettingsSection title="Before" defaultOpen icon={<SourceIcon />}>
+        <SettingsField label="Media Type">
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "image", label: "Image" },
+                { value: "video", label: "Video" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => update({ before_media_type: opt.value })}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  beforeType === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Asset Path" hint="Relative path from seed URL">
+          <AssetPathInput
+            value={block.before_asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ before_asset_path: v })}
+            placeholder={beforeType === "video" ? "projects/slug/before.mp4" : "projects/slug/before.jpg"}
+            filterType={beforeType}
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.before_alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ before_alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the before media"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── After source ── */}
+      <SettingsSection title="After" icon={<SourceIcon />}>
+        <SettingsField label="Media Type">
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "image", label: "Image" },
+                { value: "video", label: "Video" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => update({ after_media_type: opt.value })}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  afterType === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Asset Path" hint="Relative path from seed URL">
+          <AssetPathInput
+            value={block.after_asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ after_asset_path: v })}
+            placeholder={afterType === "video" ? "projects/slug/after.mp4" : "projects/slug/after.jpg"}
+            filterType={afterType}
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.after_alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ after_alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the after media"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── Slider options ── */}
+      <SettingsSection title="Slider" icon={<OptionsIcon />}>
+        <ResponsiveField
+          label="Orientation"
+          block={block as ContentBlock}
+          property="orientation"
+          onReset={() => resetOverride("orientation")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "horizontal", label: "Horizontal" },
+                { value: "vertical", label: "Vertical" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateResponsive("orientation", opt.value)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveOrientation === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <SettingsField label="Initial Position" hint="0–100%">
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              min={0}
+              max={100}
+              value={block.initial_position ?? 50}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                const n = Math.max(0, Math.min(100, Number(e.target.value) || 0));
+                updateDebounced({ initial_position: n });
+              }}
+              className={INPUT_CLASS}
+              placeholder="50"
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">%</span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Handle Color">
+          <ColorSwatchPicker
+            value={block.handle_color || "#FFFFFF"}
+            onChange={(value) => {
+              const hex = resolveColorHex(value) || "#FFFFFF";
+              update({ handle_color: hex });
+            }}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── Layout ── */}
+      <SettingsSection title="Layout" icon={<LayoutIcon />}>
+        <ResponsiveField
+          label="Width"
+          block={block as ContentBlock}
+          property="width"
+          onReset={() => resetOverride("width")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "full", label: "Full" },
+                { value: "contained", label: "Contained" },
+                { value: "small", label: "Small" },
+                { value: "fill", label: "Fill" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateResponsive("width", opt.value)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveWidth === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Aspect Ratio"
+          block={block as ContentBlock}
+          property="aspect_ratio"
+          onReset={() => resetOverride("aspect_ratio")}
+        >
+          <select
+            value={effectiveAspect}
+            onChange={(e) => updateResponsive("aspect_ratio", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="auto">Auto</option>
+            <option value="16:9">16:9</option>
+            <option value="4:3">4:3</option>
+            <option value="1:1">1:1</option>
+            <option value="21:9">21:9</option>
+          </select>
+        </ResponsiveField>
+      </SettingsSection>
+
+      {/* ── Appearance ── */}
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
+        <ResponsiveField
+          label="Border Radius"
+          block={block as ContentBlock}
+          property="border_radius"
+          onReset={() => resetOverride("border_radius")}
+        >
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              value={String(getEffectiveValue<string>(block as ContentBlock, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                store._pushSnapshot();
+                updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
+              }}
+              className={INPUT_CLASS}
+              placeholder="0"
+              min={0}
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">px</span>
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Shadow"
+          block={block as ContentBlock}
+          property="shadow"
+          onReset={() => resetOverride("shadow")}
+        >
+          <button
+            type="button"
+            onClick={() => {
+              const effectiveShadow = getEffectiveValue<boolean>(block as ContentBlock, viewport, "shadow", block.shadow || false);
+              updateResponsive("shadow", !effectiveShadow);
+            }}
+            className={`relative w-8 h-[18px] rounded-full transition-colors ${
+              getEffectiveValue<boolean>(block as ContentBlock, viewport, "shadow", block.shadow || false) ? "bg-[#076bff]" : "bg-neutral-200 hover:bg-neutral-300"
+            }`}
+          >
+            <span
+              className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow-sm transition-transform ${
+                getEffectiveValue<boolean>(block as ContentBlock, viewport, "shadow", block.shadow || false) ? "left-[16px]" : "left-[2px]"
+              }`}
+            />
+          </button>
+        </ResponsiveField>
+      </SettingsSection>
+
+      {/* ── Video playback (only shown when at least one side is video) ── */}
+      {eitherIsVideo && (
+        <SettingsSection title="Playback" icon={<PlaybackIcon />}>
+          <div className="space-y-1.5">
+            <StyledCheckbox
+              label="Autoplay"
+              checked={block.video_autoplay !== false}
+              onChange={(checked) => update({ video_autoplay: checked })}
+            />
+            <StyledCheckbox
+              label="Loop"
+              checked={block.video_loop !== false}
+              onChange={(checked) => update({ video_loop: checked })}
+            />
+            <StyledCheckbox
+              label="Muted"
+              checked={block.video_muted !== false}
+              onChange={(checked) => update({ video_muted: checked })}
+            />
+          </div>
+        </SettingsSection>
+      )}
+    </>
+  );
+}

package/components/builder/editors/shared.tsx

@@ -320,7 +320,7 @@ export function AssetPathInput({
   onChange: (value: string) => void;
   onFocus?: () => void;
   placeholder?: string;
-  filterType?: "image" | "video" | "all";
+  filterType?: "image" | "video" | "audio" | "all";
 }) {
   const [browserOpen, setBrowserOpen] = useState(false);
 

package/components/builder/live-preview/LiveAudioPreview.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { AudioBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveAudioPreview — Static preview for builder canvas.
+ *
+ * Same layout as the runtime renderer but no audio element / no playback —
+ * a frozen snapshot with a 0% progress bar, a play glyph, and a dummy
+ * `0:00 / 0:00` time label. Metadata (title / artist) and cover art
+ * render when present.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+export default function LiveAudioPreview({ block }: { block: AudioBlock }) {
+  const accent = block.accent_color || "#4794E2";
+  const coverSrc = block.cover_path ? (adminThumbUrl(block.cover_path) || adminAssetUrl(block.cover_path)) : null;
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? { width: "100%" } : (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 hasMetaText = !!(block.title || block.artist);
+  const hasAsset = !!block.asset_path;
+
+  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",
+    opacity: hasAsset ? 1 : 0.75,
+  };
+
+  return (
+    <div style={containerStyle}>
+      {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 || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
+        </div>
+      ) : null}
+
+      <div
+        aria-hidden
+        style={{
+          width: 40,
+          height: 40,
+          flexShrink: 0,
+          borderRadius: "50%",
+          background: accent,
+          color: "#fff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 2 }}>
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </div>
+
+      <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>
+        ) : (
+          !hasAsset && (
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>Audio — pick a file</span>
+          )
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div style={{ flex: 1, height: 4, background: "#e5e5e5", borderRadius: 999, position: "relative" }}>
+            <div style={{ position: "absolute", inset: 0, width: "0%", background: accent, borderRadius: 999 }} />
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "0%",
+                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" }}>
+            0:00 / 0:00
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/builder/live-preview/LiveBeforeAfterPreview.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { BeforeAfterBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveBeforeAfterPreview — Static preview for builder canvas.
+ *
+ * Shows both assets with a fixed 50% split (or the configured `initial_position`)
+ * and a divider line + knob — no drag interaction in the builder. Videos are
+ * represented by a poster-style thumbnail with a play glyph (no streaming /
+ * autoplay inside the builder).
+ */
+
+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 PreviewMedia({
+  type,
+  path,
+  alt,
+}: {
+  type: "image" | "video";
+  path: string;
+  alt: string;
+}) {
+  const src = adminThumbUrl(path) || adminAssetUrl(path);
+  const commonStyle: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    pointerEvents: "none",
+    userSelect: "none",
+  };
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={src} alt={alt} loading="lazy" decoding="async" draggable={false} style={commonStyle} />
+      {type === "video" && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
+          <div style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(0,0,0,0.55)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ color: "#FFFFFF", fontSize: 16, marginLeft: 2 }}>&#9654;</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function LiveBeforeAfterPreview({ block }: { block: BeforeAfterBlock }) {
+  const beforeType = block.before_media_type ?? "image";
+  const afterType = block.after_media_type ?? "image";
+  const orientation = block.orientation ?? "horizontal";
+  const position = clamp(block.initial_position ?? 50);
+  const handleColor = block.handle_color || "#FFFFFF";
+
+  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 hasBefore = !!block.before_asset_path;
+  const hasAfter = !!block.after_asset_path;
+
+  // Empty state: no assets on either side
+  if (!hasBefore && !hasAfter) {
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
+    return (
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <line x1="28" y1="10" x2="28" y2="46" stroke="#b0b5bd" strokeWidth="1.5" />
+            <circle cx="28" cy="28" r="5" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">Before / After — pick two assets</span>
+        </div>
+      </div>
+    );
+  }
+
+  const afterClip = orientation === "horizontal"
+    ? `inset(0 0 0 ${position}%)`
+    : `inset(${position}% 0 0 0)`;
+
+  const dividerStyle: 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: 32,
+    height: 32,
+    borderRadius: "50%",
+    background: handleColor,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+  };
+
+  const ArrowIcon = orientation === "horizontal" ? (
+    <svg width="14" height="14" 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="14" height="14" 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>
+  );
+
+  const frameStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden", background: "#222" }
+    : { position: "relative", ...widthStyle, aspectRatio: aspect, borderRadius, overflow: "hidden", background: "#222" };
+
+  const shadowClass = block.shadow ? "shadow-lg" : "";
+
+  return (
+    <div className={shadowClass} style={frameStyle}>
+      {/* Before layer */}
+      <div style={{ position: "absolute", inset: 0 }}>
+        {hasBefore ? (
+          <PreviewMedia type={beforeType} path={block.before_asset_path} alt={block.before_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#e7e9ed", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No before asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* After layer — clipped by position */}
+      <div style={{ position: "absolute", inset: 0, clipPath: afterClip, WebkitClipPath: afterClip }}>
+        {hasAfter ? (
+          <PreviewMedia type={afterType} path={block.after_asset_path} alt={block.after_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#d8dbe0", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No after asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* Divider + knob */}
+      <div style={dividerStyle}>
+        <div style={knobStyle}>{ArrowIcon}</div>
+      </div>
+    </div>
+  );
+}

package/lib/animation/enter-types.ts

@@ -73,6 +73,8 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   imageGridBlock:         ["fade", "scale", "slide-up"],
   videoBlock:             ["fade", "slide-up"],
   buttonBlock:            ["fade", "slide-up", "scale"],
+  beforeAfterBlock:       ["fade", "slide-up", "scale"],
+  audioBlock:             ["fade", "slide-up", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
   projectCarouselBlock:   [],           // uses card_entrance system

package/lib/animation/hover-effect-types.ts

@@ -66,6 +66,8 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   imageGridBlock:         ["tilt-3d"],
   videoBlock:             [],   // video has play/pause interaction
   buttonBlock:            ["scale-up", "lift", "border-glow"],
+  beforeAfterBlock:       [],   // slider handles its own drag interaction
+  audioBlock:             [],   // audio has play/pause interaction
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
   projectCarouselBlock:   [],   // uses per-card hover_effect field directly