@morphika/andami 0.1.2

package/components/builder/editors/CoverBlockEditor.tsx

@@ -0,0 +1,488 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { CoverBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledInput,
+  StyledCheckbox,
+  AssetPathInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  SELECT_CLASS,
+} from "./shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+
+interface Props {
+  block: CoverBlock;
+}
+
+// ============================================
+// 9-point position grid (Semplice-style)
+// ============================================
+
+const POSITIONS = [
+  { label: "↖", value: "top left" },
+  { label: "↑", value: "top center" },
+  { label: "↗", value: "top right" },
+  { label: "←", value: "center left" },
+  { label: "·", value: "center center" },
+  { label: "→", value: "center right" },
+  { label: "↙", value: "bottom left" },
+  { label: "↓", value: "bottom center" },
+  { label: "↘", value: "bottom right" },
+];
+
+function PositionGrid({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-0.5 w-[84px]">
+      {POSITIONS.map((pos) => (
+        <button
+          key={pos.value}
+          onClick={() => onChange(pos.value)}
+          className={`w-7 h-7 rounded text-[10px] flex items-center justify-center transition-colors ${
+            value === pos.value
+              ? "bg-[#076bff] text-white"
+              : "bg-neutral-100 text-neutral-400 hover:bg-neutral-200"
+          }`}
+          title={pos.value}
+        >
+          {pos.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ============================================
+// 3x3 content alignment grid
+// ============================================
+
+function ContentAlignGrid({
+  alignH,
+  alignV,
+  onChangeH,
+  onChangeV,
+}: {
+  alignH: string;
+  alignV: string;
+  onChangeH: (v: "left" | "center" | "right") => void;
+  onChangeV: (v: "top" | "center" | "bottom") => void;
+}) {
+  const vOptions: Array<{ label: string; value: "top" | "center" | "bottom" }> = [
+    { label: "T", value: "top" },
+    { label: "M", value: "center" },
+    { label: "B", value: "bottom" },
+  ];
+  const hOptions: Array<{ label: string; value: "left" | "center" | "right" }> = [
+    { label: "L", value: "left" },
+    { label: "C", value: "center" },
+    { label: "R", value: "right" },
+  ];
+
+  return (
+    <div className="grid grid-cols-3 gap-0.5 w-[84px]">
+      {vOptions.map((v) =>
+        hOptions.map((h) => {
+          const isActive = alignH === h.value && alignV === v.value;
+          return (
+            <button
+              key={`${v.value}-${h.value}`}
+              onClick={() => {
+                onChangeH(h.value);
+                onChangeV(v.value);
+              }}
+              className={`w-7 h-7 rounded flex items-center justify-center transition-colors ${
+                isActive
+                  ? "bg-[#076bff] text-white"
+                  : "bg-neutral-100 text-neutral-400 hover:bg-neutral-200"
+              }`}
+              title={`${v.value} ${h.value}`}
+            >
+              <div
+                className={`w-1.5 h-1.5 rounded-full ${
+                  isActive ? "bg-white" : "bg-neutral-400"
+                }`}
+              />
+            </button>
+          );
+        })
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Main Editor
+// ============================================
+
+export default function CoverBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const paletteSwatches = usePaletteSwatches();
+  const cta = block.cta_button || {};
+
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  // Responsive-aware update
+  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 updateResponsiveDebounced = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlockDebounced(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      store.updateBlockDebounced(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>);
+  };
+
+  // Direct update (base block, not responsive)
+  const update = (updates: Partial<CoverBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<CoverBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  // Effective values for the active viewport
+  const effectiveHeight = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "height", block.height || "100vh"
+  );
+  const effectiveCustomHeight = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "custom_height", block.custom_height || ""
+  );
+  const effectiveAlignH = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "content_align_h", block.content_align_h || "center"
+  );
+  const effectiveAlignV = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "content_align_v", block.content_align_v || "center"
+  );
+  const effectiveMaxWidth = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "content_max_width", block.content_max_width || "800px"
+  );
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* ========== CONTENT ========== */}
+      <SettingsSection title="Content" defaultOpen>
+        <SettingsField label="Headline">
+          <StyledInput
+            value={block.headline || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ headline: v })}
+            placeholder="Page Headline"
+          />
+        </SettingsField>
+
+        <SettingsField label="Subheadline">
+          <StyledInput
+            value={block.subheadline || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ subheadline: v })}
+            placeholder="Supporting text"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ========== CTA BUTTON ========== */}
+      <SettingsSection title="CTA Button">
+        <SettingsField label="Button Text">
+          <StyledInput
+            value={cta.text || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) =>
+              updateDebounced({ cta_button: { ...cta, text: v } })
+            }
+            placeholder="View Project"
+          />
+        </SettingsField>
+
+        <SettingsField label="Button URL">
+          <StyledInput
+            value={cta.url || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) =>
+              updateDebounced({ cta_button: { ...cta, url: v } })
+            }
+            placeholder="/work/project-name"
+          />
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <div className="flex gap-1">
+            {(["primary", "secondary", "outline", "text"] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() =>
+                  update({ cta_button: { ...cta, style: s } })
+                }
+                className={`flex-1 rounded border py-1 text-[10px] capitalize transition-colors ${
+                  (cta.style || "primary") === s
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <StyledCheckbox
+          label="Open in new tab"
+          checked={cta.target_blank || false}
+          onChange={(v) =>
+            update({ cta_button: { ...cta, target_blank: v } })
+          }
+        />
+      </SettingsSection>
+
+      {/* ========== MEDIA BACKGROUND ========== */}
+      <SettingsSection title="Cover Background" defaultOpen>
+        <SettingsField label="Media Type">
+          <div className="flex gap-1">
+            {(["image", "video"] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() => update({ media_type: t })}
+                className={`flex-1 rounded border py-1.5 text-xs capitalize transition-colors ${
+                  (block.media_type || "image") === t
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField
+          label={block.media_type === "video" ? "Video Path" : "Image Path"}
+        >
+          <AssetPathInput
+            value={block.media_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ media_path: v })}
+            placeholder={
+              block.media_type === "video"
+                ? "projects/cover.mp4"
+                : "projects/cover.jpg"
+            }
+            filterType={block.media_type === "video" ? "video" : "image"}
+          />
+        </SettingsField>
+
+        {block.media_type === "video" && (
+          <SettingsField label="Poster Image" hint="Fallback while video loads">
+            <AssetPathInput
+              value={block.video_poster || ""}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => updateDebounced({ video_poster: v })}
+              placeholder="projects/cover-poster.jpg"
+              filterType="image"
+            />
+          </SettingsField>
+        )}
+
+        <SettingsField label="Size">
+          <div className="flex gap-1">
+            {(["cover", "contain", "none"] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => update({ background_size: s })}
+                className={`flex-1 rounded border py-1 text-[10px] transition-colors ${
+                  (block.background_size || "cover") === s
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {s === "none" ? "No Scale" : s.charAt(0).toUpperCase() + s.slice(1)}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Position">
+          <PositionGrid
+            value={block.background_position || "center center"}
+            onChange={(v) => update({ background_position: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Repeat">
+          <select
+            value={block.background_repeat || "no-repeat"}
+            onChange={(e) =>
+              update({
+                background_repeat: e.target.value as CoverBlock["background_repeat"],
+              })
+            }
+            className={SELECT_CLASS}
+          >
+            <option value="no-repeat">No Repeat</option>
+            <option value="repeat">Repeat</option>
+            <option value="repeat-x">Repeat X</option>
+            <option value="repeat-y">Repeat Y</option>
+          </select>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ========== OVERLAY ========== */}
+      <SettingsSection title="Cover Effects">
+        <SettingsField label="Overlay">
+          <select
+            value={block.overlay || "dark"}
+            onChange={(e) =>
+              update({
+                overlay: e.target.value as CoverBlock["overlay"],
+              })
+            }
+            className={SELECT_CLASS}
+          >
+            <option value="none">None</option>
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+            <option value="gradient-bottom">Gradient (Bottom)</option>
+            <option value="gradient-top">Gradient (Top)</option>
+          </select>
+        </SettingsField>
+
+        {block.overlay && block.overlay !== "none" && (
+          <SettingsField label="Opacity">
+            <div className="flex items-center gap-2">
+              <input
+                type="range"
+                min={0}
+                max={100}
+                value={block.overlay_opacity ?? 50}
+                onChange={(e) =>
+                  update({ overlay_opacity: parseInt(e.target.value, 10) })
+                }
+                className="flex-1 accent-[#076bff]"
+              />
+              <span className="text-xs text-neutral-500 w-8 text-right">
+                {block.overlay_opacity ?? 50}%
+              </span>
+            </div>
+          </SettingsField>
+        )}
+      </SettingsSection>
+
+      {/* ========== LAYOUT ========== */}
+      <SettingsSection title="Layout">
+        <ResponsiveField
+          label="Content Pos"
+          block={block as ContentBlock}
+          property="content_align_h"
+          onReset={() => {
+            resetOverride("content_align_h");
+            resetOverride("content_align_v");
+          }}
+        >
+          <ContentAlignGrid
+            alignH={effectiveAlignH}
+            alignV={effectiveAlignV}
+            onChangeH={(v) => updateResponsive("content_align_h", v)}
+            onChangeV={(v) => updateResponsive("content_align_v", v)}
+          />
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Max Width"
+          block={block as ContentBlock}
+          property="content_max_width"
+          hint="Text container width"
+          onReset={() => resetOverride("content_max_width")}
+        >
+          <StyledInput
+            value={effectiveMaxWidth}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateResponsiveDebounced("content_max_width", v)}
+            placeholder="800px"
+          />
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Height"
+          block={block as ContentBlock}
+          property="height"
+          onReset={() => resetOverride("height")}
+        >
+          <select
+            value={effectiveHeight}
+            onChange={(e) =>
+              updateResponsive("height", e.target.value)
+            }
+            className={SELECT_CLASS}
+          >
+            <option value="100vh">Full Screen (100vh)</option>
+            <option value="80vh">Large (80vh)</option>
+            <option value="60vh">Medium (60vh)</option>
+            <option value="40vh">Small (40vh)</option>
+            <option value="custom">Custom</option>
+          </select>
+        </ResponsiveField>
+
+        {effectiveHeight === "custom" && (
+          <ResponsiveField
+            label="Custom Height"
+            block={block as ContentBlock}
+            property="custom_height"
+            onReset={() => resetOverride("custom_height")}
+          >
+            <StyledInput
+              value={effectiveCustomHeight}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => updateResponsiveDebounced("custom_height", v)}
+              placeholder="500px, 70vh"
+            />
+          </ResponsiveField>
+        )}
+
+        {/* Legacy mobile_height removed — use tablet/phone viewport overrides instead */}
+      </SettingsSection>
+
+      {/* ========== APPEARANCE ========== */}
+      <SettingsSection title="Appearance">
+        <SettingsField label="Text Color">
+          <ColorSwatchPicker
+            value={block.text_color || ""}
+            onChange={(hex) => update({ text_color: hex || "#ffffff" })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <StyledCheckbox
+          label="Show scroll down arrow"
+          checked={block.show_scroll_indicator || false}
+          onChange={(v) => update({ show_scroll_indicator: v })}
+        />
+      </SettingsSection>
+    </>
+  );
+}