@morphika/andami 0.2.12 → 0.2.13

package/sanity/schemas/objects/coverSection.ts

@@ -0,0 +1,317 @@
+import { defineField, defineType } from "sanity";
+
+/**
+ * coverSection — Full-viewport section with proportional rows and background media.
+ *
+ * A new ContentItem type alongside pageSectionV2, parallaxGroup, and customSectionInstance.
+ * Uses the same column/block system as V2 but with fixed-height proportional rows
+ * instead of content-driven rows. Overflow is always hidden.
+ *
+ * Session 176: Cover Sections — Phase 1 (Schema).
+ */
+
+const columnFields = [
+  defineField({
+    name: "grid_column",
+    title: "Grid Column",
+    type: "number",
+    description: "1-based start position (1–12)",
+    validation: (Rule) => Rule.required().min(1).max(12),
+  }),
+  defineField({
+    name: "grid_row",
+    title: "Grid Row",
+    type: "number",
+    description: "1-based row index (maps to cover_rows)",
+    validation: (Rule) => Rule.required().min(1),
+  }),
+  defineField({
+    name: "span",
+    title: "Column Span",
+    type: "number",
+    description: "How many grid columns (1–12)",
+    validation: (Rule) => Rule.required().min(1).max(12),
+  }),
+  defineField({
+    name: "blocks",
+    title: "Blocks",
+    type: "array",
+    of: [
+      { type: "textBlock" },
+      { type: "imageBlock" },
+      { type: "imageGridBlock" },
+      { type: "videoBlock" },
+      { type: "spacerBlock" },
+      { type: "buttonBlock" },
+    ],
+  }),
+  defineField({
+    name: "enter_animation",
+    title: "Enter Animation",
+    type: "enterAnimationConfig",
+  }),
+];
+
+const responsiveColumnOverrideFields = [
+  defineField({
+    name: "columns",
+    title: "Column Overrides",
+    type: "array",
+    of: [
+      {
+        type: "object",
+        name: "columnOverride",
+        fields: [
+          defineField({ name: "grid_column", title: "Grid Column", type: "number" }),
+          defineField({ name: "grid_row", title: "Grid Row", type: "number" }),
+          defineField({ name: "span", title: "Span", type: "number" }),
+        ],
+      },
+    ],
+  }),
+];
+
+const responsiveRowOverrideFields = [
+  defineField({
+    name: "cover_rows",
+    title: "Row Height Overrides",
+    type: "array",
+    of: [
+      {
+        type: "object",
+        name: "coverRowOverride",
+        fields: [
+          defineField({ name: "height_percent", title: "Height %", type: "number" }),
+        ],
+      },
+    ],
+  }),
+];
+
+const responsiveSettingsFields = [
+  defineField({ name: "col_gap", title: "Column Gap", type: "number" }),
+  defineField({ name: "row_gap", title: "Row Gap", type: "number" }),
+  defineField({ name: "spacing_top", type: "string", title: "Spacing Top" }),
+  defineField({ name: "spacing_right", type: "string", title: "Spacing Right" }),
+  defineField({ name: "spacing_bottom", type: "string", title: "Spacing Bottom" }),
+  defineField({ name: "spacing_left", type: "string", title: "Spacing Left" }),
+];
+
+export default defineType({
+  name: "coverSection",
+  title: "Cover Section",
+  type: "object",
+  fields: [
+    // ── Background ──
+    defineField({
+      name: "background_type",
+      title: "Background Type",
+      type: "string",
+      options: {
+        list: [
+          { title: "Image", value: "image" },
+          { title: "Video", value: "video" },
+        ],
+      },
+      initialValue: "image",
+    }),
+    defineField({
+      name: "background_image",
+      title: "Background Image",
+      type: "string",
+      description: "Asset path for background image",
+    }),
+    defineField({
+      name: "background_video",
+      title: "Background Video",
+      type: "string",
+      description: "Asset path for background video",
+    }),
+    defineField({
+      name: "background_position",
+      title: "Background Position",
+      type: "string",
+      description: "CSS background-position value",
+      initialValue: "center center",
+    }),
+    defineField({
+      name: "background_size",
+      title: "Background Size",
+      type: "string",
+      options: {
+        list: [
+          { title: "Cover", value: "cover" },
+          { title: "Contain", value: "contain" },
+          { title: "Auto", value: "auto" },
+        ],
+      },
+      initialValue: "cover",
+    }),
+    defineField({
+      name: "background_overlay_color",
+      title: "Overlay Color",
+      type: "string",
+      description: "Hex color for background overlay",
+      initialValue: "#000000",
+    }),
+    defineField({
+      name: "background_overlay_opacity",
+      title: "Overlay Opacity",
+      type: "number",
+      description: "0–100",
+      initialValue: 0,
+      validation: (Rule) => Rule.min(0).max(100),
+    }),
+
+    // ── Section Height ──
+    defineField({
+      name: "height",
+      title: "Section Height",
+      type: "string",
+      options: {
+        list: [
+          { title: "Full Viewport (100vh)", value: "100vh" },
+          { title: "80% Viewport (80vh)", value: "80vh" },
+          { title: "50% Viewport (50vh)", value: "50vh" },
+        ],
+      },
+      initialValue: "100vh",
+    }),
+
+    // ── Cover Rows (explicit, proportional) ──
+    defineField({
+      name: "cover_rows",
+      title: "Cover Rows",
+      type: "array",
+      description: "Proportional rows — heights must sum to 100%",
+      of: [
+        {
+          type: "object",
+          name: "coverRow",
+          fields: [
+            defineField({
+              name: "height_percent",
+              title: "Height (%)",
+              type: "number",
+              description: "Row height as percentage of section (5–95)",
+              validation: (Rule) => Rule.required().min(5).max(95),
+            }),
+            defineField({
+              name: "vertical_align",
+              title: "Vertical Alignment",
+              type: "string",
+              description: "How content is aligned vertically within this row",
+              options: {
+                list: [
+                  { title: "Top", value: "start" },
+                  { title: "Center", value: "center" },
+                  { title: "Bottom", value: "end" },
+                ],
+              },
+              initialValue: "start",
+            }),
+          ],
+          preview: {
+            select: { height: "height_percent", align: "vertical_align" },
+            prepare({ height, align }) {
+              return { title: `${height ?? 0}%`, subtitle: align ?? "start" };
+            },
+          },
+        },
+      ],
+      validation: (Rule) => Rule.required().min(1).max(5),
+    }),
+
+    // ── Columns (same structure as V2) ──
+    defineField({
+      name: "columns",
+      title: "Columns",
+      type: "array",
+      of: [
+        {
+          type: "object",
+          name: "sectionColumn",
+          fields: columnFields,
+        },
+      ],
+    }),
+
+    // ── Section Settings (subset of V2 — no background/border, those are section-level) ──
+    defineField({
+      name: "settings",
+      title: "Section Settings",
+      type: "object",
+      fields: [
+        defineField({ name: "grid_columns", title: "Grid Columns", type: "number" }),
+        defineField({ name: "col_gap", title: "Column Gap", type: "number" }),
+        defineField({ name: "row_gap", title: "Row Gap", type: "number" }),
+        // Spacing (padding TRBL)
+        defineField({ name: "spacing_top", title: "Spacing Top", type: "string" }),
+        defineField({ name: "spacing_right", title: "Spacing Right", type: "string" }),
+        defineField({ name: "spacing_bottom", title: "Spacing Bottom", type: "string" }),
+        defineField({ name: "spacing_left", title: "Spacing Left", type: "string" }),
+        // Animation
+        defineField({
+          name: "enter_animation",
+          title: "Enter Animation",
+          type: "enterAnimationConfig",
+        }),
+        defineField({
+          name: "stagger",
+          title: "Stagger",
+          type: "object",
+          fields: [
+            defineField({ name: "enabled", title: "Enabled", type: "boolean" }),
+            defineField({ name: "delayPerChild", title: "Delay Per Child", type: "number" }),
+            defineField({
+              name: "direction",
+              title: "Direction",
+              type: "string",
+              options: { list: ["left-to-right", "right-to-left"] },
+            }),
+          ],
+        }),
+      ],
+    }),
+
+    // ── Responsive Overrides ──
+    defineField({
+      name: "responsive",
+      title: "Responsive Overrides",
+      type: "object",
+      hidden: true,
+      fields: [
+        defineField({
+          name: "tablet",
+          title: "Tablet",
+          type: "object",
+          fields: [
+            ...responsiveColumnOverrideFields,
+            ...responsiveRowOverrideFields,
+            ...responsiveSettingsFields,
+          ],
+        }),
+        defineField({
+          name: "phone",
+          title: "Phone",
+          type: "object",
+          fields: [
+            ...responsiveColumnOverrideFields,
+            ...responsiveRowOverrideFields,
+            ...responsiveSettingsFields,
+          ],
+        }),
+      ],
+    }),
+  ],
+  preview: {
+    select: { height: "height", rows: "cover_rows" },
+    prepare({ height, rows }) {
+      const rowCount = Array.isArray(rows) ? rows.length : 0;
+      return {
+        title: "Cover Section",
+        subtitle: `${height || "100vh"} · ${rowCount} row${rowCount !== 1 ? "s" : ""}`,
+      };
+    },
+  },
+});

package/sanity/schemas/objects/parallaxSlide.ts

@@ -108,7 +108,6 @@ export default defineType({
                 { type: "videoBlock" },
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
-                { type: "coverBlock" },
               ],
             }),
             defineField({

package/sanity/schemas/page.ts

@@ -42,7 +42,7 @@ export default defineType({
       name: "content_rows",
       title: "Content Rows",
       type: "array",
-      of: [{ type: "pageSectionV2" }, { type: "parallaxGroup" }, { type: "customSectionInstance" }],
+      of: [{ type: "pageSectionV2" }, { type: "parallaxGroup" }, { type: "customSectionInstance" }, { type: "coverSection" }],
     }),
     defineField({
       name: "metadata",

package/sanity/schemas/pageSectionV2.ts

@@ -66,7 +66,6 @@ export default defineType({
                 { type: "videoBlock" },
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
-                { type: "coverBlock" },
                 { type: "projectGridBlock" },
               ],
             }),

package/components/blocks/CoverBlockRenderer.tsx

@@ -1,261 +0,0 @@
-"use client";
-
-import type { CoverBlock } from "../../lib/sanity/types";
-import { useAssetUrl } from "../../lib/contexts/AssetContext";
-import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
-import { parseColorField, colorToCSS, isGradient } from "../../lib/color-utils";
-
-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;
-
-  // Phase 4: custom overlay_gradient takes precedence over hardcoded presets
-  const overlayStyle: React.CSSProperties | null = (() => {
-    if (block.overlay_gradient) {
-      const parsed = parseColorField(block.overlay_gradient);
-      if (isGradient(parsed)) {
-        return { backgroundImage: colorToCSS(parsed) };
-      }
-      // Solid color overlay from gradient field
-      return { backgroundColor: colorToCSS(parsed) };
-    }
-    return 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";
-
-  // BLK-010: Validate objectFit against allowed CSS values
-  const allowedObjectFit = new Set(["cover", "contain", "none", "fill", "scale-down"]);
-  const objectFit = allowedObjectFit.has(block.background_size || "") ? block.background_size! : "cover";
-  const objectPosition = block.background_position || "center center";
-
-  // Guard: text color must be a solid hex string. Fallback if gradient slips through.
-  const rawTextColor = block.text_color || "#ffffff";
-  const textColor = typeof rawTextColor === "string" ? rawTextColor : "#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",
-  };
-
-  // BLK-002: Sanitize _key and mobileHeight before CSS interpolation
-  // _key: allow only alphanumeric, hyphens, underscores (strip anything else)
-  const safeKey = block._key?.replace(/[^a-zA-Z0-9_-]/g, "") || "";
-  // mobileHeight: must match valid CSS height (number+unit or CSS keyword)
-  const safeMobileHeight =
-    mobileHeight && /^(\d+(\.\d+)?(px|vh|vw|em|rem|%|svh|dvh)|auto|inherit)$/i.test(mobileHeight)
-      ? mobileHeight
-      : null;
-
-  return (
-    <>
-      {/* Mobile height override via inline style tag */}
-      {safeMobileHeight && safeKey && (
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `@media(max-width:767px){.cover-block-${safeKey}{height:${safeMobileHeight}!important;min-height:${safeMobileHeight}!important;}}`,
-          }}
-        />
-      )}
-
-      <section
-        className={`cover-block-${safeKey} 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 React.CSSProperties["objectFit"],
-              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 React.CSSProperties["objectFit"],
-              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-sans text-4xl uppercase tracking-widest md:text-6xl lg:text-7xl">
-              {block.headline}
-            </h1>
-          )}
-
-          {block.subheadline && (
-            <p className="font-sans 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-sans 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>
-    </>
-  );
-}