@morphika/andami 0.1.2

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

@@ -0,0 +1,9 @@
+"use client";
+
+import { getSpacerPx } from "../editors/SpacerBlockEditor";
+import type { SpacerBlock } from "../../../lib/sanity/types";
+
+export default function LiveSpacerPreview({ block }: { block: SpacerBlock }) {
+  const height = getSpacerPx(block);
+  return <div style={{ height: `${height}px` }} />;
+}

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

@@ -0,0 +1,198 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { TextBlock, ContentBlock } from "../../../lib/sanity/types";
+
+/** Hook to get page-level text color for default block text rendering */
+export function usePageTextColor(): string {
+  return useBuilderStore((s) => s.pageSettings.text_color) || "#0a0a0a";
+}
+
+/** Resolve fontSize: supports new numeric px and legacy string enum */
+function resolveTextFontSize(fontSize?: number | string): string {
+  if (typeof fontSize === "number") return `${fontSize}px`;
+  // Legacy string enum fallback
+  const legacyMap: Record<string, string> = {
+    small: "12px", base: "14px", large: "20px",
+    xl: "24px", "2xl": "32px", "3xl": "48px",
+  };
+  return legacyMap[fontSize || "base"] || "14px";
+}
+
+/** Resolve fontWeight: supports new string numbers and legacy names */
+function resolveTextFontWeight(fw?: string): number {
+  if (!fw) return 400;
+  const num = parseInt(fw, 10);
+  if (!isNaN(num)) return num;
+  // Legacy name fallback
+  if (fw === "bold") return 700;
+  if (fw === "medium") return 500;
+  return 400;
+}
+
+export default function LiveTextEditor({ block, editable = false }: { block: TextBlock; editable?: boolean }) {
+  const pageTextColor = usePageTextColor();
+  const store = useBuilderStore();
+  const previewMode = useBuilderStore((s) => s.previewMode);
+  const isSelected = useBuilderStore((s) => s.selectedBlockKey) === block._key;
+  const editableRef = useRef<HTMLDivElement>(null);
+  const isComposingRef = useRef(false);
+  const snapshotPushedRef = useRef(false);
+
+  const plainText = Array.isArray(block.text)
+    ? block.text
+        .map(
+          (blk) =>
+            blk?.children
+              ?.map((c: { text?: string }) => c.text || "")
+              .join("") || ""
+        )
+        .join("\n")
+    : "";
+
+  const style = block.style || {};
+
+  // Debounce timer ref — commits text 500ms after last keystroke (not on every input)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  // Sync content when block text changes externally (undo/redo)
+  useEffect(() => {
+    if (!editableRef.current || document.activeElement === editableRef.current) return;
+    const currentHtml = editableRef.current.innerText || "";
+    if (currentHtml !== plainText) {
+      editableRef.current.innerText = plainText || "";
+    }
+  }, [plainText]);
+
+  const commitText = useCallback(() => {
+    if (!editableRef.current) return;
+    const raw = editableRef.current.innerText || "";
+    const lines = raw.split("\n");
+    const portableText = lines.map((line, i) => ({
+      _type: "block" as const,
+      _key: `pt_${i}`,
+      style: "normal" as const,
+      markDefs: [],
+      children: [
+        {
+          _type: "span" as const,
+          _key: `sp_${i}`,
+          text: line,
+          marks: [],
+        },
+      ],
+    }));
+    store.updateBlockDebounced(block._key, {
+      text: portableText,
+    } as Partial<ContentBlock>);
+  }, [block._key, store]);
+
+  const handleFocus = useCallback(() => {
+    if (!snapshotPushedRef.current) {
+      store._pushSnapshot();
+      snapshotPushedRef.current = true;
+    }
+  }, [store]);
+
+  const handleBlur = useCallback(() => {
+    // Flush any pending debounced commit immediately on blur
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    snapshotPushedRef.current = false;
+    commitText();
+  }, [commitText]);
+
+  const handleInput = useCallback(() => {
+    if (isComposingRef.current) return;
+    // Clear any pending debounce and schedule a new one
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      commitText();
+      debounceRef.current = null;
+    }, 500);
+  }, [commitText]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    // Stop propagation so builder shortcuts don't fire while typing
+    if (!e.metaKey && !e.ctrlKey) {
+      e.stopPropagation();
+    }
+    // Allow Ctrl+S, Ctrl+Z, Ctrl+Shift+Z to pass through
+    if ((e.metaKey || e.ctrlKey) && (e.key === "s" || e.key === "z" || e.key === "Z" || e.key === "y")) {
+      // Don't stop propagation for these
+      return;
+    }
+  }, []);
+
+  const cols = block.columns && block.columns > 1 ? block.columns : undefined;
+
+  const computedStyle: React.CSSProperties = {
+    fontSize: resolveTextFontSize(style.fontSize),
+    fontWeight: resolveTextFontWeight(style.fontWeight),
+    textAlign: style.alignment || "left",
+    color: style.color || pageTextColor,
+    opacity: style.opacity ?? 1,
+    lineHeight: style.lineHeight || "1.6",
+    letterSpacing: style.letterSpacing || "normal",
+    maxWidth: style.maxWidth || "none",
+    textTransform: style.textTransform || "none",
+    fontFamily: "inherit",
+    outline: "none",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    minHeight: "1em",
+    // Multi-column layout: gap inherits global grid gutter
+    ...(cols ? {
+      columnCount: cols,
+      columnGap: "var(--grid-gutter, 24px)",
+    } : {}),
+  };
+
+  // Preview mode or read-only frame: static render
+  if (previewMode || !editable) {
+    if (!plainText) {
+      return (
+        <p className="text-neutral-400 italic text-sm py-4 text-center">
+          Empty text block
+        </p>
+      );
+    }
+    return (
+      <div style={computedStyle}>
+        {plainText.split("\n").map((line, i) => (
+          <p key={i} className={i > 0 ? "mt-3" : ""}>
+            {line || "\u00A0"}
+          </p>
+        ))}
+      </div>
+    );
+  }
+
+  // Design mode: contentEditable inline editing
+  return (
+    <div
+      ref={editableRef}
+      contentEditable
+      suppressContentEditableWarning
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onInput={handleInput}
+      onKeyDown={handleKeyDown}
+      onCompositionStart={() => { isComposingRef.current = true; }}
+      onCompositionEnd={() => { isComposingRef.current = false; commitText(); }}
+      style={computedStyle}
+      data-placeholder="Type something..."
+      className={`${!plainText && !isSelected ? "before:content-[attr(data-placeholder)] before:text-neutral-400 before:italic before:pointer-events-none" : ""}`}
+    />
+  );
+}

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

@@ -0,0 +1,98 @@
+"use client";
+
+import { adminAssetUrl } from "../../../lib/assets";
+import type { VideoBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveVideoPreview — Static placeholder for builder canvas.
+ *
+ * Shows the correct aspect ratio + a lightweight thumbnail instead of
+ * loading real Vimeo/YouTube iframes or streaming MP4 files.
+ * This eliminates all video bandwidth in the builder.
+ *
+ * Thumbnail sources:
+ * - Vimeo: vumbnail.com (lightweight, no API key needed)
+ * - YouTube: ytimg.com (standard Google CDN)
+ * - MP4/URL: poster image if set, otherwise generic placeholder
+ */
+export default function LiveVideoPreview({ block }: { block: VideoBlock }) {
+  if (!block.url_or_path) {
+    return (
+      <div className="border border-dashed border-neutral-700 rounded bg-neutral-900/50 flex items-center justify-center py-12">
+        <span className="text-neutral-600 text-xs">No video set</span>
+      </div>
+    );
+  }
+
+  const aspectMap: Record<string, string> = {
+    "16:9": "56.25%",
+    "21:9": "42.86%",
+    "4:3": "75%",
+    auto: "56.25%",
+  };
+  const paddingBottom = aspectMap[block.aspect_ratio || "16:9"] || "56.25%";
+  const widthStyle = block.width === "contained" ? "75%" : "100%";
+
+  // Resolve thumbnail URL based on video type (no iframes, no streaming)
+  let thumbnailUrl: string | null = null;
+  let videoLabel = (block.video_type || "video").toUpperCase();
+
+  if (block.video_type === "vimeo") {
+    const match = block.url_or_path.match(/vimeo\.com\/(\d+)/);
+    if (match) {
+      thumbnailUrl = `https://vumbnail.com/${match[1]}.jpg`;
+      videoLabel = "VIMEO";
+    }
+  } else if (block.video_type === "youtube") {
+    const match = block.url_or_path.match(
+      /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/
+    );
+    if (match) {
+      thumbnailUrl = `https://i.ytimg.com/vi/${match[1]}/hqdefault.jpg`;
+      videoLabel = "YOUTUBE";
+    }
+  } else if (block.poster) {
+    // MP4/URL with poster — use poster image via admin proxy
+    thumbnailUrl = adminAssetUrl(block.poster);
+    videoLabel = block.video_type === "mp4" ? "MP4" : "VIDEO";
+  }
+
+  const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
+
+  return (
+    <div style={{ width: widthStyle, margin: block.width === "contained" ? "0 auto" : undefined, minWidth: 0, borderRadius, overflow: borderRadius ? "hidden" : undefined }}>
+      <div style={{ position: "relative", paddingBottom, overflow: "hidden", background: "#000", lineHeight: 0, fontSize: 0, borderRadius: "inherit" }}>
+        {thumbnailUrl ? (
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={thumbnailUrl}
+              alt="Video thumbnail"
+              loading="lazy"
+              className="absolute inset-0 w-full h-full object-cover"
+            />
+            {/* Play icon + type badge overlay */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-14 h-14 rounded-full bg-black/50 flex items-center justify-center">
+                <span className="text-white text-xl ml-0.5">&#9654;</span>
+              </div>
+            </div>
+            <div className="absolute bottom-2 left-2 px-1.5 py-0.5 rounded bg-black/60 text-[10px] text-neutral-300 font-mono">
+              {videoLabel}
+            </div>
+          </>
+        ) : (
+          /* Generic placeholder — no thumbnail available */
+          <div className="absolute inset-0 bg-neutral-900 flex items-center justify-center">
+            <div className="text-center">
+              <span className="text-neutral-600 text-3xl block mb-2">&#9654;</span>
+              <span className="text-neutral-600 text-xs font-mono">
+                {videoLabel}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/builder/live-preview/index.ts

@@ -0,0 +1,10 @@
+export { default as LiveTextEditor } from "./LiveTextEditor";
+export { usePageTextColor } from "./LiveTextEditor";
+export { default as LiveImagePreview } from "./LiveImagePreview";
+export { default as LiveImageGridPreview } from "./LiveImageGridPreview";
+export { default as LiveVideoPreview } from "./LiveVideoPreview";
+export { default as LiveSpacerPreview } from "./LiveSpacerPreview";
+export { default as LiveButtonPreview } from "./LiveButtonPreview";
+export { default as LiveCoverPreview } from "./LiveCoverPreview";
+export { default as LiveProjectGridPreview } from "./LiveProjectGridPreview";
+export { ThumbBadge, LivePlaceholder, useProjectThumbnails, ProjectGridCard } from "./shared";

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

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useThumbStatus } from "../../../lib/contexts/ThumbStatusContext";
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+
+// ============================================
+// Thumbnail status badge (builder-only)
+// ============================================
+
+/** Tiny green/amber dot showing thumbnail availability on image blocks. */
+export function ThumbBadge({ assetPath }: { assetPath: string }) {
+  const { hasThumb } = useThumbStatus();
+  const status = hasThumb(assetPath);
+  // undefined = not raster or unknown — don't show badge
+  if (status === undefined) return null;
+  return (
+    <span
+      title={status ? "Thumbnail available" : "No thumbnail — full resolution"}
+      className="absolute bottom-1.5 right-1.5 z-10 flex items-center justify-center"
+      style={{
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        backgroundColor: status ? "rgba(34,197,94,0.8)" : "rgba(245,158,11,0.8)",
+        pointerEvents: "auto",
+      }}
+    >
+      {status ? (
+        // Checkmark
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <path d="M2 5.5L4 7.5L8 3" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      ) : (
+        // Info dot
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <circle cx="5" cy="3.5" r="1" fill="white" />
+          <rect x="4.25" y="5" width="1.5" height="3" rx="0.5" fill="white" />
+        </svg>
+      )}
+    </span>
+  );
+}
+
+// ============================================
+// Shared project thumbnail hook
+// ============================================
+
+/** Shared hook: fetch project thumbnails from /api/projects for builder previews */
+export function useProjectThumbnails(slugs: string[]) {
+  const [thumbMap, setThumbMap] = useState<Map<string, string | undefined>>(new Map());
+
+  useEffect(() => {
+    if (!slugs.length) return;
+
+    fetch("/api/projects")
+      .then((r) => (r.ok ? r.json() : { projects: [] }))
+      .then((data) => {
+        const map = new Map<string, string | undefined>();
+        for (const proj of data.projects || []) {
+          const s = proj.slug?.current || proj.slug;
+          if (s && slugs.includes(s)) {
+            map.set(s, proj.thumbnail_path || undefined);
+          }
+        }
+        setThumbMap(map);
+      })
+      .catch(() => { /* silent */ });
+  }, [slugs.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return thumbMap;
+}
+
+// ============================================
+// Shared project grid card
+// ============================================
+
+/**
+ * Project card with optional thumbnail background.
+ * Supports two sizing modes:
+ * - `aspectRatio` (preferred): CSS aspect-ratio for responsive sizing that matches public site
+ * - `height` (legacy fallback): fixed px height
+ */
+export function ProjectGridCard({
+  slug,
+  thumbPath,
+  customThumb,
+  height,
+  aspectRatio,
+  borderRadius,
+  style,
+  className,
+}: {
+  slug: string;
+  thumbPath?: string;
+  customThumb?: string;
+  height?: number;
+  aspectRatio?: string;
+  borderRadius?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}) {
+  const imgPath = customThumb || thumbPath;
+  const src = imgPath ? adminThumbUrl(imgPath) : undefined;
+  const [fallback, setFallback] = useState(false);
+  const fullSrc = imgPath ? adminAssetUrl(imgPath) : undefined;
+
+  return (
+    <div
+      className={`relative overflow-hidden flex items-end ${className || ""}`}
+      style={{
+        ...(aspectRatio ? { aspectRatio } : { height: height || 160 }),
+        borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+        backgroundColor: "#e5e5e5",
+        ...style,
+      }}
+    >
+      {src && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={fallback && fullSrc ? fullSrc : src}
+          alt=""
+          className="absolute inset-0 w-full h-full object-cover"
+          onError={() => { if (!fallback) setFallback(true); }}
+          draggable={false}
+        />
+      )}
+      <span
+        className="relative z-[1] text-[10px] truncate px-3 pb-2"
+        style={{ color: src ? "rgba(255,255,255,0.8)" : "#a3a3a3", textShadow: src ? "0 1px 3px rgba(0,0,0,0.5)" : "none" }}
+      >
+        {slug}
+      </span>
+    </div>
+  );
+}
+
+// ============================================
+// Placeholder for unknown block types
+// ============================================
+
+export function LivePlaceholder({ type }: { type: string }) {
+  const label = type
+    .replace("Block", "")
+    .replace(/([A-Z])/g, " $1")
+    .trim();
+
+  return (
+    <div className="border border-dashed border-neutral-700 rounded bg-neutral-900/30 p-6 flex items-center justify-center">
+      <span className="text-xs text-neutral-500">{label}</span>
+    </div>
+  );
+}