@morphika/andami 0.3.1 → 0.4.1

package/components/builder/BlockLivePreview.tsx

@@ -14,24 +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,
-} 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 type { ContentBlock } from "../../lib/sanity/types";
+import { getBlockRegistration } from "../../lib/builder/registry";
 import { LivePlaceholder } from "./live-preview";
 
 // ============================================
@@ -52,30 +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;
-    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/ReadOnlyFrame.tsx

@@ -255,18 +255,8 @@ const ReadOnlyParallaxGroup = memo(function ReadOnlyParallaxGroup({
         overflow: "hidden",
       }}
     >
-      {/* Compact header */}
-      <div
-        style={{
-          background: "linear-gradient(135deg, #f3f0ff 0%, #ede5ff 100%)",
-          padding: "4px 8px",
-          borderBottom: "1px solid rgba(139, 92, 246, 0.1)",
-        }}
-      >
-        <span style={{ fontSize: 8, fontWeight: 600, color: "#8b5cf6" }}>
-          ▽ Parallax · {group.slides.length} slides
-        </span>
-      </div>
+      {/* Header banner removed — matches the active-viewport ParallaxGroupCanvas
+          cleanup. Read-only mirror stays unlabelled. */}
       {/* Slides */}
       {group.slides.map((slide, i) => (
         <div
@@ -389,17 +379,8 @@ const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
         overflow: "hidden",
       }}
     >
-      <div
-        style={{
-          background: "linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%)",
-          padding: "4px 8px",
-          borderBottom: "1px solid rgba(13, 148, 136, 0.1)",
-        }}
-      >
-        <span style={{ fontSize: 8, fontWeight: 600, color: "#0d9488" }}>
-          ◆ Cover · {section.height} · {section.cover_rows.length} row{section.cover_rows.length !== 1 ? "s" : ""}
-        </span>
-      </div>
+      {/* Header banner removed — matches the active-viewport CoverSectionCanvas
+          cleanup. Read-only mirror stays unlabelled. */}
       <div style={{ position: "relative", height: containerHeight, overflow: "hidden" }}>
         {/* Background preview — image */}
         {section.background_type === "image" && section.background_image && (

package/components/builder/SectionCardIcons.tsx

@@ -253,6 +253,59 @@ export function SavedSectionCardIcon() {
   );
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// Project Carousel — 3 horizontal cards with navigation arrows
+// ─────────────────────────────────────────────────────────────────────
+export function ProjectCarouselCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="pcarSec" />
+        <ShadowFilter id="shadPcarSec" />
+        <VertBevel id="cardBevelPcarSec" endColor={BEVEL_END} />
+      </defs>
+      <Bg prefix="pcarSec" />
+
+      {/* 3 cards with shadow — center one is taller (featured) */}
+      <g filter="url(#shadPcarSec)">
+        {/* Card 1 (left) */}
+        <path d="M25.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+        {/* Card 2 (center, featured) */}
+        <path d="M62,24.7h39.5c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+        {/* Card 3 (right) */}
+        <path d="M108.7,30.1h29c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z"
+              fill="url(#cardBevelPcarSec)" stroke={NEUTRAL_STROKE} strokeWidth="0.7" />
+      </g>
+
+      {/* Ghost content areas (image placeholders inside each card) */}
+      <g fill={GHOST}>
+        <path d="M28.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5H28.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C27.8,33.4,27.9,33.2,28.1,33.2z" />
+        <path d="M65.4,28.9h32.8c0.2,0,0.4,0.3,0.4,0.7V57c0,0.4-0.2,0.7-0.4,0.7H65.4c-0.2,0-0.4-0.3-0.4-0.7V29.5C65,29.1,65.1,28.9,65.4,28.9z" />
+        <path d="M111.1,33.2h24.1c0.2,0,0.3,0.2,0.3,0.5v20.2c0,0.3-0.1,0.5-0.3,0.5h-24.1c-0.2,0-0.3-0.2-0.3-0.5V33.7C110.8,33.4,111,33.2,111.1,33.2z" />
+      </g>
+
+      {/* Dashed violet outlines on all 3 cards */}
+      <g fill="none" stroke={ACCENT} strokeWidth="2" strokeDasharray="3,3">
+        <path d="M25.7,30.1H55c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3H25.7c-0.3,0-0.6-0.6-0.6-1.3V31.4C25.1,30.7,25.3,30.1,25.7,30.1z" />
+        <path d="M62,24.7h39.9c0.5,0,0.8,0.8,0.8,1.8v50c0,1-0.4,1.8-0.8,1.8H62c-0.5-0.1-0.8-0.9-0.8-1.8v-50C61.2,25.5,61.6,24.7,62,24.7z" />
+        <path d="M108.7,30.1H138c0.3,0,0.6,0.6,0.6,1.3v36.7c0,0.7-0.3,1.3-0.6,1.3h-29.3c-0.3,0-0.6-0.6-0.6-1.3V31.4C108.1,30.7,108.3,30.1,108.7,30.1z" />
+      </g>
+
+      {/* Navigation arrows at the bottom — hint at horizontal swipe */}
+      <g fill={ACCENT} stroke={ACCENT} strokeMiterlimit="10">
+        {/* Right arrow (pointing right) */}
+        <line x1="103" y1="88.8" x2="136" y2="88.8" />
+        <polygon points="139.9,88.8 134.4,91 135.7,88.8 134.4,86.5" />
+        {/* Left arrow (pointing left) */}
+        <line x1="63.6" y1="88.8" x2="30.6" y2="88.8" />
+        <polygon points="26.6,88.8 32.2,86.5 30.8,88.8 32.2,91" />
+      </g>
+    </svg>
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────
 // Lookup map for the Add Section modal
 // ─────────────────────────────────────────────────────────────────────
@@ -260,6 +313,7 @@ export const SECTION_CARD_ICONS: Record<string, React.FC> = {
   "empty-v2": EmptySectionV2CardIcon,
   coverSection: CoverSectionCardIcon,
   projectGridBlock: ProjectGridCardIcon,
+  projectCarouselBlock: ProjectCarouselCardIcon,
   parallaxGroup: ParallaxGroupCardIcon,
   createCustom: CreateCustomSectionCardIcon,
   savedCustom: SavedSectionCardIcon,

package/components/builder/SectionTypePicker.tsx

@@ -83,7 +83,7 @@ function SectionCard({
 
 interface SectionTypePickerProps {
   onSelectEmptyV2?: (preset: "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3") => void;
-  onSelectSection: (blockType: "projectGridBlock") => void;
+  onSelectSection: (blockType: "projectGridBlock" | "projectCarouselBlock") => void;
   onSelectParallaxGroup?: () => void;
   onSelectCoverSection?: () => void;
   onSelectCustomSection?: (section: CustomSectionListItem) => void;

package/components/builder/blockStyles.tsx

@@ -25,6 +25,7 @@ import {
   CoverSectionCardIcon,
   EmptySectionV2CardIcon,
   ParallaxGroupCardIcon,
+  ProjectCarouselCardIcon,
   ProjectGridCardIcon,
   SavedSectionCardIcon,
 } from "./SectionCardIcons";
@@ -142,6 +143,10 @@ export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
   return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
 }
 
+export function ProjectCarouselBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ProjectCarouselCardIcon /></span>;
+}
+
 export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
   return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
 }
@@ -158,6 +163,7 @@ export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>>
   spacerBlock: SpacerBlockIcon,
   buttonBlock: ButtonBlockIcon,
   projectGridBlock: ProjectGridBlockIcon,
+  projectCarouselBlock: ProjectCarouselBlockIcon,
   parallaxGroup: ParallaxGroupIcon,
   coverSection: CoverSectionSettingsIcon,
   customSectionInstance: CustomSectionInstanceIcon,

package/components/builder/editors/ProjectCarouselBlockEditor.tsx

@@ -0,0 +1,443 @@
+"use client";
+
+/**
+ * ProjectCarouselBlockEditor — Settings editor for the projectCarouselBlock.
+ *
+ * Sections:
+ *   - Source (mode, number of projects, exclude-current toggle)
+ *   - Layout (cards per view — desktop / tablet / phone — and gap)
+ *   - Card Display (aspect ratio, show title / subtitle, border radius,
+ *     hover effect)
+ *   - Video (video mode)
+ *   - Controls (show arrows / dots, snap scrolling)
+ *   - Card Entrance Animation (enabled, preset, stagger, duration)
+ *
+ * Intentionally independent from ProjectGridEditor — they follow the same
+ * visual style but share no code so changes to one never break the other.
+ */
+
+import React, { useCallback } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ProjectCarouselBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+} from "./shared";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+  VideoIcon,
+  NavigationIcon,
+  AnimationIcon,
+} from "./section-icons";
+
+// ============================================
+// Constants
+// ============================================
+
+const SOURCE_OPTIONS = [
+  { value: "auto_latest", label: "Latest" },
+  { value: "auto_random", label: "Random" },
+] as const;
+
+const ASPECT_RATIO_OPTIONS = [
+  { value: "16/9", label: "16:9" },
+  { value: "4/3", label: "4:3" },
+  { value: "1/1", label: "1:1" },
+  { value: "3/4", label: "3:4" },
+  { value: "9/16", label: "9:16" },
+] as const;
+
+const HOVER_EFFECT_OPTIONS = [
+  { value: "scale", label: "Scale" },
+  { value: "none", label: "None" },
+] as const;
+
+const VIDEO_MODE_OPTIONS = [
+  { value: "off", label: "Off" },
+  { value: "hover", label: "Hover" },
+  { value: "autoloop", label: "Auto" },
+] as const;
+
+const ANIMATION_PRESET_OPTIONS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+// ============================================
+// Shared mini-components (inline copies — not imported from ProjectGridEditor
+// to keep the two blocks decoupled, per user's explicit request).
+// ============================================
+
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const active = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
+              active
+                ? "bg-[#4794e2] text-white"
+                : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+            }`}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function RangeSlider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix = "",
+  decimals = 0,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+  decimals?: number;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-1 accent-[#4794e2] cursor-pointer"
+      />
+      <span className="text-[11px] text-neutral-500 w-10 text-right tabular-nums shrink-0">
+        {value.toFixed(decimals)}{suffix}
+      </span>
+    </div>
+  );
+}
+
+function Dropdown<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value as T)}
+      className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#4794e2] focus:shadow-[0_0_0_3px_rgba(71,148,226,0.06)]"
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ============================================
+// Main editor
+// ============================================
+
+interface ProjectCarouselBlockEditorProps {
+  block: ProjectCarouselBlock;
+}
+
+export default function ProjectCarouselBlockEditor({
+  block,
+}: ProjectCarouselBlockEditorProps) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+
+  const update = useCallback(
+    (updates: Partial<ProjectCarouselBlock>) => {
+      updateBlock(block._key, updates as Partial<ProjectCarouselBlock>);
+    },
+    [updateBlock, block._key],
+  );
+
+  const updateCardEntrance = useCallback(
+    (updates: Partial<NonNullable<ProjectCarouselBlock["card_entrance"]>>) => {
+      update({
+        card_entrance: {
+          enabled: false,
+          preset: "slide-up",
+          stagger_delay: 80,
+          duration: 500,
+          ...block.card_entrance,
+          ...updates,
+        },
+      });
+    },
+    [update, block.card_entrance],
+  );
+
+  // ─── Resolved values (with defaults) ───
+  const sourceMode = block.source_mode ?? "auto_latest";
+  const maxProjects = block.max_projects ?? 8;
+  const excludeCurrent = block.exclude_current !== false;
+
+  const cpvDesktop = block.cards_per_view_desktop ?? 3.5;
+  const cpvTablet = block.cards_per_view_tablet ?? 2.2;
+  const cpvPhone = block.cards_per_view_phone ?? 1.2;
+  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 hoverEffect = block.hover_effect ?? "scale";
+
+  const videoMode = block.video_mode ?? "off";
+
+  const showArrows = block.show_arrows !== false;
+  const showDots = block.show_dots === true;
+  const snapScroll = block.snap_scroll !== false;
+
+  const entranceEnabled = block.card_entrance?.enabled === true;
+  const entrancePreset = block.card_entrance?.preset ?? "slide-up";
+  const entranceStagger = block.card_entrance?.stagger_delay ?? 80;
+  const entranceDuration = block.card_entrance?.duration ?? 500;
+
+  return (
+    <>
+      {/* ─── Source ──────────────────────────────────────────── */}
+      <SettingsSection title="Source" defaultOpen icon={<SourceIcon />}>
+        <SettingsField label="Mode">
+          <SegmentedControl
+            options={SOURCE_OPTIONS}
+            value={sourceMode}
+            onChange={(v) => update({ source_mode: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Projects">
+          <RangeSlider
+            value={maxProjects}
+            onChange={(v) => update({ max_projects: Math.round(v) })}
+            min={2}
+            max={20}
+            step={1}
+          />
+        </SettingsField>
+
+        <SettingsField label="Exclude current">
+          <StyledCheckbox
+            checked={excludeCurrent}
+            onChange={(checked) => update({ exclude_current: checked })}
+            label="Hide the project currently being viewed"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Layout ──────────────────────────────────────────── */}
+      <SettingsSection title="Layout" defaultOpen icon={<LayoutIcon />}>
+        <SettingsField label="Desktop">
+          <RangeSlider
+            value={cpvDesktop}
+            onChange={(v) => update({ cards_per_view_desktop: v })}
+            min={1}
+            max={6}
+            step={0.5}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Tablet">
+          <RangeSlider
+            value={cpvTablet}
+            onChange={(v) => update({ cards_per_view_tablet: v })}
+            min={1}
+            max={4}
+            step={0.5}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Phone">
+          <RangeSlider
+            value={cpvPhone}
+            onChange={(v) => update({ cards_per_view_phone: v })}
+            min={1}
+            max={3}
+            step={0.1}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Gap">
+          <RangeSlider
+            value={gap}
+            onChange={(v) => update({ gap: Math.round(v) })}
+            min={0}
+            max={80}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Card Display ────────────────────────────────────── */}
+      <SettingsSection title="Card Display" defaultOpen={false} icon={<AppearanceIcon />}>
+        <SettingsField label="Aspect">
+          <Dropdown
+            options={ASPECT_RATIO_OPTIONS}
+            value={aspectRatio}
+            onChange={(v) => update({ aspect_ratio: v as ProjectCarouselBlock["aspect_ratio"] })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Title">
+          <StyledCheckbox
+            checked={showTitle}
+            onChange={(checked) => update({ show_title: checked })}
+            label="Show project title"
+          />
+        </SettingsField>
+
+        <SettingsField label="Subtitle">
+          <StyledCheckbox
+            checked={showSubtitle}
+            onChange={(checked) => update({ show_subtitle: checked })}
+            label="Show project subtitle"
+          />
+        </SettingsField>
+
+        <SettingsField label="Border radius">
+          <RangeSlider
+            value={borderRadius}
+            onChange={(v) => update({ border_radius: Math.round(v) })}
+            min={0}
+            max={40}
+            step={1}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Hover">
+          <SegmentedControl
+            options={HOVER_EFFECT_OPTIONS}
+            value={hoverEffect}
+            onChange={(v) => update({ hover_effect: v })}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Video ───────────────────────────────────────────── */}
+      <SettingsSection title="Video" defaultOpen={false} icon={<VideoIcon />}>
+        <SettingsField label="Mode">
+          <SegmentedControl
+            options={VIDEO_MODE_OPTIONS}
+            value={videoMode}
+            onChange={(v) => update({ video_mode: v })}
+          />
+        </SettingsField>
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5">
+          How project cover videos play in the carousel.
+        </p>
+      </SettingsSection>
+
+      {/* ─── Controls ────────────────────────────────────────── */}
+      <SettingsSection title="Controls" defaultOpen={false} icon={<NavigationIcon />}>
+        <SettingsField label="Arrows">
+          <StyledCheckbox
+            checked={showArrows}
+            onChange={(checked) => update({ show_arrows: checked })}
+            label="Show prev / next arrows on hover (desktop)"
+          />
+        </SettingsField>
+
+        <SettingsField label="Dots">
+          <StyledCheckbox
+            checked={showDots}
+            onChange={(checked) => update({ show_dots: checked })}
+            label="Show pagination dots below the carousel"
+          />
+        </SettingsField>
+
+        <SettingsField label="Snap">
+          <StyledCheckbox
+            checked={snapScroll}
+            onChange={(checked) => update({ snap_scroll: checked })}
+            label="Cards snap into place when scrolling"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Card Entrance Animation ─────────────────────────── */}
+      <SettingsSection title="Card Entrance" defaultOpen={false} icon={<AnimationIcon />}>
+        <SettingsField label="Enabled">
+          <StyledCheckbox
+            checked={entranceEnabled}
+            onChange={(checked) => updateCardEntrance({ enabled: checked })}
+            label="Animate cards as they appear"
+          />
+        </SettingsField>
+
+        {entranceEnabled && (
+          <>
+            <SettingsField label="Preset">
+              <SegmentedControl
+                options={ANIMATION_PRESET_OPTIONS}
+                value={entrancePreset}
+                onChange={(v) => updateCardEntrance({ preset: v })}
+              />
+            </SettingsField>
+
+            <SettingsField label="Stagger">
+              <RangeSlider
+                value={entranceStagger}
+                onChange={(v) => updateCardEntrance({ stagger_delay: Math.round(v) })}
+                min={0}
+                max={300}
+                step={10}
+                suffix="ms"
+              />
+            </SettingsField>
+
+            <SettingsField label="Duration">
+              <RangeSlider
+                value={entranceDuration}
+                onChange={(v) => updateCardEntrance({ duration: Math.round(v) })}
+                min={100}
+                max={1500}
+                step={50}
+                suffix="ms"
+              />
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/index.ts

@@ -5,5 +5,6 @@ export { default as VideoBlockEditor } from "./VideoBlockEditor";
 export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
 export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
 export { default as ProjectGridEditor } from "./ProjectGridEditor";
+export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
 export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
 export { getSpacerPx } from "./SpacerBlockEditor";