@morphika/webframe 0.1.0

package/components/blocks/VideoBlockRenderer.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import type { VideoBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleVideoRetry, handleImageRetry } from "../../lib/asset-retry";
+
+/**
+ * VideoBlockRenderer — Optimized for bandwidth and playback speed.
+ *
+ * Optimizations:
+ * 1. Facade pattern for Vimeo/YouTube: shows poster + play button, loads iframe on click
+ * 2. Lazy mount: uses IntersectionObserver to defer loading until near viewport
+ * 3. Conditional preload: autoplay → "auto", no autoplay → "none"
+ * 4. loading="lazy" on iframes as progressive enhancement
+ */
+
+// ============================================
+// Constants
+// ============================================
+
+const widthStyleMap: Record<string, { width: string; margin?: string; minWidth: number }> = {
+  full: { width: "100%", minWidth: 0 },
+  contained: { width: "75%", margin: "0 auto", minWidth: 0 },
+};
+
+const aspectMap: Record<string, string> = {
+  "16:9": "56.25%",
+  "21:9": "42.86%",
+  "4:3": "75%",
+  auto: "56.25%",
+};
+
+// ============================================
+// URL Extractors
+// ============================================
+
+function getVimeoId(url: string): string | null {
+  const match = url.match(/vimeo\.com\/(\d+)/);
+  return match ? match[1] : null;
+}
+
+function getYouTubeId(url: string): string | null {
+  const match = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([\w-]+)/
+  );
+  return match ? match[1] : null;
+}
+
+// ============================================
+// Hooks
+// ============================================
+
+/** Returns true once the element is within `rootMargin` of the viewport */
+function useInView(rootMargin = "200px"): [React.RefObject<HTMLDivElement | null>, boolean] {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || inView) return; // Once in view, stay in view
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rootMargin, inView]);
+
+  return [ref, inView];
+}
+
+// ============================================
+// Sub-components
+// ============================================
+
+/** Shared container with aspect ratio padding */
+function AspectContainer({
+  paddingBottom,
+  children,
+}: {
+  paddingBottom: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        position: "relative",
+        paddingBottom,
+        overflow: "hidden",
+        borderRadius: "inherit",
+        background: "#000",
+        lineHeight: 0,
+        fontSize: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Play button overlay for facade pattern */
+function PlayButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      aria-label="Play video"
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.3)",
+        border: "none",
+        cursor: "pointer",
+        transition: "background 0.2s",
+        zIndex: 1,
+      }}
+      onMouseEnter={(e) => {
+        (e.currentTarget as HTMLButtonElement).style.background = "rgba(0,0,0,0.5)";
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget as HTMLButtonElement).style.background = "rgba(0,0,0,0.3)";
+      }}
+    >
+      <svg
+        width="68"
+        height="68"
+        viewBox="0 0 68 68"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <circle cx="34" cy="34" r="34" fill="rgba(0,0,0,0.6)" />
+        <path d="M27 21L49 34L27 47V21Z" fill="white" />
+      </svg>
+    </button>
+  );
+}
+
+/** Poster image (Vimeo/YouTube thumbnail or custom poster) */
+function PosterImage({ src, alt }: { src: string; alt: string }) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      loading="lazy"
+      onError={handleImageRetry}
+      style={{
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+      }}
+    />
+  );
+}
+
+// ============================================
+// Embed Renderers (with facade)
+// ============================================
+
+function VimeoEmbed({ block, paddingBottom }: { block: VideoBlock; paddingBottom: string }) {
+  const vimeoId = getVimeoId(block.url_or_path);
+  const [activated, setActivated] = useState(block.autoplay ?? false);
+  const [ref, inView] = useInView();
+
+  const activate = useCallback(() => setActivated(true), []);
+
+  if (!vimeoId) return null;
+
+  // Vimeo thumbnail URL (medium quality — loads fast, good enough for facade)
+  const posterUrl = `https://vumbnail.com/${vimeoId}.jpg`;
+
+  return (
+    <div ref={ref}>
+      <AspectContainer paddingBottom={paddingBottom}>
+        {inView && activated ? (
+          <iframe
+            src={`https://player.vimeo.com/video/${vimeoId}?autoplay=1&loop=${block.loop ? 1 : 0}&muted=${block.muted ? 1 : 0}&controls=${block.controls !== false ? 1 : 0}&dnt=1`}
+            className="absolute inset-0 w-full h-full"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowFullScreen
+            loading="lazy"
+            title="Video"
+            style={{ border: "none" }}
+          />
+        ) : inView ? (
+          <>
+            <PosterImage src={posterUrl} alt="Video thumbnail" />
+            <PlayButton onClick={activate} />
+          </>
+        ) : null}
+      </AspectContainer>
+    </div>
+  );
+}
+
+function YouTubeEmbed({ block, paddingBottom }: { block: VideoBlock; paddingBottom: string }) {
+  const ytId = getYouTubeId(block.url_or_path);
+  const [activated, setActivated] = useState(block.autoplay ?? false);
+  const [ref, inView] = useInView();
+
+  const activate = useCallback(() => setActivated(true), []);
+
+  if (!ytId) return null;
+
+  // YouTube thumbnail (maxresdefault with fallback to hqdefault)
+  const posterUrl = `https://i.ytimg.com/vi/${ytId}/hqdefault.jpg`;
+
+  return (
+    <div ref={ref}>
+      <AspectContainer paddingBottom={paddingBottom}>
+        {inView && activated ? (
+          <iframe
+            src={`https://www.youtube.com/embed/${ytId}?autoplay=1&loop=${block.loop ? 1 : 0}&mute=${block.muted ? 1 : 0}&controls=${block.controls !== false ? 1 : 0}`}
+            className="absolute inset-0 w-full h-full"
+            allow="autoplay; fullscreen"
+            allowFullScreen
+            loading="lazy"
+            title="Video"
+            style={{ border: "none" }}
+          />
+        ) : inView ? (
+          <>
+            <PosterImage src={posterUrl} alt="Video thumbnail" />
+            <PlayButton onClick={activate} />
+          </>
+        ) : null}
+      </AspectContainer>
+    </div>
+  );
+}
+
+function NativeVideo({ block, paddingBottom, resolveAsset }: {
+  block: VideoBlock;
+  paddingBottom: string;
+  resolveAsset: (path: string) => string;
+}) {
+  const [ref, inView] = useInView();
+
+  const src = block.video_type === "mp4"
+    ? resolveAsset(block.url_or_path)
+    : block.url_or_path;
+  const posterSrc = block.poster ? resolveAsset(block.poster) : undefined;
+
+  // Conditional preload: autoplay needs data immediately, others can wait
+  const preload = block.autoplay ? "auto" : "none";
+
+  return (
+    <div ref={ref}>
+      <AspectContainer paddingBottom={paddingBottom}>
+        {inView ? (
+          <video
+            src={src}
+            poster={posterSrc}
+            autoPlay={block.autoplay ?? false}
+            loop={block.loop ?? false}
+            muted={block.muted ?? true}
+            controls={block.controls !== false}
+            playsInline
+            preload={preload}
+            onError={handleVideoRetry}
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        ) : posterSrc ? (
+          <PosterImage src={posterSrc} alt="Video poster" />
+        ) : null}
+      </AspectContainer>
+    </div>
+  );
+}
+
+// ============================================
+// Main Component
+// ============================================
+
+export default function VideoBlockRenderer({ block }: { block: VideoBlock }) {
+  const resolveAsset = useAssetUrl();
+  const widthStyle = widthStyleMap[block.width ?? "full"] || widthStyleMap.full;
+  const paddingBottom = aspectMap[block.aspect_ratio ?? "16:9"] || "56.25%";
+  const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
+
+  return (
+    <div style={{ ...widthStyle, borderRadius, overflow: borderRadius ? "hidden" : undefined }}>
+      {block.video_type === "vimeo" ? (
+        <VimeoEmbed block={block} paddingBottom={paddingBottom} />
+      ) : block.video_type === "youtube" ? (
+        <YouTubeEmbed block={block} paddingBottom={paddingBottom} />
+      ) : (
+        <NativeVideo block={block} paddingBottom={paddingBottom} resolveAsset={resolveAsset} />
+      )}
+    </div>
+  );
+}

package/components/blocks/index.ts

@@ -0,0 +1,2 @@
+export { default as BlockRenderer } from "./BlockRenderer";
+export { default as PageRenderer } from "./PageRenderer";

package/components/builder/AssetBrowser.tsx

@@ -0,0 +1,2 @@
+// Re-export for backward compatibility — all code now lives in asset-browser/
+export { default, AssetBrowserInline } from "./asset-browser";

package/components/builder/BlockLivePreview.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+/**
+ * BlockLivePreview — renders blocks as they would appear on the public site.
+ *
+ * Used in both Design mode (content + subtle edit chrome on hover) and
+ * Preview mode (pure content, no chrome at all).
+ *
+ * This is a thin dispatcher that routes to focused sub-components
+ * in the `live-preview/` directory.
+ */
+
+import { memo } from "react";
+import { resolveBlock } from "../../lib/builder/responsive";
+import { getBlockLayoutStyles, hasBlockLayout } from "../../lib/builder/layout-styles";
+import type { DeviceViewport } from "../../lib/builder/types";
+import type {
+  ContentBlock,
+  TextBlock,
+  ImageBlock,
+  ImageGridBlock,
+  VideoBlock,
+  SpacerBlock,
+  ButtonBlock,
+  CoverBlock,
+  ProjectGridBlock,
+} from "../../lib/sanity/types";
+
+import { LiveTextEditor } from "./live-preview";
+import { LiveImagePreview } from "./live-preview";
+import { LiveImageGridPreview } from "./live-preview";
+import { LiveVideoPreview } from "./live-preview";
+import { LiveSpacerPreview } from "./live-preview";
+import { LiveButtonPreview } from "./live-preview";
+import { LiveCoverPreview } from "./live-preview";
+import { LiveProjectGridPreview } from "./live-preview";
+import { LivePlaceholder } from "./live-preview";
+
+// ============================================
+// Main dispatcher
+// ============================================
+
+interface BlockLivePreviewProps {
+  block: ContentBlock;
+  /** Which viewport to render for. Defaults to "desktop". */
+  viewport?: DeviceViewport;
+  /** Whether inline editing is enabled (only for active frame, not read-only mirrors). */
+  editable?: boolean;
+}
+
+function BlockLivePreviewInner({ block, viewport = "desktop", editable = false }: BlockLivePreviewProps) {
+  // Merge responsive overrides for the target viewport
+  const resolved = resolveBlock(block, viewport);
+
+  let content: React.ReactNode;
+
+  switch (resolved._type) {
+    case "textBlock":
+      content = <LiveTextEditor block={resolved as TextBlock} editable={editable} />;
+      break;
+    case "imageBlock":
+      content = <LiveImagePreview block={resolved as ImageBlock} />;
+      break;
+    case "imageGridBlock":
+      content = <LiveImageGridPreview block={resolved as ImageGridBlock} />;
+      break;
+    case "videoBlock":
+      content = <LiveVideoPreview block={resolved as VideoBlock} />;
+      break;
+    case "spacerBlock":
+      content = <LiveSpacerPreview block={resolved as SpacerBlock} />;
+      break;
+    case "buttonBlock":
+      content = <LiveButtonPreview block={resolved as ButtonBlock} />;
+      break;
+    case "coverBlock":
+      content = <LiveCoverPreview block={resolved as CoverBlock} />;
+      break;
+    case "projectGridBlock":
+      content = <LiveProjectGridPreview block={resolved as ProjectGridBlock} viewport={viewport} />;
+      break;
+    default:
+      content = <LivePlaceholder type={(resolved as ContentBlock)._type} />;
+  }
+
+  // Wrap in layout div if block has layout properties set (spacing, background, border, etc.)
+  // NOTE: Alignment (align_h, align_v) is NOT applied here — it's handled by the parent
+  // wrapper (SortableBlock in builder, block wrapper div in public renderers) which is
+  // the direct flex child of the column. Applying alignment here would double-apply it.
+  const layout = (resolved as unknown as Record<string, unknown>).layout as ContentBlock["layout"] | undefined;
+  if (hasBlockLayout(layout)) {
+    const layoutStyles = getBlockLayoutStyles(layout);
+    content = <div style={layoutStyles}>{content}</div>;
+  }
+
+  return <>{content}</>;
+}
+
+/** Memoized wrapper — skips re-render when block, viewport, and editable are unchanged */
+const BlockLivePreview = memo(BlockLivePreviewInner);
+export default BlockLivePreview;

package/components/builder/BlockTypePicker.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useState } from "react";
+import { BLOCK_TYPE_REGISTRY } from "../../lib/builder/types";
+import type { BlockType, BlockTypeInfo } from "../../lib/builder/types";
+import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "./blockStyles";
+
+interface BlockTypePickerProps {
+  onSelect: (type: BlockType) => void;
+  onClose: () => void;
+  insertIndex?: number;
+}
+
+// English labels for block picker (consistent with the rest of the admin UI)
+const BLOCK_LABELS: Record<string, { label: string; description: string }> = {
+  textBlock:              { label: "Text", description: "Rich text content with formatting" },
+  imageBlock:             { label: "Image", description: "Single image with caption" },
+  imageGridBlock:         { label: "Image Grid", description: "Multiple images in a grid layout" },
+  videoBlock:             { label: "Video", description: "Vimeo, YouTube or MP4 file" },
+  spacerBlock:            { label: "Spacer", description: "Customizable vertical spacing" },
+  buttonBlock:            { label: "Button", description: "Call-to-action button (CTA)" },
+  coverBlock:             { label: "Cover", description: "Full-screen hero section with image/video" },
+  projectGridBlock:       { label: "Project Grid", description: "Staggered project showcase grid" },
+};
+
+function BlockCard({
+  block,
+  isHovered,
+  onSelect,
+  onHover,
+  onLeave,
+}: {
+  block: BlockTypeInfo;
+  isHovered: boolean;
+  onSelect: () => void;
+  onHover: () => void;
+  onLeave: () => void;
+}) {
+  const cardGradient = BLOCK_GRADIENTS[block.type];
+  const labels = BLOCK_LABELS[block.type];
+  const IconComponent = BLOCK_ICON_COMPONENTS[block.type];
+
+  return (
+    <button
+      onClick={onSelect}
+      onMouseEnter={onHover}
+      onMouseLeave={onLeave}
+      className="relative flex items-center gap-3 rounded-2xl px-3.5 py-3 transition-all text-left group overflow-hidden border-0"
+      style={{
+        background: cardGradient || "#f5f5f5",
+        transform: isHovered ? "translateY(-1px) scale(1.015)" : "translateY(0) scale(1)",
+        boxShadow: isHovered
+          ? "0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3)"
+          : "0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
+        transition: "all 0.3s cubic-bezier(0.23, 1, 0.32, 1)",
+      }}
+    >
+      {/* Glass overlay */}
+      <div
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        style={{
+          background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
+        }}
+      />
+
+      {/* Icon container — frosted glass */}
+      <div
+        className="relative shrink-0 flex items-center justify-center"
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 12,
+          background: "rgba(255,255,255,0.4)",
+          backdropFilter: "blur(8px)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
+          transition: "transform 0.3s",
+          transform: isHovered ? "scale(1.08)" : "scale(1)",
+        }}
+      >
+        {IconComponent ? <IconComponent /> : null}
+      </div>
+
+      {/* Text */}
+      <div className="relative z-10 min-w-0">
+        <p
+          className="text-sm font-semibold truncate"
+          style={{
+            color: "rgba(0,0,0,0.72)",
+            textShadow: "0 1px 0 rgba(255,255,255,0.3)",
+          }}
+        >
+          {labels?.label || block.label}
+        </p>
+        <p
+          className="text-xs truncate leading-snug mt-0.5"
+          style={{ color: "rgba(0,0,0,0.42)" }}
+        >
+          {labels?.description || block.description}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+export default function BlockTypePicker({
+  onSelect,
+  onClose,
+  insertIndex,
+}: BlockTypePickerProps) {
+  const [hovered, setHovered] = useState<string | null>(null);
+
+  // Only show content blocks — section-level blocks are in SectionTypePicker
+  const contentBlocks = BLOCK_TYPE_REGISTRY.filter((b) => b.category === "content");
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-2xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
+        style={{ fontFamily: "Inter, system-ui, sans-serif" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4 border-b border-neutral-100">
+          <div className="flex items-center justify-between mb-1">
+            <h3 className="text-lg font-semibold text-neutral-900">
+              Add Block
+            </h3>
+            <div className="flex items-center gap-3">
+              {insertIndex !== undefined && (
+                <span className="text-xs text-neutral-400 bg-neutral-100 px-3 py-1 rounded-full font-medium">
+                  Position: {insertIndex + 1}
+                </span>
+              )}
+              <button
+                onClick={onClose}
+                className="w-8 h-8 rounded-lg flex items-center justify-center text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors"
+                aria-label="Close block picker"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <p className="text-sm text-neutral-400">
+            Choose a block and add it to your page
+          </p>
+        </div>
+
+        {/* Block grid */}
+        <div className="overflow-y-auto px-6 py-4 flex-1">
+          {/* Content blocks */}
+          <div>
+            <p className="text-[10px] font-semibold uppercase tracking-widest text-neutral-300 mb-2.5">
+              Content Blocks
+            </p>
+            <div className="grid grid-cols-2 gap-2.5">
+              {contentBlocks.map((block) => (
+                <BlockCard
+                  key={block.type}
+                  block={block}
+                  isHovered={hovered === block.type}
+                  onSelect={() => { onSelect(block.type); onClose(); }}
+                  onHover={() => setHovered(block.type)}
+                  onLeave={() => setHovered(null)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}