@morphika/andami 0.5.1 → 0.5.3

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

@@ -1,120 +1,120 @@
-"use client";
-
-import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
-import type { AudioBlock } from "../../../lib/sanity/types";
-
-/**
- * LiveAudioPreview — Static preview for builder canvas.
- *
- * Same layout as the runtime renderer but no audio element / no playback —
- * a frozen snapshot with a 0% progress bar, a play glyph, and a dummy
- * `0:00 / 0:00` time label. Metadata (title / artist) and cover art
- * render when present.
- */
-
-const widthStyleMap: Record<string, { width: string; margin?: string }> = {
-  full: { width: "100%" },
-  contained: { width: "75%", margin: "0 auto" },
-  small: { width: "50%", margin: "0 auto" },
-};
-
-export default function LiveAudioPreview({ block }: { block: AudioBlock }) {
-  const accent = block.accent_color || "#4794E2";
-  const coverSrc = block.cover_path ? (adminThumbUrl(block.cover_path) || adminAssetUrl(block.cover_path)) : null;
-
-  const isFill = block.width === "fill";
-  const widthStyle = isFill ? { width: "100%" } : (widthStyleMap[block.width ?? "contained"] || widthStyleMap.contained);
-
-  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
-  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : "12px";
-
-  const hasMetaText = !!(block.title || block.artist);
-  const hasAsset = !!block.asset_path;
-
-  const containerStyle: React.CSSProperties = {
-    ...widthStyle,
-    display: "flex",
-    alignItems: "center",
-    gap: 14,
-    padding: "12px 16px",
-    background: "#fafafa",
-    border: "1px solid #ececec",
-    borderRadius,
-    boxShadow: block.shadow ? "0 8px 24px -12px rgba(0,0,0,0.25)" : undefined,
-    overflow: "hidden",
-    opacity: hasAsset ? 1 : 0.75,
-  };
-
-  return (
-    <div style={containerStyle}>
-      {coverSrc ? (
-        <div style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 8, overflow: "hidden", background: "#eee" }}>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={coverSrc} alt={block.alt || block.title || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
-        </div>
-      ) : null}
-
-      <div
-        aria-hidden
-        style={{
-          width: 40,
-          height: 40,
-          flexShrink: 0,
-          borderRadius: "50%",
-          background: accent,
-          color: "#fff",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 2 }}>
-          <path d="M8 5v14l11-7z" />
-        </svg>
-      </div>
-
-      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
-        {hasMetaText ? (
-          <div style={{ display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }}>
-            {block.title && (
-              <span style={{ fontSize: 13, fontWeight: 600, color: "#111", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-                {block.title}
-              </span>
-            )}
-            {block.artist && (
-              <span style={{ fontSize: 12, color: "#777", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-                {block.artist}
-              </span>
-            )}
-          </div>
-        ) : (
-          !hasAsset && (
-            <span style={{ fontSize: 11, color: "#8a8f98" }}>Audio — pick a file</span>
-          )
-        )}
-        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-          <div style={{ flex: 1, height: 4, background: "#e5e5e5", borderRadius: 999, position: "relative" }}>
-            <div style={{ position: "absolute", inset: 0, width: "0%", background: accent, borderRadius: 999 }} />
-            <div
-              style={{
-                position: "absolute",
-                top: "50%",
-                left: "0%",
-                width: 10,
-                height: 10,
-                marginTop: -5,
-                marginLeft: -5,
-                borderRadius: "50%",
-                background: "#fff",
-                boxShadow: `0 0 0 2px ${accent}`,
-              }}
-            />
-          </div>
-          <span style={{ fontSize: 11, color: "#777", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
-            0:00 / 0:00
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { AudioBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveAudioPreview — Static preview for builder canvas.
+ *
+ * Same layout as the runtime renderer but no audio element / no playback —
+ * a frozen snapshot with a 0% progress bar, a play glyph, and a dummy
+ * `0:00 / 0:00` time label. Metadata (title / artist) and cover art
+ * render when present.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+export default function LiveAudioPreview({ block }: { block: AudioBlock }) {
+  const accent = block.accent_color || "#3580f9";
+  const coverSrc = block.cover_path ? (adminThumbUrl(block.cover_path) || adminAssetUrl(block.cover_path)) : null;
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? { width: "100%" } : (widthStyleMap[block.width ?? "contained"] || widthStyleMap.contained);
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : "12px";
+
+  const hasMetaText = !!(block.title || block.artist);
+  const hasAsset = !!block.asset_path;
+
+  const containerStyle: React.CSSProperties = {
+    ...widthStyle,
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "12px 16px",
+    background: "#fafafa",
+    border: "1px solid #ececec",
+    borderRadius,
+    boxShadow: block.shadow ? "0 8px 24px -12px rgba(0,0,0,0.25)" : undefined,
+    overflow: "hidden",
+    opacity: hasAsset ? 1 : 0.75,
+  };
+
+  return (
+    <div style={containerStyle}>
+      {coverSrc ? (
+        <div style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 8, overflow: "hidden", background: "#eee" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={coverSrc} alt={block.alt || block.title || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
+        </div>
+      ) : null}
+
+      <div
+        aria-hidden
+        style={{
+          width: 40,
+          height: 40,
+          flexShrink: 0,
+          borderRadius: "50%",
+          background: accent,
+          color: "#fff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 2 }}>
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </div>
+
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        {hasMetaText ? (
+          <div style={{ display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }}>
+            {block.title && (
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#111", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.title}
+              </span>
+            )}
+            {block.artist && (
+              <span style={{ fontSize: 12, color: "#777", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.artist}
+              </span>
+            )}
+          </div>
+        ) : (
+          !hasAsset && (
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>Audio — pick a file</span>
+          )
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div style={{ flex: 1, height: 4, background: "#e5e5e5", borderRadius: 999, position: "relative" }}>
+            <div style={{ position: "absolute", inset: 0, width: "0%", background: accent, borderRadius: 999 }} />
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "0%",
+                width: 10,
+                height: 10,
+                marginTop: -5,
+                marginLeft: -5,
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: `0 0 0 2px ${accent}`,
+              }}
+            />
+          </div>
+          <span style={{ fontSize: 11, color: "#777", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
+            0:00 / 0:00
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -89,7 +89,7 @@ export default function LiveBeforeAfterPreview({ block }: { block: BeforeAfterBl
       : { 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" />
             <line x1="28" y1="10" x2="28" y2="46" stroke="#b0b5bd" strokeWidth="1.5" />

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
 import { ThumbBadge } from "./shared";
 import type { ImageBlock } from "../../../lib/sanity/types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 export default function LiveImagePreview({ block }: { block: ImageBlock }) {
   const [imgError, setImgError] = useState(false);
@@ -20,7 +21,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" />
@@ -81,8 +82,9 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
         >
           <span className="text-red-400 text-lg">{"\u26A0"}</span>
           <span className="text-red-400 text-xs">Image failed to load</span>
-          <span className="text-red-300 text-[10px] max-w-[200px] truncate" title={block.asset_path}>
+          <span className="group/bb relative text-red-300 text-[10px] max-w-[200px] truncate" aria-label={block.asset_path}>
             {block.asset_path}
+            <BubbleTooltip>{block.asset_path}</BubbleTooltip>
           </span>
         </div>
       ) : (

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" />