@morphika/webframe 0.1.0

package/components/blocks/SectionRenderer.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+/**
+ * SectionRenderer — renders a first-class PageSection on the public site.
+ *
+ * Unlike V2 sections (which have columns → blocks), SectionRenderer
+ * renders the section block directly — no row/column wrapper needed.
+ *
+ * Session 76: Created as part of the matryoshka → first-class section refactor.
+ * Session 120: Updated for new enter animation system.
+ */
+
+import type { PageSection, SectionBlock } from "../../lib/sanity/types";
+import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
+import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
+import BlockRenderer from "./BlockRenderer";
+import EnterAnimationWrapper from "./EnterAnimationWrapper";
+import { getRowLayoutStyles, hexToRgba } from "../../lib/builder/layout-styles";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+
+/**
+ * BUG-013 fix: Build responsive CSS overrides for section layout settings.
+ * Same approach as RowRenderer's buildRowResponsiveCss.
+ */
+function buildSectionResponsiveCss(section: PageSection): string | null {
+  const responsive = section.responsive;
+  if (!responsive) return null;
+
+  const key = section._key;
+  const cssRules: string[] = [];
+
+  for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
+    const overrides = responsive[vp];
+    if (!overrides) continue;
+    const rules: string[] = [];
+
+    // px-value properties
+    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[field as keyof typeof overrides];
+      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 as string) || "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
+    if (overrides.border_color) {
+      rules.push(`border-color:${overrides.border_color}!important`);
+    }
+
+    // Border style
+    if (overrides.border_style && overrides.border_style !== "none") {
+      rules.push(`border-style:${overrides.border_style}!important`);
+    }
+
+    // Background color + opacity → rgba()
+    if (overrides.background_color) {
+      const opacity = overrides.background_opacity as number | undefined;
+      if (opacity !== undefined && opacity < 100) {
+        rules.push(`background-color:${hexToRgba(overrides.background_color as string, opacity / 100)}!important`);
+      } else {
+        rules.push(`background-color:${overrides.background_color}!important`);
+      }
+    }
+
+    // Background image + sub-properties
+    if (overrides.background_image) {
+      const imgUrl = process.env.NEXT_PUBLIC_ASSET_BASE_URL
+        ? `${(process.env.NEXT_PUBLIC_ASSET_BASE_URL as string).replace(/\/$/, "")}/${overrides.background_image}`
+        : overrides.background_image;
+      rules.push(`background-image:url(${imgUrl})!important`);
+      rules.push(`background-size:${overrides.background_size || "cover"}!important`);
+      rules.push(`background-position:${overrides.background_position || "center center"}!important`);
+      rules.push(`background-repeat:${overrides.background_repeat || "no-repeat"}!important`);
+    } else {
+      if (overrides.background_size) rules.push(`background-size:${overrides.background_size}!important`);
+      if (overrides.background_position) rules.push(`background-position:${overrides.background_position}!important`);
+      if (overrides.background_repeat) rules.push(`background-repeat:${overrides.background_repeat}!important`);
+    }
+
+    if (rules.length > 0) {
+      cssRules.push(`@media(max-width:${breakpoint}px){.section-${key}{${rules.join(";")}}}`);
+    }
+  }
+
+  return cssRules.length > 0 ? cssRules.join("") : null;
+}
+
+interface SectionRendererProps {
+  section: PageSection;
+  /** Page-level enter animation config (from page_settings.enter_animation) */
+  pageEnterAnimation?: EnterAnimationConfig;
+}
+
+export default function SectionRenderer({ section, pageEnterAnimation }: SectionRendererProps) {
+  const s = section.settings ?? {};
+
+  // Get the section block
+  const block = Array.isArray(section.block) ? section.block[0] : undefined;
+  if (!block) return null;
+
+  // Resolve enter animation (section settings → page default → none)
+  const sectionEnterConfig = s.enter_animation;
+  const resolvedEnter = resolveEnterAnimation(undefined, undefined, sectionEnterConfig, pageEnterAnimation);
+  const hasAnimation = resolvedEnter !== null && resolvedEnter.preset !== "none";
+
+  // Section layout styles (background, spacing, border, etc.)
+  const layoutStyles = getRowLayoutStyles(s as Record<string, unknown>);
+
+  // BUG-013 fix: build responsive CSS overrides for section
+  const responsiveCss = buildSectionResponsiveCss(section);
+
+  // Render the section block directly — no columns, no grid
+  // V1 PageSections contain section blocks (ProjectGrid, Parallax) which
+  // don't use the block-level enter/hover cascade — they have their own systems.
+  let content: React.ReactNode = (
+    <section className={`section-${section._key}`} style={layoutStyles}>
+      {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
+      <BlockRenderer block={block} pageEnterAnimation={pageEnterAnimation} sectionEnterAnimation={sectionEnterConfig} />
+    </section>
+  );
+
+  if (hasAnimation && resolvedEnter) {
+    content = (
+      <EnterAnimationWrapper config={resolvedEnter}>
+        {content}
+      </EnterAnimationWrapper>
+    );
+  }
+
+  return content;
+}

package/components/blocks/SectionV2Renderer.tsx

@@ -0,0 +1,330 @@
+"use client";
+
+/**
+ * SectionV2Renderer — renders a first-class PageSectionV2 on the public site.
+ *
+ * Pure CSS Grid renderer with explicit column positions stored in Sanity.
+ * No layout computation needed — grid_column, grid_row, and span map directly
+ * to CSS Grid properties.
+ *
+ * Session 83: Created as part of V2 Grid System Phase 6.
+ * Session 120: Updated for new enter animation system (4-level cascade).
+ */
+
+import type {
+  PageSectionV2,
+  SectionColumn,
+  ColumnOverride,
+  SectionV2Settings,
+  SectionV2ResponsiveOverride,
+  ContentBlock,
+  BlockLayout,
+} from "../../lib/sanity/types";
+import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
+import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
+import BlockRenderer from "./BlockRenderer";
+import EnterAnimationWrapper from "./EnterAnimationWrapper";
+import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, hexToRgba } from "../../lib/builder/layout-styles";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+
+// ── Responsive CSS generation ──
+
+/**
+ * Build CSS override rules for section-level settings at a specific viewport.
+ * Covers: col_gap, row_gap, spacing (TRBL), offset (TRBL), border, background.
+ */
+function buildSettingsOverrideRules(
+  overrides?: Partial<SectionV2Settings>,
+  sectionKey?: string,
+): string[] {
+  if (!overrides) return [];
+  const rules: string[] = [];
+
+  // Grid-specific: col_gap → column-gap, row_gap → row-gap
+  if (overrides.col_gap !== undefined) {
+    rules.push(`column-gap:${overrides.col_gap}px!important`);
+  }
+  if (overrides.row_gap !== undefined) {
+    rules.push(`row-gap:${overrides.row_gap}px!important`);
+  }
+
+  // px-value properties (spacing, offset, border-radius)
+  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
+  if (overrides.border_color) {
+    rules.push(`border-color:${overrides.border_color}!important`);
+  }
+
+  // Border style
+  if (overrides.border_style && overrides.border_style !== "none") {
+    rules.push(`border-style:${overrides.border_style}!important`);
+  }
+
+  // Background color + opacity
+  if (overrides.background_color) {
+    const opacity = overrides.background_opacity;
+    if (opacity !== undefined && opacity < 100) {
+      rules.push(`background-color:${hexToRgba(overrides.background_color, opacity / 100)}!important`);
+    } else {
+      rules.push(`background-color:${overrides.background_color}!important`);
+    }
+  }
+
+  return rules;
+}
+
+/**
+ * Build responsive column override CSS for a specific viewport.
+ * Each column override replaces grid-column and/or grid-row and/or span.
+ */
+function buildColumnOverrideCss(
+  sectionKey: string,
+  columnOverrides: ColumnOverride[] | undefined,
+  breakpoint: number,
+): string {
+  if (!columnOverrides || columnOverrides.length === 0) return "";
+
+  const rules: string[] = [];
+  for (const co of columnOverrides) {
+    const colRules: string[] = [];
+    if (co.grid_column !== undefined && co.span !== undefined) {
+      colRules.push(`grid-column:${co.grid_column}/span ${co.span}!important`);
+    } else if (co.grid_column !== undefined) {
+      colRules.push(`grid-column-start:${co.grid_column}!important`);
+    } else if (co.span !== undefined) {
+      // span-only: need to reconstruct grid-column with original start
+      colRules.push(`grid-column-end:span ${co.span}!important`);
+    }
+    if (co.grid_row !== undefined) {
+      colRules.push(`grid-row:${co.grid_row}!important`);
+    }
+    if (colRules.length > 0) {
+      rules.push(`.sv2-col-${sectionKey}-${co._key}{${colRules.join(";")}}`);
+    }
+  }
+
+  return rules.length > 0
+    ? `@media(max-width:${breakpoint}px){${rules.join("")}}`
+    : "";
+}
+
+/**
+ * Generate all responsive CSS for a V2 section (section settings + column overrides).
+ */
+function buildSectionV2ResponsiveCss(section: PageSectionV2): string | null {
+  const responsive = section.responsive;
+  if (!responsive) return null;
+
+  const key = section._key;
+  const cssParts: string[] = [];
+
+  for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
+    const override = responsive[vp];
+    if (!override) continue;
+
+    // Section-level settings overrides
+    const settingsRules = buildSettingsOverrideRules(override.settings as Partial<SectionV2Settings> | undefined);
+    if (settingsRules.length > 0) {
+      cssParts.push(`@media(max-width:${breakpoint}px){.sv2-${key}{${settingsRules.join(";")}}}`);
+    }
+
+    // Column position/span overrides
+    const colCss = buildColumnOverrideCss(key, override.columns, breakpoint);
+    if (colCss) cssParts.push(colCss);
+  }
+
+  return cssParts.length > 0 ? cssParts.join("") : null;
+}
+
+// ── Main component ──
+
+interface SectionV2RendererProps {
+  section: PageSectionV2;
+  /** Page-level enter animation config (from page_settings.enter_animation) */
+  pageEnterAnimation?: EnterAnimationConfig;
+}
+
+export default function SectionV2Renderer({ section, pageEnterAnimation }: SectionV2RendererProps) {
+  const s = section.settings;
+
+  const gridColumns = s.grid_columns || 12;
+  const colGap = s.col_gap ?? 20;
+  const rowGap = s.row_gap ?? 20;
+
+  // Resolve section-level enter animation (section → page → null)
+  const sectionEnterConfig = s.enter_animation;
+
+  // Stagger settings — stagger only applies when the section has an enter animation
+  const resolvedSectionEnter = resolveEnterAnimation(undefined, undefined, sectionEnterConfig, pageEnterAnimation);
+  const hasAnimation = resolvedSectionEnter !== null && resolvedSectionEnter.preset !== "none";
+
+  const stagger = s.stagger;
+  const staggerEnabled = stagger?.enabled && hasAnimation;
+  const staggerDelay = stagger?.delayPerChild ?? 100;
+  const staggerDirection = stagger?.direction ?? "left-to-right";
+
+  // Section-level layout styles (background, spacing, border, offset)
+  const layoutStyles = getRowLayoutStyles(s as unknown as Record<string, unknown>, process.env.NEXT_PUBLIC_ASSET_BASE_URL);
+
+  // Responsive CSS (section settings + column overrides)
+  const responsiveCss = buildSectionV2ResponsiveCss(section);
+
+  // Sort columns for stagger ordering
+  const sortedColumns = [...section.columns].sort((a, b) => {
+    if (a.grid_row !== b.grid_row) return a.grid_row - b.grid_row;
+    return a.grid_column - b.grid_column;
+  });
+
+  // Stagger index computation
+  const getStaggerIndex = (colIndex: number): number => {
+    if (!staggerEnabled) return 0;
+    return staggerDirection === "right-to-left"
+      ? sortedColumns.length - 1 - colIndex
+      : colIndex;
+  };
+
+  // Build section content
+  const sectionContent = (
+    <section
+      className={`sv2-${section._key}`}
+      style={layoutStyles}
+    >
+      {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
+      <div
+        style={{
+          maxWidth: "var(--grid-width, 1445px)",
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "100%",
+        }}
+      >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+          columnGap: `${colGap}px`,
+          rowGap: `${rowGap}px`,
+        }}
+      >
+        {sortedColumns.map((col, colIndex) => {
+          const staggerIdx = staggerEnabled ? getStaggerIndex(colIndex) : undefined;
+
+          // Column-level vertical alignment from blocks' align_v settings
+          const colJustify = getColumnVerticalAlign(col.blocks || []);
+
+          const columnContent = (
+            <div
+              key={col._key}
+              className={`sv2-col-${section._key}-${col._key}`}
+              style={{
+                gridColumn: `${col.grid_column} / span ${col.span}`,
+                gridRow: col.grid_row,
+                display: "flex",
+                flexDirection: "column",
+                ...(colJustify ? { justifyContent: colJustify } : {}),
+                height: "100%",
+                minWidth: 0,
+                overflow: "hidden",
+              }}
+            >
+              {(col.blocks || []).map((block) => {
+                const blockLayout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+                const alignStyles = hasBlockAlignment(blockLayout) ? getBlockAlignmentStyles(blockLayout) : undefined;
+                const hasHAlign = blockLayout?.align_h && blockLayout.align_h !== "left";
+                return (
+                  <div key={block._key} className={`blk-wrap-${block._key}`} style={{ ...(!hasHAlign ? { width: "100%" } : {}), minWidth: 0, ...alignStyles }}>
+                    <BlockRenderer
+                      block={block}
+                      columnEnterAnimation={col.enter_animation}
+                      sectionEnterAnimation={sectionEnterConfig}
+                      pageEnterAnimation={pageEnterAnimation}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          );
+
+          // When stagger is enabled, wrap each column individually with enter animation
+          if (staggerEnabled && staggerIdx !== undefined && resolvedSectionEnter) {
+            return (
+              <EnterAnimationWrapper
+                key={col._key}
+                config={resolvedSectionEnter}
+                staggerIndex={staggerIdx}
+                staggerDelay={staggerDelay}
+              >
+                {columnContent}
+              </EnterAnimationWrapper>
+            );
+          }
+
+          return columnContent;
+        })}
+      </div>
+      </div>
+    </section>
+  );
+
+  // Section-level enter animation (without stagger — wraps entire section)
+  let result: React.ReactNode = sectionContent;
+
+  if (hasAnimation && !staggerEnabled && resolvedSectionEnter) {
+    result = (
+      <EnterAnimationWrapper config={resolvedSectionEnter}>
+        {result}
+      </EnterAnimationWrapper>
+    );
+  }
+
+  return result;
+}