@morphika/andami 0.2.16 → 0.2.19

package/components/blocks/BlockRenderer.tsx

@@ -395,7 +395,11 @@ export default function BlockRenderer({
   // ── Enter animation: apply non-typewriter presets after layout wrapper ──
   // Typewriter was already applied BEFORE the layout wrapper (above) so that
   // block padding wraps both phases. All other presets wrap after layout.
-  if (resolvedEnter && resolvedEnter.preset !== "none" && !isTypewriter) {
+  // Fill blocks (position: absolute backgrounds) skip enter animations —
+  // their zero-height wrapper prevents IntersectionObserver from triggering.
+  const isFillBlock = (resolved._type === "imageBlock" || resolved._type === "videoBlock") &&
+    (resolved as unknown as { width?: string }).width === "fill";
+  if (resolvedEnter && resolvedEnter.preset !== "none" && !isTypewriter && !isFillBlock) {
     content = (
       <EnterAnimationWrapper config={resolvedEnter}>
         {content}

package/components/blocks/CoverSectionRenderer.tsx

@@ -106,6 +106,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
   const bgVideoSrc = section.background_type === "video" && section.background_video
     ? assetUrl(section.background_video)
     : null;
+  const bgColor = section.background_type === "color" ? section.background_color : null;
   const overlayOpacity = section.background_overlay_opacity ?? 0;
 
   const responsiveCss = buildCoverResponsiveCss(section);
@@ -178,6 +179,17 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
         </video>
       )}
 
+      {/* Background color */}
+      {bgColor && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundColor: bgColor,
+          }}
+        />
+      )}
+
       {/* Overlay */}
       {overlayOpacity > 0 && (
         <div
@@ -260,7 +272,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
                   </div>
                 );
 
-                if (blockEnter && blockEnter.preset !== "none") {
+                if (blockEnter && blockEnter.preset !== "none" && !isFillBlock) {
                   return (
                     <EnterAnimationWrapper key={block._key} config={blockEnter}>
                       {rendered}

package/components/builder/CoverSectionCanvas.tsx

@@ -148,6 +148,16 @@ export default function CoverSectionCanvas({
             }}
           />
         )}
+        {section.background_type === "color" && section.background_color && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundColor: section.background_color,
+              opacity: 0.25,
+              overflow: "hidden",
+            }}
+          />
+        )}
 
         {/* Overlay preview */}
         {(section.background_overlay_opacity ?? 0) > 0 && (

package/components/builder/ReadOnlyFrame.tsx

@@ -412,6 +412,15 @@ const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
             }}
           />
         )}
+        {section.background_type === "color" && section.background_color && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundColor: section.background_color,
+              opacity: 0.25,
+            }}
+          />
+        )}
         {(section.background_overlay_opacity ?? 0) > 0 && (
           <div
             className="absolute inset-0 pointer-events-none"

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/components/builder/settings-panel/CoverSectionSettings.tsx

@@ -81,7 +81,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
   const overlayOpacity = section.background_overlay_opacity ?? 0;
 
   const updateBg = (fields: Partial<Pick<CoverSection,
-    "background_type" | "background_image" | "background_video" |
+    "background_type" | "background_color" | "background_image" | "background_video" |
     "background_position" | "background_size" |
     "background_overlay_color" | "background_overlay_opacity"
   >>) => {
@@ -94,7 +94,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
       <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Type">
           <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
-            {(["image", "video"] as const).map((type) => (
+            {(["image", "video", "color"] as const).map((type) => (
               <button
                 key={type}
                 onClick={() => updateBg({ background_type: type })}
@@ -104,50 +104,62 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
                     : "text-neutral-400 hover:text-neutral-500"
                 }`}
               >
-                {type === "image" ? "Image" : "Video"}
+                {type === "image" ? "Image" : type === "video" ? "Video" : "Color"}
               </button>
             ))}
           </div>
         </SettingsField>
 
-        <SettingsField label={bgType === "image" ? "Image" : "Video"}>
-          <AssetPathInput
-            value={bgType === "image" ? (section.background_image || "") : (section.background_video || "")}
-            onChange={(path) => {
-              if (bgType === "image") {
-                updateBg({ background_image: path });
-              } else {
-                updateBg({ background_video: path });
-              }
-            }}
-            filterType={bgType === "image" ? "image" : "video"}
-            placeholder={bgType === "image" ? "path/to/image.jpg" : "path/to/video.mp4"}
-          />
-        </SettingsField>
+        {bgType === "color" ? (
+          <SettingsField label="Color">
+            <ColorSwatchPicker
+              value={section.background_color || "#000000"}
+              onChange={(val) => updateBg({ background_color: typeof val === "string" ? val : "" })}
+              swatches={paletteSwatches}
+            />
+          </SettingsField>
+        ) : (
+          <>
+            <SettingsField label={bgType === "image" ? "Image" : "Video"}>
+              <AssetPathInput
+                value={bgType === "image" ? (section.background_image || "") : (section.background_video || "")}
+                onChange={(path) => {
+                  if (bgType === "image") {
+                    updateBg({ background_image: path });
+                  } else {
+                    updateBg({ background_video: path });
+                  }
+                }}
+                filterType={bgType === "image" ? "image" : "video"}
+                placeholder={bgType === "image" ? "path/to/image.jpg" : "path/to/video.mp4"}
+              />
+            </SettingsField>
 
-        <SettingsField label="Position">
-          <select
-            value={bgPosition}
-            onChange={(e) => updateBg({ background_position: e.target.value })}
-            className={SELECT_CLASS}
-          >
-            {BG_POSITION_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>{opt.label}</option>
-            ))}
-          </select>
-        </SettingsField>
+            <SettingsField label="Position">
+              <select
+                value={bgPosition}
+                onChange={(e) => updateBg({ background_position: e.target.value })}
+                className={SELECT_CLASS}
+              >
+                {BG_POSITION_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+            </SettingsField>
 
-        <SettingsField label="Size">
-          <select
-            value={bgSize}
-            onChange={(e) => updateBg({ background_size: e.target.value as CoverSection["background_size"] })}
-            className={SELECT_CLASS}
-          >
-            {BG_SIZE_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>{opt.label}</option>
-            ))}
-          </select>
-        </SettingsField>
+            <SettingsField label="Size">
+              <select
+                value={bgSize}
+                onChange={(e) => updateBg({ background_size: e.target.value as CoverSection["background_size"] })}
+                className={SELECT_CLASS}
+              >
+                {BG_SIZE_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+            </SettingsField>
+          </>
+        )}
       </SettingsSection>
 
       {/* Overlay */}

package/lib/builder/store-cover.ts

@@ -175,7 +175,7 @@ export function createCoverActions(set: StoreSet, get: StoreGet) {
     updateCoverBackground: (
       sectionKey: string,
       fields: Partial<Pick<CoverSection,
-        "background_type" | "background_image" | "background_video" |
+        "background_type" | "background_color" | "background_image" | "background_video" |
         "background_position" | "background_size" |
         "background_overlay_color" | "background_overlay_opacity"
       >>

package/lib/builder/types.ts

@@ -383,7 +383,7 @@ export interface BuilderActions {
   removeCoverRow: (sectionKey: string, rowKey: string) => void;
   resizeCoverRow: (sectionKey: string, handleIndex: number, deltaPercent: number, startAbove: number, startBelow: number) => void;
   updateCoverRowAlign: (sectionKey: string, rowKey: string, align: CoverRow["vertical_align"]) => void;
-  updateCoverBackground: (sectionKey: string, fields: Partial<Pick<CoverSection, "background_type" | "background_image" | "background_video" | "background_position" | "background_size" | "background_overlay_color" | "background_overlay_opacity">>) => void;
+  updateCoverBackground: (sectionKey: string, fields: Partial<Pick<CoverSection, "background_type" | "background_color" | "background_image" | "background_video" | "background_position" | "background_size" | "background_overlay_color" | "background_overlay_opacity">>) => void;
   updateCoverSettings: (sectionKey: string, settings: Partial<CoverSectionSettings>) => void;
   updateCoverHeight: (sectionKey: string, height: CoverSection["height"]) => void;
 

package/lib/sanity/types.ts

@@ -491,7 +491,8 @@ export interface CoverSection {
   _key: string;
 
   // Background
-  background_type: "image" | "video";
+  background_type: "image" | "video" | "color";
+  background_color?: string;
   background_image?: string;
   background_video?: string;
   background_position?: string;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.2.16",
+  "version": "0.2.19",
   "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

@@ -115,10 +115,17 @@ export default defineType({
         list: [
           { title: "Image", value: "image" },
           { title: "Video", value: "video" },
+          { title: "Color", value: "color" },
         ],
       },
       initialValue: "image",
     }),
+    defineField({
+      name: "background_color",
+      title: "Background Color",
+      type: "string",
+      description: "Hex color for solid background",
+    }),
     defineField({
       name: "background_image",
       title: "Background Image",