@morphika/andami 0.2.13 → 0.2.14

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/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/editors/ImageBlockEditor.tsx

@@ -113,6 +113,7 @@ export default function ImageBlockEditor({ block }: Props) {
                 { value: "full", label: "100%" },
                 { value: "contained", label: "75%" },
                 { value: "small", label: "50%" },
+                { value: "fill", label: "Fill" },
               ] as const
             ).map((opt) => (
               <button

package/components/builder/editors/VideoBlockEditor.tsx

@@ -192,6 +192,7 @@ export default function VideoBlockEditor({ block }: Props) {
               [
                 { value: "full", label: "Full" },
                 { value: "contained", label: "Contained" },
+                { value: "fill", label: "Fill" },
               ] as const
             ).map((opt) => (
               <button

package/components/builder/live-preview/LiveImagePreview.tsx

@@ -21,8 +21,10 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
   const thumbSrc = adminThumbUrl(block.asset_path);
   const fullSrc = adminAssetUrl(block.asset_path);
   const src = useFallback ? fullSrc : thumbSrc;
-  const widthStyle =
-    block.width === "contained"
+  const isFill = block.width === "fill";
+  const widthStyle = isFill
+    ? "100%"
+    : block.width === "contained"
       ? "75%"
       : block.width === "small"
         ? "50%"
@@ -35,6 +37,23 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
     "21:9": "21/9",
   };
 
+  if (isFill) {
+    return (
+      <div style={{ position: "absolute", inset: 0, overflow: "hidden", borderRadius: block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined }}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={src}
+          alt={block.alt || ""}
+          onLoad={() => setImgLoaded(true)}
+          onError={() => {
+            if (!useFallback) { setUseFallback(true); } else { setImgError(true); }
+          }}
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div style={{ width: widthStyle, margin: block.width !== "full" ? "0 auto" : undefined }}>
       {imgError ? (

package/components/builder/live-preview/LiveVideoPreview.tsx

@@ -30,8 +30,9 @@ export default function LiveVideoPreview({ block }: { block: VideoBlock }) {
     "4:3": "75%",
     auto: "56.25%",
   };
+  const isFill = block.width === "fill";
   const paddingBottom = aspectMap[block.aspect_ratio || "16:9"] || "56.25%";
-  const widthStyle = block.width === "contained" ? "75%" : "100%";
+  const widthStyle = isFill ? "100%" : (block.width === "contained" ? "75%" : "100%");
 
   // Resolve thumbnail URL based on video type (no iframes, no streaming)
   let thumbnailUrl: string | null = null;
@@ -59,9 +60,13 @@ export default function LiveVideoPreview({ block }: { block: VideoBlock }) {
 
   const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
 
+  const outerStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, minWidth: 0, borderRadius, overflow: "hidden" }
+    : { width: widthStyle, margin: block.width === "contained" ? "0 auto" : undefined, minWidth: 0, borderRadius, overflow: borderRadius ? "hidden" : undefined };
+
   return (
-    <div style={{ width: widthStyle, margin: block.width === "contained" ? "0 auto" : undefined, minWidth: 0, borderRadius, overflow: borderRadius ? "hidden" : undefined }}>
-      <div style={{ position: "relative", paddingBottom, overflow: "hidden", background: "#000", lineHeight: 0, fontSize: 0, borderRadius: "inherit" }}>
+    <div style={outerStyle}>
+      <div style={{ position: "relative", paddingBottom: isFill ? undefined : paddingBottom, height: isFill ? "100%" : undefined, overflow: "hidden", background: "#000", lineHeight: 0, fontSize: 0, borderRadius: "inherit" }}>
         {thumbnailUrl ? (
           <>
             {/* eslint-disable-next-line @next/next/no-img-element */}

package/lib/sanity/queries.ts

@@ -5,14 +5,14 @@ import { groq } from "next-sanity";
 // ============================================
 
 // Deep expansion of content_rows.
-// Handles PageSectionV2, CustomSectionInstance, and ParallaxGroup.
+// Handles PageSectionV2, CustomSectionInstance, ParallaxGroup, and CoverSection.
 // GROQ projections are additive — fields that don't exist on an object are omitted.
 const blockExpansion = `
   content_rows[] {
     _key,
     _type,
     section_type,
-    // ── V2 section columns ──
+    // ── V2 section columns (shared by PageSectionV2 and CoverSection) ──
     columns[] {
       _key,
       _type,
@@ -73,9 +73,23 @@ const blockExpansion = `
         }
       }
     },
-    // ── Settings (V2 section settings) ──
+    // ── CoverSection fields (only present when _type == "coverSection") ──
+    background_type,
+    background_image,
+    background_video,
+    background_position,
+    background_size,
+    background_overlay_color,
+    background_overlay_opacity,
+    height,
+    cover_rows[] {
+      _key,
+      height_percent,
+      vertical_align
+    },
+    // ── Settings (V2 section settings + CoverSection settings) ──
     settings,
-    // ── Responsive overrides (V2 sections store responsive at section level) ──
+    // ── Responsive overrides (V2 + CoverSection store responsive at section level) ──
     responsive
   }
 `;

package/lib/sanity/types.ts

@@ -135,7 +135,7 @@ export interface ImageBlock {
   asset_path: string;
   alt?: string;
   caption?: string;
-  width?: "full" | "contained" | "small";
+  width?: "full" | "contained" | "small" | "fill";
   aspect_ratio?: "auto" | "16:9" | "4:3" | "1:1" | "21:9";
   lazy?: boolean;
   border_radius?: string;
@@ -174,7 +174,7 @@ export interface VideoBlock {
   loop?: boolean;
   muted?: boolean;
   controls?: boolean;
-  width?: "full" | "contained";
+  width?: "full" | "contained" | "fill";
   aspect_ratio?: "16:9" | "21:9" | "4:3" | "auto";
   border_radius?: string;
   enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.2.13";
+export const ANDAMI_VERSION = "0.2.14";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",

package/sanity/schemas/blocks/imageBlock.ts

@@ -24,6 +24,7 @@ export const imageBlock = defineType({
           { title: "Full", value: "full" },
           { title: "Contained", value: "contained" },
           { title: "Small", value: "small" },
+          { title: "Fill", value: "fill" },
         ],
       },
       initialValue: "full",

package/sanity/schemas/blocks/videoBlock.ts

@@ -45,6 +45,7 @@ export const videoBlock = defineType({
         list: [
           { title: "Full", value: "full" },
           { title: "Contained", value: "contained" },
+          { title: "Fill", value: "fill" },
         ],
       },
       initialValue: "full",