@morphika/andami 0.5.0 → 0.5.2

package/components/builder/editors/ProjectGridEditor.tsx

@@ -72,7 +72,7 @@ function SegmentedControl<T extends string>({
             onClick={() => onChange(opt.value)}
             className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
             }`}
           >
@@ -112,7 +112,7 @@ function RangeSlider({
         step={step}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1 h-1 accent-[#076bff] cursor-pointer"
+        className="flex-1 h-1 accent-[#3580f9] cursor-pointer"
       />
       <span className="text-[11px] text-neutral-500 w-8 text-right tabular-nums shrink-0">
         {value}{suffix}
@@ -154,7 +154,7 @@ function RatioChips({
             onClick={() => toggle(opt.value)}
             className={`flex-1 flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
             }`}
           >
@@ -206,7 +206,7 @@ function CardRatioChips({
             onClick={() => onChange(opt.value as "16/9" | "1/1" | "9/16" | null)}
             className={`flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
             }`}
           >
@@ -511,7 +511,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                 <React.Fragment key={item._key}>
                 <div
                   className={`flex items-center gap-2 px-2 py-1.5 group cursor-pointer transition-colors ${
-                    isCardSelected ? "bg-[#076bff]/10 ring-1 ring-[#076bff]/30 rounded-t-lg" : "bg-[#f5f5f5] hover:bg-[#efefef] rounded-lg"
+                    isCardSelected ? "bg-[#3580f9]/10 ring-1 ring-[#3580f9]/30 rounded-t-lg" : "bg-[#f5f5f5] hover:bg-[#efefef] rounded-lg"
                   }`}
                   onClick={() => selectProjectCard(isCardSelected ? null : item._key)}
                 >
@@ -576,10 +576,10 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
 
                 {/* Per-card settings — expanded below this project row */}
                 {isCardSelected && (
-                  <div className="px-2 pb-2 pt-1 -mt-1 rounded-b-lg bg-[#076bff]/5 border-x border-b border-[#076bff]/15">
+                  <div className="px-2 pb-2 pt-1 -mt-1 rounded-b-lg bg-[#3580f9]/5 border-x border-b border-[#3580f9]/15">
                     {isResponsive && (
-                      <div className="flex items-center gap-1.5 px-2 py-1 mb-1 rounded bg-[#076bff]/8">
-                        <span className="text-[10px] font-medium text-[#076bff]">
+                      <div className="flex items-center gap-1.5 px-2 py-1 mb-1 rounded bg-[#3580f9]/8">
+                        <span className="text-[10px] font-medium text-[#3580f9]">
                           {activeViewport === "tablet" ? "Tablet" : "Phone"} override
                         </span>
                       </div>
@@ -614,7 +614,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                 placeholder="Search projects..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="w-full rounded-md bg-[#f5f5f5] px-2.5 py-1.5 text-xs text-neutral-900 placeholder:text-neutral-400 outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/20"
+                className="w-full rounded-md bg-[#f5f5f5] px-2.5 py-1.5 text-xs text-neutral-900 placeholder:text-neutral-400 outline-none focus:bg-white focus:ring-1 focus:ring-[#3580f9]/20"
                 autoFocus
               />
             </div>

package/components/builder/editors/SpacerBlockEditor.tsx

@@ -85,7 +85,7 @@ export default function SpacerBlockEditor({ block }: Props) {
                 onClick={() => updateResponsive("height", preset.value)}
                 className={`flex-1 rounded border py-1.5 text-xs transition-colors flex flex-col items-center gap-0.5 ${
                   effectiveHeight === preset.value
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
                 title={
@@ -122,7 +122,7 @@ export default function SpacerBlockEditor({ block }: Props) {
                 onChange={(e) =>
                   updateResponsive("custom_height", parseInt(e.target.value))
                 }
-                className="flex-1 accent-[#076bff]"
+                className="flex-1 accent-[#3580f9]"
               />
               <input
                 type="number"
@@ -146,9 +146,9 @@ export default function SpacerBlockEditor({ block }: Props) {
               style={{ height: `${Math.min(currentPx, 200)}px` }}
             >
               <div className="absolute left-0 right-0 top-1/2 border-t border-dashed border-neutral-200" />
-              <div className="absolute left-2 top-0 w-px h-2 bg-[#076bff]" />
-              <div className="absolute left-2 bottom-0 w-px h-2 bg-[#076bff]" />
-              <div className="absolute left-2 top-0 bottom-0 w-px bg-[#076bff]/20" />
+              <div className="absolute left-2 top-0 w-px h-2 bg-[#3580f9]" />
+              <div className="absolute left-2 bottom-0 w-px h-2 bg-[#3580f9]" />
+              <div className="absolute left-2 top-0 bottom-0 w-px bg-[#3580f9]/20" />
               <div className="absolute inset-0 flex items-center justify-center">
                 <span className="text-xs text-neutral-500 bg-white/80 px-1.5 py-0.5 rounded">
                   {currentPx}px

package/components/builder/editors/StaggerSettings.tsx

@@ -1,109 +1,109 @@
-import { StaggerIcon } from "./section-icons";
-import { SettingsSection, SettingsField } from "./shared";
-
-// ============================================
-// Types
-// ============================================
-
-export interface StaggerConfig {
-  enabled?: boolean;
-  delayPerChild?: number;
-  direction?: "left-to-right" | "right-to-left";
-}
-
-// ============================================
-// CSS constants
-// ============================================
-
-const SLIDER_CLASS =
-  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
-
-const TOGGLE_CLASS_ON =
-  "relative w-8 h-[18px] rounded-full bg-[#076bff] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[15px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
-
-const TOGGLE_CLASS_OFF =
-  "relative w-8 h-[18px] rounded-full bg-[#d4d4d4] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
-
-// ============================================
-// Stagger Section (row mode only)
-// ============================================
-
-export default function StaggerSettings({
-  stagger,
-  onChange,
-}: {
-  stagger?: StaggerConfig;
-  onChange: (s: StaggerConfig) => void;
-}) {
-  const enabled = stagger?.enabled ?? false;
-  const delay = stagger?.delayPerChild ?? 100;
-  const direction = stagger?.direction ?? "left-to-right";
-
-  return (
-    <SettingsSection title="Stagger Children" icon={<StaggerIcon />}>
-      <div className="space-y-3">
-        {/* Enable toggle */}
-        <div className="flex items-center justify-between">
-          <span className="text-[11px] text-neutral-500">
-            {enabled ? "Enabled" : "Disabled"}
-          </span>
-          <button
-            type="button"
-            onClick={() => onChange({ ...stagger, enabled: !enabled })}
-            className={enabled ? TOGGLE_CLASS_ON : TOGGLE_CLASS_OFF}
-            aria-label={enabled ? "Stagger enabled" : "Stagger disabled"}
-          />
-        </div>
-
-        {enabled && (
-          <>
-            {/* Delay slider */}
-            <SettingsField label={`Delay — ${delay}ms`}>
-              <input
-                type="range"
-                min={50}
-                max={5000}
-                step={10}
-                value={delay}
-                onChange={(e) =>
-                  onChange({ ...stagger, enabled: true, delayPerChild: Number(e.target.value) })
-                }
-                className={SLIDER_CLASS}
-              />
-              <div className="flex justify-between mt-0.5">
-                <span className="text-[10px] text-neutral-400">50ms</span>
-                <span className="text-[10px] text-neutral-400">5000ms</span>
-              </div>
-            </SettingsField>
-
-            {/* Direction */}
-            <SettingsField label="Direction">
-              <div className="flex gap-1">
-                <button
-                  onClick={() => onChange({ ...stagger, enabled: true, direction: "left-to-right" })}
-                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
-                    direction === "left-to-right"
-                      ? "bg-[#076bff] text-white"
-                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
-                  }`}
-                >
-                  L → R
-                </button>
-                <button
-                  onClick={() => onChange({ ...stagger, enabled: true, direction: "right-to-left" })}
-                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
-                    direction === "right-to-left"
-                      ? "bg-[#076bff] text-white"
-                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
-                  }`}
-                >
-                  R → L
-                </button>
-              </div>
-            </SettingsField>
-          </>
-        )}
-      </div>
-    </SettingsSection>
-  );
-}
+import { StaggerIcon } from "./section-icons";
+import { SettingsSection, SettingsField } from "./shared";
+
+// ============================================
+// Types
+// ============================================
+
+export interface StaggerConfig {
+  enabled?: boolean;
+  delayPerChild?: number;
+  direction?: "left-to-right" | "right-to-left";
+}
+
+// ============================================
+// CSS constants
+// ============================================
+
+const SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#3580f9] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#3580f9] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+const TOGGLE_CLASS_ON =
+  "relative w-8 h-[18px] rounded-full bg-[#3580f9] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[15px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+const TOGGLE_CLASS_OFF =
+  "relative w-8 h-[18px] rounded-full bg-[#d4d4d4] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+// ============================================
+// Stagger Section (row mode only)
+// ============================================
+
+export default function StaggerSettings({
+  stagger,
+  onChange,
+}: {
+  stagger?: StaggerConfig;
+  onChange: (s: StaggerConfig) => void;
+}) {
+  const enabled = stagger?.enabled ?? false;
+  const delay = stagger?.delayPerChild ?? 100;
+  const direction = stagger?.direction ?? "left-to-right";
+
+  return (
+    <SettingsSection title="Stagger Children" icon={<StaggerIcon />}>
+      <div className="space-y-3">
+        {/* Enable toggle */}
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-neutral-500">
+            {enabled ? "Enabled" : "Disabled"}
+          </span>
+          <button
+            type="button"
+            onClick={() => onChange({ ...stagger, enabled: !enabled })}
+            className={enabled ? TOGGLE_CLASS_ON : TOGGLE_CLASS_OFF}
+            aria-label={enabled ? "Stagger enabled" : "Stagger disabled"}
+          />
+        </div>
+
+        {enabled && (
+          <>
+            {/* Delay slider */}
+            <SettingsField label={`Delay — ${delay}ms`}>
+              <input
+                type="range"
+                min={50}
+                max={5000}
+                step={10}
+                value={delay}
+                onChange={(e) =>
+                  onChange({ ...stagger, enabled: true, delayPerChild: Number(e.target.value) })
+                }
+                className={SLIDER_CLASS}
+              />
+              <div className="flex justify-between mt-0.5">
+                <span className="text-[10px] text-neutral-400">50ms</span>
+                <span className="text-[10px] text-neutral-400">5000ms</span>
+              </div>
+            </SettingsField>
+
+            {/* Direction */}
+            <SettingsField label="Direction">
+              <div className="flex gap-1">
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "left-to-right" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "left-to-right"
+                      ? "bg-[#3580f9] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  L → R
+                </button>
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "right-to-left" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "right-to-left"
+                      ? "bg-[#3580f9] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  R → L
+                </button>
+              </div>
+            </SettingsField>
+          </>
+        )}
+      </div>
+    </SettingsSection>
+  );
+}

package/components/builder/editors/TextBlockEditor.tsx

@@ -62,7 +62,7 @@ function ResponsiveStyleField({
           <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
         )}
         {isOverridden && (
-          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+          <span className="block text-[9px] text-[#3580f9] mt-0.5">overridden</span>
         )}
       </label>
       <div className="flex-1 min-w-0">
@@ -310,7 +310,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
         </ResponsiveStyleField>
 
         <ResponsiveStyleField label="Size" subProp="fontSize" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontSize")} onReset={resetStyleOverride}>
-          <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#076bff] focus-within:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]">
+          <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#3580f9] focus-within:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]">
             <input
               type="number"
               min={1}
@@ -450,7 +450,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
               onChange={(e) =>
                 updateStyleResponsive("opacity", parseInt(e.target.value) / 100)
               }
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
               {Math.round((getEffectiveStyleValue<number>("opacity", style.opacity ?? 1)) * 100)}%

package/components/builder/editors/TextStylePicker.tsx

@@ -134,7 +134,7 @@ export default function TextStylePicker({
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Search..."
                 autoFocus
-                className="w-full rounded-md bg-[#f5f5f5] px-2 py-1.5 text-xs text-neutral-900 border-none outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/30"
+                className="w-full rounded-md bg-[#f5f5f5] px-2 py-1.5 text-xs text-neutral-900 border-none outline-none focus:bg-white focus:ring-1 focus:ring-[#3580f9]/30"
               />
             </div>
             <div className="max-h-[220px] overflow-y-auto py-1">

package/components/builder/editors/VideoBlockEditor.tsx

@@ -111,7 +111,7 @@ export default function VideoBlockEditor({ block }: Props) {
                 onClick={() => update({ video_type: opt.value })}
                 className={`flex-1 rounded border py-1 text-xs transition-colors ${
                   (block.video_type || "vimeo") === opt.value
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >
@@ -200,7 +200,7 @@ export default function VideoBlockEditor({ block }: Props) {
                 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-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >

package/components/builder/editors/index.ts

@@ -1,10 +1,11 @@
-export { default as TextBlockEditor } from "./TextBlockEditor";
-export { default as ImageBlockEditor } from "./ImageBlockEditor";
-export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
-export { default as VideoBlockEditor } from "./VideoBlockEditor";
-export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
-export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
-export { default as ProjectGridEditor } from "./ProjectGridEditor";
-export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
-export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
-export { getSpacerPx } from "./SpacerBlockEditor";
+export { default as TextBlockEditor } from "./TextBlockEditor";
+export { default as ImageBlockEditor } from "./ImageBlockEditor";
+export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
+export { default as VideoBlockEditor } from "./VideoBlockEditor";
+export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
+export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
+export { default as ProjectGridEditor } from "./ProjectGridEditor";
+export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
+export { default as MarqueeBlockEditor } from "./MarqueeBlockEditor";
+export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
+export { getSpacerPx } from "./SpacerBlockEditor";

package/components/builder/editors/shared.tsx

@@ -13,11 +13,11 @@ import AssetBrowser from "../AssetBrowser";
 
 /** Base input class: gray bg, no border, border on focus */
 const INPUT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
 
 /** Select class — same as input */
 const SELECT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
 
 // ============================================
 // Hooks
@@ -47,8 +47,8 @@ export function ViewportBadge() {
   };
 
   return (
-    <div className="flex items-center gap-1.5 px-3 py-1.5 mb-2 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-      <span className="text-[11px] font-medium text-[#076bff]">
+    <div className="flex items-center gap-1.5 px-3 py-1.5 mb-2 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+      <span className="text-[11px] font-medium text-[#3580f9]">
         Editing {labels[viewport]} overrides
       </span>
     </div>
@@ -88,7 +88,7 @@ export function ResponsiveField({
           <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
         )}
         {isOverridden && (
-          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+          <span className="block text-[9px] text-[#3580f9] mt-0.5">overridden</span>
         )}
       </label>
       <div className="flex-1 min-w-0">
@@ -291,7 +291,7 @@ export function StyledCheckbox({
           type="button"
           onClick={() => onChange(!checked)}
           className={`relative w-8 h-[18px] rounded-full transition-colors ${
-            checked ? "bg-[#076bff]" : "bg-neutral-200 group-hover:bg-neutral-300"
+            checked ? "bg-[#3580f9]" : "bg-neutral-200 group-hover:bg-neutral-300"
           }`}
         >
           <span
@@ -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 || "#3580f9";
+  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>
+  );
+}