@morphika/andami 0.2.26 → 0.4.0

package/lib/builder/block-registrations.ts

@@ -0,0 +1,268 @@
+"use client";
+
+/**
+ * Block registrations — fills the registry defined in `./block-registry.ts`
+ * with the 8 built-in block types shipped by the framework.
+ *
+ * Importing this module has a side effect: every `registerBlockType()`
+ * call below runs synchronously and populates the module-level registry.
+ * Most of the codebase currently does NOT import this — the existing
+ * dispatch tables in `components/blocks/BlockRenderer.tsx`,
+ * `components/builder/BlockLivePreview.tsx`, etc. are still the source
+ * of truth at runtime. This file is the parallel structure we'll migrate
+ * to in a later session, behind the existing public API so instances
+ * don't break.
+ *
+ * Session A (2026-04-19): all 8 blocks registered; nothing consumes
+ * the registry yet.
+ */
+
+import { registerBlockType } from "./block-registry";
+import { createDefaultBlock } from "./defaults";
+
+import type {
+  ContentBlock,
+  TextBlock,
+  ImageBlock,
+  ImageGridBlock,
+  VideoBlock,
+  SpacerBlock,
+  ButtonBlock,
+  ProjectGridBlock,
+  ProjectCarouselBlock,
+} from "../sanity/types";
+
+// ── Sanity schemas ────────────────────────────────────────────────
+
+import {
+  textBlock,
+  imageBlock,
+  imageGridBlock,
+  videoBlock,
+  spacerBlock,
+  buttonBlock,
+  projectGridBlock,
+  projectCarouselBlock,
+} from "../../sanity/schemas/blocks";
+
+// ── Public renderers ──────────────────────────────────────────────
+
+import TextBlockRenderer from "../../components/blocks/TextBlockRenderer";
+import ImageBlockRenderer from "../../components/blocks/ImageBlockRenderer";
+import ImageGridBlockRenderer from "../../components/blocks/ImageGridBlockRenderer";
+import VideoBlockRenderer from "../../components/blocks/VideoBlockRenderer";
+import SpacerBlockRenderer from "../../components/blocks/SpacerBlockRenderer";
+import ButtonBlockRenderer from "../../components/blocks/ButtonBlockRenderer";
+import ProjectGridBlockRenderer from "../../components/blocks/ProjectGridBlockRenderer";
+import ProjectCarouselBlockRenderer from "../../components/blocks/ProjectCarouselBlockRenderer";
+
+// ── Builder live previews ─────────────────────────────────────────
+
+import LiveTextEditor from "../../components/builder/live-preview/LiveTextEditor";
+import LiveImagePreview from "../../components/builder/live-preview/LiveImagePreview";
+import LiveImageGridPreview from "../../components/builder/live-preview/LiveImageGridPreview";
+import LiveVideoPreview from "../../components/builder/live-preview/LiveVideoPreview";
+import LiveSpacerPreview from "../../components/builder/live-preview/LiveSpacerPreview";
+import LiveButtonPreview from "../../components/builder/live-preview/LiveButtonPreview";
+import LiveProjectGridPreview from "../../components/builder/live-preview/LiveProjectGridPreview";
+import LiveProjectCarouselPreview from "../../components/builder/live-preview/LiveProjectCarouselPreview";
+
+// ── Settings-panel editors ────────────────────────────────────────
+
+import TextBlockEditor from "../../components/builder/editors/TextBlockEditor";
+import ImageBlockEditor from "../../components/builder/editors/ImageBlockEditor";
+import ImageGridBlockEditor from "../../components/builder/editors/ImageGridBlockEditor";
+import VideoBlockEditor from "../../components/builder/editors/VideoBlockEditor";
+import SpacerBlockEditor from "../../components/builder/editors/SpacerBlockEditor";
+import ButtonBlockEditor from "../../components/builder/editors/ButtonBlockEditor";
+import ProjectGridEditor from "../../components/builder/editors/ProjectGridEditor";
+import ProjectCarouselBlockEditor from "../../components/builder/editors/ProjectCarouselBlockEditor";
+
+// ── Card icons (picker modal) ─────────────────────────────────────
+
+import {
+  TextBlockCardIcon,
+  ImageBlockCardIcon,
+  ImageGridBlockCardIcon,
+  VideoBlockCardIcon,
+  SpacerBlockCardIcon,
+  ButtonBlockCardIcon,
+} from "../../components/builder/BlockCardIcons";
+import {
+  ProjectGridCardIcon,
+  ProjectCarouselCardIcon,
+} from "../../components/builder/SectionCardIcons";
+
+// ── Compact icons (settings panel header) ─────────────────────────
+
+import {
+  TextBlockIcon,
+  ImageBlockIcon,
+  ImageGridBlockIcon,
+  VideoBlockIcon,
+  SpacerBlockIcon,
+  ButtonBlockIcon,
+  ProjectGridBlockIcon,
+  ProjectCarouselBlockIcon,
+} 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).
+// ────────────────────────────────────────────────────────────────────
+
+// ── Content blocks ──
+
+registerBlockType<TextBlock>({
+  type: "textBlock",
+  label: "Text",
+  description: "Rich text content",
+  category: "content",
+  iconGlyph: "T",
+  schema: textBlock,
+  defaultFactory: factory<TextBlock>("textBlock"),
+  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 }>,
+  cardIcon: TextBlockCardIcon,
+  compactIcon: TextBlockIcon,
+  enterPresets: ["typewriter", "fade", "blur-in", "slide-up"],
+  hoverPresets: [],
+});
+
+registerBlockType<ImageBlock>({
+  type: "imageBlock",
+  label: "Image",
+  description: "Single image with caption",
+  category: "content",
+  iconGlyph: "🖼",
+  schema: imageBlock,
+  defaultFactory: factory<ImageBlock>("imageBlock"),
+  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 }>,
+  cardIcon: ImageBlockCardIcon,
+  compactIcon: ImageBlockIcon,
+  enterPresets: ["fade", "blur", "reveal", "scale", "slide-up"],
+  hoverPresets: ["scale-up", "lift", "tilt-3d", "ripple", "rgb-shift", "pixelate"],
+});
+
+registerBlockType<ImageGridBlock>({
+  type: "imageGridBlock",
+  label: "Image Grid",
+  description: "Multiple images in grid",
+  category: "content",
+  iconGlyph: "⊞",
+  schema: imageGridBlock,
+  defaultFactory: factory<ImageGridBlock>("imageGridBlock"),
+  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 }>,
+  cardIcon: ImageGridBlockCardIcon,
+  compactIcon: ImageGridBlockIcon,
+  enterPresets: ["fade", "scale", "slide-up"],
+  hoverPresets: ["tilt-3d"],
+});
+
+registerBlockType<VideoBlock>({
+  type: "videoBlock",
+  label: "Video",
+  description: "Vimeo, YouTube, or MP4",
+  category: "content",
+  iconGlyph: "▶",
+  schema: videoBlock,
+  defaultFactory: factory<VideoBlock>("videoBlock"),
+  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 }>,
+  cardIcon: VideoBlockCardIcon,
+  compactIcon: VideoBlockIcon,
+  enterPresets: ["fade", "slide-up"],
+  hoverPresets: [],
+});
+
+registerBlockType<SpacerBlock>({
+  type: "spacerBlock",
+  label: "Spacer",
+  description: "Vertical spacing",
+  category: "content",
+  iconGlyph: "↕",
+  schema: spacerBlock,
+  defaultFactory: factory<SpacerBlock>("spacerBlock"),
+  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 }>,
+  cardIcon: SpacerBlockCardIcon,
+  compactIcon: SpacerBlockIcon,
+  enterPresets: [],
+  hoverPresets: [],
+});
+
+registerBlockType<ButtonBlock>({
+  type: "buttonBlock",
+  label: "Button",
+  description: "Call-to-action button",
+  category: "content",
+  iconGlyph: "▣",
+  schema: buttonBlock,
+  defaultFactory: factory<ButtonBlock>("buttonBlock"),
+  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 }>,
+  cardIcon: ButtonBlockCardIcon,
+  compactIcon: ButtonBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: ["scale-up", "lift", "border-glow"],
+});
+
+// ── Section-level blocks ──
+
+registerBlockType<ProjectGridBlock>({
+  type: "projectGridBlock",
+  label: "Project Grid",
+  description: "Staggered project showcase grid",
+  category: "section",
+  iconGlyph: "⬡",
+  schema: projectGridBlock,
+  defaultFactory: factory<ProjectGridBlock>("projectGridBlock"),
+  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 }>,
+  cardIcon: ProjectGridCardIcon,
+  compactIcon: ProjectGridBlockIcon,
+  enterPresets: [],
+  hoverPresets: ["scale-up", "lift"],
+});
+
+registerBlockType<ProjectCarouselBlock>({
+  type: "projectCarouselBlock",
+  label: "Project Carousel",
+  description: "Horizontal carousel of projects — great for end-of-page 'keep browsing'",
+  category: "section",
+  iconGlyph: "▸",
+  schema: projectCarouselBlock,
+  defaultFactory: factory<ProjectCarouselBlock>("projectCarouselBlock"),
+  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 }>,
+  cardIcon: ProjectCarouselCardIcon,
+  compactIcon: ProjectCarouselBlockIcon,
+  enterPresets: [],
+  hoverPresets: [],
+});

package/lib/builder/block-registry.ts

@@ -0,0 +1,195 @@
+"use client";
+
+/**
+ * Block Registry — central source of truth for block-type metadata.
+ *
+ * Inspired by the Puck pattern (puckeditor.com). Each block type declares its
+ * schema, renderer, live-preview, editor, icons, and animation-preset lists
+ * in ONE place instead of scattering across 8 files.
+ *
+ * Currently this file contains only the infrastructure (types + helpers).
+ * Population of the registry happens in `./block-registrations.ts` via
+ * side-effect imports. Dispatch tables (`ALL_BLOCK_INFO`, `BLOCK_CARD_ICONS`,
+ * renderer/editor switches) still exist in their original locations and are
+ * NOT derived from this registry yet — that migration happens in later
+ * sessions, behind the existing public API so it stays backward-compatible.
+ *
+ * ## Stability contract
+ *
+ * The registry is an INTERNAL consolidation helper. Consumers (instances
+ * using `@morphika/andami`) should not import from this module directly.
+ * The existing public exports (`ALL_BLOCK_INFO`, `BLOCK_TYPE_REGISTRY`,
+ * `BLOCK_CARD_ICONS`, etc.) remain the supported API.
+ *
+ * Session A (2026-04-19): infrastructure only — no existing exports change.
+ */
+
+import type React from "react";
+import type { DeviceViewport } from "./types";
+import type { ContentBlock } from "../sanity/types";
+
+// ────────────────────────────────────────────────────────────────────
+// Types
+// ────────────────────────────────────────────────────────────────────
+
+/**
+ * Full registration for a single block type. Generic over the specific
+ * block union member so renderers / editors / factories can stay strongly
+ * typed even when pulled out of the registry map.
+ */
+export interface BlockRegistrationInput<T extends ContentBlock = ContentBlock> {
+  // ── Identity ──
+  /**
+   * Block type string — MUST match the `_type` literal stored in Sanity
+   * documents. Renaming this string is a breaking data migration.
+   */
+  type: T["_type"];
+  /** Human-readable label shown in the picker modal and settings header. */
+  label: string;
+  /** Short description shown under the label in the picker modal card. */
+  description: string;
+  /**
+   * Where the block appears.
+   *  - "content": rendered inside a column, picked via the "+ Add Block" modal
+   *  - "section": rendered as a full-width section-level block, picked via
+   *     the "+ Add Section" modal (same pattern as projectGridBlock /
+   *     projectCarouselBlock)
+   */
+  category: "content" | "section";
+  /**
+   * Legacy single-char / emoji icon kept for backward compatibility with
+   * `ALL_BLOCK_INFO` entries and debug UIs. Prefer `cardIcon` for rich
+   * visuals.
+   */
+  iconGlyph?: string;
+
+  // ── Sanity ──
+  /**
+   * Sanity schema (result of `defineType(...)`). Kept as `unknown` because
+   * Sanity's internal types are not worth pulling through the generic.
+   * Studio consumers cast at registration time.
+   */
+  schema: unknown;
+
+  // ── Factory ──
+  /**
+   * Creates a default instance of this block type. Receives a pre-generated
+   * `_key` so the caller controls key generation (e.g. for deterministic
+   * snapshots in tests).
+   */
+  defaultFactory: (key: string) => T;
+
+  // ── Runtime components ──
+  /** Public-site renderer (used inside `BlockRenderer`). */
+  renderer: React.ComponentType<{ block: T }>;
+  /**
+   * Builder canvas live preview. Signature is intentionally permissive —
+   * some previews consume `viewport`, some `editable`, most neither. At the
+   * callsite, props are forwarded from `BlockLivePreview`.
+   */
+  livePreview: React.ComponentType<{
+    block: T;
+    viewport?: DeviceViewport;
+    editable?: boolean;
+  }>;
+  /** Settings-panel editor for this block type. */
+  editor: React.ComponentType<{ block: T }>;
+
+  // ── Icons ──
+  /**
+   * Full-size card icon (220×120) used in the "+ Add Block" or "+ Add
+   * Section" picker modal. For section-level blocks, this is the violet
+   * variant from `SectionCardIcons.tsx`; for content blocks, the blue
+   * variant from `BlockCardIcons.tsx`.
+   */
+  cardIcon: React.FC;
+  /**
+   * Compact icon used in the settings panel header, auto-scaled via
+   * `blockStyles.scaleToHeight()` to whatever `size` the caller requests.
+   */
+  compactIcon: React.FC<{ size?: number }>;
+
+  // ── Animation preset allowlists ──
+  /**
+   * Which enter-animation presets apply to this block. Used by
+   * `BLOCK_ENTER_PRESETS` in `lib/animation/enter-types.ts`.
+   */
+  enterPresets: readonly string[];
+  /**
+   * Which hover-effect presets apply to this block. Used by
+   * `BLOCK_HOVER_PRESETS` in `lib/animation/hover-effect-types.ts`.
+   */
+  hoverPresets: readonly string[];
+}
+
+/**
+ * Concrete registration stored in the map. Erases the block-type generic
+ * so heterogeneous registrations can coexist in the same `Map`.
+ */
+export type BlockRegistration = BlockRegistrationInput;
+
+// ────────────────────────────────────────────────────────────────────
+// Registry state (module-level singleton)
+// ────────────────────────────────────────────────────────────────────
+
+const REGISTRY: Map<string, BlockRegistration> = new Map();
+
+// ────────────────────────────────────────────────────────────────────
+// Public API
+// ────────────────────────────────────────────────────────────────────
+
+/**
+ * Register a block type. Called once per block type from
+ * `./block-registrations.ts` during module initialization. In dev mode,
+ * warns on duplicate type strings (which usually indicate a bug).
+ */
+export function registerBlockType<T extends ContentBlock>(
+  registration: BlockRegistrationInput<T>,
+): void {
+  if (REGISTRY.has(registration.type)) {
+    if (process.env.NODE_ENV !== "production") {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[block-registry] Duplicate registration for "${registration.type}" — overwriting. ` +
+          `This usually indicates registrations.ts was imported twice or a block type was registered from multiple places.`,
+      );
+    }
+  }
+  REGISTRY.set(
+    registration.type,
+    registration as unknown as BlockRegistration,
+  );
+}
+
+/**
+ * Look up a registration by block type. Returns `undefined` for unknown
+ * types (including when the registrations module hasn't been imported yet).
+ */
+export function getBlockRegistration<T extends ContentBlock = ContentBlock>(
+  type: string,
+): BlockRegistrationInput<T> | undefined {
+  return REGISTRY.get(type) as BlockRegistrationInput<T> | undefined;
+}
+
+/**
+ * All currently-registered blocks in insertion order. Safe to iterate —
+ * the returned array is a snapshot, not a live view of the registry.
+ */
+export function getAllBlockRegistrations(): readonly BlockRegistration[] {
+  return Array.from(REGISTRY.values());
+}
+
+/** Cheap existence check for dispatch-site assertions. */
+export function hasBlockRegistration(type: string): boolean {
+  return REGISTRY.has(type);
+}
+
+/**
+ * Reset the registry. Only used by tests that want a clean slate between
+ * suites — production code should never call this.
+ *
+ * @internal
+ */
+export function __clearBlockRegistryForTests(): void {
+  REGISTRY.clear();
+}

package/lib/builder/constants.ts

@@ -55,27 +55,34 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
 // visual differentiation at a glance. This is a design rule that
 // MUST be followed across all builder components.
 //
-//   BLUE    (#076bff) — Columns: outlines, resize handles, drag grip,
-//                        span badge, column selection/hover chrome.
-//   GREEN-B (#0d9668) — Blocks: "+ Add Block" buttons, block toolbar
+//   BLUE    (#4794e2) — Columns: outlines, resize handles, drag grip,
+//                        column selection/hover chrome.
+//   BLUE    (#4794e2) — Blocks: "+ Add Block" buttons, block toolbar
 //                        pill, block selection ring, block-level actions.
-//   BLUE    (#076bff) — Drop zones: gap drop targets during drag,
-//                        insertion lines, "Drop Here" labels, swap target
-//                        highlight (blue border + tinted background).
-//                        (Merged with column color for coherence.)
-//   VIOLET  (#8b5cf6) — Custom sections: saved section cards, custom
-//                        section instance badges, section editor chrome,
-//                        "Create New" custom section button.
+//                        (Same hue as columns — a future pass may split
+//                        these into distinct hues if the shared blue is
+//                        causing ambiguity.)
+//   VIOLET  (#7500d5) — Sections: side pill, cover/parallax accent,
+//                        section outlines, hover/selection chrome.
+//                        Also used for Custom Sections card chrome.
 //
 // When adding new builder UI, pick the color that matches the entity
 // being represented, not the action being performed. For example, a
 // delete button on a column is BLUE (it belongs to the column chrome),
-// while a delete button on a block toolbar is ORANGE.
+// while the delete inside a block toolbar is BLUE too (inside the block
+// pill, on hover it flashes red as a destructive cue).
 
-export const BUILDER_BLUE = "#076bff";       // Columns
-export const BUILDER_ORANGE = "#0d9668";     // Blocks (emerald — was orange #e28b00)
-export const BUILDER_GREEN = "#22c55e";      // Drop zones
-export const BUILDER_VIOLET = "#8b5cf6";     // Custom sections
+export const BUILDER_BLUE = "#4794e2";       // Columns (softened — was #076bff)
+export const BUILDER_BLOCK = "#4794e2";      // Blocks — same hue as columns for now
+export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
+export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
+
+/**
+ * @deprecated Use `BUILDER_BLOCK` instead. The legacy name survived multiple
+ * colour migrations (orange → emerald → blue) and no longer reflects reality.
+ * Kept as an alias so third-party code doesn't break at the import boundary.
+ */
+export const BUILDER_ORANGE = BUILDER_BLOCK;
 
 /**
  * Padding map for Row settings (in pixels)

package/lib/builder/defaults.ts

@@ -194,6 +194,27 @@ export function createDefaultBlock(blockType: BlockType): ContentBlock {
         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,

package/lib/builder/format.ts

@@ -0,0 +1,25 @@
+/**
+ * Formatting helpers for builder UI.
+ *
+ * Kept as pure functions in their own module so they can be imported from
+ * any builder component and unit-tested in isolation.
+ */
+
+/**
+ * Format a row height percentage with at most one decimal place, dropping
+ * the trailing `.0` when the rounded value is an integer. Used by the
+ * Cover Section row sub-pill in `SortableRow`.
+ *
+ * Examples:
+ *   formatRowPercent(100)      -> "100"
+ *   formatRowPercent(50)       -> "50"
+ *   formatRowPercent(33.333)   -> "33.3"
+ *   formatRowPercent(66.6667)  -> "66.7"
+ *   formatRowPercent(0)        -> "0"
+ *   formatRowPercent(NaN)      -> "0" (fallback — never expected in practice)
+ */
+export function formatRowPercent(p: number): string {
+  if (!Number.isFinite(p)) return "0";
+  const rounded = Math.round(p * 10) / 10;
+  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1);
+}

package/lib/builder/history.ts

@@ -23,14 +23,11 @@ export interface HistoryState {
   _history: HistorySnapshot[];
   /** Future snapshots (for redo). Last element = next redo. */
   _future: HistorySnapshot[];
-  /** Whether we're currently applying undo/redo (skip snapshot). */
-  _isTimeTraveling: boolean;
 }
 
 export const initialHistoryState: HistoryState = {
   _history: [],
   _future: [],
-  _isTimeTraveling: false,
 };
 
 /**

package/lib/builder/index.ts

@@ -19,3 +19,19 @@ export type {
   SectionTypeInfo,
   SectionBlockType,
 } from "./types";
+
+// ── Block registry (Session A + B: infrastructure + consistency validation) ──
+//
+// Registry API re-exports for consumers that want to register custom block
+// types or introspect the built-in ones. See `./registry` for the batteries-
+// included entry point (triggers `block-registrations` as a side effect).
+export type {
+  BlockRegistration,
+  BlockRegistrationInput,
+} from "./block-registry";
+export {
+  registerBlockType,
+  getBlockRegistration,
+  getAllBlockRegistrations,
+  hasBlockRegistration,
+} from "./block-registry";

package/lib/builder/layout-styles.ts

@@ -124,7 +124,7 @@ export function getBackgroundStyles(
     const imgUrl = assetBaseUrl
       ? `${assetBaseUrl.replace(/\/$/, "")}/${s.background_image}`
       : s.background_image;
-    styles.backgroundImage = `url(${imgUrl})`;
+    styles.backgroundImage = `url("${imgUrl}")`;
     styles.backgroundSize = s.background_size || "cover";
     styles.backgroundPosition = s.background_position || "center center";
     styles.backgroundRepeat = s.background_repeat || "no-repeat";

package/lib/builder/registry.ts

@@ -0,0 +1,44 @@
+/**
+ * Block registry — batteries-included entry point.
+ *
+ * Importing this module triggers the side-effect load of
+ * `./block-registrations`, populating the registry with all 8 built-in
+ * block types (text, image, imageGrid, video, spacer, button, projectGrid,
+ * projectCarousel). Then re-exports the registry query API so consumers
+ * can introspect registrations with one import.
+ *
+ * ## When to use this vs `./block-registry`
+ *
+ * - **`./block-registry`** — the bare API (types + `registerBlockType` +
+ *   query helpers). Use this if you're registering custom blocks in an
+ *   instance and want to control population order.
+ * - **`./registry`** (this file) — convenience wrapper. Use this if you
+ *   just want to read the built-in registrations from an instance or
+ *   documentation script.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import { getAllBlockRegistrations } from "@morphika/andami/lib/builder/registry";
+ *
+ * // Registry is already populated — no side-effect import needed.
+ * const allBlocks = getAllBlockRegistrations();
+ * console.log(allBlocks.map(r => r.type));
+ * // → ["textBlock", "imageBlock", ..., "projectCarouselBlock"]
+ * ```
+ */
+
+// Side-effect: fill the registry with all built-in block types.
+import "./block-registrations";
+
+export type {
+  BlockRegistration,
+  BlockRegistrationInput,
+} from "./block-registry";
+
+export {
+  registerBlockType,
+  getBlockRegistration,
+  getAllBlockRegistrations,
+  hasBlockRegistration,
+} from "./block-registry";