@morphika/andami 0.5.1 → 0.5.2

package/components/builder/editors/ProjectCarouselBlockEditor.tsx

@@ -1,443 +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>
-    </>
-  );
-}
+"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-[#3580f9] 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-[#3580f9] 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-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,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>
+    </>
+  );
+}