@morphika/webframe 0.1.0

package/components/blocks/BlockRenderer.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import type { ContentBlock, BlockLayout } from "../../lib/sanity/types";
+import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
+import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
+import { isShaderPreset } from "../../lib/animation/hover-effect-presets";
+import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { useViewport } from "../../lib/hooks/useViewport";
+import { resolveBlock } from "../../lib/builder/responsive";
+import { getBlockLayoutStyles, hasBlockLayout } from "../../lib/builder/layout-styles";
+import { hexToRgba } from "../../lib/color-utils";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+import EnterAnimationWrapper from "./EnterAnimationWrapper";
+import HoverAnimationWrapper from "./HoverAnimationWrapper";
+import TypewriterWrapper from "./TypewriterWrapper";
+
+import TextBlockRenderer, { getTextBlockStyles } from "./TextBlockRenderer";
+import ImageBlockRenderer from "./ImageBlockRenderer";
+import ImageGridBlockRenderer from "./ImageGridBlockRenderer";
+import VideoBlockRenderer from "./VideoBlockRenderer";
+import SpacerBlockRenderer from "./SpacerBlockRenderer";
+import ButtonBlockRenderer from "./ButtonBlockRenderer";
+import CoverBlockRenderer from "./CoverBlockRenderer";
+import ProjectGridBlockRenderer from "./ProjectGridBlockRenderer";
+
+/**
+ * Central block dispatcher for the public site.
+ *
+ * Resolves responsive overrides (tablet/phone) based on the current
+ * browser viewport width before passing the block to its renderer.
+ * This ensures all block types benefit from responsive overrides
+ * without each renderer needing to handle resolution individually.
+ *
+ * If the block has layout properties (spacing, background, offset, border),
+ * wraps the rendered block in a <div> with those styles applied.
+ * Layout responsive overrides (tablet/phone) generate @media CSS via
+ * buildBlockLayoutResponsiveCss().
+ *
+ * Enter animation: receives cascade from parent (page → section → column).
+ * Block-level enter_animation overrides the cascade entirely.
+ * Hover animation: block-level only, no cascade. Reads directly from
+ * block.hover_effect.
+ *
+ * Breakpoints match the builder device frame widths:
+ *   Desktop: > 810px
+ *   Tablet:  390–810px
+ *   Phone:   < 390px
+ */
+
+// ── Block layout responsive CSS generation ──
+
+/**
+ * Build CSS rules for block LAYOUT overrides (spacing, border, background) for a viewport.
+ * These rules target the inner `.blk-layout-{key}` div inside BlockRenderer.
+ */
+function buildBlockLayoutOverrideRules(
+  overrides?: Partial<BlockLayout>
+): string[] {
+  if (!overrides) return [];
+  const rules: string[] = [];
+
+  // px-value fields (excluding offset — vertical offset conflicts with alignment margin-auto)
+  const pxMap: Record<string, string> = {
+    spacing_top: "padding-top",
+    spacing_right: "padding-right",
+    spacing_bottom: "padding-bottom",
+    spacing_left: "padding-left",
+    offset_top: "margin-top",
+    offset_right: "margin-right",
+    offset_bottom: "margin-bottom",
+    offset_left: "margin-left",
+    border_radius: "border-radius",
+  };
+
+  for (const [field, cssProp] of Object.entries(pxMap)) {
+    const val = (overrides as Record<string, unknown>)[field];
+    if (val !== undefined && val !== null && val !== "") {
+      rules.push(`${cssProp}:${val}px!important`);
+    }
+  }
+
+  // Border width — side-aware
+  if (overrides.border_width !== undefined && overrides.border_width !== null && overrides.border_width !== "") {
+    const bw = overrides.border_width;
+    const sides = overrides.border_sides || "all";
+    switch (sides) {
+      case "top":
+        rules.push(`border-top-width:${bw}px!important`);
+        break;
+      case "right":
+        rules.push(`border-right-width:${bw}px!important`);
+        break;
+      case "bottom":
+        rules.push(`border-bottom-width:${bw}px!important`);
+        break;
+      case "left":
+        rules.push(`border-left-width:${bw}px!important`);
+        break;
+      case "top-bottom":
+        rules.push(`border-top-width:${bw}px!important`);
+        rules.push(`border-bottom-width:${bw}px!important`);
+        break;
+      case "left-right":
+        rules.push(`border-left-width:${bw}px!important`);
+        rules.push(`border-right-width:${bw}px!important`);
+        break;
+      default:
+        rules.push(`border-width:${bw}px!important`);
+        break;
+    }
+  }
+
+  // Border color (no px)
+  if (overrides.border_color) {
+    rules.push(`border-color:${overrides.border_color}!important`);
+  }
+
+  // Border style (no px)
+  if (overrides.border_style) {
+    rules.push(`border-style:${overrides.border_style}!important`);
+  }
+
+  // Background color (with opacity support)
+  if (overrides.background_color) {
+    const opacity = overrides.background_opacity;
+    if (opacity !== undefined && opacity < 100) {
+      const rgba = hexToRgba(overrides.background_color, opacity / 100);
+      rules.push(`background-color:${rgba}!important`);
+    } else {
+      rules.push(`background-color:${overrides.background_color}!important`);
+    }
+  } else if (overrides.background_opacity !== undefined) {
+    // Opacity-only override (color inherited from desktop) — handled at render via resolveBlock
+  }
+
+  return rules;
+}
+
+/**
+ * Build CSS rules for block ALIGNMENT overrides (h-align, v-align) for a viewport.
+ * These rules target the outer `.blk-wrap-{key}` wrapper div — the direct flex child
+ * of the column — where align-self actually takes effect.
+ *
+ * NOTE: Vertical alignment (align_v) is NOT handled here — it's applied as
+ * justify-content on the column flex container at render time. Responsive vertical
+ * alignment changes require column-level CSS which the renderers handle.
+ */
+function buildBlockAlignOverrideRules(
+  overrides?: Partial<BlockLayout>
+): string[] {
+  if (!overrides) return [];
+  const rules: string[] = [];
+
+  // Horizontal alignment → align-self within flex-col parent
+  if (overrides.align_h) {
+    const alignSelfMap: Record<string, string> = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end",
+    };
+    rules.push(`align-self:${alignSelfMap[overrides.align_h] || "flex-start"}!important`);
+    if (overrides.align_h === "left") {
+      rules.push("width:100%!important");
+    } else {
+      rules.push("width:auto!important");
+    }
+  }
+
+  return rules;
+}
+
+/**
+ * Generate responsive CSS <style> content for a block's layout AND alignment overrides.
+ */
+function buildBlockLayoutResponsiveCss(block: ContentBlock): string | null {
+  const responsive = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  if (!responsive) return null;
+
+  const key = block._key;
+  const tabletLayout = responsive.tablet?.layout as Partial<BlockLayout> | undefined;
+  const phoneLayout = responsive.phone?.layout as Partial<BlockLayout> | undefined;
+
+  const tabletLayoutRules = buildBlockLayoutOverrideRules(tabletLayout);
+  const phoneLayoutRules = buildBlockLayoutOverrideRules(phoneLayout);
+
+  const tabletAlignRules = buildBlockAlignOverrideRules(tabletLayout);
+  const phoneAlignRules = buildBlockAlignOverrideRules(phoneLayout);
+
+  const hasAny = tabletLayoutRules.length + phoneLayoutRules.length +
+                 tabletAlignRules.length + phoneAlignRules.length > 0;
+  if (!hasAny) return null;
+
+  let css = "";
+
+  if (tabletLayoutRules.length > 0 || tabletAlignRules.length > 0) {
+    const parts: string[] = [];
+    if (tabletLayoutRules.length > 0) {
+      parts.push(`.blk-layout-${key}{${tabletLayoutRules.join(";")}}`);
+    }
+    if (tabletAlignRules.length > 0) {
+      parts.push(`.blk-wrap-${key}{${tabletAlignRules.join(";")}}`);
+    }
+    css += `@media(max-width:${BREAKPOINTS.tablet}px){${parts.join("")}}`;
+  }
+
+  if (phoneLayoutRules.length > 0 || phoneAlignRules.length > 0) {
+    const parts: string[] = [];
+    if (phoneLayoutRules.length > 0) {
+      parts.push(`.blk-layout-${key}{${phoneLayoutRules.join(";")}}`);
+    }
+    if (phoneAlignRules.length > 0) {
+      parts.push(`.blk-wrap-${key}{${phoneAlignRules.join(";")}}`);
+    }
+    css += `@media(max-width:${BREAKPOINTS.phone}px){${parts.join("")}}`;
+  }
+
+  return css;
+}
+
+// ── Main component ──
+
+interface BlockRendererProps {
+  block: ContentBlock;
+  /** Column-level enter animation (from SectionV2Renderer) */
+  columnEnterAnimation?: EnterAnimationConfig;
+  /** Section-level enter animation (from section settings) */
+  sectionEnterAnimation?: EnterAnimationConfig;
+  /** Page-level enter animation (from page_settings) */
+  pageEnterAnimation?: EnterAnimationConfig;
+}
+
+export default function BlockRenderer({
+  block,
+  columnEnterAnimation,
+  sectionEnterAnimation,
+  pageEnterAnimation,
+}: BlockRendererProps) {
+  const viewport = useViewport();
+  const resolveAsset = useAssetUrl();
+  const resolved = resolveBlock(block, viewport);
+
+  let content: React.ReactNode;
+
+  switch (resolved._type) {
+    case "textBlock":
+      content = <TextBlockRenderer block={resolved} />;
+      break;
+    case "imageBlock":
+      content = <ImageBlockRenderer block={resolved} />;
+      break;
+    case "imageGridBlock":
+      content = <ImageGridBlockRenderer block={resolved} />;
+      break;
+    case "videoBlock":
+      content = <VideoBlockRenderer block={resolved} />;
+      break;
+    case "spacerBlock":
+      content = <SpacerBlockRenderer block={resolved} />;
+      break;
+    case "buttonBlock":
+      content = <ButtonBlockRenderer block={resolved} />;
+      break;
+    case "coverBlock":
+      content = <CoverBlockRenderer block={resolved} />;
+      break;
+    case "projectGridBlock":
+      content = <ProjectGridBlockRenderer block={resolved as import("@/lib/sanity/types").ProjectGridBlock} />;
+      break;
+    default:
+      if (process.env.NODE_ENV === "development") {
+        content = (
+          <div className="border border-dashed border-brand-secondary/50 p-4 font-mono text-xs text-brand-secondary">
+            Unknown block type: {(resolved as ContentBlock)._type}
+          </div>
+        );
+      } else {
+        return null;
+      }
+  }
+
+  // ── Resolve enter animation once (used both for typewriter early-wrap and normal path) ──
+  const blockEnterAnim = (resolved as unknown as Record<string, unknown>).enter_animation as
+    | EnterAnimationConfig
+    | undefined;
+  const resolvedEnter = resolveEnterAnimation(
+    blockEnterAnim,
+    columnEnterAnimation,
+    sectionEnterAnimation,
+    pageEnterAnimation,
+  );
+  const isTypewriter = resolvedEnter?.preset === "typewriter" && resolved._type === "textBlock";
+
+  // ── Typewriter: wrap BEFORE layout so padding applies to the animation ──
+  // Must be before the layout wrapper so that block padding/background wraps
+  // the TypewriterWrapper. Single-phase: rich text with per-character animation,
+  // swaps to standard PortableText children after completion.
+  if (isTypewriter && resolvedEnter) {
+    const twConfig = (resolved as unknown as Record<string, unknown>).typewriter_config as
+      | TypewriterConfig
+      | undefined;
+    const textBlock = resolved as import("@/lib/sanity/types").TextBlock;
+    const { className: textClassName, style: textStyle } = getTextBlockStyles(textBlock);
+    content = (
+      <TypewriterWrapper
+        portableText={textBlock.text}
+        config={twConfig}
+        delay={resolvedEnter.delay}
+        textClassName={textClassName}
+        textStyle={textStyle}
+      >
+        {content}
+      </TypewriterWrapper>
+    );
+  }
+
+  // Wrap in layout div if block has layout properties set (spacing, background, border).
+  const layout = (resolved as unknown as Record<string, unknown>).layout as ContentBlock["layout"] | undefined;
+  if (hasBlockLayout(layout)) {
+    const layoutStyles = getBlockLayoutStyles(layout, process.env.NEXT_PUBLIC_ASSET_BASE_URL);
+    const responsiveCss = buildBlockLayoutResponsiveCss(block);
+
+    content = (
+      <>
+        {responsiveCss && (
+          <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />
+        )}
+        <div
+          className={responsiveCss ? `blk-layout-${block._key}` : undefined}
+          style={layoutStyles}
+        >
+          {content}
+        </div>
+      </>
+    );
+  } else {
+    const responsiveCss = buildBlockLayoutResponsiveCss(block);
+    if (responsiveCss) {
+      content = (
+        <>
+          <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />
+          <div className={`blk-layout-${block._key}`}>{content}</div>
+        </>
+      );
+    }
+  }
+
+  // ── Enter animation: apply non-typewriter presets after layout wrapper ──
+  // Typewriter was already applied BEFORE the layout wrapper (above) so that
+  // block padding wraps both phases. All other presets wrap after layout.
+  if (resolvedEnter && resolvedEnter.preset !== "none" && !isTypewriter) {
+    content = (
+      <EnterAnimationWrapper config={resolvedEnter}>
+        {content}
+      </EnterAnimationWrapper>
+    );
+  }
+
+  // ── Hover animation: block-level only, no cascade ──
+  const blockHoverEffect = (resolved as unknown as Record<string, unknown>).hover_effect as
+    | HoverEffectConfig
+    | undefined;
+  if (blockHoverEffect?.preset && blockHoverEffect.preset !== "none") {
+    // Extract image src for shader presets (ripple, rgb-shift, pixelate)
+    let shaderSrc: string | undefined;
+    let shaderBorderRadius: string | undefined;
+    const isShader = isShaderPreset(blockHoverEffect.preset);
+    if (isShader) {
+      if (resolved._type === "imageBlock") {
+        shaderSrc = resolveAsset((resolved as import("@/lib/sanity/types").ImageBlock).asset_path);
+        const br = (resolved as import("@/lib/sanity/types").ImageBlock).border_radius;
+        if (br) shaderBorderRadius = `${String(br).replace(/px$/i, "")}px`;
+      } else if (resolved._type === "coverBlock") {
+        const mediaPath = (resolved as import("@/lib/sanity/types").CoverBlock).media_path;
+        if (mediaPath) shaderSrc = resolveAsset(mediaPath);
+      }
+      // Shader preset without image src: skip wrapper entirely
+      if (!shaderSrc) {
+        // No-op: can't apply shader without an image source
+      } else {
+        content = (
+          <HoverAnimationWrapper
+            config={blockHoverEffect}
+            shaderSrc={shaderSrc}
+            shaderContainerStyle={shaderBorderRadius ? { borderRadius: shaderBorderRadius } : undefined}
+          >
+            {content}
+          </HoverAnimationWrapper>
+        );
+      }
+    } else {
+      // CSS hover preset — always safe to wrap
+      content = (
+        <HoverAnimationWrapper config={blockHoverEffect}>
+          {content}
+        </HoverAnimationWrapper>
+      );
+    }
+  }
+
+  return <>{content}</>;
+}

package/components/blocks/ButtonBlockRenderer.tsx

@@ -0,0 +1,52 @@
+import type { ButtonBlock } from "../../lib/sanity/types";
+
+const styleMap: Record<string, string> = {
+  primary:
+    "bg-brand-accent-alt text-brand-dark hover:bg-brand-accent",
+  secondary: "bg-brand-primary text-white hover:opacity-90",
+  outline:
+    "border border-brand-text text-brand-text hover:bg-brand-text hover:text-brand-dark",
+  text: "text-brand-accent-alt underline underline-offset-4 hover:text-brand-accent",
+};
+
+const sizeMap: 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 alignmentMap: Record<string, string> = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+};
+
+export default function ButtonBlockRenderer({
+  block,
+}: {
+  block: ButtonBlock;
+}) {
+  const variant = styleMap[block.style ?? "primary"];
+  const size = sizeMap[block.size ?? "medium"];
+  const alignment = alignmentMap[block.alignment ?? "left"];
+
+  return (
+    <div className={`flex ${alignment}`}>
+      <a
+        href={block.url}
+        target={block.target ? "_blank" : undefined}
+        rel={block.target ? "noopener noreferrer" : undefined}
+        className={[
+          "inline-block font-mono uppercase tracking-wider transition-all",
+          variant,
+          size,
+          block.full_width ? "w-full text-center" : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {block.text}
+      </a>
+    </div>
+  );
+}

package/components/blocks/CoverBlockRenderer.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import type { CoverBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
+
+function getOverlayStyle(
+  overlay: CoverBlock["overlay"],
+  opacity: number
+): React.CSSProperties | null {
+  const alpha = opacity / 100;
+  switch (overlay) {
+    case "dark":
+      return { backgroundColor: `rgba(0,0,0,${alpha})` };
+    case "light":
+      return { backgroundColor: `rgba(255,255,255,${alpha})` };
+    case "gradient-bottom":
+      return {
+        background: `linear-gradient(to top, rgba(0,0,0,${alpha}) 0%, transparent 60%)`,
+      };
+    case "gradient-top":
+      return {
+        background: `linear-gradient(to bottom, rgba(0,0,0,${alpha}) 0%, transparent 60%)`,
+      };
+    default:
+      return null;
+  }
+}
+
+function getAlignItems(v: CoverBlock["content_align_v"]): string {
+  switch (v) {
+    case "top":
+      return "flex-start";
+    case "bottom":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}
+
+function getJustify(h: CoverBlock["content_align_h"]): string {
+  switch (h) {
+    case "left":
+      return "flex-start";
+    case "right":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}
+
+function getTextAlign(
+  h: CoverBlock["content_align_h"]
+): "left" | "center" | "right" {
+  return h || "center";
+}
+
+export default function CoverBlockRenderer({
+  block,
+}: {
+  block: CoverBlock;
+}) {
+  const height =
+    block.height === "custom" && block.custom_height
+      ? block.custom_height
+      : block.height || "100vh";
+
+  const mobileHeight =
+    block.mobile_height && block.mobile_height !== "same"
+      ? block.mobile_height
+      : null;
+
+  const overlayStyle = getOverlayStyle(
+    block.overlay ?? "none",
+    block.overlay_opacity ?? 50
+  );
+
+  const resolveAsset = useAssetUrl();
+  const mediaSrc = block.media_path ? resolveAsset(block.media_path) : undefined;
+  const posterSrc = block.video_poster
+    ? resolveAsset(block.video_poster)
+    : undefined;
+  const isVideo = block.media_type === "video";
+
+  const objectFit = block.background_size || "cover";
+  const objectPosition = block.background_position || "center center";
+
+  const textColor = block.text_color || "#ffffff";
+
+  const ctaStyleClasses: Record<string, string> = {
+    primary:
+      "bg-brand-accent-alt text-brand-dark hover:bg-brand-accent",
+    secondary:
+      "bg-brand-dark text-white hover:bg-neutral-800",
+    outline:
+      "border-2 border-current bg-transparent hover:bg-white/10",
+    text: "underline underline-offset-4 hover:opacity-70",
+  };
+
+  return (
+    <>
+      {/* Mobile height override via inline style tag */}
+      {mobileHeight && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `@media(max-width:767px){.cover-block-${block._key}{height:${mobileHeight}!important;min-height:${mobileHeight}!important;}}`,
+          }}
+        />
+      )}
+
+      <section
+        className={`cover-block-${block._key} relative flex overflow-hidden`}
+        style={{
+          height,
+          minHeight: height,
+          alignItems: getAlignItems(block.content_align_v),
+          justifyContent: getJustify(block.content_align_h),
+          color: textColor,
+        }}
+      >
+        {/* Media layer — uses <img> instead of background-image for error recovery */}
+        {mediaSrc && !isVideo && (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={mediaSrc}
+            alt={block.headline || ""}
+            onError={handleImageRetry}
+            className="absolute inset-0 h-full w-full"
+            style={{
+              objectFit: objectFit as "cover" | "contain" | "none",
+              objectPosition,
+            }}
+          />
+        )}
+
+        {mediaSrc && isVideo && (
+          <video
+            src={mediaSrc}
+            poster={posterSrc}
+            autoPlay
+            loop
+            muted
+            playsInline
+            onError={handleVideoRetry}
+            className="absolute inset-0 h-full w-full"
+            style={{
+              objectFit: objectFit as "cover" | "contain" | "none",
+              objectPosition,
+            }}
+          />
+        )}
+
+        {/* Fallback: poster only if no media_path but video_poster exists */}
+        {!mediaSrc && posterSrc && (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={posterSrc}
+            alt=""
+            onError={handleImageRetry}
+            className="absolute inset-0 h-full w-full"
+            style={{ objectFit: "cover", objectPosition: "center" }}
+          />
+        )}
+
+        {/* No media fallback */}
+        {!mediaSrc && !posterSrc && (
+          <div className="absolute inset-0 bg-brand-dark" />
+        )}
+
+        {/* Overlay */}
+        {overlayStyle && <div className="absolute inset-0" style={overlayStyle} />}
+
+        {/* Content */}
+        <div
+          className="relative z-10 flex flex-col gap-4 py-12"
+          style={{
+            maxWidth: block.content_max_width || "800px",
+            textAlign: getTextAlign(block.content_align_h),
+            width: "100%",
+            paddingLeft: "var(--grid-padding, 24px)",
+            paddingRight: "var(--grid-padding, 24px)",
+          }}
+        >
+          {block.headline && (
+            <h1 className="font-mono text-4xl uppercase tracking-widest md:text-6xl lg:text-7xl">
+              {block.headline}
+            </h1>
+          )}
+
+          {block.subheadline && (
+            <p className="font-mono text-sm uppercase tracking-wider opacity-80 md:text-base">
+              {block.subheadline}
+            </p>
+          )}
+
+          {block.cta_button?.text && block.cta_button.url && (
+            <div>
+              <a
+                href={block.cta_button.url}
+                target={
+                  block.cta_button.target_blank ? "_blank" : undefined
+                }
+                rel={
+                  block.cta_button.target_blank
+                    ? "noopener noreferrer"
+                    : undefined
+                }
+                className={`inline-block px-6 py-3 font-mono text-sm uppercase tracking-wider transition ${
+                  ctaStyleClasses[block.cta_button.style || "primary"]
+                }`}
+              >
+                {block.cta_button.text}
+              </a>
+            </div>
+          )}
+        </div>
+
+        {/* Scroll indicator */}
+        {block.show_scroll_indicator && (
+          <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 animate-bounce">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 5v14M5 12l7 7 7-7" />
+            </svg>
+          </div>
+        )}
+      </section>
+    </>
+  );
+}