@morphika/andami 0.5.0 → 0.5.1

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/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);
@@ -153,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",
@@ -237,6 +249,7 @@ export default function SectionV2Canvas({
             }
             onResizeRight={handleResizeRight}
             onResizeLeft={handleResizeLeft}
+            fillHeight={fillHeight}
           >
             {(col.blocks || []).map((block, blockIdx) => (
               <SortableBlock
@@ -286,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

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,

package/components/builder/editors/AudioBlockEditor.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { AudioBlock, 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,
+} from "./shared";
+
+interface Props {
+  block: AudioBlock;
+}
+
+export default function AudioBlockEditor({ 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<AudioBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<AudioBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const effectiveWidth = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "width", block.width || "contained"
+  );
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* ── Source ── */}
+      <SettingsSection title="Audio" defaultOpen icon={<SourceIcon />}>
+        <SettingsField label="Audio File" hint="mp3, wav, ogg, m4a, aac, flac">
+          <AssetPathInput
+            value={block.asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ asset_path: v })}
+            placeholder="projects/slug/track.mp3"
+            filterType="audio"
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the audio for accessibility"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── Metadata ── */}
+      <SettingsSection title="Metadata" icon={<OptionsIcon />}>
+        <SettingsField label="Title">
+          <input
+            type="text"
+            value={block.title || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ title: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Track title"
+          />
+        </SettingsField>
+
+        <SettingsField label="Artist">
+          <input
+            type="text"
+            value={block.artist || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ artist: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Artist name"
+          />
+        </SettingsField>
+
+        <SettingsField label="Cover Art" hint="Optional relative path to an image">
+          <AssetPathInput
+            value={block.cover_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ cover_path: v })}
+            placeholder="projects/slug/cover.jpg"
+            filterType="image"
+          />
+        </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>
+      </SettingsSection>
+
+      {/* ── Appearance ── */}
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
+        <SettingsField label="Accent Color" hint="Play button + progress fill">
+          <ColorSwatchPicker
+            value={block.accent_color || "#4794E2"}
+            onChange={(value) => {
+              const hex = resolveColorHex(value) || "#4794E2";
+              update({ accent_color: hex });
+            }}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <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="12"
+              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>
+
+      {/* ── Playback ── */}
+      <SettingsSection title="Playback" icon={<PlaybackIcon />}>
+        <div className="space-y-1.5">
+          <StyledCheckbox
+            label="Autoplay"
+            checked={block.autoplay === true}
+            onChange={(checked) => update({ autoplay: checked })}
+          />
+          <StyledCheckbox
+            label="Loop"
+            checked={block.loop === true}
+            onChange={(checked) => update({ loop: checked })}
+          />
+          <StyledCheckbox
+            label="Muted"
+            checked={block.muted === true}
+            onChange={(checked) => update({ muted: checked })}
+          />
+        </div>
+      </SettingsSection>
+    </>
+  );
+}