@morphika/andami 0.5.0 → 0.5.2

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

@@ -0,0 +1,176 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { BeforeAfterBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveBeforeAfterPreview — Static preview for builder canvas.
+ *
+ * Shows both assets with a fixed 50% split (or the configured `initial_position`)
+ * and a divider line + knob — no drag interaction in the builder. Videos are
+ * represented by a poster-style thumbnail with a play glyph (no streaming /
+ * autoplay inside the builder).
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+const aspectMap: Record<string, string | undefined> = {
+  auto: undefined,
+  "16:9": "16/9",
+  "4:3": "4/3",
+  "1:1": "1/1",
+  "21:9": "21/9",
+};
+
+function clamp(n: number, lo = 0, hi = 100): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+function PreviewMedia({
+  type,
+  path,
+  alt,
+}: {
+  type: "image" | "video";
+  path: string;
+  alt: string;
+}) {
+  const src = adminThumbUrl(path) || adminAssetUrl(path);
+  const commonStyle: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    pointerEvents: "none",
+    userSelect: "none",
+  };
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={src} alt={alt} loading="lazy" decoding="async" draggable={false} style={commonStyle} />
+      {type === "video" && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
+          <div style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(0,0,0,0.55)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ color: "#FFFFFF", fontSize: 16, marginLeft: 2 }}>&#9654;</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function LiveBeforeAfterPreview({ block }: { block: BeforeAfterBlock }) {
+  const beforeType = block.before_media_type ?? "image";
+  const afterType = block.after_media_type ?? "image";
+  const orientation = block.orientation ?? "horizontal";
+  const position = clamp(block.initial_position ?? 50);
+  const handleColor = block.handle_color || "#FFFFFF";
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const aspect = isFill ? undefined : aspectMap[block.aspect_ratio ?? "16:9"] ?? "16/9";
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
+
+  const hasBefore = !!block.before_asset_path;
+  const hasAfter = !!block.after_asset_path;
+
+  // Empty state: no assets on either side
+  if (!hasBefore && !hasAfter) {
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
+    return (
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <line x1="28" y1="10" x2="28" y2="46" stroke="#b0b5bd" strokeWidth="1.5" />
+            <circle cx="28" cy="28" r="5" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">Before / After — pick two assets</span>
+        </div>
+      </div>
+    );
+  }
+
+  const afterClip = orientation === "horizontal"
+    ? `inset(0 0 0 ${position}%)`
+    : `inset(${position}% 0 0 0)`;
+
+  const dividerStyle: React.CSSProperties = orientation === "horizontal"
+    ? { position: "absolute", top: 0, bottom: 0, left: `${position}%`, width: 2, transform: "translateX(-1px)", background: handleColor, pointerEvents: "none" }
+    : { position: "absolute", left: 0, right: 0, top: `${position}%`, height: 2, transform: "translateY(-1px)", background: handleColor, pointerEvents: "none" };
+
+  const knobStyle: React.CSSProperties = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 32,
+    height: 32,
+    borderRadius: "50%",
+    background: handleColor,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+  };
+
+  const ArrowIcon = orientation === "horizontal" ? (
+    <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M5 4 L1 9 L5 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M13 4 L17 9 L13 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ) : (
+    <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M4 5 L9 1 L14 5" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 13 L9 17 L14 13" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+
+  const frameStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden", background: "#222" }
+    : { position: "relative", ...widthStyle, aspectRatio: aspect, borderRadius, overflow: "hidden", background: "#222" };
+
+  const shadowClass = block.shadow ? "shadow-lg" : "";
+
+  return (
+    <div className={shadowClass} style={frameStyle}>
+      {/* Before layer */}
+      <div style={{ position: "absolute", inset: 0 }}>
+        {hasBefore ? (
+          <PreviewMedia type={beforeType} path={block.before_asset_path} alt={block.before_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#e7e9ed", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No before asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* After layer — clipped by position */}
+      <div style={{ position: "absolute", inset: 0, clipPath: afterClip, WebkitClipPath: afterClip }}>
+        {hasAfter ? (
+          <PreviewMedia type={afterType} path={block.after_asset_path} alt={block.after_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#d8dbe0", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No after asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* Divider + knob */}
+      <div style={dividerStyle}>
+        <div style={knobStyle}>{ArrowIcon}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -55,8 +55,16 @@ export default function LiveImageGridPreview({ block }: { block: ImageGridBlock
   const images = block.images || [];
   if (images.length === 0) {
     return (
-      <div className="border border-dashed border-neutral-700 rounded bg-neutral-900/50 flex items-center justify-center py-8">
-        <span className="text-neutral-600 text-xs">Empty image grid</span>
+      <div style={{ width: "100%" }}>
+        <div className="w-full h-full min-h-[240px] flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="8" y="8" width="18" height="18" rx="2" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <rect x="30" y="8" width="18" height="18" rx="2" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <rect x="8" y="30" width="18" height="18" rx="2" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <rect x="30" y="30" width="18" height="18" rx="2" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">No images yet</span>
+        </div>
       </div>
     );
   }

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

@@ -20,7 +20,7 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
       : { width: "100%" };
     return (
       <div style={wrapperStyle}>
-        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+        <div className="w-full h-full min-h-[240px] flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
           <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
             <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
             <circle cx="18" cy="21" r="3" fill="#b0b5bd" />

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

@@ -0,0 +1,39 @@
+"use client";
+
+/**
+ * LiveMarqueePreview — Builder canvas preview for marqueeBlock.
+ *
+ * Unlike LiveProjectCarouselPreview (which renders mockup cards because
+ * the public carousel hits the projects API), the marquee content IS the
+ * user's items — same text, same images. So this preview just delegates
+ * to the public renderer with two tweaks:
+ *
+ *   - speedMultiplier = 0.3 → motion is visible but gentle, won't distract
+ *     while editing. User's configured speed still drives the public site.
+ *   - alwaysPlay = true → disables the IntersectionObserver pause, since
+ *     the builder canvas has its own scrolling and the observer can yield
+ *     false "off-screen" reports.
+ *
+ * Intentionally thin — mirrors the one-liner delegation pattern used for
+ * simple block types whose builder preview and public render don't diverge.
+ */
+
+import type { MarqueeBlock } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+import MarqueeBlockRenderer from "../../blocks/MarqueeBlockRenderer";
+
+export interface LiveMarqueePreviewProps {
+  block: MarqueeBlock;
+  viewport?: DeviceViewport;
+  editable?: boolean;
+}
+
+export default function LiveMarqueePreview({ block }: LiveMarqueePreviewProps) {
+  return (
+    <MarqueeBlockRenderer
+      block={block}
+      speedMultiplier={0.3}
+      alwaysPlay
+    />
+  );
+}

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

@@ -141,7 +141,7 @@ export default function LiveProjectCarouselPreview({
     <div ref={containerCallbackRef} className="relative w-full">
       {/* Scroll track — same mechanics as public renderer so layout is faithful */}
       <div
-        className="flex overflow-x-auto"
+        className="flex overflow-x-auto py-3"
         style={{
           gap: `${gap}px`,
           scrollSnapType: snapScroll ? "x mandatory" : undefined,

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

@@ -26,7 +26,7 @@ export default function LiveVideoPreview({ block }: { block: VideoBlock }) {
       : { width: "100%" };
     return (
       <div style={wrapperStyle}>
-        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+        <div className="w-full h-full min-h-[240px] flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
           <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
             <circle cx="28" cy="28" r="22" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
             <path d="M24 20 L37 28 L24 36 Z" fill="#b0b5bd" />