@morphika/andami 0.1.10 → 0.2.1

package/lib/builder/store-sections.ts

@@ -2,11 +2,8 @@ import type { BuilderStore, BuilderState, BlockType } from "./types";
 import type {
   ContentBlock,
   ContentItem,
-  PageSection,
   PageSectionV2,
   SectionV2Settings,
-  SectionSettings,
-  SectionBlock,
   CustomSectionInstance,
   ParallaxGroup,
   ParallaxSlideV2,
@@ -14,7 +11,6 @@ import type {
   EnterAnimationConfig,
 } from "../../lib/sanity/types";
 import {
-  isPageSection,
   isPageSectionV2,
   isCustomSectionInstance,
   isParallaxGroup,
@@ -52,20 +48,36 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
     // ---- Section operations ----
 
     /**
-     * Add a "Page Section" — creates a first-class PageSection entity
-     * with a pre-populated section block (projectGridBlock).
-     * No row/column wrapper — direct page-level section.
+     * Add a Project Grid section — creates a PageSectionV2 with a single
+     * full-width column (span 12) containing a pre-populated projectGridBlock.
+     *
+     * Session 164: Migrated from V1 (PageSection) to V2 (PageSectionV2).
+     * Existing V1 pages still work — V1 update/delete actions are kept until
+     * the data migration in Session 165.
      */
     addSection: (blockType: "projectGridBlock", afterRowKey?: string | null): void => {
       get()._pushSnapshot();
-      const block = createDefaultBlock(blockType) as SectionBlock;
-      const newSection: PageSection = {
-        _type: "pageSection",
+      const block = createDefaultBlock(blockType);
+      const gridColumns = 12;
+
+      const newSection: PageSectionV2 = {
+        _type: "pageSectionV2",
         _key: generateKey(),
-        section_type: "projectGrid",
-        block: [block],
-        // BUG-011 fix: default spacing to match addRow() defaults
+        section_type: "empty-v2",
+        columns: [
+          {
+            _key: generateKey(),
+            grid_column: 1,
+            grid_row: 1,
+            span: gridColumns,
+            blocks: [block],
+          },
+        ],
         settings: {
+          preset: "full",
+          grid_columns: gridColumns,
+          col_gap: 20,
+          row_gap: 20,
           spacing_top: "32",
           spacing_bottom: "32",
         },
@@ -97,50 +109,6 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
       });
     },
 
-    updateSectionSettings: (
-      sectionKey: string,
-      settings: Partial<SectionSettings>
-    ): void => {
-      set((state) => ({
-        rows: state.rows.map((item) =>
-          item._key === sectionKey && isPageSection(item)
-            ? { ...item, settings: { ...item.settings, ...settings } }
-            : item
-        ),
-        isDirty: true,
-      }));
-    },
-
-    /** BUG-013 fix: Update responsive overrides for a PageSection */
-    updateSectionResponsive: (
-      sectionKey: string,
-      responsive: PageSection["responsive"]
-    ): void => {
-      set((state) => ({
-        rows: state.rows.map((item) =>
-          item._key === sectionKey && isPageSection(item)
-            ? { ...item, responsive }
-            : item
-        ),
-        isDirty: true,
-      }));
-    },
-
-    updateSectionBlock: (sectionKey: string, updates: Partial<ContentBlock>): void => {
-      set((state) => ({
-        rows: state.rows.map((item) => {
-          if (item._key !== sectionKey || !isPageSection(item)) return item;
-          const block = item.block[0];
-          if (!block) return item;
-          return {
-            ...item,
-            block: [{ ...block, ...updates } as SectionBlock],
-          };
-        }),
-        isDirty: true,
-      }));
-    },
-
     deleteSection: (sectionKey: string): void => {
       get()._pushSnapshot();
       set((state) => ({
@@ -165,13 +133,7 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
         const clone = JSON.parse(JSON.stringify(original)) as ContentItem;
         clone._key = generateKey();
         // Re-key internal structures
-        if (isPageSection(clone)) {
-          if (clone.block.length > 0) {
-            clone.block = [
-              { ...clone.block[0], _key: generateKey() },
-            ] as [SectionBlock];
-          }
-        } else if (isPageSectionV2(clone)) {
+        if (isPageSectionV2(clone)) {
           (clone as PageSectionV2).columns = (clone as PageSectionV2).columns.map(
             (col) => ({
               ...col,

package/lib/builder/store.ts

@@ -3,8 +3,8 @@ import type { BuilderStore, BuilderState, BlockType, PageSettings, CanvasTool, D
 import { DEFAULT_PAGE_SETTINGS, DEFAULT_GRID_SETTINGS, DEVICE_WIDTHS } from "./types";
 import { stateToDocument, documentToState } from "./serializer";
 import { generateKey } from "./utils";
-import type { ContentBlock, ContentItem, PageSection, PageSectionV2, SectionV2Settings, SectionSettings, SectionBlock, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, SectionV2Settings, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
 import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
 import { MAX_HISTORY, pushSnapshot } from "./history";
 import {
@@ -48,10 +48,7 @@ function getBlockParentCache(rows: ContentItem[]): Map<string, BlockParent> {
 
   const cache = new Map<string, BlockParent>();
   for (const item of rows) {
-    if (isPageSection(item)) {
-      const sBlock = Array.isArray(item.block) ? item.block[0] : undefined;
-      if (sBlock) cache.set(sBlock._key, { rowKey: item._key, colKey: null });
-    } else if (isPageSectionV2(item)) {
+    if (isPageSectionV2(item)) {
       const v2 = item as PageSectionV2;
       for (const col of v2.columns) {
         for (const b of col.blocks) {

package/lib/builder/templates.ts

@@ -4,10 +4,9 @@
 // Each template defines a set of pre-built rows/columns/blocks
 // that get injected as content_rows when creating a new page.
 //
-// BUG-004 fix (Session 78): Templates now create first-class PageSection
-// objects for section blocks instead of the old matryoshka format.
+// All templates use PageSectionV2 (V1 PageSection removed in cleanup).
 
-import type { ContentBlock, ContentItem, PageSection, PageSectionV2, SectionBlock, SectionColumn, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, SectionColumn, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
 import { generateKey } from "./utils";
 
 // ============================================
@@ -84,43 +83,20 @@ function makeV2Section(blocks: ContentBlock[], settings?: Partial<PageSectionV2[
   };
 }
 
-/**
- * Create a first-class PageSection with a section block.
- * BUG-004 fix: replaces the old pattern of wrapping section blocks in makeRow().
- */
-function makeSection(
-  blockType: "projectGridBlock",
-  blockDefaults: Record<string, unknown>,
-): PageSection {
-  const block = makeBlock({ _type: blockType, ...blockDefaults }) as SectionBlock;
-  return {
-    _type: "pageSection",
-    _key: generateKey(),
-    section_type: "projectGrid" as import("../../lib/sanity/types").PageSectionType,
-    block: [block] as [SectionBlock],
-    settings: {
-      spacing_top: "32",
-      spacing_bottom: "32",
-    },
-  };
-}
-
 // ============================================
-// Template: Project Grid (staggered project showcase)
+// Template: Portfolio (content showcase)
 // ============================================
 
-const projectGridTemplate: PageTemplate = {
-  id: "project-grid",
-  label: "Project Grid",
-  description: "Staggered project showcase with configurable layouts",
+const portfolioTemplate: PageTemplate = {
+  id: "portfolio",
+  label: "Portfolio",
+  description: "Portfolio showcase with flexible layout sections",
   icon: "⬡",
   preview: [
     { type: "spacer", height: 0.5 },
     { type: "text", height: 0.5 },
     { type: "spacer", height: 0.3 },
-    { type: "cover", height: 2 },
     { type: "columns", height: 1.5 },
-    { type: "cover", height: 2 },
     { type: "columns", height: 1.5 },
   ],
   buildRows: () => [
@@ -136,19 +112,7 @@ const projectGridTemplate: PageTemplate = {
     ]),
     // Section 3: Spacer
     makeV2Section([makeBlock({ _type: "spacerBlock", height: "medium" })]),
-    // Section 4: Project Grid (first-class PageSection)
-    makeSection("projectGridBlock", {
-      columns: 3,
-      aspect_ratios: ["16/9"],
-      gap_v: 16,
-      gap_h: 16,
-      hover_effect: "scale",
-      show_subtitle: true,
-      border_radius: 0,
-      video_mode: "off",
-      projects: [],
-    }),
-    // Section 5: Bottom spacer
+    // Section 4: Bottom spacer
     makeV2Section([makeBlock({ _type: "spacerBlock", height: "xlarge" })]),
   ],
 };
@@ -285,7 +249,7 @@ const parallaxHomeTemplate: PageTemplate = {
 
 export const PAGE_TEMPLATES: PageTemplate[] = [
   blankTemplate,
-  projectGridTemplate,
+  portfolioTemplate,
   parallaxHomeTemplate,
 ];
 

package/lib/builder/types.ts

@@ -9,9 +9,7 @@ import type {
   PageType,
   ContentBlock,
   ContentItem,
-  PageSection,
   PageSectionV2,
-  SectionSettings,
   SectionV2Settings,
   SectionV2Preset,
   SectionColumn,
@@ -178,7 +176,7 @@ export interface BuilderState {
   publishedAt: string | null;
   draftMode: boolean;
 
-  // Content — page sections (V1 + V2)
+  // Content — V2 sections, custom sections, parallax groups
   rows: ContentItem[];
 
   // Selection
@@ -251,17 +249,12 @@ export interface BuilderActions {
   unpublishPage: () => void;
 
   // Section operations
+  /** Add a Project Grid section as a V2 section with a full-width column (Session 164) */
   addSection: (blockType: "projectGridBlock", afterRowKey?: string | null) => void;
   reorderRows: (fromIndex: number, toIndex: number) => void;
-  /** Update settings for a PageSection (background, spacing, animation, etc.) */
-  updateSectionSettings: (sectionKey: string, settings: Partial<SectionSettings>) => void;
-  /** BUG-013 fix: Update responsive overrides for a PageSection */
-  updateSectionResponsive: (sectionKey: string, responsive: PageSection["responsive"]) => void;
-  /** Update the block content inside a PageSection */
-  updateSectionBlock: (sectionKey: string, updates: Partial<import("../../lib/sanity/types").ContentBlock>) => void;
-  /** Delete a section (PageSection or PageSectionV2) by key */
+  /** Delete a section by key */
   deleteSection: (sectionKey: string) => void;
-  /** Duplicate a section (PageSection or PageSectionV2), inserting copy after the original */
+  /** Duplicate a section, inserting copy after the original */
   duplicateSection: (sectionKey: string) => void;
 
   // Block operations

package/lib/sanity/queries.ts

@@ -4,45 +4,22 @@ import { groq } from "next-sanity";
 // BLOCK EXPANSION (shared fragment)
 // ============================================
 
-// Deep expansion of row → column → block content.
-// Handles Row objects (columns→blocks), PageSection objects (_type: "pageSection"),
-// PageSectionV2 objects (_type: "pageSectionV2"), CustomSectionInstance, and
-// ParallaxGroup objects (_type: "parallaxGroup") with nested slides.
-// GROQ uses conditional projections to handle all types.
+// Deep expansion of content_rows.
+// Handles PageSectionV2, CustomSectionInstance, and ParallaxGroup.
+// GROQ projections are additive — fields that don't exist on an object are omitted.
 const blockExpansion = `
   content_rows[] {
     _key,
     _type,
-    // ── PageSection fields (only present when _type == "pageSection") ──
     section_type,
-    block[] {
-      _type,
-      _key,
-      ...,
-      "project_ref": project_ref-> {
-        _id,
-        title,
-        slug,
-        page_type
-      }
-    },
-    // ── Row fields (columns only present on row objects) ──
-    // Note: V2 sections also have "columns" but with different fields.
-    // GROQ projections are additive — fields that don't exist on an object are omitted.
-    // We include BOTH Row column fields (width, settings, responsive) and V2 column
-    // fields (grid_column, grid_row, span) so both types are fully hydrated.
+    // ── V2 section columns ──
     columns[] {
       _key,
       _type,
-      // Row column fields
-      width,
-      settings,
-      responsive,
-      // V2 column fields (grid positions)
       grid_column,
       grid_row,
       span,
-      // Blocks (shared by both Row columns and V2 columns)
+      enter_animation,
       blocks[] {
         _type,
         _key,
@@ -96,7 +73,7 @@ const blockExpansion = `
         }
       }
     },
-    // ── Settings (shared by Row, PageSection, and PageSectionV2) ──
+    // ── Settings (V2 section settings) ──
     settings,
     // ── Responsive overrides (V2 sections store responsive at section level) ──
     responsive

package/lib/sanity/types.ts

@@ -346,68 +346,6 @@ export interface ParallaxGroup {
   parallax_intensity: number;           // 0.2–0.6, default 0.4 (hidden from UI, hardcoded)
 }
 
-// ============================================
-// Page Section — first-class section type (Session 76)
-// ============================================
-// Replaces the old "matryoshka" approach where section blocks were
-// wrapped in row → column → block. Sections are direct entries in
-// content_rows alongside regular rows.
-
-export type PageSectionType = "projectGrid";
-
-export interface SectionSettings {
-  // Background
-  background_color?: string;
-  background_opacity?: number;
-  background_image?: string;
-  background_size?: "cover" | "contain" | "auto";
-  background_position?: string;
-  background_repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
-  // Spacing (padding TRBL)
-  spacing_top?: string;
-  spacing_right?: string;
-  spacing_bottom?: string;
-  spacing_left?: string;
-  // Offset (margin TRBL)
-  offset_top?: string;
-  offset_right?: string;
-  offset_bottom?: string;
-  offset_left?: string;
-  // Border
-  border_color?: string;
-  border_width?: string;
-  border_style?: "none" | "solid" | "dashed" | "dotted";
-  border_sides?: "all" | "top" | "right" | "bottom" | "left" | "top-bottom" | "left-right";
-  border_radius?: string;
-  // Animation
-  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
-}
-
-/** Section block types that can appear inside a PageSection */
-export type SectionBlock = ProjectGridBlock;
-
-/** Section settings that can be overridden per-viewport */
-export type SectionSettingsOverridable = Pick<SectionSettings,
-  "background_color" | "background_opacity" | "background_image" | "background_size" | "background_position" | "background_repeat" |
-  "spacing_top" | "spacing_right" | "spacing_bottom" | "spacing_left" |
-  "offset_top" | "offset_right" | "offset_bottom" | "offset_left" |
-  "border_color" | "border_width" | "border_style" | "border_sides" | "border_radius"
->;
-
-export interface PageSection {
-  _type: "pageSection";
-  _key: string;
-  section_type: PageSectionType;
-  /** The actual section content — single block */
-  block: [SectionBlock];
-  settings?: SectionSettings;
-  /** BUG-013 fix: Per-viewport responsive overrides for section settings */
-  responsive?: {
-    tablet?: Partial<SectionSettingsOverridable>;
-    phone?: Partial<SectionSettingsOverridable>;
-  };
-}
-
 // ============================================
 // Page Section V2 — V2 Grid System (Session 83)
 // ============================================
@@ -540,16 +478,10 @@ export interface CustomSectionInstance {
 }
 
 // ============================================
-// Content Item — union of PageSection, PageSectionV2, and CustomSectionInstance
+// Content Item — union of section types in content_rows
 // ============================================
-// Used in content_rows and the builder store.
 
-export type ContentItem = PageSection | PageSectionV2 | CustomSectionInstance | ParallaxGroup;
-
-/** Type guard: check if a content item is a PageSection (V1) */
-export function isPageSection(item: ContentItem): item is PageSection {
-  return (item as PageSection)._type === "pageSection";
-}
+export type ContentItem = PageSectionV2 | CustomSectionInstance | ParallaxGroup;
 
 /** Type guard: check if a content item is a PageSectionV2 */
 export function isPageSectionV2(item: ContentItem): item is PageSectionV2 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -209,4 +209,4 @@
     "typescript": "^5",
     "vitest": "^4.1.2"
   }
-}
+}

package/sanity/schemas/index.ts

@@ -1,5 +1,4 @@
 import page from "./page";
-import pageSection from "./pageSection";
 import pageSectionV2 from "./pageSectionV2";
 import customSection from "./customSection";
 import customSectionInstance from "./customSectionInstance";
@@ -35,9 +34,6 @@ export {
 export {
   default as assetRegistry,
 } from "./assetRegistry";
-export {
-  default as pageSection,
-} from "./pageSection";
 export {
   default as pageSectionV2,
 } from "./pageSectionV2";
@@ -81,7 +77,6 @@ export const schemaTypes = [
   assetRegistry,
 
   // Structural objects
-  pageSection,
   pageSectionV2,
   customSection,
   customSectionInstance,

package/sanity/schemas/objects/parallaxGroup.ts

@@ -3,8 +3,8 @@ import { defineField, defineType } from "sanity";
 /**
  * parallaxGroup — A group of full-screen parallax slides.
  *
- * Lives inline in a page's content_rows alongside PageSection,
- * PageSectionV2, and CustomSectionInstance. Each slide is a
+ * Lives inline in a page's content_rows alongside PageSectionV2
+ * and CustomSectionInstance. Each slide is a
  * full V2 section with background image/video and 100vh height.
  *
  * Session 123: Parallax V2 rewrite.

package/sanity/schemas/page.ts

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

package/sanity/schemas/pageSectionV2.ts

@@ -67,6 +67,7 @@ export default defineType({
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
                 { type: "coverBlock" },
+                { type: "projectGridBlock" },
               ],
             }),
             // Column-level enter animation (Session 117)

package/sanity/schemas/siteSettings.ts

@@ -210,6 +210,48 @@ export default defineType({
         defineField({ name: "entrance_delay", title: "Entrance Delay (ms)", type: "number", description: "Delay before animation starts. Default: 0" }),
         defineField({ name: "entrance_stagger", title: "Stagger Items", type: "boolean", description: "Animate items one by one", initialValue: false }),
         defineField({ name: "entrance_stagger_delay", title: "Stagger Delay (ms)", type: "number", description: "Delay between items. Default: 80" }),
+        // ── Responsive overrides (tablet / phone) ──
+        defineField({
+          name: "responsive",
+          title: "Responsive Overrides",
+          type: "object",
+          fields: [
+            defineField({
+              name: "tablet",
+              title: "Tablet Overrides",
+              type: "object",
+              fields: [
+                defineField({ name: "font_size", title: "Font Size", type: "number" }),
+                defineField({ name: "font_weight", title: "Font Weight", type: "string" }),
+                defineField({ name: "text_align", title: "Text Align", type: "string" }),
+                defineField({ name: "vertical_align", title: "Vertical Align", type: "string" }),
+                defineField({ name: "text_transform", title: "Text Transform", type: "string" }),
+                defineField({ name: "padding_h", title: "Padding H", type: "number" }),
+                defineField({ name: "padding_v", title: "Padding V", type: "number" }),
+                defineField({ name: "margin_h", title: "Margin H", type: "number" }),
+                defineField({ name: "margin_v", title: "Margin V", type: "number" }),
+                defineField({ name: "items_gap", title: "Items Gap", type: "number" }),
+              ],
+            }),
+            defineField({
+              name: "phone",
+              title: "Phone Overrides",
+              type: "object",
+              fields: [
+                defineField({ name: "font_size", title: "Font Size", type: "number" }),
+                defineField({ name: "font_weight", title: "Font Weight", type: "string" }),
+                defineField({ name: "text_align", title: "Text Align", type: "string" }),
+                defineField({ name: "vertical_align", title: "Vertical Align", type: "string" }),
+                defineField({ name: "text_transform", title: "Text Transform", type: "string" }),
+                defineField({ name: "padding_h", title: "Padding H", type: "number" }),
+                defineField({ name: "padding_v", title: "Padding V", type: "number" }),
+                defineField({ name: "margin_h", title: "Margin H", type: "number" }),
+                defineField({ name: "margin_v", title: "Margin V", type: "number" }),
+                defineField({ name: "items_gap", title: "Items Gap", type: "number" }),
+              ],
+            }),
+          ],
+        }),
       ],
     }),
 

package/styles/base.css

@@ -58,17 +58,19 @@ body {
 }
 
 /* Prevent text overflow in grid columns on narrow viewports.
- * overflow-wrap: anywhere — only breaks mid-word when the ENTIRE word
- * cannot fit on a fresh line. Unlike word-break: break-word, this keeps
- * whole words together and wraps at natural word boundaries first.
- * Prevents ugly splits like "Collecti" + "on" on narrow mobile viewports. */
+ * overflow-wrap: break-word — breaks mid-word ONLY when the entire word
+ * cannot fit on a fresh line. Does NOT affect min-content intrinsic sizing,
+ * so CSS Grid columns keep their proper width (unlike 'anywhere' which
+ * collapses min-content to a single character width).
+ * word-break: normal — wraps at natural word boundaries first, preventing
+ * ugly mid-word splits like "Collecti" + "on". */
 [data-site] p,
 [data-site] h1,
 [data-site] h2,
 [data-site] h3,
 [data-site] h4,
 [data-site] span {
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   word-break: normal;
 }