@morphika/andami 0.2.15 → 0.2.17

package/components/builder/ReadOnlyFrame.tsx

@@ -25,6 +25,12 @@ import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import BlockLivePreview from "./BlockLivePreview";
 import { getColumnVerticalAlign, getRowLayoutStyles } from "../../lib/builder/layout-styles";
+import type { ContentBlock } from "../../lib/sanity/types";
+
+function isFillBlock(block: ContentBlock): boolean {
+  return (block._type === "imageBlock" || block._type === "videoBlock") &&
+    (block as unknown as { width?: string }).width === "fill";
+}
 
 // Layout keys that support responsive overrides for V2 sections
 const OVERRIDABLE_KEYS = [
@@ -84,6 +90,7 @@ const ReadOnlySectionV2 = memo(function ReadOnlySectionV2({ section, viewport }:
               style={{
                 gridColumn: `${gridColumn} / span ${span}`,
                 gridRow,
+                position: "relative",
                 display: "flex",
                 flexDirection: "column",
                 ...(colJustify ? { justifyContent: colJustify } : {}),
@@ -93,7 +100,11 @@ const ReadOnlySectionV2 = memo(function ReadOnlySectionV2({ section, viewport }:
               }}
             >
               {(col.blocks || []).map((block) => (
-                <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                <div key={block._key} style={
+                  isFillBlock(block)
+                    ? { flex: "999 1 0%", position: "relative" as const, minHeight: 0, zIndex: 0 }
+                    : { width: "100%", minWidth: 0, position: "relative" as const, zIndex: 1 }
+                }>
                   <BlockLivePreview block={block} viewport={viewport} />
                 </div>
               ))}
@@ -194,6 +205,7 @@ const ReadOnlyParallaxSlide = memo(function ReadOnlyParallaxSlide({
                 style={{
                   gridColumn: `${col.grid_column} / span ${col.span}`,
                   gridRow: col.grid_row,
+                  position: "relative",
                   display: "flex",
                   flexDirection: "column",
                   ...(colJustify ? { justifyContent: colJustify } : {}),
@@ -203,7 +215,11 @@ const ReadOnlyParallaxSlide = memo(function ReadOnlyParallaxSlide({
                 }}
               >
                 {(col.blocks || []).map((block) => (
-                  <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                  <div key={block._key} style={
+                    isFillBlock(block)
+                      ? { flex: "999 1 0%", position: "relative" as const, minHeight: 0, zIndex: 0 }
+                      : { width: "100%", minWidth: 0 }
+                  }>
                     <BlockLivePreview block={block} viewport={viewport} />
                   </div>
                 ))}
@@ -419,24 +435,29 @@ const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
         >
           {section.columns.map((col) => {
             const rowAlign = effectiveRows[col.grid_row - 1]?.vertical_align || "start";
-            const alignSelf = rowAlign === "center" ? "center" : rowAlign === "end" ? "end" : "start";
             const colJustify = getColumnVerticalAlign(col.blocks || []);
+            const justify = rowAlign === "center" ? "center" : rowAlign === "end" ? "flex-end" : colJustify || "flex-start";
             return (
               <div
                 key={col._key}
                 style={{
                   gridColumn: `${col.grid_column} / span ${col.span}`,
                   gridRow: col.grid_row,
-                  alignSelf,
+                  position: "relative",
                   display: "flex",
                   flexDirection: "column",
-                  ...(colJustify ? { justifyContent: colJustify } : {}),
+                  justifyContent: justify,
+                  height: "100%",
                   minWidth: 0,
                   overflow: "hidden",
                 }}
               >
                 {(col.blocks || []).map((block) => (
-                  <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                  <div key={block._key} style={
+                    isFillBlock(block)
+                      ? { flex: "999 1 0%", position: "relative" as const, minHeight: 0, zIndex: 0 }
+                      : { width: "100%", minWidth: 0, position: "relative" as const, zIndex: 1 }
+                  }>
                     <BlockLivePreview block={block} viewport={viewport} />
                   </div>
                 ))}

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

@@ -39,7 +39,7 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
 
   if (isFill) {
     return (
-      <div style={{ width: "100%", height: "100%", overflow: "hidden", borderRadius: block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined }}>
+      <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}

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

@@ -61,7 +61,7 @@ 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
-    ? { width: "100%", height: "100%", minWidth: 0, borderRadius, overflow: "hidden" }
+    ? { 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 (

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.15";
+export const ANDAMI_VERSION = "0.2.17";

package/package.json

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