@morphika/andami 0.4.0 → 0.4.2

package/README.md

@@ -7,7 +7,8 @@ A reusable Visual Page Builder framework for Next.js. Build custom websites with
 ## Features
 
 - **Visual Page Builder** — Infinite canvas editor with device previews (desktop, tablet, phone)
-- **7 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button, Project Grid
+- **6 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button (added via "+ Add Block" inside columns)
+- **2 Section-level Blocks** — Project Grid (masonry) and Project Carousel (horizontal "keep browsing" at end of project pages). Added via "+ Add Section"
 - **Cover Sections** — Full-viewport hero sections with proportional rows, background media, and drag-to-resize
 - **V2 Grid System** — 12-column CSS grid with push cascade engine and responsive overrides
 - **Custom Sections** — Create reusable sections with per-instance setting overrides

package/components/blocks/BlockRenderer.tsx

@@ -17,14 +17,8 @@ import EnterAnimationWrapper from "./EnterAnimationWrapper";
 import HoverAnimationWrapper from "./HoverAnimationWrapper";
 import TypewriterWrapper from "./TypewriterWrapper";
 
-import TextBlockRenderer, { getTextBlockStyles } from "./TextBlockRenderer";
-import ImageBlockRenderer from "./ImageBlockRenderer";
-import ImageGridBlockRenderer from "./ImageGridBlockRenderer";
-import VideoBlockRenderer from "./VideoBlockRenderer";
-import SpacerBlockRenderer from "./SpacerBlockRenderer";
-import ButtonBlockRenderer from "./ButtonBlockRenderer";
-import ProjectGridBlockRenderer from "./ProjectGridBlockRenderer";
-import ProjectCarouselBlockRenderer from "./ProjectCarouselBlockRenderer";
+import { getTextBlockStyles } from "./TextBlockRenderer";
+import { getBlockRegistration } from "../../lib/builder/registry";
 
 // ── BLK-003: Error Boundary for block renderers ──
 // Prevents a single broken block from crashing the entire page.
@@ -289,44 +283,25 @@ export default function BlockRenderer({
 
   let content: React.ReactNode;
 
-  switch (resolved._type) {
-    case "textBlock":
-      content = <TextBlockRenderer block={resolved} />;
-      break;
-    case "imageBlock":
-      content = <ImageBlockRenderer block={resolved} />;
-      break;
-    case "imageGridBlock":
-      content = <ImageGridBlockRenderer block={resolved} />;
-      break;
-    case "videoBlock":
-      content = <VideoBlockRenderer block={resolved} />;
-      break;
-    case "spacerBlock":
-      content = <SpacerBlockRenderer block={resolved} />;
-      break;
-    case "buttonBlock":
-      content = <ButtonBlockRenderer block={resolved} />;
-      break;
-    case "projectGridBlock":
-      content = <ProjectGridBlockRenderer block={resolved as import("../../lib/sanity/types").ProjectGridBlock} />;
-      break;
-    case "projectCarouselBlock":
-      content = <ProjectCarouselBlockRenderer block={resolved as import("../../lib/sanity/types").ProjectCarouselBlock} />;
-      break;
-    default: {
-      const unknownBlock = resolved as ContentBlock;
-      if (process.env.NODE_ENV === "development") {
-        content = (
-          <div className="border border-dashed border-brand-secondary/50 p-4 font-mono text-xs text-brand-secondary">
-            Unknown block type: {unknownBlock._type}
-          </div>
-        );
-      } else {
-        // BLK-004: Log unknown block types in production for debugging
-        console.warn(`[BlockRenderer] Unknown block type "${unknownBlock._type}" (key: ${unknownBlock._key}) — skipped`);
-        return null;
-      }
+  // Registry-driven dispatch. Same result as the former switch-case — the
+  // Session B consistency tests guarantee registry.renderer === the imported
+  // component that was previously inlined in each case branch.
+  const registration = getBlockRegistration(resolved._type);
+  if (registration) {
+    const Renderer = registration.renderer as React.ComponentType<{ block: ContentBlock }>;
+    content = <Renderer block={resolved} />;
+  } else {
+    const unknownBlock = resolved as ContentBlock;
+    if (process.env.NODE_ENV === "development") {
+      content = (
+        <div className="border border-dashed border-brand-secondary/50 p-4 font-mono text-xs text-brand-secondary">
+          Unknown block type: {unknownBlock._type}
+        </div>
+      );
+    } else {
+      // BLK-004: Log unknown block types in production for debugging
+      console.warn(`[BlockRenderer] Unknown block type "${unknownBlock._type}" (key: ${unknownBlock._key}) — skipped`);
+      return null;
     }
   }
 

package/components/builder/BlockLivePreview.tsx

@@ -14,26 +14,8 @@ import { memo } from "react";
 import { resolveBlock } from "../../lib/builder/responsive";
 import { getBlockLayoutStyles, hasBlockLayout } from "../../lib/builder/layout-styles";
 import type { DeviceViewport } from "../../lib/builder/types";
-import type {
-  ContentBlock,
-  TextBlock,
-  ImageBlock,
-  ImageGridBlock,
-  VideoBlock,
-  SpacerBlock,
-  ButtonBlock,
-  ProjectGridBlock,
-  ProjectCarouselBlock,
-} from "../../lib/sanity/types";
-
-import { LiveTextEditor } from "./live-preview";
-import { LiveImagePreview } from "./live-preview";
-import { LiveImageGridPreview } from "./live-preview";
-import { LiveVideoPreview } from "./live-preview";
-import { LiveSpacerPreview } from "./live-preview";
-import { LiveButtonPreview } from "./live-preview";
-import { LiveProjectGridPreview } from "./live-preview";
-import { LiveProjectCarouselPreview } from "./live-preview";
+import type { ContentBlock } from "../../lib/sanity/types";
+import { getBlockRegistration } from "../../lib/builder/registry";
 import { LivePlaceholder } from "./live-preview";
 
 // ============================================
@@ -54,33 +36,22 @@ function BlockLivePreviewInner({ block, viewport = "desktop", editable = false }
 
   let content: React.ReactNode;
 
-  switch (resolved._type) {
-    case "textBlock":
-      content = <LiveTextEditor block={resolved as TextBlock} editable={editable} />;
-      break;
-    case "imageBlock":
-      content = <LiveImagePreview block={resolved as ImageBlock} />;
-      break;
-    case "imageGridBlock":
-      content = <LiveImageGridPreview block={resolved as ImageGridBlock} />;
-      break;
-    case "videoBlock":
-      content = <LiveVideoPreview block={resolved as VideoBlock} />;
-      break;
-    case "spacerBlock":
-      content = <LiveSpacerPreview block={resolved as SpacerBlock} />;
-      break;
-    case "buttonBlock":
-      content = <LiveButtonPreview block={resolved as ButtonBlock} />;
-      break;
-    case "projectGridBlock":
-      content = <LiveProjectGridPreview block={resolved as ProjectGridBlock} viewport={viewport} />;
-      break;
-    case "projectCarouselBlock":
-      content = <LiveProjectCarouselPreview block={resolved as ProjectCarouselBlock} viewport={viewport} />;
-      break;
-    default:
-      content = <LivePlaceholder type={(resolved as ContentBlock)._type} />;
+  // Registry-driven dispatch. The registration's `livePreview` component
+  // is guaranteed (by Session B consistency tests) to be the same as the
+  // component previously imported and inlined in each switch case. Each
+  // live preview accepts an overlapping props subset — we pass the full
+  // set (block, viewport, editable) and individual previews ignore what
+  // they don't need.
+  const registration = getBlockRegistration(resolved._type);
+  if (registration) {
+    const LivePreview = registration.livePreview as React.ComponentType<{
+      block: ContentBlock;
+      viewport?: DeviceViewport;
+      editable?: boolean;
+    }>;
+    content = <LivePreview block={resolved} viewport={viewport} editable={editable} />;
+  } else {
+    content = <LivePlaceholder type={(resolved as ContentBlock)._type} />;
   }
 
   // Wrap in layout div if block has layout properties set (spacing, background, border, etc.)

package/components/builder/ColumnDragOverlay.tsx

@@ -3,8 +3,8 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useBuilderStore } from "../../lib/builder/store";
-import type { PageSectionV2 } from "../../lib/sanity/types";
-import { isPageSectionV2 } from "../../lib/sanity/types";
+import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanity/types";
+import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
 import { BUILDER_BLUE } from "../../lib/builder/constants";
 
 interface ColumnDragOverlayProps {
@@ -20,14 +20,29 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
 }: ColumnDragOverlayProps) {
   const rows = useBuilderStore((s) => s.rows);
   const item = rows.find((r) => r._key === sectionKey);
-  if (!item || !isPageSectionV2(item)) return null;
+  if (!item) return null;
 
-  const v2Section = item as PageSectionV2;
-  const col = v2Section.columns?.find((c) => c._key === columnKey);
+  // Accept both PageSectionV2 and CoverSection — both expose `columns:
+  // SectionColumn[]` and `settings.grid_columns`. Other section types
+  // (parallax, custom instance) are not column-draggable targets.
+  let columns: SectionColumn[] | undefined;
+  let gridColumns = 12;
+  if (isPageSectionV2(item)) {
+    const v2 = item as PageSectionV2;
+    columns = v2.columns;
+    gridColumns = v2.settings?.grid_columns || 12;
+  } else if (isCoverSection(item)) {
+    const cover = item as CoverSection;
+    columns = cover.columns;
+    gridColumns = cover.settings?.grid_columns || 12;
+  } else {
+    return null;
+  }
+
+  const col = columns?.find((c) => c._key === columnKey);
   if (!col) return null;
 
   const blockCount = (col.blocks || []).length;
-  const gridColumns = v2Section.settings.grid_columns || 12;
 
   const overlay = (
     <div

package/components/builder/hooks/useColumnDrag.ts

@@ -2,12 +2,68 @@
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useBuilderStore } from "../../../lib/builder/store";
-import type { PageSectionV2 } from "../../../lib/sanity/types";
-import { isPageSectionV2 } from "../../../lib/sanity/types";
+import type { PageSectionV2, CoverSection, ContentItem } from "../../../lib/sanity/types";
+import { isPageSectionV2, isCoverSection } from "../../../lib/sanity/types";
 import { getEffectiveColumnsV2, buildColumnV2Overrides } from "../settings-panel/responsive-helpers";
 import { moveColumn as cascadeMoveColumn } from "../../../lib/builder/cascade";
 import type { DeviceViewport } from "../../../lib/builder/types";
 
+/**
+ * View a Cover section as a PageSectionV2 for DnD purposes.
+ *
+ * Cover and V2 share the same column shape, grid_columns, and
+ * `responsive[vp].columns` shape — the fields read/written by column
+ * DnD. This shim lets us reuse getEffectiveColumnsV2/buildColumnV2Overrides
+ * without duplicating logic. Only `columns`, `settings.grid_columns`, and
+ * `responsive[vp].columns` are exposed; Cover-specific fields
+ * (`cover_rows`, Cover-specific `settings`) are hidden from the V2 helpers.
+ *
+ * The write-back path (`updateSectionV2Responsive` → `updateSectionAtPath`)
+ * merges column overrides back into the cover, preserving Cover-specific
+ * fields. See `store-helpers.ts :: updateSectionAtPath` cover branch.
+ */
+function coverAsV2(cover: CoverSection): PageSectionV2 {
+  return {
+    _type: "pageSectionV2",
+    _key: cover._key,
+    section_type: "empty-v2",
+    columns: cover.columns,
+    settings: {
+      preset: "custom",
+      grid_columns: cover.settings.grid_columns,
+      col_gap: cover.settings.col_gap,
+      row_gap: cover.settings.row_gap,
+    },
+    responsive:
+      cover.responsive?.tablet?.columns || cover.responsive?.phone?.columns
+        ? {
+            ...(cover.responsive.tablet?.columns
+              ? { tablet: { columns: cover.responsive.tablet.columns } }
+              : {}),
+            ...(cover.responsive.phone?.columns
+              ? { phone: { columns: cover.responsive.phone.columns } }
+              : {}),
+          }
+        : undefined,
+  };
+}
+
+/**
+ * Find the section by key and return a V2-shaped view of it (PageSectionV2
+ * directly, or Cover adapted via `coverAsV2`). Returns null if the section
+ * doesn't exist or is an unsupported type (parallax, custom instance).
+ */
+function findColumnarSection(
+  rows: ContentItem[],
+  sectionKey: string,
+): PageSectionV2 | null {
+  const section = rows.find((r) => r._key === sectionKey);
+  if (!section) return null;
+  if (isPageSectionV2(section)) return section as PageSectionV2;
+  if (isCoverSection(section)) return coverAsV2(section as CoverSection);
+  return null;
+}
+
 // ============================================
 // Types
 // ============================================
@@ -57,9 +113,8 @@ function executeResponsiveSwap(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const draggedCol = effectiveCols.find((c) => c._key === draggedKey);
@@ -109,9 +164,8 @@ function executeResponsiveGapMove(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const columnOverrides = effectiveCols.map((c) => {
@@ -147,9 +201,8 @@ function executeResponsiveInsert(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const cascadeResult = cascadeMoveColumn(effectiveCols, columnKey, targetRow, targetCol, v2Section.settings.grid_columns);

package/components/builder/settings-panel/BlockSettings.tsx

@@ -4,19 +4,13 @@
  * BlockSettings — Delegates to type-specific block editors.
  *
  * Session 64: Extracted from SettingsPanel.tsx.
+ * Session 181 (C): Switched from explicit switch-case dispatch to a
+ * registry lookup — the editor component for each block type is
+ * registered in `lib/builder/block-registrations.ts`.
  */
 
 import type { ContentBlock } from "../../../lib/sanity/types";
-import {
-  TextBlockEditor,
-  ImageBlockEditor,
-  ImageGridBlockEditor,
-  VideoBlockEditor,
-  SpacerBlockEditor,
-  ButtonBlockEditor,
-  ProjectGridEditor,
-  ProjectCarouselBlockEditor,
-} from "../editors";
+import { getBlockRegistration } from "../../../lib/builder/registry";
 
 export default function BlockSettings({
   block,
@@ -27,68 +21,22 @@ export default function BlockSettings({
 }
 
 // ============================================
-// Block Type Editor Router
+// Block Type Editor Router (registry-driven)
 // ============================================
 
 function BlockTypeEditor({ block }: { block: ContentBlock }) {
-  switch (block._type) {
-    case "textBlock":
-      return (
-        <TextBlockEditor
-          block={block as import("../../../lib/sanity/types").TextBlock}
-        />
-      );
-    case "imageBlock":
-      return (
-        <ImageBlockEditor
-          block={block as import("../../../lib/sanity/types").ImageBlock}
-        />
-      );
-    case "imageGridBlock":
-      return (
-        <ImageGridBlockEditor
-          block={block as import("../../../lib/sanity/types").ImageGridBlock}
-        />
-      );
-    case "videoBlock":
-      return (
-        <VideoBlockEditor
-          block={block as import("../../../lib/sanity/types").VideoBlock}
-        />
-      );
-    case "spacerBlock":
-      return (
-        <SpacerBlockEditor
-          block={block as import("../../../lib/sanity/types").SpacerBlock}
-        />
-      );
-    case "buttonBlock":
-      return (
-        <ButtonBlockEditor
-          block={block as import("../../../lib/sanity/types").ButtonBlock}
-        />
-      );
-    case "projectGridBlock":
-      return (
-        <ProjectGridEditor
-          block={block as import("../../../lib/sanity/types").ProjectGridBlock}
-        />
-      );
-    case "projectCarouselBlock":
-      return (
-        <ProjectCarouselBlockEditor
-          block={block as import("../../../lib/sanity/types").ProjectCarouselBlock}
-        />
-      );
-    default:
-      return (
-        <div className="p-4">
-          <div className="rounded-lg bg-[#f5f5f5] p-3">
-            <p className="text-xs text-neutral-400">
-              No editor available for this block type.
-            </p>
-          </div>
-        </div>
-      );
+  const registration = getBlockRegistration(block._type);
+  if (registration) {
+    const Editor = registration.editor as React.ComponentType<{ block: ContentBlock }>;
+    return <Editor block={block} />;
   }
+  return (
+    <div className="p-4">
+      <div className="rounded-lg bg-[#f5f5f5] p-3">
+        <p className="text-xs text-neutral-400">
+          No editor available for this block type.
+        </p>
+      </div>
+    </div>
+  );
 }

package/lib/builder/block-registrations.ts

@@ -18,10 +18,8 @@
  */
 
 import { registerBlockType } from "./block-registry";
-import { createDefaultBlock } from "./defaults";
 
 import type {
-  ContentBlock,
   TextBlock,
   ImageBlock,
   ImageGridBlock,
@@ -107,24 +105,15 @@ import {
 } from "../../components/builder/blockStyles";
 
 // ────────────────────────────────────────────────────────────────────
-// Helper: delegate to `createDefaultBlock` but override the generated
-// `_key` so callers can supply deterministic keys (tests, fixtures).
-// ────────────────────────────────────────────────────────────────────
-
-function factory<T extends ContentBlock>(
-  type: T["_type"],
-): (key: string) => T {
-  return (key: string) => {
-    const block = createDefaultBlock(
-      type as Parameters<typeof createDefaultBlock>[0],
-    );
-    return { ...block, _key: key } as T;
-  };
-}
-
-// ────────────────────────────────────────────────────────────────────
-// Registrations (order matches the existing BLOCK_TYPE_REGISTRY +
-// section blocks appended at the end, so iteration order is stable).
+// Registrations.
+//
+// Each `defaultFactory` is inlined here (rather than delegating to
+// `createDefaultBlock` in `./defaults.ts`) to avoid a circular dependency:
+//   defaults.ts    -> block-registry.getBlockRegistration
+//   defaults.ts    -> side-effect: ./block-registrations
+//   block-registrations.ts -> (no longer imports ./defaults)
+// Order matches the existing BLOCK_TYPE_REGISTRY + section blocks appended
+// at the end, so iteration order is stable.
 // ────────────────────────────────────────────────────────────────────
 
 // ── Content blocks ──
@@ -136,7 +125,12 @@ registerBlockType<TextBlock>({
   category: "content",
   iconGlyph: "T",
   schema: textBlock,
-  defaultFactory: factory<TextBlock>("textBlock"),
+  defaultFactory: (key) => ({
+    _type: "textBlock",
+    _key: key,
+    text: [],
+    style: { fontSize: 14, alignment: "left", fontWeight: "400" },
+  }),
   renderer: TextBlockRenderer as React.ComponentType<{ block: TextBlock }>,
   livePreview: LiveTextEditor as unknown as React.ComponentType<{ block: TextBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: TextBlockEditor as React.ComponentType<{ block: TextBlock }>,
@@ -153,7 +147,17 @@ registerBlockType<ImageBlock>({
   category: "content",
   iconGlyph: "🖼",
   schema: imageBlock,
-  defaultFactory: factory<ImageBlock>("imageBlock"),
+  defaultFactory: (key) => ({
+    _type: "imageBlock",
+    _key: key,
+    asset_path: "",
+    alt: "",
+    width: "full",
+    aspect_ratio: "auto",
+    lazy: true,
+    shadow: false,
+    border_radius: "",
+  }),
   renderer: ImageBlockRenderer as React.ComponentType<{ block: ImageBlock }>,
   livePreview: LiveImagePreview as unknown as React.ComponentType<{ block: ImageBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: ImageBlockEditor as React.ComponentType<{ block: ImageBlock }>,
@@ -170,7 +174,18 @@ registerBlockType<ImageGridBlock>({
   category: "content",
   iconGlyph: "⊞",
   schema: imageGridBlock,
-  defaultFactory: factory<ImageGridBlock>("imageGridBlock"),
+  defaultFactory: (key) => ({
+    _type: "imageGridBlock",
+    _key: key,
+    images: [],
+    h_gutter: 10,
+    v_gutter: 10,
+    images_per_row: 2,
+    random_grid: "disabled",
+    random_seed: 1,
+    lightbox: false,
+    object_fit: "cover",
+  }),
   renderer: ImageGridBlockRenderer as React.ComponentType<{ block: ImageGridBlock }>,
   livePreview: LiveImageGridPreview as unknown as React.ComponentType<{ block: ImageGridBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: ImageGridBlockEditor as React.ComponentType<{ block: ImageGridBlock }>,
@@ -187,7 +202,17 @@ registerBlockType<VideoBlock>({
   category: "content",
   iconGlyph: "▶",
   schema: videoBlock,
-  defaultFactory: factory<VideoBlock>("videoBlock"),
+  defaultFactory: (key) => ({
+    _type: "videoBlock",
+    _key: key,
+    video_type: "vimeo",
+    url_or_path: "",
+    autoplay: false,
+    loop: false,
+    muted: true,
+    controls: true,
+    aspect_ratio: "16:9",
+  }),
   renderer: VideoBlockRenderer as React.ComponentType<{ block: VideoBlock }>,
   livePreview: LiveVideoPreview as unknown as React.ComponentType<{ block: VideoBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: VideoBlockEditor as React.ComponentType<{ block: VideoBlock }>,
@@ -204,7 +229,11 @@ registerBlockType<SpacerBlock>({
   category: "content",
   iconGlyph: "↕",
   schema: spacerBlock,
-  defaultFactory: factory<SpacerBlock>("spacerBlock"),
+  defaultFactory: (key) => ({
+    _type: "spacerBlock",
+    _key: key,
+    height: "medium",
+  }),
   renderer: SpacerBlockRenderer as React.ComponentType<{ block: SpacerBlock }>,
   livePreview: LiveSpacerPreview as unknown as React.ComponentType<{ block: SpacerBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: SpacerBlockEditor as React.ComponentType<{ block: SpacerBlock }>,
@@ -221,7 +250,14 @@ registerBlockType<ButtonBlock>({
   category: "content",
   iconGlyph: "▣",
   schema: buttonBlock,
-  defaultFactory: factory<ButtonBlock>("buttonBlock"),
+  defaultFactory: (key) => ({
+    _type: "buttonBlock",
+    _key: key,
+    text: "Button",
+    url: "#",
+    style: "primary",
+    size: "medium",
+  }),
   renderer: ButtonBlockRenderer as React.ComponentType<{ block: ButtonBlock }>,
   livePreview: LiveButtonPreview as unknown as React.ComponentType<{ block: ButtonBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: ButtonBlockEditor as React.ComponentType<{ block: ButtonBlock }>,
@@ -240,7 +276,19 @@ registerBlockType<ProjectGridBlock>({
   category: "section",
   iconGlyph: "⬡",
   schema: projectGridBlock,
-  defaultFactory: factory<ProjectGridBlock>("projectGridBlock"),
+  defaultFactory: (key) => ({
+    _type: "projectGridBlock",
+    _key: key,
+    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: [],
+  }),
   renderer: ProjectGridBlockRenderer as React.ComponentType<{ block: ProjectGridBlock }>,
   livePreview: LiveProjectGridPreview as unknown as React.ComponentType<{ block: ProjectGridBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: ProjectGridEditor as React.ComponentType<{ block: ProjectGridBlock }>,
@@ -257,7 +305,26 @@ registerBlockType<ProjectCarouselBlock>({
   category: "section",
   iconGlyph: "▸",
   schema: projectCarouselBlock,
-  defaultFactory: factory<ProjectCarouselBlock>("projectCarouselBlock"),
+  defaultFactory: (key) => ({
+    _type: "projectCarouselBlock",
+    _key: key,
+    source_mode: "auto_latest",
+    max_projects: 8,
+    exclude_current: true,
+    cards_per_view_desktop: 3.5,
+    cards_per_view_tablet: 2.2,
+    cards_per_view_phone: 1.2,
+    gap: 16,
+    aspect_ratio: "4/3",
+    show_title: true,
+    show_subtitle: false,
+    border_radius: 0,
+    hover_effect: "scale",
+    video_mode: "off",
+    show_arrows: true,
+    show_dots: false,
+    snap_scroll: true,
+  }),
   renderer: ProjectCarouselBlockRenderer as React.ComponentType<{ block: ProjectCarouselBlock }>,
   livePreview: LiveProjectCarouselPreview as unknown as React.ComponentType<{ block: ProjectCarouselBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
   editor: ProjectCarouselBlockEditor as React.ComponentType<{ block: ProjectCarouselBlock }>,