@morphika/andami 0.3.1 → 0.4.1

package/components/builder/live-preview/LiveProjectCarouselPreview.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * LiveProjectCarouselPreview — Builder canvas preview for projectCarouselBlock.
+ *
+ * Renders N mockup cards (respecting `max_projects`, aspect_ratio, gap,
+ * cards-per-view per viewport, border_radius) so the designer can evaluate
+ * the layout inside the builder without hitting the projects API. Real
+ * thumbnails show up on the public site.
+ *
+ * Mock card visual matches the empty-state placeholder of the Image / Video
+ * blocks: soft grey background + centered landscape (or play) icon. Keeps
+ * the preview readable at any zoom level and communicates that the real
+ * content is image/video thumbnails without faking actual data.
+ *
+ * Intentionally independent from LiveProjectGridPreview — same design
+ * language, no shared code.
+ */
+
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import type { ProjectCarouselBlock } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+
+// ─── Helpers (duplicated from public renderer on purpose — per user request
+//     the two carousels are not linked so changes on one side can't cascade). ──
+
+function resolveCardsPerView(
+  block: Pick<ProjectCarouselBlock, "cards_per_view_desktop" | "cards_per_view_tablet" | "cards_per_view_phone">,
+  viewport: DeviceViewport,
+): number {
+  if (viewport === "phone") return block.cards_per_view_phone ?? 1.2;
+  if (viewport === "tablet") return block.cards_per_view_tablet ?? 2.2;
+  return block.cards_per_view_desktop ?? 3.5;
+}
+
+function computeCardWidth(
+  containerWidth: number,
+  cardsPerView: number,
+  gap: number,
+): number {
+  if (cardsPerView <= 0 || containerWidth <= 0) return 0;
+  return Math.max(0, (containerWidth - (cardsPerView - 1) * gap) / cardsPerView);
+}
+
+// ─── Mock card glyphs ─────────────────────────────────────────────
+
+function LandscapeGlyph() {
+  return (
+    <svg width="48" height="48" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+      <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+      <circle cx="18" cy="21" r="3" fill="#b0b5bd" />
+      <path d="M12 42 L22 28 L28 34 L38 22 L46 42 Z" fill="#b0b5bd" />
+    </svg>
+  );
+}
+
+function PlayGlyph() {
+  return (
+    <svg width="48" height="48" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+      <circle cx="28" cy="28" r="22" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
+      <path d="M24 20 L37 28 L24 36 Z" fill="#b0b5bd" />
+    </svg>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────
+
+export default function LiveProjectCarouselPreview({
+  block,
+  viewport: frameViewport = "desktop",
+}: {
+  block: ProjectCarouselBlock;
+  viewport?: DeviceViewport;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // Config
+  const maxProjects = block.max_projects ?? 8;
+  const gap = block.gap ?? 16;
+  const aspectRatio = block.aspect_ratio ?? "4/3";
+  const showTitle = block.show_title !== false;
+  const showSubtitle = block.show_subtitle === true;
+  const borderRadius = block.border_radius ?? 0;
+  const snapScroll = block.snap_scroll !== false;
+  const videoMode = block.video_mode ?? "off";
+  const showDots = block.show_dots === true;
+
+  const cardsPerView = resolveCardsPerView(block, frameViewport);
+  const cardWidth = useMemo(
+    () => computeCardWidth(containerWidth, cardsPerView, gap),
+    [containerWidth, cardsPerView, gap],
+  );
+
+  // ResizeObserver
+  const containerCallbackRef = useCallback((node: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = node;
+    if (!node) return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        if (w > 0) setContainerWidth(w);
+      }
+    });
+    roRef.current = ro;
+    ro.observe(node);
+
+    const measure = () => {
+      const w = node.clientWidth;
+      if (w > 0) setContainerWidth(w);
+    };
+    measure();
+    requestAnimationFrame(measure);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+    },
+    [],
+  );
+
+  // Build the mock project array — just indexes, each card shows its number.
+  const mockCards = useMemo(
+    () => Array.from({ length: Math.max(2, Math.min(20, maxProjects)) }, (_, i) => i),
+    [maxProjects],
+  );
+
+  const Glyph = videoMode !== "off" ? PlayGlyph : LandscapeGlyph;
+
+  return (
+    <div ref={containerCallbackRef} className="relative w-full">
+      {/* Scroll track — same mechanics as public renderer so layout is faithful */}
+      <div
+        className="flex overflow-x-auto"
+        style={{
+          gap: `${gap}px`,
+          scrollSnapType: snapScroll ? "x mandatory" : undefined,
+          scrollBehavior: "smooth",
+          WebkitOverflowScrolling: "touch",
+          // Hide native scrollbar
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+        }}
+      >
+        {mockCards.map((i) => (
+          <div
+            key={i}
+            className="flex flex-col"
+            style={{
+              flex: `0 0 ${cardWidth}px`,
+              scrollSnapAlign: snapScroll ? "start" : "none",
+              minWidth: 0,
+            }}
+          >
+            {/* Thumbnail area — mock */}
+            <div
+              className="relative w-full flex items-center justify-center"
+              style={{
+                aspectRatio: aspectRatio.replace("/", " / "),
+                background: "#f4f4f4",
+                borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+              }}
+            >
+              <Glyph />
+            </div>
+
+            {/* Placeholder title + subtitle */}
+            {(showTitle || showSubtitle) && (
+              <div className="mt-3 px-0.5">
+                {showTitle && (
+                  <div
+                    className="h-[10px] rounded-sm"
+                    style={{ background: "#e0e0e0", width: "60%" }}
+                  />
+                )}
+                {showSubtitle && (
+                  <div
+                    className="h-[8px] rounded-sm mt-1.5"
+                    style={{ background: "#ededed", width: "40%" }}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Dots preview — decorative only inside the builder */}
+      {showDots && mockCards.length > 1 && (
+        <div className="flex justify-center gap-1.5 mt-4">
+          {mockCards.slice(0, Math.min(6, mockCards.length)).map((i) => (
+            <span
+              key={i}
+              style={{
+                width: i === 0 ? 24 : 6,
+                height: 6,
+                borderRadius: 999,
+                background: i === 0 ? "#2b2f38" : "#c9c9c9",
+                display: "inline-block",
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Tiny info strip so the designer knows this is a preview */}
+      <div className="absolute top-1 right-1 pointer-events-none text-[9px] font-medium px-1.5 py-0.5 rounded bg-white/80 border border-black/10 text-neutral-500 shadow-sm">
+        Preview · {mockCards.length} mock cards
+      </div>
+
+      {/* Chrome-style inline CSS to hide the webkit scrollbar */}
+      <style>{`
+        .flex::-webkit-scrollbar { display: none; }
+      `}</style>
+    </div>
+  );
+}

package/components/builder/live-preview/index.ts

@@ -8,4 +8,5 @@ export { default as LiveVideoPreview } from "./LiveVideoPreview";
 export { default as LiveSpacerPreview } from "./LiveSpacerPreview";
 export { default as LiveButtonPreview } from "./LiveButtonPreview";
 export { default as LiveProjectGridPreview } from "./LiveProjectGridPreview";
+export { default as LiveProjectCarouselPreview } from "./LiveProjectCarouselPreview";
 export { ThumbBadge, LivePlaceholder, useProjectThumbnails, ProjectGridCard } from "./shared";

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

@@ -4,18 +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,
-} from "../editors";
+import { getBlockRegistration } from "../../../lib/builder/registry";
 
 export default function BlockSettings({
   block,
@@ -26,62 +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}
-        />
-      );
-    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/animation/enter-types.ts

@@ -75,6 +75,7 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   buttonBlock:            ["fade", "slide-up", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
+  projectCarouselBlock:   [],           // uses card_entrance system
 };
 
 // ── Enter animation config ─────────────────────────────────────────

package/lib/animation/hover-effect-types.ts

@@ -68,6 +68,7 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   buttonBlock:            ["scale-up", "lift", "border-glow"],
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
+  projectCarouselBlock:   [],   // uses per-card hover_effect field directly
 };
 
 // ── Hover effect config ────────────────────────────────────────────

package/lib/builder/block-registrations.ts

@@ -0,0 +1,335 @@
+"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: [],
+});