@morphika/andami 0.2.13 → 0.2.15

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/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/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/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/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/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={{ 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}
+          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
+    ? { 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 (
-    <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/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/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;
@@ -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.13";
+export const ANDAMI_VERSION = "0.2.15";

package/package.json

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

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",