@morphika/andami 0.4.0 → 0.4.1

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/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 }>,

package/lib/builder/defaults.ts

@@ -4,6 +4,12 @@ import { generateKey } from "./utils";
 import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
 import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
 
+// Side-effect import: populates the block registry with all built-in block
+// types so `createDefaultBlock` can delegate to each registration's
+// `defaultFactory`. See `./block-registry.ts` for the stability contract.
+import "./block-registrations";
+import { getBlockRegistration } from "./block-registry";
+
 // ============================================
 // Parallax slide defaults (Session 128)
 // ============================================
@@ -116,109 +122,23 @@ export const DEFAULT_TYPEWRITER_CONFIG: Required<TypewriterConfig> = {
 
 /**
  * Create a new block with sensible defaults for the given block type.
+ *
+ * Session 181 (C): switched from a giant switch-case to a registry lookup.
+ * Each block type now declares its default shape in
+ * `./block-registrations.ts` via the `defaultFactory` field. The
+ * registration module is loaded eagerly here (side-effect import) so the
+ * registry is populated before any `createDefaultBlock` call.
+ *
+ * Unknown block types fall back to the minimal `{ _type, _key }` shape —
+ * same behavior as the previous switch-case's `default` branch.
  */
 export function createDefaultBlock(blockType: BlockType): ContentBlock {
-  const _key = generateKey();
-
-  switch (blockType) {
-    case "textBlock":
-      return {
-        _type: "textBlock",
-        _key,
-        text: [],
-        style: { fontSize: 14, alignment: "left", fontWeight: "400" },
-      };
-    case "imageBlock":
-      return {
-        _type: "imageBlock",
-        _key,
-        asset_path: "",
-        alt: "",
-        width: "full",
-        aspect_ratio: "auto",
-        lazy: true,
-        shadow: false,
-        border_radius: "",
-      };
-    case "imageGridBlock":
-      return {
-        _type: "imageGridBlock",
-        _key,
-        images: [],
-        h_gutter: 10,
-        v_gutter: 10,
-        images_per_row: 2,
-        random_grid: "disabled",
-        random_seed: 1,
-        lightbox: false,
-        object_fit: "cover",
-      };
-    case "videoBlock":
-      return {
-        _type: "videoBlock",
-        _key,
-        video_type: "vimeo",
-        url_or_path: "",
-        autoplay: false,
-        loop: false,
-        muted: true,
-        controls: true,
-        aspect_ratio: "16:9",
-      };
-    case "spacerBlock":
-      return {
-        _type: "spacerBlock",
-        _key,
-        height: "medium",
-      };
-    case "buttonBlock":
-      return {
-        _type: "buttonBlock",
-        _key,
-        text: "Button",
-        url: "#",
-        style: "primary",
-        size: "medium",
-      };
-    case "projectGridBlock":
-      return {
-        _type: "projectGridBlock",
-        _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: [],
-      };
-    case "projectCarouselBlock":
-      return {
-        _type: "projectCarouselBlock",
-        _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,
-      };
-    default:
-      return {
-        _type: blockType,
-        _key,
-      } as ContentBlock;
+  const registration = getBlockRegistration(blockType);
+  if (registration) {
+    return registration.defaultFactory(generateKey());
   }
+  return {
+    _type: blockType,
+    _key: generateKey(),
+  } as ContentBlock;
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",