@morphika/andami 0.5.1 → 0.5.3

package/components/builder/editors/AudioBlockEditor.tsx

@@ -1,242 +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>
-    </>
-  );
-}
+"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-[#3580f9] bg-[#3580f9]/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 || "#3580f9"}
+            onChange={(value) => {
+              const hex = resolveColorHex(value) || "#3580f9";
+              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-[#3580f9]" : "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>
+    </>
+  );
+}