@morphika/andami 0.2.14 → 0.2.16

package/components/blocks/CoverSectionRenderer.tsx

@@ -127,12 +127,19 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
     rowAlignMap[String(i + 1)] = row.vertical_align || "start";
   });
 
+  const borderRadius = s.border_radius ? `${String(s.border_radius).replace(/[a-z%]+$/i, "")}px` : undefined;
+
   const sectionContent = (
     <section
       style={{
         position: "relative",
         height: section.height,
         overflow: "hidden",
+        marginTop: s.offset_top ? `${s.offset_top}px` : undefined,
+        marginRight: s.offset_right ? `${s.offset_right}px` : undefined,
+        marginBottom: s.offset_bottom ? `${s.offset_bottom}px` : undefined,
+        marginLeft: s.offset_left ? `${s.offset_left}px` : undefined,
+        borderRadius,
       }}
     >
       {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
@@ -221,10 +228,13 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
               style={{
                 gridColumn: `${col.grid_column} / span ${col.span}`,
                 gridRow: col.grid_row,
-                alignSelf,
+                position: "relative",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: alignSelf === "center" ? "center" : alignSelf === "end" ? "flex-end" : colJustify || "flex-start",
+                height: "100%",
                 minWidth: 0,
                 overflow: "hidden",
-                ...(colJustify ? { display: "flex", flexDirection: "column" as const, justifyContent: colJustify } : {}),
               }}
             >
               {(col.blocks || []).map((block) => {
@@ -237,9 +247,15 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
 
                 const layout = (block as ContentBlock & { layout?: BlockLayout }).layout;
                 const alignStyles = layout && hasBlockAlignment(layout) ? getBlockAlignmentStyles(layout) : {};
+                const isFillBlock = (block._type === "imageBlock" || block._type === "videoBlock") &&
+                  (block as unknown as { width?: string }).width === "fill";
 
                 const rendered = (
-                  <div key={block._key} style={alignStyles}>
+                  <div key={block._key} style={
+                    isFillBlock
+                      ? { position: "absolute" as const, inset: 0, zIndex: 0 }
+                      : { position: "relative" as const, zIndex: 1, ...alignStyles }
+                  }>
                     <BlockRenderer block={block} />
                   </div>
                 );

package/components/blocks/SectionV2Renderer.tsx

@@ -268,6 +268,7 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
               style={{
                 gridColumn: `${col.grid_column} / span ${col.span}`,
                 gridRow: col.grid_row,
+                position: "relative",
                 display: "flex",
                 flexDirection: "column",
                 ...(colJustify ? { justifyContent: colJustify } : {}),
@@ -280,8 +281,14 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
                 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";
+                const isFillBlock = (block._type === "imageBlock" || block._type === "videoBlock") &&
+                  (block as unknown as { width?: string }).width === "fill";
                 return (
-                  <div key={block._key} className={`blk-wrap-${block._key}`} style={{ ...(!hasHAlign ? { width: "100%" } : { width: "auto", maxWidth: "100%" }), minWidth: 0, ...alignStyles }}>
+                  <div key={block._key} className={`blk-wrap-${block._key}`} style={
+                    isFillBlock
+                      ? { position: "absolute" as const, inset: 0, zIndex: 0 }
+                      : { ...(!hasHAlign ? { width: "100%" } : { width: "auto", maxWidth: "100%" }), minWidth: 0, position: "relative" as const, zIndex: 1, ...alignStyles }
+                  }>
                     <BlockRenderer
                       block={block}
                       columnEnterAnimation={col.enter_animation}

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/SectionV2Column.tsx

@@ -233,6 +233,7 @@ export default function SectionV2Column({
         style={{
           gridColumn: `${column.grid_column} / span ${column.span}`,
           gridRow: column.grid_row,
+          position: "relative",
           display: "flex",
           flexDirection: "column",
           ...(colJustify ? { justifyContent: colJustify } : {}),

package/components/builder/SettingsPanel.tsx

@@ -39,6 +39,7 @@ import {
   ParallaxGroupSettings,
   CoverSectionSettings,
 } from "./settings-panel";
+import CoverSectionLayoutTab from "./settings-panel/CoverSectionLayoutTab";
 
 type SettingsTab = "settings" | "layout" | "seo" | "animation";
 
@@ -337,6 +338,8 @@ export default function SettingsPanel() {
         isCoverSectionOnly && selectedCoverSection ? (
           activeTab === "animation" ? (
             <SectionV2AnimationTab section={effectiveSectionV2!} />
+          ) : activeTab === "layout" ? (
+            <CoverSectionLayoutTab section={selectedCoverSection} />
           ) : (
             <CoverSectionSettings section={selectedCoverSection} />
           )

package/components/builder/SortableBlock.tsx

@@ -7,7 +7,7 @@ import { makeBlockId } from "./DndWrapper";
 import { ALL_BLOCK_INFO, isSectionBlockType } from "../../lib/builder/types";
 import type { DeviceViewport } from "../../lib/builder/types";
 import { useBuilderStore } from "../../lib/builder/store";
-import type { ContentBlock } from "../../lib/sanity/types";
+import type { ContentBlock, ImageBlock, VideoBlock } from "../../lib/sanity/types";
 import BlockLivePreview from "./BlockLivePreview";
 import { getBlockAlignmentStyles, hasBlockAlignment } from "../../lib/builder/layout-styles";
 import type { BlockLayout } from "../../lib/sanity/types";
@@ -65,14 +65,29 @@ export default function SortableBlock({
   // Only force width:100% when no horizontal alignment — align-self needs width:auto to shrink
   const hasHAlign = blockLayout?.align_h && blockLayout.align_h !== "left";
 
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.3 : 1,
-    ...(!hasHAlign ? { width: "100%" } : {}),
-    minWidth: 0,
-    ...alignStyles,
-  };
+  // Fill-mode blocks act as column backgrounds — absolute positioned behind other blocks
+  const isFillBlock =
+    (block._type === "imageBlock" && (block as ImageBlock).width === "fill") ||
+    (block._type === "videoBlock" && (block as VideoBlock).width === "fill");
+
+  const style: React.CSSProperties = isFillBlock
+    ? {
+        position: "relative",
+        flex: "999 1 0%",
+        minHeight: 0,
+        zIndex: 0,
+        opacity: isDragging ? 0.3 : 1,
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }
+    : {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.3 : 1,
+        ...(!hasHAlign ? { width: "100%" } : {}),
+        minWidth: 0,
+        ...alignStyles,
+      };
 
   const showToolbar = isSelected || isHovered;
 
@@ -106,8 +121,8 @@ export default function SortableBlock({
   return (
     <div
       ref={setNodeRef}
-      style={style}
-      className={`relative transition-[opacity,box-shadow] ${
+      style={{ ...style, ...(!isFillBlock ? { position: "relative" as const, zIndex: 1 } : {}) }}
+      className={`transition-[opacity,box-shadow] ${
         isDragging
           ? "ring-2 ring-[#0d9668] ring-offset-1 ring-offset-transparent rounded"
           : ""

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

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

package/components/builder/settings-panel/CoverSectionLayoutTab.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { CoverSection } from "../../../lib/sanity/types";
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BorderIcon,
+} from "../editors/section-icons";
+import { SettingsField, SettingsSection } from "../editors/shared";
+import { TRBLInputs } from "./TRBLInputs";
+
+interface CoverSectionLayoutTabProps {
+  section: CoverSection;
+}
+
+export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
+  const store = useBuilderStore();
+  const s = section.settings;
+
+  const update = (fields: Record<string, string | undefined>) => {
+    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
+  };
+
+  return (
+    <>
+      {/* Spacing (padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
+        <TRBLInputs
+          top={s.spacing_top || ""}
+          right={s.spacing_right || ""}
+          bottom={s.spacing_bottom || ""}
+          left={s.spacing_left || ""}
+          onChange={(field, value) => update({ [`spacing_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Offset (margin) */}
+      <SettingsSection title="Offset" defaultOpen={false} icon={<OffsetIcon />}>
+        <TRBLInputs
+          top={s.offset_top || ""}
+          right={s.offset_right || ""}
+          bottom={s.offset_bottom || ""}
+          left={s.offset_left || ""}
+          onChange={(field, value) => update({ [`offset_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Border Radius */}
+      <SettingsSection title="Border" defaultOpen={false} icon={<BorderIcon />}>
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              step={1}
+              value={parseInt(s.border_radius || "0", 10) || 0}
+              onMouseDown={() => store._pushSnapshot()}
+              onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {parseInt(s.border_radius || "0", 10) || 0}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

package/lib/sanity/types.ts

@@ -452,15 +452,24 @@ export interface CoverRow {
   vertical_align: "start" | "center" | "end";
 }
 
-/** Cover Section settings (subset of SectionV2Settings — no background/border) */
+/** Cover Section settings (subset of SectionV2Settings) */
 export interface CoverSectionSettings {
   grid_columns: number;        // default 12
   col_gap: number;
   row_gap: number;
+  // Spacing (padding TRBL, px)
   spacing_top?: string;
   spacing_right?: string;
   spacing_bottom?: string;
   spacing_left?: string;
+  // Offset (margin TRBL, px)
+  offset_top?: string;
+  offset_right?: string;
+  offset_bottom?: string;
+  offset_left?: string;
+  // Border
+  border_radius?: string;
+  // Animation
   enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
   stagger?: {
     enabled?: boolean;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "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/objects/coverSection.ts

@@ -95,6 +95,10 @@ const responsiveSettingsFields = [
   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" }),
+  defineField({ name: "offset_top", type: "string", title: "Offset Top" }),
+  defineField({ name: "offset_right", type: "string", title: "Offset Right" }),
+  defineField({ name: "offset_bottom", type: "string", title: "Offset Bottom" }),
+  defineField({ name: "offset_left", type: "string", title: "Offset Left" }),
 ];
 
 export default defineType({
@@ -250,6 +254,13 @@ export default defineType({
         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" }),
+        // Offset (margin TRBL)
+        defineField({ name: "offset_top", title: "Offset Top", type: "string" }),
+        defineField({ name: "offset_right", title: "Offset Right", type: "string" }),
+        defineField({ name: "offset_bottom", title: "Offset Bottom", type: "string" }),
+        defineField({ name: "offset_left", title: "Offset Left", type: "string" }),
+        // Border
+        defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
         // Animation
         defineField({
           name: "enter_animation",