@morphika/andami 0.2.12 → 0.2.14

package/components/builder/SectionV2Column.tsx

@@ -460,32 +460,27 @@ export default function SectionV2Column({
       {/* Blocks content */}
       <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
         {!hasBlocks ? (
-          /* Empty column: show + Add Block */
+          /* Empty column: show + Add Block (flex-1 stretches in fillHeight cover sections) */
           <div
-            className="relative flex items-center justify-center"
+            className="relative flex items-center justify-center flex-1"
             style={{ minHeight: 80, padding: "16px 12px" }}
           >
             <button
               onClick={handleAddBlockEmpty}
               aria-label="Add block to empty column"
-              className={`w-full py-2 rounded-lg text-xs font-medium transition-all flex items-center justify-center ${
+              className={`rounded-full text-[10px] font-medium transition-all hover:scale-105 ${
                 showChrome
                   ? "opacity-100"
                   : showFaintOutline
                   ? "opacity-40"
-                  : "bg-transparent text-transparent opacity-0 pointer-events-none"
+                  : "opacity-0 pointer-events-none"
               }`}
               style={{
+                padding: "5px 16px",
                 pointerEvents: showChrome || showFaintOutline ? "auto" : "none",
-                ...(showChrome ? {
-                  background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
-                  color: "rgba(100,220,170,0.8)",
-                  boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
-                  border: "1px solid rgba(255,255,255,0.06)",
-                } : showFaintOutline ? {
-                  background: "rgba(38,38,48,0.3)",
-                  color: "rgba(100,220,170,0.4)",
-                } : {}),
+                background: showChrome ? "rgba(13, 150, 104, 0.12)" : "rgba(13, 150, 104, 0.06)",
+                color: "#0d9668",
+                border: `1px dashed ${showChrome ? "rgba(13, 150, 104, 0.5)" : "rgba(13, 150, 104, 0.25)"}`,
               }}
             >
               + Add Block
@@ -500,21 +495,21 @@ export default function SectionV2Column({
       {/* Hidden for section-level blocks (e.g. projectGridBlock) that own the full column */}
       {hasBlocks && !singleSectionBlock && (
         <div
-          className={`absolute left-0 right-0 z-[3] transition-all ${
+          className={`flex-1 min-h-0 flex items-center justify-center z-[3] transition-all ${
             showChrome ? "opacity-100" : showFaintOutline ? "opacity-30" : "opacity-0 pointer-events-none"
           }`}
-          style={{ bottom: 0, transform: "translateY(100%)", padding: "4px 12px 0" }}
+          style={{ minHeight: 24 }}
         >
           <button
             onClick={handleAddBlockBelow}
             aria-label="Add block below existing blocks"
-            className="w-full py-1.5 text-[11px] font-medium rounded transition-all"
+            className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
             style={{
+              padding: "4px 14px",
               pointerEvents: showChrome ? "auto" : "none",
-              background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
-              color: "rgba(100,220,170,0.8)",
-              boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
-              border: "1px solid rgba(255,255,255,0.06)",
+              background: "rgba(13, 150, 104, 0.12)",
+              color: "#0d9668",
+              border: "1px dashed rgba(13, 150, 104, 0.5)",
             }}
           >
             + Add Block

package/components/builder/SettingsPanel.tsx

@@ -37,6 +37,7 @@ import {
   ColumnV2Settings,
   ParallaxSlideSettings,
   ParallaxGroupSettings,
+  CoverSectionSettings,
 } from "./settings-panel";
 
 type SettingsTab = "settings" | "layout" | "seo" | "animation";
@@ -49,6 +50,7 @@ export default function SettingsPanel() {
   const {
     selectedSectionV2,
     selectedCustomSectionInstance,
+    selectedCoverSection,
     selectedParallaxGroup,
     selectedParallaxSlide,
     effectiveSectionV2,
@@ -59,6 +61,7 @@ export default function SettingsPanel() {
     HeaderIconComponent,
     isColumnOnly,
     isParallaxGroupOnly,
+    isCoverSectionOnly,
     isPageLevel,
   } = sel;
 
@@ -141,6 +144,9 @@ export default function SettingsPanel() {
             } else if (selectedParallaxGroup && !selectedParallaxSlide) {
               onDelete = () => store.deleteSection(selectedParallaxGroup._key);
               deleteTitle = "Delete Parallax Group";
+            } else if (selectedCoverSection) {
+              onDelete = () => store.deleteSection(selectedCoverSection._key);
+              deleteTitle = "Delete Cover Section";
             } else if (selectedSectionV2) {
               onDelete = () => store.deleteSection(selectedSectionV2._key);
               deleteTitle = "Delete Section";
@@ -327,6 +333,14 @@ export default function SettingsPanel() {
             <CustomSectionSettings instance={selectedCustomSectionInstance} />
           )
         ) :
+        /* ---- Cover Section routing ---- */
+        isCoverSectionOnly && selectedCoverSection ? (
+          activeTab === "animation" ? (
+            <SectionV2AnimationTab section={effectiveSectionV2!} />
+          ) : (
+            <CoverSectionSettings section={selectedCoverSection} />
+          )
+        ) :
         /* ---- V2 Section / Column / Block routing ---- */
         /* BUG-V2-003 fix: When a block inside a V2 column is selected, show BlockSettings
             instead of ColumnV2Settings. Block selection takes priority over column. */

package/components/builder/SortableRow.tsx

@@ -60,6 +60,7 @@ interface SortableRowProps {
   onSelect: () => void;
   onDelete: () => void;
   onAddColumn: () => void;
+  addColumnLabel?: string;
   onDuplicate: () => void;
   onMoveUp: () => void;
   onMoveDown: () => void;
@@ -76,6 +77,7 @@ export default function SortableRow({
   onSelect,
   onDelete,
   onAddColumn,
+  addColumnLabel = "Col",
   onDuplicate,
   onMoveUp,
   onMoveDown,
@@ -87,7 +89,6 @@ export default function SortableRow({
   const selectBlock = useBuilderStore((s) => s.selectBlock);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
   const activeViewport = useBuilderStore((s) => s.activeViewport);
-  const gridSettings = useBuilderStore((s) => s.gridSettings);
   const customSectionCache = useBuilderStore((s) => s._customSectionCache);
   const [isHovered, setIsHovered] = useState(false);
   const {
@@ -176,24 +177,9 @@ export default function SortableRow({
   const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown> || {});
 
   const showToolbar = isSelected || isHovered;
-  const coverRow = false;
 
   // ---- Preview Mode: clean rendering with row styles applied ----
   if (previewMode) {
-    // Cover rows: full-width, no padding, no container (matches RowRenderer)
-    if (coverRow) {
-      return (
-        <div
-          ref={setNodeRef}
-          style={{
-            ...style,
-            backgroundColor: bgColor !== "transparent" ? bgColor : undefined,
-          }}
-        >
-          {children}
-        </div>
-      );
-    }
     // Build merged styles for preview mode
     const previewRowStyle: React.CSSProperties = {
       ...style,
@@ -219,7 +205,7 @@ export default function SortableRow({
   const designRowStyle: React.CSSProperties = {
     ...style,
     ...layoutStyles,
-    minHeight: coverRow ? undefined : minHeight,
+    minHeight,
   };
   // Legacy fallback: if no layout background set, use old bgColor
   if (!layoutStyles.backgroundColor && !layoutStyles.backgroundImage) {
@@ -332,10 +318,10 @@ export default function SortableRow({
               onClick={(e) => { e.stopPropagation(); onAddColumn(); }}
               onPointerDown={(e) => e.stopPropagation()}
               className="flex items-center gap-1 text-[11px] text-white/50 hover:text-white/85 transition-colors py-0.5"
-              title="Add column"
-              aria-label="Add column"
+              title={`Add ${addColumnLabel.toLowerCase()}`}
+              aria-label={`Add ${addColumnLabel.toLowerCase()}`}
             >
-              <span className="text-white/30">+</span> Col
+              <span className="text-white/30">+</span> {addColumnLabel}
             </button>
           )}
 
@@ -364,7 +350,7 @@ export default function SortableRow({
       )}
 
       {/* Content — same layout as Preview */}
-      <div style={coverRow ? undefined : { maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative">
+      <div style={{ maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative">
         {children}
       </div>
     </div>

package/components/builder/blockStyles.tsx

@@ -14,8 +14,8 @@ export const BLOCK_GRADIENTS: Record<string, string> = {
   videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
   spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
   buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
-  coverBlock:     "linear-gradient(135deg, #ffd0a8 0%, #ffc090 50%, #ffb080 100%)",
   projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
+  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
   parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
   customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
   // Non-block contexts
@@ -149,27 +149,26 @@ export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
   );
 }
 
-export function CoverBlockIcon({ size = 28 }: { size?: number }) {
+// ── Non-block context icons ──
+
+export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
       <defs>
-        <linearGradient id="starGrad" x1="10" y1="4" x2="30" y2="36">
-          <stop offset="0%" stopColor="#f0a040" />
-          <stop offset="100%" stopColor="#e07820" />
+        <linearGradient id="csSettingsGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor="#0d9488" />
+          <stop offset="100%" stopColor="#0f766e" />
         </linearGradient>
-        <filter id="starDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="2" floodColor="rgba(200,100,20,0.3)" />
-        </filter>
       </defs>
-      <path d="M20,2 L24,15 L37,20 L24,25 L20,38 L16,25 L3,20 L16,15 Z" fill="url(#starGrad)" filter="url(#starDrop)" />
-      <path d="M20,2 L24,15 L37,20 L16,15 Z" fill="white" opacity="0.2" />
-      <circle cx="20" cy="20" r="2.5" fill="white" opacity="0.4" />
+      <rect x="3" y="3" width="34" height="34" rx="6" fill="url(#csSettingsGrad)" opacity="0.12" />
+      <rect x="3" y="3" width="34" height="34" rx="6" stroke="url(#csSettingsGrad)" strokeWidth="1.5" fill="none" opacity="0.4" />
+      <rect x="7" y="7" width="26" height="16" rx="2" fill="url(#csSettingsGrad)" opacity="0.2" />
+      <rect x="7" y="25" width="26" height="8" rx="2" fill="url(#csSettingsGrad)" opacity="0.35" />
+      <line x1="9" y1="24" x2="31" y2="24" stroke="#0d9488" strokeWidth="1" opacity="0.4" strokeDasharray="2 2" />
     </svg>
   );
 }
 
-// ── Non-block context icons ──
-
 export function RowIcon({ size = 28 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
@@ -285,9 +284,9 @@ export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>>
   videoBlock: VideoBlockIcon,
   spacerBlock: SpacerBlockIcon,
   buttonBlock: ButtonBlockIcon,
-  coverBlock: CoverBlockIcon,
   projectGridBlock: ProjectGridBlockIcon,
   parallaxGroup: ParallaxGroupIcon,
+  coverSection: CoverSectionSettingsIcon,
   customSectionInstance: CustomSectionInstanceIcon,
   row: RowIcon,
   column: ColumnIcon,

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/editors/index.ts

@@ -4,7 +4,6 @@ export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
 export { default as VideoBlockEditor } from "./VideoBlockEditor";
 export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
 export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
-export { default as CoverBlockEditor } from "./CoverBlockEditor";
 export { default as ProjectGridEditor } from "./ProjectGridEditor";
 export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
 export { getSpacerPx } from "./SpacerBlockEditor";

package/components/builder/index.ts

@@ -7,6 +7,7 @@ export { default as SettingsPanel } from "./SettingsPanel";
 export { default as BuilderCanvas } from "./BuilderCanvas";
 export { default as SectionV2Canvas } from "./SectionV2Canvas";
 export { default as ParallaxGroupCanvas } from "./ParallaxGroupCanvas";
+export { default as CoverSectionCanvas } from "./CoverSectionCanvas";
 export { default as SectionV2Column } from "./SectionV2Column";
 export { default as CanvasToolbar } from "./CanvasToolbar";
 export { makeRowId, makeBlockId, makeColumnDroppableId } from "./DndWrapper";

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/components/builder/live-preview/RichTextEditor.tsx

@@ -11,7 +11,7 @@
  * debounce + snapshot pattern as the original LiveTextEditor.
  */
 
-import { useRef, useCallback, useEffect, useMemo } from "react";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
@@ -63,6 +63,7 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
   const snapshotPushedRef = useRef(false);
   // Track block key to detect when we switch to a different block
   const blockKeyRef = useRef(block._key);
+  const [isEmpty, setIsEmpty] = useState(true);
 
   const style = block.style || {};
   const cols = block.columns && block.columns > 1 ? block.columns : undefined;
@@ -115,8 +116,12 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     ],
     content: initialContent,
     editable,
+    onCreate: ({ editor }) => {
+      setIsEmpty(editor.isEmpty);
+    },
     // Debounced update on every content change
     onUpdate: ({ editor }) => {
+      setIsEmpty(editor.isEmpty);
       if (debounceRef.current) clearTimeout(debounceRef.current);
       debounceRef.current = setTimeout(() => {
         commitContent(editor);
@@ -203,7 +208,8 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     fontFamily: "inherit",
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    minHeight: "1em",
+    minHeight: editable ? "48px" : "1em",
+    position: "relative" as const,
     ...(cols
       ? {
           columnCount: cols,
@@ -218,6 +224,21 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     <div style={computedStyle} className="rich-text-editor-root">
       {editable && <RichTextBubbleMenu editor={editor} />}
       <EditorContent editor={editor} />
+      {editable && isEmpty && (
+        <div
+          className="absolute inset-0 pointer-events-none select-none"
+          style={{
+            color: "#a3a3a3",
+            fontStyle: "italic",
+            fontSize: "13px",
+            fontWeight: 400,
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          Click to edit...
+        </div>
+      )}
     </div>
   );
 }

package/components/builder/live-preview/index.ts

@@ -7,6 +7,5 @@ export { default as LiveImageGridPreview } from "./LiveImageGridPreview";
 export { default as LiveVideoPreview } from "./LiveVideoPreview";
 export { default as LiveSpacerPreview } from "./LiveSpacerPreview";
 export { default as LiveButtonPreview } from "./LiveButtonPreview";
-export { default as LiveCoverPreview } from "./LiveCoverPreview";
 export { default as LiveProjectGridPreview } from "./LiveProjectGridPreview";
 export { ThumbBadge, LivePlaceholder, useProjectThumbnails, ProjectGridCard } from "./shared";

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

@@ -14,7 +14,6 @@ import {
   VideoBlockEditor,
   SpacerBlockEditor,
   ButtonBlockEditor,
-  CoverBlockEditor,
   ProjectGridEditor,
 } from "../editors";
 
@@ -68,12 +67,6 @@ function BlockTypeEditor({ block }: { block: ContentBlock }) {
           block={block as import("../../../lib/sanity/types").ButtonBlock}
         />
       );
-    case "coverBlock":
-      return (
-        <CoverBlockEditor
-          block={block as import("../../../lib/sanity/types").CoverBlock}
-        />
-      );
     case "projectGridBlock":
       return (
         <ProjectGridEditor