@morphika/andami 0.1.9 → 0.2.0

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 {
@@ -704,6 +636,28 @@ export interface NavDesign {
   entrance_delay?: number;      // ms, default 0
   entrance_stagger?: boolean;   // stagger items, default false
   entrance_stagger_delay?: number; // ms between items, default 80
+
+  /** Per-viewport overrides for responsive nav settings.
+   *  Only typography + spacing fields are overridable.
+   *  Missing fields = inherit from desktop. */
+  responsive?: {
+    tablet?: NavDesignResponsiveOverride;
+    phone?: NavDesignResponsiveOverride;
+  };
+}
+
+/** Subset of NavDesign fields that can be overridden per viewport */
+export interface NavDesignResponsiveOverride {
+  font_size?: number;
+  font_weight?: string;
+  text_align?: "left" | "center" | "right";
+  vertical_align?: "top" | "middle" | "bottom";
+  text_transform?: "none" | "uppercase" | "lowercase" | "capitalize";
+  padding_h?: number;
+  padding_v?: number;
+  margin_h?: number;
+  margin_v?: number;
+  items_gap?: number;
 }
 
 // ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -17,6 +17,9 @@
     "page-builder",
     "morphika"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "admin/",
     "app/",

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

@@ -57,7 +57,13 @@ body {
   overflow-x: clip;
 }
 
-/* Prevent text overflow in grid columns on narrow viewports */
+/* Prevent text overflow in grid columns on narrow 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,
@@ -65,7 +71,7 @@ body {
 [data-site] h4,
 [data-site] span {
   overflow-wrap: break-word;
-  word-break: break-word;
+  word-break: normal;
 }
 
 [data-custom-cursor] {

package/components/blocks/SectionRenderer.tsx

@@ -1,171 +0,0 @@
-"use client";
-
-/**
- * SectionRenderer — renders a first-class PageSection on the public site.
- *
- * Unlike V2 sections (which have columns → blocks), SectionRenderer
- * renders the section block directly — no row/column wrapper needed.
- *
- * Session 76: Created as part of the matryoshka → first-class section refactor.
- * Session 120: Updated for new enter animation system.
- */
-
-import type { PageSection, SectionBlock } from "../../lib/sanity/types";
-import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
-import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
-import BlockRenderer from "./BlockRenderer";
-import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getRowLayoutStyles, hexToRgba } from "../../lib/builder/layout-styles";
-import { colorToOverrideRule, borderColorToOverrideRule, parseColorField } from "../../lib/color-utils";
-import type { ColorField } from "../../lib/sanity/types";
-import { BREAKPOINTS } from "../../lib/builder/constants";
-
-/**
- * BUG-013 fix: Build responsive CSS overrides for section layout settings.
- * Same approach as RowRenderer's buildRowResponsiveCss.
- */
-function buildSectionResponsiveCss(section: PageSection): string | null {
-  const responsive = section.responsive;
-  if (!responsive) return null;
-
-  const key = section._key;
-  const cssRules: string[] = [];
-
-  for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
-    const overrides = responsive[vp];
-    if (!overrides) continue;
-    const rules: string[] = [];
-
-    // px-value properties
-    const pxMap: Record<string, string> = {
-      spacing_top: "padding-top", spacing_right: "padding-right",
-      spacing_bottom: "padding-bottom", spacing_left: "padding-left",
-      offset_top: "margin-top", offset_right: "margin-right",
-      offset_bottom: "margin-bottom", offset_left: "margin-left",
-      border_radius: "border-radius",
-    };
-
-    for (const [field, cssProp] of Object.entries(pxMap)) {
-      const val = overrides[field as keyof typeof overrides];
-      if (val !== undefined && val !== null && val !== "") {
-        rules.push(`${cssProp}:${val}px!important`);
-      }
-    }
-
-    // Border width — side-aware
-    if (overrides.border_width !== undefined && overrides.border_width !== null && overrides.border_width !== "") {
-      const bw = overrides.border_width;
-      const sides = (overrides.border_sides as string) || "all";
-      switch (sides) {
-        case "top":
-          rules.push(`border-top-width:${bw}px!important`);
-          break;
-        case "right":
-          rules.push(`border-right-width:${bw}px!important`);
-          break;
-        case "bottom":
-          rules.push(`border-bottom-width:${bw}px!important`);
-          break;
-        case "left":
-          rules.push(`border-left-width:${bw}px!important`);
-          break;
-        case "top-bottom":
-          rules.push(`border-top-width:${bw}px!important`);
-          rules.push(`border-bottom-width:${bw}px!important`);
-          break;
-        case "left-right":
-          rules.push(`border-left-width:${bw}px!important`);
-          rules.push(`border-right-width:${bw}px!important`);
-          break;
-        default:
-          rules.push(`border-width:${bw}px!important`);
-          break;
-      }
-    }
-
-    // Border color (supports solid + gradients via ColorField bridge)
-    if (overrides.border_color) {
-      rules.push(borderColorToOverrideRule(parseColorField(overrides.border_color)));
-    }
-
-    // Border style
-    if (overrides.border_style && overrides.border_style !== "none") {
-      rules.push(`border-style:${overrides.border_style}!important`);
-    }
-
-    // Background color + opacity (gradient-safe via ColorField bridge)
-    if (overrides.background_color) {
-      const opacity = overrides.background_opacity as number | undefined;
-      rules.push(colorToOverrideRule(
-        parseColorField(overrides.background_color),
-        opacity
-      ));
-    }
-
-    // Background image + sub-properties
-    if (overrides.background_image) {
-      const imgUrl = process.env.NEXT_PUBLIC_ASSET_BASE_URL
-        ? `${(process.env.NEXT_PUBLIC_ASSET_BASE_URL as string).replace(/\/$/, "")}/${overrides.background_image}`
-        : overrides.background_image;
-      rules.push(`background-image:url(${imgUrl})!important`);
-      rules.push(`background-size:${overrides.background_size || "cover"}!important`);
-      rules.push(`background-position:${overrides.background_position || "center center"}!important`);
-      rules.push(`background-repeat:${overrides.background_repeat || "no-repeat"}!important`);
-    } else {
-      if (overrides.background_size) rules.push(`background-size:${overrides.background_size}!important`);
-      if (overrides.background_position) rules.push(`background-position:${overrides.background_position}!important`);
-      if (overrides.background_repeat) rules.push(`background-repeat:${overrides.background_repeat}!important`);
-    }
-
-    if (rules.length > 0) {
-      cssRules.push(`@media(max-width:${breakpoint}px){.section-${key}{${rules.join(";")}}}`);
-    }
-  }
-
-  return cssRules.length > 0 ? cssRules.join("") : null;
-}
-
-interface SectionRendererProps {
-  section: PageSection;
-  /** Page-level enter animation config (from page_settings.enter_animation) */
-  pageEnterAnimation?: EnterAnimationConfig;
-}
-
-export default function SectionRenderer({ section, pageEnterAnimation }: SectionRendererProps) {
-  const s = section.settings ?? {};
-
-  // Get the section block
-  const block = Array.isArray(section.block) ? section.block[0] : undefined;
-  if (!block) return null;
-
-  // Resolve enter animation (section settings → page default → none)
-  const sectionEnterConfig = s.enter_animation;
-  const resolvedEnter = resolveEnterAnimation(undefined, undefined, sectionEnterConfig, pageEnterAnimation);
-  const hasAnimation = resolvedEnter !== null && resolvedEnter.preset !== "none";
-
-  // Section layout styles (background, spacing, border, etc.)
-  const layoutStyles = getRowLayoutStyles(s as Record<string, unknown>);
-
-  // BUG-013 fix: build responsive CSS overrides for section
-  const responsiveCss = buildSectionResponsiveCss(section);
-
-  // Render the section block directly — no columns, no grid
-  // V1 PageSections contain section blocks (ProjectGrid, Parallax) which
-  // don't use the block-level enter/hover cascade — they have their own systems.
-  let content: React.ReactNode = (
-    <section className={`section-${section._key}`} style={layoutStyles}>
-      {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
-      <BlockRenderer block={block} pageEnterAnimation={pageEnterAnimation} sectionEnterAnimation={sectionEnterConfig} />
-    </section>
-  );
-
-  if (hasAnimation && resolvedEnter) {
-    content = (
-      <EnterAnimationWrapper config={resolvedEnter}>
-        {content}
-      </EnterAnimationWrapper>
-    );
-  }
-
-  return content;
-}