@morphika/andami 0.2.11 → 0.2.13

package/components/builder/editors/CoverBlockEditor.tsx

@@ -1,550 +0,0 @@
-"use client";
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
-import type { CoverBlock, ContentBlock } from "../../../lib/sanity/types";
-import {
-  ContentIcon,
-  CTAButtonIcon,
-  CoverBackgroundIcon,
-  CoverEffectsIcon,
-  LayoutIcon,
-  AppearanceIcon,
-} from "./section-icons";
-import {
-  SettingsField,
-  SettingsSection,
-  StyledInput,
-  StyledCheckbox,
-  AssetPathInput,
-  ViewportBadge,
-  ResponsiveField,
-  useActiveViewport,
-  SELECT_CLASS,
-} from "./shared";
-import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
-import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
-import type { ColorField } from "../../../lib/sanity/types";
-
-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 icon={<ContentIcon />}>
-        <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" icon={<CTAButtonIcon />}>
-        <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 icon={<CoverBackgroundIcon />}>
-        <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" icon={<CoverEffectsIcon />}>
-        {/* Toggle: Custom gradient vs Preset overlay */}
-        <SettingsField label="Overlay Mode">
-          <div className="flex gap-1">
-            {(["preset", "custom"] as const).map((mode) => {
-              const isActive = mode === "custom" ? !!block.overlay_gradient : !block.overlay_gradient;
-              return (
-                <button
-                  key={mode}
-                  onClick={() => {
-                    if (mode === "custom" && !block.overlay_gradient) {
-                      // Switch to custom: initialize with a dark semi-transparent solid
-                      update({ overlay_gradient: "#00000080" });
-                    } else if (mode === "preset" && block.overlay_gradient) {
-                      // Switch to preset: clear overlay_gradient
-                      update({ overlay_gradient: undefined });
-                    }
-                  }}
-                  className={`flex-1 rounded border py-1 text-[10px] capitalize transition-colors ${
-                    isActive
-                      ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
-                      : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
-                  }`}
-                >
-                  {mode === "preset" ? "Preset" : "Custom"}
-                </button>
-              );
-            })}
-          </div>
-        </SettingsField>
-
-        {/* Preset overlay controls */}
-        {!block.overlay_gradient && (
-          <>
-            <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>
-            )}
-          </>
-        )}
-
-        {/* Custom overlay gradient (Phase 4) */}
-        {block.overlay_gradient && (
-          <SettingsField label="Overlay Color">
-            <ColorSwatchPicker
-              value={(() => {
-                const parsed = parseColorField(block.overlay_gradient);
-                return typeof parsed === "string" ? parsed : parsed;
-              })()}
-              onChange={(val: ColorField) => {
-                update({ overlay_gradient: serializeColorField(val) });
-              }}
-              swatches={paletteSwatches}
-              allowGradients
-            />
-          </SettingsField>
-        )}
-      </SettingsSection>
-
-      {/* ========== LAYOUT ========== */}
-      <SettingsSection title="Layout" icon={<LayoutIcon />}>
-        <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" icon={<AppearanceIcon />}>
-        <SettingsField label="Text Color">
-          <ColorSwatchPicker
-            value={block.text_color || ""}
-            onChange={(hex) => update({ text_color: (typeof hex === "string" ? hex : "#ffffff") || "#ffffff" })}
-            swatches={paletteSwatches}
-          />
-        </SettingsField>
-
-        <StyledCheckbox
-          label="Show scroll down arrow"
-          checked={block.show_scroll_indicator || false}
-          onChange={(v) => update({ show_scroll_indicator: v })}
-        />
-      </SettingsSection>
-    </>
-  );
-}

package/components/builder/live-preview/LiveCoverPreview.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-import { adminAssetUrl } from "../../../lib/assets";
-import { ThumbBadge } from "./shared";
-import type { CoverBlock } from "../../../lib/sanity/types";
-
-export default function LiveCoverPreview({ block }: { block: CoverBlock }) {
-  const mediaSrc = block.media_path ? adminAssetUrl(block.media_path) : undefined;
-  const posterSrc = block.video_poster ? adminAssetUrl(block.video_poster) : undefined;
-  const isVideo = block.media_type === "video";
-
-  const overlayOpacity = (block.overlay_opacity ?? 50) / 100;
-  let overlayBg = "";
-  switch (block.overlay) {
-    case "dark":
-      overlayBg = `rgba(0,0,0,${overlayOpacity})`;
-      break;
-    case "light":
-      overlayBg = `rgba(255,255,255,${overlayOpacity})`;
-      break;
-    case "gradient-bottom":
-      overlayBg = `linear-gradient(to top, rgba(0,0,0,${overlayOpacity}) 0%, transparent 60%)`;
-      break;
-    case "gradient-top":
-      overlayBg = `linear-gradient(to bottom, rgba(0,0,0,${overlayOpacity}) 0%, transparent 60%)`;
-      break;
-  }
-
-  const alignMap: Record<string, string> = {
-    top: "flex-start",
-    center: "center",
-    bottom: "flex-end",
-    left: "flex-start",
-    right: "flex-end",
-  };
-
-  const textColor = block.text_color || "#ffffff";
-
-  // Resolve height — must match CoverBlockRenderer on public site
-  const height =
-    block.height === "custom" && block.custom_height
-      ? block.custom_height
-      : block.height || "100vh";
-
-  return (
-    <div
-      className="relative rounded overflow-hidden"
-      style={{
-        height,
-        minHeight: height,
-        display: "flex",
-        alignItems: alignMap[block.content_align_v || "center"],
-        justifyContent: alignMap[block.content_align_h || "center"],
-        color: textColor,
-      }}
-    >
-      {/* Background */}
-      {mediaSrc && !isVideo && (
-        <>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={mediaSrc}
-            alt=""
-            className="absolute inset-0 w-full h-full"
-            style={{
-              objectFit: (block.background_size || "cover") as "cover" | "contain" | "none",
-              objectPosition: block.background_position || "center center",
-            }}
-          />
-          {block.media_path && <ThumbBadge assetPath={block.media_path} />}
-        </>
-      )}
-      {mediaSrc && isVideo && (
-        <video
-          src={mediaSrc}
-          poster={posterSrc}
-          autoPlay
-          loop
-          muted
-          playsInline
-          className="absolute inset-0 w-full h-full"
-          style={{
-            objectFit: (block.background_size || "cover") as "cover" | "contain" | "none",
-            objectPosition: block.background_position || "center center",
-          }}
-        />
-      )}
-      {!mediaSrc && posterSrc && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={posterSrc}
-          alt=""
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-      )}
-      {!mediaSrc && !posterSrc && <div className="absolute inset-0 bg-neutral-900" />}
-
-      {/* Overlay */}
-      {overlayBg && (
-        <div
-          className="absolute inset-0"
-          style={{ background: overlayBg }}
-        />
-      )}
-
-      {/* Content */}
-      <div
-        className="relative z-10 flex flex-col gap-3 py-12"
-        style={{
-          maxWidth: block.content_max_width || "800px",
-          textAlign: (block.content_align_h || "center") as "left" | "center" | "right",
-          width: "100%",
-          paddingLeft: "var(--grid-padding, 24px)",
-          paddingRight: "var(--grid-padding, 24px)",
-        }}
-      >
-        {block.headline && (
-          <h1 className="text-2xl font-bold uppercase tracking-widest">
-            {block.headline}
-          </h1>
-        )}
-        {block.subheadline && (
-          <p className="text-xs opacity-80 uppercase tracking-wider">
-            {block.subheadline}
-          </p>
-        )}
-        {block.cta_button?.text && (
-          <div>
-            <span className="inline-block rounded-lg bg-white text-black text-xs px-6 py-3">
-              {block.cta_button.text}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Scroll indicator */}
-      {block.show_scroll_indicator && (
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 opacity-60">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M12 5v14M5 12l7 7 7-7" />
-          </svg>
-        </div>
-      )}
-    </div>
-  );
-}