@morphika/andami 0.5.0 → 0.5.2

package/components/builder/color-picker/SwatchBar.tsx

@@ -1,93 +1,93 @@
-"use client";
-
-/**
- * SwatchBar — User palette swatches + common neutral colors.
- *
- * Integrated inside the color picker modal. Shows:
- * - "Your Palette" row with user swatches + an "add to palette" button
- * - "Common" row with standard neutrals (white → black)
- */
-
-import { useCallback } from "react";
-import type { SwatchBarProps } from "./types";
-
-// Common neutral colors always available
-const COMMON_COLORS = [
-  "#ffffff",
-  "#f5f5f5",
-  "#e5e5e5",
-  "#a3a3a3",
-  "#525252",
-  "#262626",
-  "#171717",
-  "#000000",
-];
-
-export default function SwatchBar({
-  value,
-  onSelect,
-  swatches = [],
-}: SwatchBarProps) {
-  const handleSwatchClick = useCallback(
-    (hex: string) => {
-      onSelect(hex);
-    },
-    [onSelect]
-  );
-
-  return (
-    <div className="border-t border-neutral-200 pt-4">
-      {/* User palette */}
-      {swatches.length > 0 && (
-        <div className="mb-3">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-[10px] text-neutral-400 uppercase tracking-widest">
-              Your Palette
-            </span>
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {swatches.map((s, i) => (
-              <button
-                key={s._key || `swatch-${i}`}
-                type="button"
-                onClick={() => handleSwatchClick(s.hex)}
-                title={`${s.name}: ${s.hex}`}
-                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
-                  value.toLowerCase() === s.hex.toLowerCase()
-                    ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                    : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
-                }`}
-                style={{ background: s.hex }}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Common colors */}
-      <div>
-        {swatches.length > 0 && (
-          <span className="text-[10px] text-neutral-400 uppercase tracking-widest block mb-2">
-            Common
-          </span>
-        )}
-        <div className="flex gap-1">
-          {COMMON_COLORS.map((c) => (
-            <button
-              key={c}
-              type="button"
-              onClick={() => handleSwatchClick(c)}
-              title={c.toUpperCase()}
-              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
-                value.toLowerCase() === c
-                  ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                  : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
-              }`}
-              style={{ background: c }}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+/**
+ * SwatchBar — User palette swatches + common neutral colors.
+ *
+ * Integrated inside the color picker modal. Shows:
+ * - "Your Palette" row with user swatches + an "add to palette" button
+ * - "Common" row with standard neutrals (white → black)
+ */
+
+import { useCallback } from "react";
+import type { SwatchBarProps } from "./types";
+
+// Common neutral colors always available
+const COMMON_COLORS = [
+  "#ffffff",
+  "#f5f5f5",
+  "#e5e5e5",
+  "#a3a3a3",
+  "#525252",
+  "#262626",
+  "#171717",
+  "#000000",
+];
+
+export default function SwatchBar({
+  value,
+  onSelect,
+  swatches = [],
+}: SwatchBarProps) {
+  const handleSwatchClick = useCallback(
+    (hex: string) => {
+      onSelect(hex);
+    },
+    [onSelect]
+  );
+
+  return (
+    <div className="border-t border-neutral-200 pt-4">
+      {/* User palette */}
+      {swatches.length > 0 && (
+        <div className="mb-3">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[10px] text-neutral-400 uppercase tracking-widest">
+              Your Palette
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {swatches.map((s, i) => (
+              <button
+                key={s._key || `swatch-${i}`}
+                type="button"
+                onClick={() => handleSwatchClick(s.hex)}
+                title={`${s.name}: ${s.hex}`}
+                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
+                  value.toLowerCase() === s.hex.toLowerCase()
+                    ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
+                    : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+                }`}
+                style={{ background: s.hex }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Common colors */}
+      <div>
+        {swatches.length > 0 && (
+          <span className="text-[10px] text-neutral-400 uppercase tracking-widest block mb-2">
+            Common
+          </span>
+        )}
+        <div className="flex gap-1">
+          {COMMON_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => handleSwatchClick(c)}
+              title={c.toUpperCase()}
+              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
+                value.toLowerCase() === c
+                  ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
+                  : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+              }`}
+              style={{ background: c }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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-[#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>
+    </>
+  );
+}