@morphika/andami 0.5.0 → 0.5.2

package/lib/builder/block-registrations.ts

@@ -1,335 +1,468 @@
-"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 type {
-  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";
-
-// ────────────────────────────────────────────────────────────────────
-// 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 ──
-
-registerBlockType<TextBlock>({
-  type: "textBlock",
-  label: "Text",
-  description: "Rich text content",
-  category: "content",
-  iconGlyph: "T",
-  schema: 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 }>,
-  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: (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 }>,
-  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: (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 }>,
-  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: (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 }>,
-  cardIcon: VideoBlockCardIcon,
-  compactIcon: VideoBlockIcon,
-  enterPresets: ["fade", "slide-up"],
-  hoverPresets: [],
-});
-
-registerBlockType<SpacerBlock>({
-  type: "spacerBlock",
-  label: "Spacer",
-  description: "Vertical spacing",
-  category: "content",
-  iconGlyph: "↕",
-  schema: 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 }>,
-  cardIcon: SpacerBlockCardIcon,
-  compactIcon: SpacerBlockIcon,
-  enterPresets: [],
-  hoverPresets: [],
-});
-
-registerBlockType<ButtonBlock>({
-  type: "buttonBlock",
-  label: "Button",
-  description: "Call-to-action button",
-  category: "content",
-  iconGlyph: "▣",
-  schema: 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 }>,
-  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: (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 }>,
-  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: (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 }>,
-  cardIcon: ProjectCarouselCardIcon,
-  compactIcon: ProjectCarouselBlockIcon,
-  enterPresets: [],
-  hoverPresets: [],
-});
+"use client";
+
+/**
+ * Block registrations — fills the registry defined in `./block-registry.ts`
+ * with the 10 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 type {
+  TextBlock,
+  ImageBlock,
+  ImageGridBlock,
+  VideoBlock,
+  SpacerBlock,
+  ButtonBlock,
+  BeforeAfterBlock,
+  AudioBlock,
+  ProjectGridBlock,
+  ProjectCarouselBlock,
+  MarqueeBlock,
+} from "../sanity/types";
+
+// ── Sanity schemas ────────────────────────────────────────────────
+
+import {
+  textBlock,
+  imageBlock,
+  imageGridBlock,
+  videoBlock,
+  spacerBlock,
+  buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
+  projectGridBlock,
+  projectCarouselBlock,
+  marqueeBlock,
+} 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 BeforeAfterBlockRenderer from "../../components/blocks/BeforeAfterBlockRenderer";
+import AudioBlockRenderer from "../../components/blocks/AudioBlockRenderer";
+import ProjectGridBlockRenderer from "../../components/blocks/ProjectGridBlockRenderer";
+import ProjectCarouselBlockRenderer from "../../components/blocks/ProjectCarouselBlockRenderer";
+import MarqueeBlockRenderer from "../../components/blocks/MarqueeBlockRenderer";
+
+// ── 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 LiveBeforeAfterPreview from "../../components/builder/live-preview/LiveBeforeAfterPreview";
+import LiveAudioPreview from "../../components/builder/live-preview/LiveAudioPreview";
+import LiveProjectGridPreview from "../../components/builder/live-preview/LiveProjectGridPreview";
+import LiveProjectCarouselPreview from "../../components/builder/live-preview/LiveProjectCarouselPreview";
+import LiveMarqueePreview from "../../components/builder/live-preview/LiveMarqueePreview";
+
+// ── 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 BeforeAfterBlockEditor from "../../components/builder/editors/BeforeAfterBlockEditor";
+import AudioBlockEditor from "../../components/builder/editors/AudioBlockEditor";
+import ProjectGridEditor from "../../components/builder/editors/ProjectGridEditor";
+import ProjectCarouselBlockEditor from "../../components/builder/editors/ProjectCarouselBlockEditor";
+import MarqueeBlockEditor from "../../components/builder/editors/MarqueeBlockEditor";
+
+// ── Card icons (picker modal) ─────────────────────────────────────
+
+import {
+  TextBlockCardIcon,
+  ImageBlockCardIcon,
+  ImageGridBlockCardIcon,
+  VideoBlockCardIcon,
+  SpacerBlockCardIcon,
+  ButtonBlockCardIcon,
+  BeforeAfterBlockCardIcon,
+  AudioBlockCardIcon,
+} from "../../components/builder/BlockCardIcons";
+import {
+  ProjectGridCardIcon,
+  ProjectCarouselCardIcon,
+  MarqueeCardIcon,
+} from "../../components/builder/SectionCardIcons";
+
+// ── Compact icons (settings panel header) ─────────────────────────
+
+import {
+  TextBlockIcon,
+  ImageBlockIcon,
+  ImageGridBlockIcon,
+  VideoBlockIcon,
+  SpacerBlockIcon,
+  ButtonBlockIcon,
+  BeforeAfterBlockIcon,
+  AudioBlockIcon,
+  ProjectGridBlockIcon,
+  ProjectCarouselBlockIcon,
+  MarqueeBlockIcon,
+} from "../../components/builder/blockStyles";
+
+// ────────────────────────────────────────────────────────────────────
+// 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 ──
+
+registerBlockType<TextBlock>({
+  type: "textBlock",
+  label: "Text",
+  description: "Rich text content",
+  category: "content",
+  iconGlyph: "T",
+  schema: 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 }>,
+  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: (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 }>,
+  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: (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 }>,
+  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: (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 }>,
+  cardIcon: VideoBlockCardIcon,
+  compactIcon: VideoBlockIcon,
+  enterPresets: ["fade", "slide-up"],
+  hoverPresets: [],
+});
+
+registerBlockType<SpacerBlock>({
+  type: "spacerBlock",
+  label: "Spacer",
+  description: "Vertical spacing",
+  category: "content",
+  iconGlyph: "↕",
+  schema: 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 }>,
+  cardIcon: SpacerBlockCardIcon,
+  compactIcon: SpacerBlockIcon,
+  enterPresets: [],
+  hoverPresets: [],
+});
+
+registerBlockType<ButtonBlock>({
+  type: "buttonBlock",
+  label: "Button",
+  description: "Call-to-action button",
+  category: "content",
+  iconGlyph: "▣",
+  schema: 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 }>,
+  cardIcon: ButtonBlockCardIcon,
+  compactIcon: ButtonBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: ["scale-up", "lift", "border-glow"],
+});
+
+registerBlockType<BeforeAfterBlock>({
+  type: "beforeAfterBlock",
+  label: "Before / After",
+  description: "Drag-slider comparison between two images or videos",
+  category: "content",
+  iconGlyph: "◫",
+  schema: beforeAfterBlock,
+  defaultFactory: (key) => ({
+    _type: "beforeAfterBlock",
+    _key: key,
+    before_media_type: "image",
+    before_asset_path: "",
+    before_alt: "",
+    after_media_type: "image",
+    after_asset_path: "",
+    after_alt: "",
+    orientation: "horizontal",
+    initial_position: 50,
+    handle_color: "#FFFFFF",
+    width: "full",
+    aspect_ratio: "16:9",
+    video_autoplay: true,
+    video_loop: true,
+    video_muted: true,
+    border_radius: "",
+    shadow: false,
+  }),
+  renderer: BeforeAfterBlockRenderer as React.ComponentType<{ block: BeforeAfterBlock }>,
+  livePreview: LiveBeforeAfterPreview as unknown as React.ComponentType<{ block: BeforeAfterBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
+  editor: BeforeAfterBlockEditor as React.ComponentType<{ block: BeforeAfterBlock }>,
+  cardIcon: BeforeAfterBlockCardIcon,
+  compactIcon: BeforeAfterBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: [],
+});
+
+registerBlockType<AudioBlock>({
+  type: "audioBlock",
+  label: "Audio",
+  description: "Minimal audio player with cover art and metadata",
+  category: "content",
+  iconGlyph: "♪",
+  schema: audioBlock,
+  defaultFactory: (key) => ({
+    _type: "audioBlock",
+    _key: key,
+    asset_path: "",
+    alt: "",
+    title: "",
+    artist: "",
+    cover_path: "",
+    accent_color: "#3580f9",
+    width: "contained",
+    border_radius: "",
+    shadow: false,
+    autoplay: false,
+    loop: false,
+    muted: false,
+  }),
+  renderer: AudioBlockRenderer as React.ComponentType<{ block: AudioBlock }>,
+  livePreview: LiveAudioPreview as unknown as React.ComponentType<{ block: AudioBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
+  editor: AudioBlockEditor as React.ComponentType<{ block: AudioBlock }>,
+  cardIcon: AudioBlockCardIcon,
+  compactIcon: AudioBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: [],
+});
+
+// ── Section-level blocks ──
+
+registerBlockType<ProjectGridBlock>({
+  type: "projectGridBlock",
+  label: "Project Grid",
+  description: "Staggered project showcase grid",
+  category: "section",
+  iconGlyph: "⬡",
+  schema: 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 }>,
+  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: (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 }>,
+  cardIcon: ProjectCarouselCardIcon,
+  compactIcon: ProjectCarouselBlockIcon,
+  enterPresets: [],
+  hoverPresets: [],
+});
+
+registerBlockType<MarqueeBlock>({
+  type: "marqueeBlock",
+  label: "Marquee",
+  description: "Horizontal scrolling ticker of text and images",
+  category: "section",
+  iconGlyph: "⇄",
+  schema: marqueeBlock,
+  defaultFactory: (key) => ({
+    _type: "marqueeBlock",
+    _key: key,
+    items: [
+      { _type: "marqueeText", _key: `${key}-t1`, text: "Selected Work" },
+      { _type: "marqueeSeparator", _key: `${key}-s1`, character: "•" },
+      { _type: "marqueeText", _key: `${key}-t2`, text: "2024" },
+      { _type: "marqueeSeparator", _key: `${key}-s2`, character: "•" },
+      { _type: "marqueeText", _key: `${key}-t3`, text: "Get in touch" },
+      { _type: "marqueeSeparator", _key: `${key}-s3`, character: "•" },
+    ],
+    direction: "left",
+    speed: 60,
+    pause_on_hover: true,
+    font_size: "3xl",
+    font_weight: "700",
+    color: "#111111",
+    text_style: "solid",
+    letter_spacing: 0,
+    text_transform: "uppercase",
+    gap: 48,
+    row_height: 120,
+    padding_y: 16,
+    background_color: "",
+  }),
+  renderer: MarqueeBlockRenderer as React.ComponentType<{ block: MarqueeBlock }>,
+  livePreview: LiveMarqueePreview as unknown as React.ComponentType<{ block: MarqueeBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
+  editor: MarqueeBlockEditor as React.ComponentType<{ block: MarqueeBlock }>,
+  cardIcon: MarqueeCardIcon,
+  compactIcon: MarqueeBlockIcon,
+  // The marquee is already animating; stick to entrance presets that won't
+  // conflict with its own horizontal motion.
+  enterPresets: ["fade", "slide-up", "scale"],
+  // No hover presets — scale/tilt/etc. fight an already-animating block.
+  hoverPresets: [],
+});