@morphika/webframe 0.1.0

package/components/builder/index.ts

@@ -0,0 +1,12 @@
+export { default as DndWrapper } from "./DndWrapper";
+export { default as SortableRow } from "./SortableRow";
+export { default as SortableBlock } from "./SortableBlock";
+export { default as SectionTypePicker } from "./SectionTypePicker";
+export { default as BlockTypePicker } from "./BlockTypePicker";
+export { default as SettingsPanel } from "./SettingsPanel";
+export { default as BuilderCanvas } from "./BuilderCanvas";
+export { default as SectionV2Canvas } from "./SectionV2Canvas";
+export { default as ParallaxGroupCanvas } from "./ParallaxGroupCanvas";
+export { default as SectionV2Column } from "./SectionV2Column";
+export { default as CanvasToolbar } from "./CanvasToolbar";
+export { makeRowId, makeBlockId, makeColumnDroppableId } from "./DndWrapper";

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

@@ -0,0 +1,38 @@
+"use client";
+
+import type { ButtonBlock } from "../../../lib/sanity/types";
+
+export default function LiveButtonPreview({ block }: { block: ButtonBlock }) {
+  const sizeClasses: Record<string, string> = {
+    small: "px-4 py-2 text-xs",
+    medium: "px-6 py-3 text-sm",
+    large: "px-8 py-4 text-base",
+  };
+
+  const styleClasses: Record<string, string> = {
+    primary: "bg-white text-black hover:bg-neutral-200",
+    secondary: "bg-neutral-800 text-white hover:bg-neutral-700",
+    outline: "border border-white text-white hover:bg-white/10",
+    text: "text-white underline underline-offset-4 hover:text-neutral-300",
+  };
+
+  const align = block.alignment || "left";
+
+  return (
+    <div
+      style={{
+        textAlign: align,
+        width: block.full_width ? "100%" : undefined,
+      }}
+    >
+      <span
+        className={`inline-block rounded-lg cursor-pointer transition-colors ${
+          sizeClasses[block.size || "medium"]
+        } ${styleClasses[block.style || "primary"]}`}
+        style={{ width: block.full_width ? "100%" : undefined, textAlign: "center" }}
+      >
+        {block.text || "Button"}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,146 @@
+"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>
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import { ThumbBadge } from "./shared";
+import type { ImageGridBlock } from "../../../lib/sanity/types";
+
+// Row patterns for random grid (must match ImageGridBlockRenderer)
+const ROW_PATTERNS_PREVIEW: Record<string, number[][]> = {
+  "small2-big4": [
+    [4, 4, 4], [2, 2, 4, 4], [4, 2, 2, 4], [4, 4, 2, 2],
+    [2, 4, 4, 2], [2, 2, 2, 2, 4], [4, 2, 2, 2, 2], [2, 2, 2, 2, 2, 2],
+  ],
+  "small3-big6": [
+    [6, 3, 3], [3, 6, 3], [3, 3, 6], [6, 6], [3, 3, 3, 3],
+  ],
+  "small4-big8": [
+    [8, 4], [4, 8], [4, 4, 4],
+  ],
+};
+
+function generateRandomGridSpans(
+  count: number,
+  mode: "small2-big4" | "small3-big6" | "small4-big8",
+  seed: number = 1
+): number[] {
+  const patterns = ROW_PATTERNS_PREVIEW[mode];
+  if (!patterns) return new Array(count).fill(Math.floor(12 / Math.max(count, 1)));
+
+  let s = seed;
+  const rand = () => { s = (s * 16807 + 12345) % 2147483647; return (s & 0x7fffffff) / 0x7fffffff; };
+  const spans: number[] = [];
+  let placed = 0;
+
+  while (placed < count) {
+    const imagesLeft = count - placed;
+    const valid = patterns.filter((p) => p.length <= imagesLeft);
+    if (valid.length === 0) {
+      const perImage = Math.floor(12 / imagesLeft);
+      let leftover = 12 - perImage * imagesLeft;
+      for (let i = 0; i < imagesLeft; i++) {
+        spans.push(perImage + (leftover > 0 ? 1 : 0));
+        if (leftover > 0) leftover--;
+      }
+      placed += imagesLeft;
+      break;
+    }
+    const pattern = valid[Math.floor(rand() * valid.length)];
+    for (const span of pattern) spans.push(span);
+    placed += pattern.length;
+  }
+  return spans;
+}
+
+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>
+    );
+  }
+
+  const hGutter = block.h_gutter ?? 10;
+  const vGutter = block.v_gutter ?? 10;
+  const imagesPerRow = block.images_per_row ?? 2;
+  const randomGrid = block.random_grid ?? "disabled";
+  const randomSeed = block.random_seed ?? 1;
+  const fit = block.object_fit ?? "cover";
+  const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
+
+  const useRandom = randomGrid !== "disabled";
+  const spans = useRandom
+    ? generateRandomGridSpans(images.length, randomGrid as "small2-big4" | "small3-big6" | "small4-big8", randomSeed)
+    : null;
+  const uniformColSpan = 12 / imagesPerRow;
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(12, 1fr)",
+        columnGap: `${hGutter}px`,
+        rowGap: `${vGutter}px`,
+      }}
+    >
+      {images.map((img, i) => {
+        const colSpan = spans ? spans[i] : uniformColSpan;
+        return (
+          // minWidth:0 + overflow:hidden prevent grid items from
+          // expanding beyond their assigned columns in narrow frames
+          // (Phone/Tablet). Without this, the intrinsic image width
+          // forces the grid to overflow and collapse to 1 column.
+          <div key={i} style={{ gridColumn: `span ${colSpan}`, minWidth: 0, overflow: "hidden", position: "relative", borderRadius }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={adminThumbUrl(img.asset_path)}
+              alt={img.alt || ""}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: fit,
+                display: "block",
+              }}
+              loading="lazy"
+              onError={(e) => {
+                const imgEl = e.currentTarget;
+                const fullSrc = adminAssetUrl(img.asset_path);
+                if (imgEl.src !== fullSrc) {
+                  if (process.env.NODE_ENV === "development") {
+                    console.warn(`[thumbs] fallback: ${imgEl.src} → ${fullSrc}`);
+                  }
+                  imgEl.src = fullSrc;
+                }
+              }}
+            />
+            <ThumbBadge assetPath={img.asset_path} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import { ThumbBadge } from "./shared";
+import type { ImageBlock } from "../../../lib/sanity/types";
+
+export default function LiveImagePreview({ block }: { block: ImageBlock }) {
+  const [imgError, setImgError] = useState(false);
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const [useFallback, setUseFallback] = useState(false);
+
+  if (!block.asset_path) {
+    return (
+      <div className="border border-dashed border-neutral-300 rounded bg-neutral-50 flex items-center justify-center py-12">
+        <span className="text-neutral-400 text-xs">No image set</span>
+      </div>
+    );
+  }
+
+  const thumbSrc = adminThumbUrl(block.asset_path);
+  const fullSrc = adminAssetUrl(block.asset_path);
+  const src = useFallback ? fullSrc : thumbSrc;
+  const widthStyle =
+    block.width === "contained"
+      ? "75%"
+      : block.width === "small"
+        ? "50%"
+        : "100%";
+
+  const aspectMap: Record<string, string> = {
+    "16:9": "16/9",
+    "4:3": "4/3",
+    "1:1": "1/1",
+    "21:9": "21/9",
+  };
+
+  return (
+    <div style={{ width: widthStyle, margin: block.width !== "full" ? "0 auto" : undefined }}>
+      {imgError ? (
+        <div
+          className="border border-dashed border-red-300 rounded bg-red-50 flex flex-col items-center justify-center py-8 gap-2"
+          style={{
+            aspectRatio: block.aspect_ratio && block.aspect_ratio !== "auto"
+              ? aspectMap[block.aspect_ratio]
+              : undefined,
+          }}
+        >
+          <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}>
+            {block.asset_path}
+          </span>
+        </div>
+      ) : (
+        <div className="relative" style={{ borderRadius: block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined, overflow: "hidden" }}>
+          {!imgLoaded && (
+            <div
+              className="border border-neutral-200 rounded bg-neutral-100 flex items-center justify-center animate-pulse"
+              style={{
+                aspectRatio: block.aspect_ratio && block.aspect_ratio !== "auto"
+                  ? aspectMap[block.aspect_ratio]
+                  : "16/9",
+              }}
+            >
+              <span className="text-neutral-300 text-xs">Loading...</span>
+            </div>
+          )}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={src}
+            alt={block.alt || ""}
+            onLoad={() => setImgLoaded(true)}
+            onError={() => {
+              if (!useFallback) {
+                if (process.env.NODE_ENV === "development") {
+                  console.warn(`[thumbs] fallback: ${thumbSrc} → ${fullSrc}`);
+                }
+                setUseFallback(true);
+              } else {
+                setImgError(true);
+              }
+            }}
+            style={{
+              width: "100%",
+              aspectRatio: block.aspect_ratio && block.aspect_ratio !== "auto"
+                ? aspectMap[block.aspect_ratio]
+                : undefined,
+              objectFit: "cover",
+              position: imgLoaded ? "static" : "absolute",
+              top: 0,
+              left: 0,
+              opacity: imgLoaded ? 1 : 0,
+            }}
+            className={block.shadow ? "shadow-lg" : ""}
+          />
+          {imgLoaded && <ThumbBadge assetPath={block.asset_path} />}
+        </div>
+      )}
+      {block.caption && (
+        <p className="text-xs text-neutral-500 mt-2">
+          {block.caption}
+        </p>
+      )}
+    </div>
+  );
+}