@morphika/andami 0.2.12 → 0.2.14

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;
@@ -210,47 +210,6 @@ export interface ButtonBlock {
   responsive?: ResponsiveOverrides<ButtonBlock>;
 }
 
-export interface CoverBlock {
-  _type: "coverBlock";
-  _key: string;
-  // Content
-  headline?: string;
-  subheadline?: string;
-  cta_button?: {
-    text?: string;
-    url?: string;
-    target_blank?: boolean;
-    style?: "primary" | "secondary" | "outline" | "text";
-  };
-  // Media
-  media_type?: "image" | "video";
-  media_path?: string;
-  video_poster?: string;
-  background_size?: "cover" | "contain" | "none";
-  background_position?: string;
-  background_repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
-  // Overlay
-  overlay?: "none" | "dark" | "light" | "gradient-bottom" | "gradient-top";
-  overlay_opacity?: number;
-  /** Custom overlay gradient (Phase 4). JSON-serialized ColorField.
-   *  When set, takes precedence over overlay + overlay_opacity. */
-  overlay_gradient?: string;
-  // Layout
-  content_align_h?: "left" | "center" | "right";
-  content_align_v?: "top" | "center" | "bottom";
-  content_max_width?: string;
-  height?: "100vh" | "80vh" | "60vh" | "40vh" | "custom";
-  custom_height?: string;
-  mobile_height?: "same" | "100vh" | "80vh" | "60vh" | "500px" | "400px";
-  // Appearance
-  text_color?: string;
-  show_scroll_indicator?: boolean;
-  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
-  hover_effect?: import("../../lib/animation/hover-effect-types").HoverEffectConfig;
-  layout?: BlockLayout;
-  responsive?: ResponsiveOverrides<CoverBlock>;
-}
-
 // ============================================
 // Project Grid Block v2 (template-only, Session 105)
 // ============================================
@@ -477,11 +436,84 @@ export interface CustomSectionInstance {
   responsive_overrides?: PageSectionV2["responsive"];
 }
 
+// ============================================
+// Cover Section — proportional rows (Session 176)
+// ============================================
+// Full-viewport section with fixed-height rows and background media.
+// Uses the same SectionColumn/block system as V2 but with explicit
+// row heights (percentages) instead of content-driven auto rows.
+
+export type CoverSectionHeight = "100vh" | "80vh" | "50vh";
+
+/** A single proportional row within a Cover Section */
+export interface CoverRow {
+  _key: string;
+  height_percent: number;      // 5–95, all rows must sum to 100
+  vertical_align: "start" | "center" | "end";
+}
+
+/** Cover Section settings (subset of SectionV2Settings — no background/border) */
+export interface CoverSectionSettings {
+  grid_columns: number;        // default 12
+  col_gap: number;
+  row_gap: number;
+  spacing_top?: string;
+  spacing_right?: string;
+  spacing_bottom?: string;
+  spacing_left?: string;
+  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  stagger?: {
+    enabled?: boolean;
+    delayPerChild?: number;
+    direction?: "left-to-right" | "right-to-left";
+  };
+}
+
+/** Responsive override for Cover Sections */
+export interface CoverSectionResponsiveOverride {
+  columns?: ColumnOverride[];
+  cover_rows?: Array<{ _key: string; height_percent?: number }>;
+  settings?: Partial<CoverSectionSettings>;
+}
+
+/** Cover Section — full-viewport section with background and proportional rows */
+export interface CoverSection {
+  _type: "coverSection";
+  _key: string;
+
+  // Background
+  background_type: "image" | "video";
+  background_image?: string;
+  background_video?: string;
+  background_position?: string;
+  background_size?: "cover" | "contain" | "auto";
+  background_overlay_color?: string;
+  background_overlay_opacity?: number;   // 0–100
+
+  // Height
+  height: CoverSectionHeight;
+
+  // Rows (explicit proportional heights)
+  cover_rows: CoverRow[];
+
+  // Columns (same as V2 — flat array with grid_row referencing cover_rows index)
+  columns: SectionColumn[];
+
+  // Settings
+  settings: CoverSectionSettings;
+
+  // Responsive
+  responsive?: {
+    tablet?: CoverSectionResponsiveOverride;
+    phone?: CoverSectionResponsiveOverride;
+  };
+}
+
 // ============================================
 // Content Item — union of section types in content_rows
 // ============================================
 
-export type ContentItem = PageSectionV2 | CustomSectionInstance | ParallaxGroup;
+export type ContentItem = PageSectionV2 | CustomSectionInstance | ParallaxGroup | CoverSection;
 
 /** Type guard: check if a content item is a PageSectionV2 */
 export function isPageSectionV2(item: ContentItem): item is PageSectionV2 {
@@ -498,6 +530,11 @@ export function isParallaxGroup(item: ContentItem): item is ParallaxGroup {
   return (item as ParallaxGroup)._type === "parallaxGroup";
 }
 
+/** Type guard: check if a content item is a CoverSection (Session 176) */
+export function isCoverSection(item: ContentItem): item is CoverSection {
+  return (item as CoverSection)._type === "coverSection";
+}
+
 // ============================================
 // Shared references
 // ============================================
@@ -520,7 +557,6 @@ export type ContentBlock =
   | VideoBlock
   | SpacerBlock
   | ButtonBlock
-  | CoverBlock
   | ProjectGridBlock;
 
 // ============================================

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

package/package.json

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

@@ -1,9 +1,8 @@
-// Block schemas (8)
+// Block schemas (7)
 export { textBlock } from "./textBlock";
 export { imageBlock } from "./imageBlock";
 export { imageGridBlock } from "./imageGridBlock";
 export { videoBlock } from "./videoBlock";
 export { spacerBlock } from "./spacerBlock";
 export { buttonBlock } from "./buttonBlock";
-export { coverBlock } from "./coverBlock";
 export { projectGridBlock } from "./projectGridBlock";

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

@@ -10,6 +10,7 @@ import hoverEffectConfig from "./objects/hoverEffectConfig";
 import typewriterConfig from "./objects/typewriterConfig";
 import parallaxSlide from "./objects/parallaxSlide";
 import parallaxGroup from "./objects/parallaxGroup";
+import coverSection from "./objects/coverSection";
 import {
   textBlock,
   imageBlock,
@@ -17,7 +18,6 @@ import {
   videoBlock,
   spacerBlock,
   buttonBlock,
-  coverBlock,
   projectGridBlock,
 } from "./blocks";
 
@@ -58,6 +58,9 @@ export {
 export {
   default as parallaxGroup,
 } from "./objects/parallaxGroup";
+export {
+  default as coverSection,
+} from "./objects/coverSection";
 export {
   textBlock,
   imageBlock,
@@ -65,7 +68,6 @@ export {
   videoBlock,
   spacerBlock,
   buttonBlock,
-  coverBlock,
   projectGridBlock,
 } from "./blocks";
 
@@ -87,6 +89,7 @@ export const schemaTypes = [
   typewriterConfig,         // Typewriter config for textBlock (Session 117)
   parallaxSlide,            // Parallax V2 slide (Session 123)
   parallaxGroup,            // Parallax V2 group (Session 123)
+  coverSection,             // Cover Section — proportional rows (Session 176)
 
   // Blocks (8)
   textBlock,
@@ -95,7 +98,6 @@ export const schemaTypes = [
   videoBlock,
   spacerBlock,
   buttonBlock,
-  coverBlock,
   projectGridBlock,
 ];
 

package/sanity/schemas/objects/coverSection.ts

@@ -0,0 +1,317 @@
+import { defineField, defineType } from "sanity";
+
+/**
+ * coverSection — Full-viewport section with proportional rows and background media.
+ *
+ * A new ContentItem type alongside pageSectionV2, parallaxGroup, and customSectionInstance.
+ * Uses the same column/block system as V2 but with fixed-height proportional rows
+ * instead of content-driven rows. Overflow is always hidden.
+ *
+ * Session 176: Cover Sections — Phase 1 (Schema).
+ */
+
+const columnFields = [
+  defineField({
+    name: "grid_column",
+    title: "Grid Column",
+    type: "number",
+    description: "1-based start position (1–12)",
+    validation: (Rule) => Rule.required().min(1).max(12),
+  }),
+  defineField({
+    name: "grid_row",
+    title: "Grid Row",
+    type: "number",
+    description: "1-based row index (maps to cover_rows)",
+    validation: (Rule) => Rule.required().min(1),
+  }),
+  defineField({
+    name: "span",
+    title: "Column Span",
+    type: "number",
+    description: "How many grid columns (1–12)",
+    validation: (Rule) => Rule.required().min(1).max(12),
+  }),
+  defineField({
+    name: "blocks",
+    title: "Blocks",
+    type: "array",
+    of: [
+      { type: "textBlock" },
+      { type: "imageBlock" },
+      { type: "imageGridBlock" },
+      { type: "videoBlock" },
+      { type: "spacerBlock" },
+      { type: "buttonBlock" },
+    ],
+  }),
+  defineField({
+    name: "enter_animation",
+    title: "Enter Animation",
+    type: "enterAnimationConfig",
+  }),
+];
+
+const responsiveColumnOverrideFields = [
+  defineField({
+    name: "columns",
+    title: "Column Overrides",
+    type: "array",
+    of: [
+      {
+        type: "object",
+        name: "columnOverride",
+        fields: [
+          defineField({ name: "grid_column", title: "Grid Column", type: "number" }),
+          defineField({ name: "grid_row", title: "Grid Row", type: "number" }),
+          defineField({ name: "span", title: "Span", type: "number" }),
+        ],
+      },
+    ],
+  }),
+];
+
+const responsiveRowOverrideFields = [
+  defineField({
+    name: "cover_rows",
+    title: "Row Height Overrides",
+    type: "array",
+    of: [
+      {
+        type: "object",
+        name: "coverRowOverride",
+        fields: [
+          defineField({ name: "height_percent", title: "Height %", type: "number" }),
+        ],
+      },
+    ],
+  }),
+];
+
+const responsiveSettingsFields = [
+  defineField({ name: "col_gap", title: "Column Gap", type: "number" }),
+  defineField({ name: "row_gap", title: "Row Gap", type: "number" }),
+  defineField({ name: "spacing_top", type: "string", title: "Spacing Top" }),
+  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" }),
+];
+
+export default defineType({
+  name: "coverSection",
+  title: "Cover Section",
+  type: "object",
+  fields: [
+    // ── Background ──
+    defineField({
+      name: "background_type",
+      title: "Background Type",
+      type: "string",
+      options: {
+        list: [
+          { title: "Image", value: "image" },
+          { title: "Video", value: "video" },
+        ],
+      },
+      initialValue: "image",
+    }),
+    defineField({
+      name: "background_image",
+      title: "Background Image",
+      type: "string",
+      description: "Asset path for background image",
+    }),
+    defineField({
+      name: "background_video",
+      title: "Background Video",
+      type: "string",
+      description: "Asset path for background video",
+    }),
+    defineField({
+      name: "background_position",
+      title: "Background Position",
+      type: "string",
+      description: "CSS background-position value",
+      initialValue: "center center",
+    }),
+    defineField({
+      name: "background_size",
+      title: "Background Size",
+      type: "string",
+      options: {
+        list: [
+          { title: "Cover", value: "cover" },
+          { title: "Contain", value: "contain" },
+          { title: "Auto", value: "auto" },
+        ],
+      },
+      initialValue: "cover",
+    }),
+    defineField({
+      name: "background_overlay_color",
+      title: "Overlay Color",
+      type: "string",
+      description: "Hex color for background overlay",
+      initialValue: "#000000",
+    }),
+    defineField({
+      name: "background_overlay_opacity",
+      title: "Overlay Opacity",
+      type: "number",
+      description: "0–100",
+      initialValue: 0,
+      validation: (Rule) => Rule.min(0).max(100),
+    }),
+
+    // ── Section Height ──
+    defineField({
+      name: "height",
+      title: "Section Height",
+      type: "string",
+      options: {
+        list: [
+          { title: "Full Viewport (100vh)", value: "100vh" },
+          { title: "80% Viewport (80vh)", value: "80vh" },
+          { title: "50% Viewport (50vh)", value: "50vh" },
+        ],
+      },
+      initialValue: "100vh",
+    }),
+
+    // ── Cover Rows (explicit, proportional) ──
+    defineField({
+      name: "cover_rows",
+      title: "Cover Rows",
+      type: "array",
+      description: "Proportional rows — heights must sum to 100%",
+      of: [
+        {
+          type: "object",
+          name: "coverRow",
+          fields: [
+            defineField({
+              name: "height_percent",
+              title: "Height (%)",
+              type: "number",
+              description: "Row height as percentage of section (5–95)",
+              validation: (Rule) => Rule.required().min(5).max(95),
+            }),
+            defineField({
+              name: "vertical_align",
+              title: "Vertical Alignment",
+              type: "string",
+              description: "How content is aligned vertically within this row",
+              options: {
+                list: [
+                  { title: "Top", value: "start" },
+                  { title: "Center", value: "center" },
+                  { title: "Bottom", value: "end" },
+                ],
+              },
+              initialValue: "start",
+            }),
+          ],
+          preview: {
+            select: { height: "height_percent", align: "vertical_align" },
+            prepare({ height, align }) {
+              return { title: `${height ?? 0}%`, subtitle: align ?? "start" };
+            },
+          },
+        },
+      ],
+      validation: (Rule) => Rule.required().min(1).max(5),
+    }),
+
+    // ── Columns (same structure as V2) ──
+    defineField({
+      name: "columns",
+      title: "Columns",
+      type: "array",
+      of: [
+        {
+          type: "object",
+          name: "sectionColumn",
+          fields: columnFields,
+        },
+      ],
+    }),
+
+    // ── Section Settings (subset of V2 — no background/border, those are section-level) ──
+    defineField({
+      name: "settings",
+      title: "Section Settings",
+      type: "object",
+      fields: [
+        defineField({ name: "grid_columns", title: "Grid Columns", type: "number" }),
+        defineField({ name: "col_gap", title: "Column Gap", type: "number" }),
+        defineField({ name: "row_gap", title: "Row Gap", type: "number" }),
+        // Spacing (padding TRBL)
+        defineField({ name: "spacing_top", title: "Spacing Top", type: "string" }),
+        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" }),
+        // Animation
+        defineField({
+          name: "enter_animation",
+          title: "Enter Animation",
+          type: "enterAnimationConfig",
+        }),
+        defineField({
+          name: "stagger",
+          title: "Stagger",
+          type: "object",
+          fields: [
+            defineField({ name: "enabled", title: "Enabled", type: "boolean" }),
+            defineField({ name: "delayPerChild", title: "Delay Per Child", type: "number" }),
+            defineField({
+              name: "direction",
+              title: "Direction",
+              type: "string",
+              options: { list: ["left-to-right", "right-to-left"] },
+            }),
+          ],
+        }),
+      ],
+    }),
+
+    // ── Responsive Overrides ──
+    defineField({
+      name: "responsive",
+      title: "Responsive Overrides",
+      type: "object",
+      hidden: true,
+      fields: [
+        defineField({
+          name: "tablet",
+          title: "Tablet",
+          type: "object",
+          fields: [
+            ...responsiveColumnOverrideFields,
+            ...responsiveRowOverrideFields,
+            ...responsiveSettingsFields,
+          ],
+        }),
+        defineField({
+          name: "phone",
+          title: "Phone",
+          type: "object",
+          fields: [
+            ...responsiveColumnOverrideFields,
+            ...responsiveRowOverrideFields,
+            ...responsiveSettingsFields,
+          ],
+        }),
+      ],
+    }),
+  ],
+  preview: {
+    select: { height: "height", rows: "cover_rows" },
+    prepare({ height, rows }) {
+      const rowCount = Array.isArray(rows) ? rows.length : 0;
+      return {
+        title: "Cover Section",
+        subtitle: `${height || "100vh"} · ${rowCount} row${rowCount !== 1 ? "s" : ""}`,
+      };
+    },
+  },
+});

package/sanity/schemas/objects/parallaxSlide.ts

@@ -108,7 +108,6 @@ export default defineType({
                 { type: "videoBlock" },
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
-                { type: "coverBlock" },
               ],
             }),
             defineField({

package/sanity/schemas/page.ts

@@ -42,7 +42,7 @@ export default defineType({
       name: "content_rows",
       title: "Content Rows",
       type: "array",
-      of: [{ type: "pageSectionV2" }, { type: "parallaxGroup" }, { type: "customSectionInstance" }],
+      of: [{ type: "pageSectionV2" }, { type: "parallaxGroup" }, { type: "customSectionInstance" }, { type: "coverSection" }],
     }),
     defineField({
       name: "metadata",

package/sanity/schemas/pageSectionV2.ts

@@ -66,7 +66,6 @@ export default defineType({
                 { type: "videoBlock" },
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
-                { type: "coverBlock" },
                 { type: "projectGridBlock" },
               ],
             }),