@morphika/andami 0.5.2 → 0.5.3

package/lib/builder/serializer/normalizers.ts

@@ -31,6 +31,19 @@ export function normalizePageSectionV2(section: Partial<PageSectionV2> & { _key:
     // Migrate column-level enter_animation (new field, no old equivalent for columns)
     const colEnterAnimation = colRecord.enter_animation as EnterAnimationConfig | undefined;
 
+    // Column-level background + border — carry through from Sanity (desktop-only).
+    const colLayoutFields: Partial<SectionColumn> = {};
+    for (const field of [
+      "background_color", "background_opacity", "background_image",
+      "background_size", "background_position", "background_repeat",
+      "border_color", "border_width", "border_style", "border_sides", "border_radius",
+    ] as const) {
+      const val = colRecord[field];
+      if (val !== undefined && val !== null) {
+        (colLayoutFields as Record<string, unknown>)[field] = val;
+      }
+    }
+
     return {
       _key: col._key || generateKey(),
       grid_column: col.grid_column || 1,
@@ -55,6 +68,7 @@ export function normalizePageSectionV2(section: Partial<PageSectionV2> & { _key:
         return b as ContentBlock;
       }),
       ...(colEnterAnimation ? { enter_animation: colEnterAnimation } : {}),
+      ...colLayoutFields,
     };
   });
 

package/lib/builder/serializer/serializers.ts

@@ -134,6 +134,21 @@ function serializePageSectionV2(section: PageSectionV2): Record<string, unknown>
       if (col.enter_animation && col.enter_animation.preset && col.enter_animation.preset !== "none") {
         colData.enter_animation = col.enter_animation;
       }
+      // Column-level background + border (desktop-only).
+      const colLayout = stripUndefined({
+        background_color: col.background_color,
+        background_opacity: col.background_opacity,
+        background_image: col.background_image,
+        background_size: col.background_size,
+        background_position: col.background_position,
+        background_repeat: col.background_repeat,
+        border_color: col.border_color,
+        border_width: col.border_width,
+        border_style: col.border_style,
+        border_sides: col.border_sides,
+        border_radius: col.border_radius,
+      });
+      if (colLayout) Object.assign(colData, colLayout);
       return colData;
     }),
     settings: s ? stripUndefined({
@@ -223,6 +238,18 @@ function serializeCoverSection(section: CoverSection): Record<string, unknown> {
     span: col.span,
     blocks: (col.blocks || []).map((b) => serializeBlock(b)),
     enter_animation: col.enter_animation,
+    // Column-level background + border (desktop-only).
+    background_color: col.background_color,
+    background_opacity: col.background_opacity,
+    background_image: col.background_image,
+    background_size: col.background_size,
+    background_position: col.background_position,
+    background_repeat: col.background_repeat,
+    border_color: col.border_color,
+    border_width: col.border_width,
+    border_style: col.border_style,
+    border_sides: col.border_sides,
+    border_radius: col.border_radius,
   } as Record<string, unknown>));
 
   return stripUndefined({

package/lib/builder/store-sections.ts

@@ -541,6 +541,27 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       });
     },
 
+    // Update desktop-level column layout fields (spacing/background/border).
+    // Undefined values in `updates` clear that field.
+    updateColumnV2Layout: (sectionKey, colKey, updates) => {
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => ({
+          ...section,
+          columns: section.columns.map((col) => {
+            if (col._key !== colKey) return col;
+            const merged = { ...col, ...updates };
+            for (const [k, v] of Object.entries(updates)) {
+              if (v === undefined) delete (merged as Record<string, unknown>)[k];
+            }
+            return merged;
+          }),
+        }));
+        return { rows, isDirty: true };
+      });
+    },
+
     // ---- Custom Section Instance operations (Session 108) ----
 
     addCustomSectionInstance: (

package/lib/builder/types-slices.ts

@@ -31,6 +31,7 @@ import type {
   PageSectionV2,
   SectionV2Settings,
   SectionV2Preset,
+  SectionColumn,
   PageMetadata,
   ColorField,
   CoverSection,
@@ -168,6 +169,19 @@ export interface SectionSliceActions {
     colKey: string,
     config: import("../../lib/animation/enter-types").EnterAnimationConfig | undefined,
   ) => void;
+  /** Update desktop-level layout fields on a V2/cover/parallax-slide column.
+   *  Columns only support background + border — spacing belongs to the
+   *  section (row_gap/col_gap) or to block-level padding. */
+  updateColumnV2Layout: (
+    sectionKey: string,
+    colKey: string,
+    updates: Partial<Pick<
+      SectionColumn,
+      | "background_color" | "background_opacity" | "background_image"
+      | "background_size" | "background_position" | "background_repeat"
+      | "border_color" | "border_width" | "border_style" | "border_sides" | "border_radius"
+    >>,
+  ) => void;
 
   /** Select a V2 column — sets selectedRowKey + selectedColumnKey. */
   selectColumnV2: (sectionKey: string | null, columnKey: string | null) => void;

package/lib/sanity/queries.ts

@@ -20,6 +20,18 @@ const blockExpansion = `
       grid_row,
       span,
       enter_animation,
+      // Column-level background + border (Session 184)
+      background_color,
+      background_opacity,
+      background_image,
+      background_size,
+      background_position,
+      background_repeat,
+      border_color,
+      border_width,
+      border_style,
+      border_sides,
+      border_radius,
       blocks[] {
         _type,
         _key,
@@ -60,6 +72,18 @@ const blockExpansion = `
         grid_column,
         grid_row,
         span,
+        // Column-level background + border (Session 184)
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -429,6 +453,18 @@ export const customSectionBySlugQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -456,6 +492,18 @@ export const customSectionByIdQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,

package/lib/sanity/types.ts

@@ -559,6 +559,20 @@ export interface SectionColumn {
   blocks: ContentBlock[];   // same block types as today
   // NEW (Session 116) — column-level enter animation for 4-level cascade
   enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  // Column-level layout — desktop-only for now. Background + border only
+  // (no spacing — section row_gap/col_gap + block padding cover that).
+  // Viewport overrides are TBD: the current ColumnOverride type is position-only.
+  background_color?: string;
+  background_opacity?: number;
+  background_image?: string;
+  background_size?: string;
+  background_position?: string;
+  background_repeat?: string;
+  border_color?: string;
+  border_width?: string;
+  border_style?: string;
+  border_sides?: string;
+  border_radius?: string;
 }
 
 export interface ColumnOverride {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -193,7 +193,6 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "archiver": "^7.0.1",
     "@aws-sdk/client-s3": "^3.1021.0",
     "@aws-sdk/s3-request-presigner": "^3.1021.0",
     "@dnd-kit/core": "^6.3.1",
@@ -210,10 +209,11 @@
     "@tiptap/starter-kit": "^2.12.0",
     "@types/archiver": "^6.0.3",
     "@types/unzipper": "^0.10.10",
+    "archiver": "^7.0.1",
     "jszip": "^3.10.1",
-    "next-sanity": "^12.1.5",
+    "next-sanity": "^12.3.0",
     "ogl": "^1.0.8",
-    "sanity": "^5.17.1",
+    "sanity": "^5.21.0",
     "unzipper": "^0.12.3",
     "zustand": "^5.0.12"
   },
@@ -228,10 +228,12 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
+    "framer-motion": "^12.38.0",
     "jsdom": "^26.1.0",
-    "next": "16.2.1",
+    "next": "^16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "styled-components": "^6.4.0",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.1.2"

package/sanity/schemas/objects/coverSection.ts

@@ -50,6 +50,38 @@ const columnFields = [
     title: "Enter Animation",
     type: "enterAnimationConfig",
   }),
+  // Column-level layout — desktop-only, background + border only.
+  defineField({ name: "background_color", title: "Background Color", type: "string" }),
+  defineField({ name: "background_opacity", title: "Background Opacity", type: "number" }),
+  defineField({ name: "background_image", title: "Background Image", type: "string" }),
+  defineField({
+    name: "background_size",
+    title: "Background Size",
+    type: "string",
+    options: { list: ["cover", "contain", "auto"] },
+  }),
+  defineField({ name: "background_position", title: "Background Position", type: "string" }),
+  defineField({
+    name: "background_repeat",
+    title: "Background Repeat",
+    type: "string",
+    options: { list: ["no-repeat", "repeat", "repeat-x", "repeat-y"] },
+  }),
+  defineField({ name: "border_color", title: "Border Color", type: "string" }),
+  defineField({ name: "border_width", title: "Border Width", type: "string" }),
+  defineField({
+    name: "border_style",
+    title: "Border Style",
+    type: "string",
+    options: { list: ["none", "solid", "dashed", "dotted"] },
+  }),
+  defineField({
+    name: "border_sides",
+    title: "Border Sides",
+    type: "string",
+    options: { list: ["all", "top", "right", "bottom", "left", "top-bottom", "left-right"] },
+  }),
+  defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
 ];
 
 const responsiveColumnOverrideFields = [

package/sanity/schemas/objects/parallaxSlide.ts

@@ -115,6 +115,38 @@ export default defineType({
               title: "Enter Animation",
               type: "enterAnimationConfig",
             }),
+            // Column-level layout — desktop-only, background + border only.
+            defineField({ name: "background_color", title: "Background Color", type: "string" }),
+            defineField({ name: "background_opacity", title: "Background Opacity", type: "number" }),
+            defineField({ name: "background_image", title: "Background Image", type: "string" }),
+            defineField({
+              name: "background_size",
+              title: "Background Size",
+              type: "string",
+              options: { list: ["cover", "contain", "auto"] },
+            }),
+            defineField({ name: "background_position", title: "Background Position", type: "string" }),
+            defineField({
+              name: "background_repeat",
+              title: "Background Repeat",
+              type: "string",
+              options: { list: ["no-repeat", "repeat", "repeat-x", "repeat-y"] },
+            }),
+            defineField({ name: "border_color", title: "Border Color", type: "string" }),
+            defineField({ name: "border_width", title: "Border Width", type: "string" }),
+            defineField({
+              name: "border_style",
+              title: "Border Style",
+              type: "string",
+              options: { list: ["none", "solid", "dashed", "dotted"] },
+            }),
+            defineField({
+              name: "border_sides",
+              title: "Border Sides",
+              type: "string",
+              options: { list: ["all", "top", "right", "bottom", "left", "top-bottom", "left-right"] },
+            }),
+            defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
           ],
         },
       ],

package/sanity/schemas/pageSectionV2.ts

@@ -76,6 +76,38 @@ export default defineType({
               title: "Enter Animation",
               type: "enterAnimationConfig",
             }),
+            // Column-level layout — desktop-only, background + border only.
+            defineField({ name: "background_color", title: "Background Color", type: "string" }),
+            defineField({ name: "background_opacity", title: "Background Opacity", type: "number" }),
+            defineField({ name: "background_image", title: "Background Image", type: "string" }),
+            defineField({
+              name: "background_size",
+              title: "Background Size",
+              type: "string",
+              options: { list: ["cover", "contain", "auto"] },
+            }),
+            defineField({ name: "background_position", title: "Background Position", type: "string" }),
+            defineField({
+              name: "background_repeat",
+              title: "Background Repeat",
+              type: "string",
+              options: { list: ["no-repeat", "repeat", "repeat-x", "repeat-y"] },
+            }),
+            defineField({ name: "border_color", title: "Border Color", type: "string" }),
+            defineField({ name: "border_width", title: "Border Width", type: "string" }),
+            defineField({
+              name: "border_style",
+              title: "Border Style",
+              type: "string",
+              options: { list: ["none", "solid", "dashed", "dotted"] },
+            }),
+            defineField({
+              name: "border_sides",
+              title: "Border Sides",
+              type: "string",
+              options: { list: ["all", "top", "right", "bottom", "left", "top-bottom", "left-right"] },
+            }),
+            defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
           ],
         },
       ],