@morphika/andami 0.2.12 → 0.2.14

package/README.md

@@ -7,7 +7,8 @@ A reusable Visual Page Builder framework for Next.js. Build custom websites with
 ## Features
 
 - **Visual Page Builder** — Infinite canvas editor with device previews (desktop, tablet, phone)
-- **9 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button, Cover, Project Grid, Parallax
+- **7 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button, Project Grid
+- **Cover Sections** — Full-viewport hero sections with proportional rows, background media, and drag-to-resize
 - **V2 Grid System** — 12-column CSS grid with push cascade engine and responsive overrides
 - **Custom Sections** — Create reusable sections with per-instance setting overrides
 - **Navigation Builder** — Visual 12-column grid editor with drag & drop

package/app/admin/pages/[slug]/page.tsx

@@ -18,8 +18,8 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import type { Page, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../../lib/sanity/types";
+import type { Page, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem, CoverSection } from "../../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../../../lib/sanity/types";
 import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
 import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
 import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
@@ -29,6 +29,7 @@ import { isSectionBlockType } from "../../../../lib/builder/types";
 import BlockLivePreview from "../../../../components/builder/BlockLivePreview";
 import SectionV2Canvas from "../../../../components/builder/SectionV2Canvas";
 import ParallaxGroupCanvas from "../../../../components/builder/ParallaxGroupCanvas";
+import CoverSectionCanvas from "../../../../components/builder/CoverSectionCanvas";
 import { ThumbStatusProvider } from "../../../../lib/contexts/ThumbStatusContext";
 import PublishToggle from "../../../../components/admin/PublishToggle";
 
@@ -445,6 +446,12 @@ export default function PageEditorPage() {
     setShowSectionPicker(false);
   }, [store]);
 
+  // Handle add cover section
+  const handleAddCoverSection = useCallback(() => {
+    store.addCoverSection(null);
+    setShowSectionPicker(false);
+  }, [store]);
+
   // Handle add block — V2 sections only
   const handleAddBlock = useCallback(
     (type: BlockType) => {
@@ -667,6 +674,7 @@ export default function PageEditorPage() {
                       const isV2Section = isPageSectionV2(item);
                       const isInstance = isCustomSectionInstance(item);
                       const isParallax = isParallaxGroup(item);
+                      const isCover = isCoverSection(item);
                       const v2Section = isV2Section ? (item as PageSectionV2) : null;
 
                       // Custom Section Instance — rendered directly without SortableRow chrome
@@ -722,6 +730,34 @@ export default function PageEditorPage() {
                         );
                       }
 
+                      // Cover Section — full-viewport with proportional rows
+                      if (isCover) {
+                        const cover = item as CoverSection;
+                        return (
+                          <SortableRow
+                            key={item._key}
+                            rowKey={item._key}
+                            row={item}
+                            isSelected={store.selectedRowKey === item._key}
+                            columnCount={0}
+                            onSelect={() => store.selectRow(item._key)}
+                            onDelete={() => store.deleteSection(item._key)}
+                            onAddColumn={() => store.addCoverRow(item._key)}
+                            addColumnLabel="Row"
+                            onDuplicate={() => store.duplicateSection(item._key)}
+                            onMoveUp={() => { if (rowIndex > 0) store.reorderRows(rowIndex, rowIndex - 1); }}
+                            onMoveDown={() => { if (rowIndex < store.rows.length - 1) store.reorderRows(rowIndex, rowIndex + 1); }}
+                            isFirst={rowIndex === 0}
+                            isLast={rowIndex === store.rows.length - 1}
+                          >
+                            <CoverSectionCanvas
+                              section={cover}
+                              onAddBlockTarget={handleAddBlockTargetV2}
+                            />
+                          </SortableRow>
+                        );
+                      }
+
                       return (
                         <SortableRow
                           key={item._key}
@@ -810,6 +846,7 @@ export default function PageEditorPage() {
             onSelectEmptyV2={handleAddEmptySectionV2}
             onSelectSection={handleAddSection}
             onSelectParallaxGroup={handleAddParallaxGroup}
+            onSelectCoverSection={handleAddCoverSection}
             onSelectCustomSection={handleSelectCustomSection}
             onCreateCustomSection={handleCreateCustomSection}
             onClose={() => setShowSectionPicker(false)}

package/components/blocks/BlockRenderer.tsx

@@ -23,7 +23,6 @@ import ImageGridBlockRenderer from "./ImageGridBlockRenderer";
 import VideoBlockRenderer from "./VideoBlockRenderer";
 import SpacerBlockRenderer from "./SpacerBlockRenderer";
 import ButtonBlockRenderer from "./ButtonBlockRenderer";
-import CoverBlockRenderer from "./CoverBlockRenderer";
 import ProjectGridBlockRenderer from "./ProjectGridBlockRenderer";
 
 // ── BLK-003: Error Boundary for block renderers ──
@@ -308,9 +307,6 @@ export default function BlockRenderer({
     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;
@@ -421,9 +417,6 @@ export default function BlockRenderer({
         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) {

package/components/blocks/CoverSectionRenderer.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+/**
+ * CoverSectionRenderer — renders a CoverSection on the public site.
+ *
+ * Fixed-height viewport section with background image/video, overlay,
+ * and proportional CSS Grid rows. Columns and blocks use the same
+ * rendering pipeline as SectionV2Renderer.
+ *
+ * Session 176: Cover Sections — Phase 9 (Public Renderer).
+ */
+
+import type {
+  CoverSection,
+  SectionColumn,
+  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 { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { assetUrl } from "../../lib/assets";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+
+interface CoverSectionRendererProps {
+  section: CoverSection;
+  pageEnterAnimation?: EnterAnimationConfig;
+}
+
+function buildCoverResponsiveCss(section: CoverSection): 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;
+
+    const rules: string[] = [];
+
+    if (override.settings?.col_gap !== undefined) {
+      rules.push(`column-gap:${override.settings.col_gap}px!important`);
+    }
+    if (override.settings?.row_gap !== undefined) {
+      rules.push(`row-gap:${override.settings.row_gap}px!important`);
+    }
+
+    if (override.cover_rows && override.cover_rows.length > 0) {
+      const baseRows = section.cover_rows;
+      const rowTemplate = baseRows.map((r, i) => {
+        const rowOverride = override.cover_rows?.find((o) => o._key === r._key);
+        return `${rowOverride?.height_percent ?? r.height_percent}%`;
+      }).join(" ");
+      rules.push(`grid-template-rows:${rowTemplate}!important`);
+    }
+
+    if (rules.length > 0) {
+      cssParts.push(`@media(max-width:${breakpoint}px){.cover-grid-${key}{${rules.join(";")}}}`);
+    }
+
+    if (override.columns) {
+      for (const co of override.columns) {
+        const colRules: string[] = [];
+        if (co.grid_column !== undefined && co.span !== undefined) {
+          colRules.push(`grid-column:${co.grid_column}/span ${co.span}!important`);
+        }
+        if (co.grid_row !== undefined) {
+          colRules.push(`grid-row:${co.grid_row}!important`);
+        }
+        if (colRules.length > 0) {
+          cssParts.push(`@media(max-width:${breakpoint}px){.cover-col-${key}-${co._key}{${colRules.join(";")}}}`);
+        }
+      }
+    }
+  }
+
+  return cssParts.length > 0 ? cssParts.join("") : null;
+}
+
+export default function CoverSectionRenderer({ section, pageEnterAnimation }: CoverSectionRendererProps) {
+  const s = section.settings;
+  const gridColumns = s.grid_columns || 12;
+  const colGap = s.col_gap ?? 20;
+  const rowGap = s.row_gap ?? 20;
+
+  const rowTemplate = section.cover_rows
+    .map((r) => `${r.height_percent}%`)
+    .join(" ");
+
+  const sectionEnterConfig = s.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";
+
+  const bgImageSrc = section.background_type === "image" && section.background_image
+    ? assetUrl(section.background_image)
+    : null;
+  const bgVideoSrc = section.background_type === "video" && section.background_video
+    ? assetUrl(section.background_video)
+    : null;
+  const overlayOpacity = section.background_overlay_opacity ?? 0;
+
+  const responsiveCss = buildCoverResponsiveCss(section);
+
+  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;
+  });
+
+  const getStaggerIndex = (colIndex: number): number => {
+    if (!staggerEnabled) return 0;
+    return staggerDirection === "right-to-left"
+      ? sortedColumns.length - 1 - colIndex
+      : colIndex;
+  };
+
+  const rowAlignMap: Record<string, string> = {};
+  section.cover_rows.forEach((row, i) => {
+    rowAlignMap[String(i + 1)] = row.vertical_align || "start";
+  });
+
+  const sectionContent = (
+    <section
+      style={{
+        position: "relative",
+        height: section.height,
+        overflow: "hidden",
+      }}
+    >
+      {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
+
+      {/* Background image */}
+      {bgImageSrc && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundImage: `url(${bgImageSrc})`,
+            backgroundSize: section.background_size || "cover",
+            backgroundPosition: section.background_position || "center center",
+            backgroundRepeat: "no-repeat",
+          }}
+        />
+      )}
+
+      {/* Background video */}
+      {bgVideoSrc && (
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: section.background_position || "center center",
+          }}
+        >
+          <source src={bgVideoSrc} />
+        </video>
+      )}
+
+      {/* Overlay */}
+      {overlayOpacity > 0 && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundColor: section.background_overlay_color || "#000000",
+            opacity: overlayOpacity / 100,
+            pointerEvents: "none",
+          }}
+        />
+      )}
+
+      {/* Content grid */}
+      <div
+        className={`cover-grid-${section._key}`}
+        style={{
+          position: "relative",
+          zIndex: 1,
+          display: "grid",
+          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+          gridTemplateRows: rowTemplate,
+          height: "100%",
+          columnGap: `${colGap}px`,
+          rowGap: `${rowGap}px`,
+          maxWidth: "var(--grid-width, 1445px)",
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "100%",
+          padding: [
+            s.spacing_top ? `${s.spacing_top}px` : "0",
+            s.spacing_right ? `${s.spacing_right}px` : "0",
+            s.spacing_bottom ? `${s.spacing_bottom}px` : "0",
+            s.spacing_left ? `${s.spacing_left}px` : "0",
+          ].join(" "),
+        }}
+      >
+        {sortedColumns.map((col, colIndex) => {
+          const staggerIdx = staggerEnabled ? getStaggerIndex(colIndex) : undefined;
+          const rowAlign = rowAlignMap[String(col.grid_row)] || "start";
+          const alignSelf = rowAlign === "center" ? "center" : rowAlign === "end" ? "end" : "start";
+          const colJustify = getColumnVerticalAlign(col.blocks || []);
+
+          const columnContent = (
+            <div
+              key={col._key}
+              className={`cover-col-${section._key}-${col._key}`}
+              style={{
+                gridColumn: `${col.grid_column} / span ${col.span}`,
+                gridRow: col.grid_row,
+                alignSelf,
+                minWidth: 0,
+                overflow: "hidden",
+                ...(colJustify ? { display: "flex", flexDirection: "column" as const, justifyContent: colJustify } : {}),
+              }}
+            >
+              {(col.blocks || []).map((block) => {
+                const blockEnter = resolveEnterAnimation(
+                  block.enter_animation as EnterAnimationConfig | undefined,
+                  col.enter_animation,
+                  sectionEnterConfig,
+                  pageEnterAnimation
+                );
+
+                const layout = (block as ContentBlock & { layout?: BlockLayout }).layout;
+                const alignStyles = layout && hasBlockAlignment(layout) ? getBlockAlignmentStyles(layout) : {};
+
+                const rendered = (
+                  <div key={block._key} style={alignStyles}>
+                    <BlockRenderer block={block} />
+                  </div>
+                );
+
+                if (blockEnter && blockEnter.preset !== "none") {
+                  return (
+                    <EnterAnimationWrapper key={block._key} config={blockEnter}>
+                      {rendered}
+                    </EnterAnimationWrapper>
+                  );
+                }
+                return rendered;
+              })}
+            </div>
+          );
+
+          if (staggerEnabled && staggerIdx !== undefined) {
+            const colEnter = resolveEnterAnimation(
+              col.enter_animation,
+              undefined,
+              sectionEnterConfig,
+              pageEnterAnimation
+            );
+            if (colEnter && colEnter.preset !== "none") {
+              return (
+                <EnterAnimationWrapper
+                  key={col._key}
+                  config={colEnter}
+                  staggerIndex={staggerIdx}
+                  staggerDelay={staggerDelay}
+                >
+                  {columnContent}
+                </EnterAnimationWrapper>
+              );
+            }
+          }
+
+          return columnContent;
+        })}
+      </div>
+    </section>
+  );
+
+  if (resolvedSectionEnter && resolvedSectionEnter.preset !== "none" && !staggerEnabled) {
+    return (
+      <EnterAnimationWrapper config={resolvedSectionEnter}>
+        {sectionContent}
+      </EnterAnimationWrapper>
+    );
+  }
+
+  return sectionContent;
+}

package/components/blocks/ImageBlockRenderer.tsx

@@ -25,24 +25,26 @@ const aspectMap: Record<string, string | undefined> = {
 export default function ImageBlockRenderer({ block }: { block: ImageBlock }) {
   const resolveAsset = useAssetUrl();
   const src = resolveAsset(block.asset_path);
-  const widthStyle = widthStyleMap[block.width ?? "full"] || widthStyleMap.full;
-  const aspect = aspectMap[block.aspect_ratio ?? "auto"];
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const aspect = isFill ? undefined : aspectMap[block.aspect_ratio ?? "auto"];
 
   // BLK-014: Strip any existing unit suffix, then validate as a number before appending px
   const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
   const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
 
-  const imgStyle: React.CSSProperties = {
-    width: "100%",
-    display: "block",
-    objectFit: aspect ? "cover" : undefined,
-    aspectRatio: aspect,
-  };
+  const imgStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }
+    : { width: "100%", display: "block", objectFit: aspect ? "cover" : undefined, aspectRatio: aspect };
 
   const imgClassName = block.shadow ? "shadow-lg" : "";
 
+  const figureStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden" }
+    : { ...widthStyle, borderRadius, overflow: "hidden" };
+
   return (
-    <figure style={{ ...widthStyle, borderRadius, overflow: "hidden" }}>
+    <figure style={figureStyle}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={src}
@@ -53,7 +55,7 @@ export default function ImageBlockRenderer({ block }: { block: ImageBlock }) {
         style={imgStyle}
         className={imgClassName}
       />
-      {block.caption && (
+      {!isFill && block.caption && (
         <figcaption className="mt-2 font-sans text-xs uppercase tracking-wider text-brand-muted">
           {block.caption}
         </figcaption>

package/components/blocks/PageRenderer.tsx

@@ -1,8 +1,9 @@
-import type { Page, ContentBlock, ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { Page, ContentBlock, ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, CoverSection } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import SectionV2Renderer from "./SectionV2Renderer";
 import CustomSectionInstanceRenderer from "./CustomSectionInstanceRenderer";
 import ParallaxGroupRenderer from "./ParallaxGroupRenderer";
+import CoverSectionRenderer from "./CoverSectionRenderer";
 import { PageNavColor } from "./PageNavColor";
 import { PageNavAnimation } from "./PageNavAnimation";
 import { PageBackground } from "./PageBackground";
@@ -14,14 +15,8 @@ import { parseColorField, colorToCSSProperty } from "../../lib/color-utils";
  * Used to inject <link rel="preload"> for the above-the-fold hero image,
  * reducing LCP by 200–500ms on mobile.
  */
-/** Check a single block for an image/cover path */
+/** Check a single block for an image path */
 function getBlockImagePath(block: ContentBlock): string | null {
-  if (block._type === "coverBlock") {
-    const cover = block as Extract<ContentBlock, { _type: "coverBlock" }>;
-    if (cover.media_type !== "video" && cover.media_path) {
-      return cover.media_path;
-    }
-  }
   if (block._type === "imageBlock") {
     const img = block as Extract<ContentBlock, { _type: "imageBlock" }>;
     if (img.asset_path) {
@@ -51,6 +46,13 @@ function findFirstImagePath(items: ContentItem[]): string | null {
       }
       break;
     }
+    if (isCoverSection(item)) {
+      const cover = item as CoverSection;
+      if (cover.background_type !== "video" && cover.background_image) {
+        return cover.background_image;
+      }
+      break;
+    }
     if (isPageSectionV2(item)) {
       // Check inside V2 section columns for image/cover blocks
       const section = item as PageSectionV2;
@@ -119,6 +121,8 @@ export default function PageRenderer({ page }: { page: Page }) {
         {page.content_rows.map((item) =>
           isCustomSectionInstance(item)
             ? <CustomSectionInstanceRenderer key={item._key} instance={item as CustomSectionInstance} />
+            : isCoverSection(item)
+            ? <CoverSectionRenderer key={item._key} section={item as CoverSection} pageEnterAnimation={pageEnterAnimation} />
             : isParallaxGroup(item)
             ? <ParallaxGroupRenderer key={item._key} group={item as ParallaxGroup} pageEnterAnimation={pageEnterAnimation} />
             : isPageSectionV2(item)

package/components/blocks/VideoBlockRenderer.tsx

@@ -286,18 +286,23 @@ function NativeVideo({ block, paddingBottom, resolveAsset }: {
 
 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 isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const paddingBottom = isFill ? "100%" : (aspectMap[block.aspect_ratio ?? "16:9"] || "56.25%");
   const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
 
+  const containerStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden" }
+    : { ...widthStyle, borderRadius, overflow: borderRadius ? "hidden" : undefined };
+
   return (
-    <div style={{ ...widthStyle, borderRadius, overflow: borderRadius ? "hidden" : undefined }}>
+    <div style={containerStyle}>
       {block.video_type === "vimeo" ? (
-        <VimeoEmbed block={block} paddingBottom={paddingBottom} />
+        <VimeoEmbed block={block} paddingBottom={isFill ? "100%" : paddingBottom} />
       ) : block.video_type === "youtube" ? (
-        <YouTubeEmbed block={block} paddingBottom={paddingBottom} />
+        <YouTubeEmbed block={block} paddingBottom={isFill ? "100%" : paddingBottom} />
       ) : (
-        <NativeVideo block={block} paddingBottom={paddingBottom} resolveAsset={resolveAsset} />
+        <NativeVideo block={block} paddingBottom={isFill ? "100%" : paddingBottom} resolveAsset={resolveAsset} />
       )}
     </div>
   );

package/components/builder/BlockLivePreview.tsx

@@ -22,7 +22,6 @@ import type {
   VideoBlock,
   SpacerBlock,
   ButtonBlock,
-  CoverBlock,
   ProjectGridBlock,
 } from "../../lib/sanity/types";
 
@@ -32,7 +31,6 @@ 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";
 
@@ -73,9 +71,6 @@ function BlockLivePreviewInner({ block, viewport = "desktop", editable = false }
     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;

package/components/builder/BlockTypePicker.tsx

@@ -19,7 +19,6 @@ const BLOCK_LABELS: Record<string, { label: string; description: string }> = {
   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" },
 };
 

package/components/builder/ColorSwatchPicker.tsx

@@ -12,8 +12,8 @@
  * - Backward compatible: string-only usage still works (default behavior).
  *
  * Used in: SettingsPanel (row/block bg, border), TextBlockEditor (text color),
- * CoverBlockEditor (text color), BlockLayoutTab, SectionV2LayoutTab,
- * PageSettings, ParallaxSlideSettings, and any future color field.
+ * BlockLayoutTab, SectionV2LayoutTab, PageSettings, ParallaxSlideSettings,
+ * CoverSectionSettings (overlay color), and any future color field.
  */
 
 import { useState, useCallback, useEffect } from "react";